这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
写好javascript的原则
1. 各司其职
案例一: 写一段js,可以控制网页切换白天模式和黑暗模式
第一种方式
第二种方式
第三种方式
第一种方式没有做的html/css/js各司其职,不利于维护
第二种方式借助class表示状态,避免了js直接操作样式
第三种方式的优势在于,像这种纯展示交互,可以尝试零js的方式处理
2. 组件封装
案例二: 用原生js实现网页轮播图
*组件:*指web页面抽离出来的包含html(模版),css(样式),js(功能)的单元。好的组件具有封装性,正确性,拓展性和复用性。
- [html]
- [css]
- [js]
- [控制流]
3. 过程抽象
可以通过解耦并将通用的组件模型抽象出来重构案例二的代码
过程抽象: 为了能将只执行一次的需求复用,处理多种事件,可以将这个需求剥离出来进行复用。
高阶函数: 以函数作为参数,以函数作为返回值。经常用于做函数的装饰器。
- Once
- Throttle 节流函数
- Debounce 防抖函数
- Consumer
- Iterative
纯函数: 如果一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用则称该函数为纯函数;使用纯函数不会对外界产生影响,在多人开发时能够方便进行单元测试,减少系统中非纯函数的数量,从而使得系统可靠性增加。