这是我参与「前端青训营」笔记创作活动的第4天。
1、如何写好js代码：
各司其职： 让 HTML、CSS和JavaScript 职能分离
组件封装： 好的UI组件具备正确性、扩展性、复用性
过程抽象： 应用函数式编程思想
1.1 各司其职
结构分离表现：html只控制网页结构，css只控制网页样式， js只控制网页逻辑，让各功能各司其职，获得简洁代码，提高代码可维护性和可拓展性。
纯展示类功能模块寻求零JS方案：下方代码通过给HTML骨架加上一个checkbox的状态，后通过绑定到兄弟节点content上，通过简单的html和css达到控制页面的结果，代码中没有一行js，也实现了和js一样的点击事件的效果
<body>
<!-- 在这里添加了一个隐藏的input，给了一个checkbox -->
<input id="modeCheckBox" type="checkbox">
<div class="content">
<header>
<label id="modeBtn" for="modeCheckBox"></label>
<h1>深夜食堂</h1>
</header>
</div>
// ...
</body>
// 隐藏input #modeCheckBox { display: none; }
// 将input与兄弟节点.content绑定起来，通过checkbox的状态控制页面的css样式，适用于简单的不需要复杂业务的写法
#modeCheckBox:checked + .content {
background-color: black;
color: white;
transition: all 1s;
}
1.2 组件插件化
组件插件化即：讲控制元素抽取成插件
插件与组件之间通过依赖注入方式建立联系
将组件插件化的优势
- 能按照功能进行区分
- 一个插件的增加与删除不影响系统其他功能的使用
- 复用性高
- 扩展性强
1.3 高阶函数
高阶函数即：
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
常用的高阶函数：
1.4 纯函数
纯函数的定义：
- 此函数在相同的输入值时，需要产生相同的输出，
- 函数的输出和输入值以外的其他隐藏信息或状态无关，也与由I/O设备产生的外部输出无关（只与函数的输入值和内部的执行有关系，外部输出无关例如键盘输入函数中由键盘输入的不算。
- 该函数不能有语义上可观察的函数副作用，比如”触发事件”使输出设备输出，或更改输出值意外物件的内容等。（函数执行时不能再里面触发其他的事件。
纯函数的好处就是输出结果能够符合预期，可以提升库的可维护性，所以在实际开发中，鼓励使用高阶函数，减少非纯函数使用的可能性。
1.5 编程范式
命令式
强调过程，写法简单，但拓展性和复用性较低。
声明式
较强的可拓展性和可维护性，React的代码便是遵循声明式编程范式，React在内部帮我们处理好处理DOM的代码逻辑，使用时我们只需使用React.DOM操作DOM，而不需像过去那样，使用Document.getElementBtId，来获取我们需要操作的DOM等等。
