• JavaScript 笔记| 青训营笔记


    一、js简介.

    JavaScriptJS)是一种轻量级,解释型或[即时]编译的编程语言,具有[一流的函数]。虽然它最着名的是网页的脚本语言,[但许多非浏览器环境]也使用它,例如[Node.js],[Apache CouchDB]和[Adobe Acrobat]。JavaScript是一种[基于原型]的多范式,单线程,动态语言,支持面向对象,命令式和声明式(例如函数式编程)样式。

    二、 写好JS的一些原则

    • 各司其职:

      • 让HTML CSS JavaScript职能分离
    • 组件封装:

      • 好的UI组件具备正确性 扩展性 复用性
    • 过程抽象:

      • 应用函数式编程思想

    三、 常见错误

    一般来说,当您在代码中做错某些事情时,您会遇到两种主要类型的错误:

    • 语法错误:这些是代码中的拼写错误,实际上会导致程序根本无法运行,或者中途停止工作 - 通常也会提供一些错误消息。这些通常都可以修复,只要您熟悉正确的工具并知道错误消息的含义!
    • 逻辑错误:这些错误是语法实际上正确的,但代码不是您想要的,这意味着程序成功运行但给出不正确的结果。这些通常比语法错误更难修复,因为通常没有错误消息将您定向到错误的根源。

    三、 组件封装

    • 组件是指web页面上抽出来一个个包含模板(HTML)、功能(JS)和样式(CSS)的单元。好的组件具备封装性、正确性、扩展性、复用性。

    • 例子:

      • 用原生JS写一个电商网站的轮播图,应该怎么做?
      • 结构:HTML:
      • 轮播图是一个典型的列表结构,我们可以使用无序列表ul元素来实现
    • 表现:CSS:

      • 使用CSS绝对定位将图片重叠在同一个位置,轮播图切换的状态使用修饰符(modifier),轮播图的切换动画使用CSS traansition
    • 行为:JS:

      • Slider

        • +getSelectedltem()
        • +getSelectedltemlndex()
        • +slideTo()
        • +slideNext()
        • +slidePrevious()
    • 总结:基本方法

      • 结构设计
      • 展示效果
      • 行为设计
    • 重构:插件化

      • 解耦

        • 将控制元素抽取成插件
        • 插件与组件之间通过依赖注入方式建立联系
    • 重构:模板化

      • 将HTML模板化,更易于扩展

  • 相关阅读:
    Excel函数中单元格的引用方式
    nuxt使用echarts
    数组去重方法总结(记录)
    C++入门篇1
    DNS用的是TCP协议还是UDP协议
    Mac电脑其他文件占用超过一大半的内存如何清理?
    ChatGPT+Mermaid自然语言流程图形化产出小试
    Chapter 6 CNN(Convolutional Neural Network)
    不容错过!!C语言-回调函数详解
    NSS [HNCTF 2022 Week1]Challenge__rce
  • 原文地址:https://blog.csdn.net/kilig_CSM/article/details/126137608