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

如何写好JavaScript

写好JavaScript的一些原则

各司其责（让HTML、CSS和JavaScript职能分离）
组件封装（好的UI组件具备正确性、扩展性、复用性）
过程抽象（应用函数式编程思想）
注：UI组件即即用户界面组件，其中包含了一个或几个具有各自功能的代码段，最终完成了用户界面的表示。

深夜食堂——总结

方法一：const btn = document.getElementById('modeBtn'); btn. addEventListener('click', (e) => { const body = document. body; if(e.target.innerHTML === ''） {body. style.backgroundColor = 'black'; body. style.color = 'white'; e. target.innerHTML = '';) else {body. style.backgroundColor = 'white'; body. style.color = 'black'; e.target. innerHTML = '');
方法二：const btn = document.getElementById ('modeBtn'); btn.addEventListener('click', (e) => {const body = document. body;if (body.className ! == 'night') body.className = 'night';) else {body.className=";}
方法三：只用css代码写。

HTML/CSS/JS各司其责
应当避免不必要的由JavaScript直接操作样式
可以用class来表示状态
纯展示类交互寻求零JavaScript方案

组件封装

例子：用原生JS写一个电商轮播图
（注：组件是指Web页面上抽出来一个个包含模板（html）、功能（js）和样式（css）的单元，好的组件具有封装性，正确性，扩展性，复用性）

基本方法：

结构设计
展示效果
行为设计（API，Event）

重构：插件化

组件化开发就是将一个app分成多个模块，每个模块都是一个组件，开发的过程中我们可以让这些组件相互依赖或者单独调试部分组件等，但是最终发布的时候是将这些组件合并统一成一个apk，这就是组件化开发。

插件化开发和组件化略有不同，插件化开发是将整个app拆分成多个模块，这些模块包括一个宿主和多个插件，每个模块都是一个apk，最终打包的时候宿主apk和插件apk分开打包。

重构：模板化

解耦

将HTML模板化更易于扩展

总结

组件设计的原则：封装性、正确性、扩展性、复用性
实现组件的步骤：结构设计、展现成果、行为设计
三次重构：插件化、模板化、抽象化（组件框架）

过程抽象

用来处理局部细节控制的一些方法
函数式编程思想的基础应用

高阶函数

Once

为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程为过程抽象。

HOF

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

JavaScript 摘抄 ｜ 青训营笔记