如何写好JavaScrapt 1|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天

写好JS的一些原则

1. 各司其责。让HTML/CSS/JS职能分离。
2. 组件封装。好的UI具备准确性、扩展性、复用性。
3. 过程抽象。应用函数式编程思想。

eg.

1. 写一段JS控制网页的深浅色模式（各司其责）

   1. 直接在JS里控制CSS

      存在的问题：代码长，结构表现未分离，修改时需要修改js代码

   2. 在JS里操作class，来切换样式（CSS里添加对应class样式）

      存在的改进空间：

   3. 使用纯CSS实现

      通过伪类选择实现（状态不同，样式不同）

结论：

• HTML JS CSS各司其责
• 避免不必要的JS直接操作样式
• 可用class表示状态
• 纯展示样式可寻求零JS方案

2. 用JS写一个电商网站轮播图（组件封装）

表现：CSS

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

行为：JS（API）
API是用于实现某种功能的接口，Web API是针对于浏览器提供的接口，实现浏览器交互效果。

• 定义各种行为API
• 组件是指WEB页面上抽出来一个个包含模版、功能和样式的单元。
• JS的构造函数不应该非常复杂。通过registerplugin插件注册API。优点：便于修改（增/删）。 eg. 插件化实现随机图片按钮，扩展性好，可修改性好
• 重构:模板化
• 组件框架

3. 高阶函数

函数中可以传入另一个函数作为参数的函数

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器

4. 获取元素

·getElementById() 获取带有 ID 的元素对象

·getElementsByTagName() 返回带有指定标签名的对象的集合

·getElementsByClassName() 根据类名返回元素对象集合

·querySelector() 根据指定选择器返回第一个元素对象

·doucumnet.body 返回body元素对象

·document.documentElement 返回html元素对象