如何写好JS|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第3天。本节课的主题是【如何写好JavaScript】，授课老师为月影。

因本课程分为上下两集，故笔记也分两部分，此为上部分。下部分详见下一篇文章。

本篇笔记分别对课程中所讲的几个要点进行一些复述加上我个人的解读，如若有误，欢迎大家在评论区指出。

如何写好JavaScript

写好JS的一些原则

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

eg.

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

   1. 直接在JS里控制CSS

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

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

      1. 存在的改进空间：

   3. 使用纯CSS实现

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

结论：

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

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

1. 表现：CSS

2. 行为：JS（API）

    1.  定义各种行为

    2.  组件是指WEB页面上抽出来一个个包含模版、功能和样式的单元。

    3.  JS的构造函数不应该非常复杂。通过registerplugin插件注册API。优点：便于修改（增/删）。

        eg. 插件化实现随机图片按钮，扩展性好，可修改性好

    4. 模板化

        （PS.不明觉厉，感觉是很娴熟的操作…）

    5.  组件框架