JavaScript 笔记| 青训营笔记

一、js简介.

JavaScript（JS）是一种轻量级，解释型或[即时]编译的编程语言，具有[一流的函数]。虽然它最着名的是网页的脚本语言，[但许多非浏览器环境]也使用它，例如[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模板化，更易于扩展