[ 跟着月影学javascript | 青训营笔记]

52 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

写好javascript的原则

1. 各司其职

案例一: 写一段js,可以控制网页切换白天模式和黑暗模式

第一种方式

image.png

第二种方式

image.png

第三种方式

image.png

image.png 第一种方式没有做的html/css/js各司其职,不利于维护

第二种方式借助class表示状态,避免了js直接操作样式

第三种方式的优势在于,像这种纯展示交互,可以尝试零js的方式处理

2. 组件封装

案例二: 用原生js实现网页轮播图

*组件:*指web页面抽离出来的包含html(模版),css(样式),js(功能)的单元。好的组件具有封装性,正确性,拓展性和复用性。

- [html] image.png - [css]

image.png - [js]

image.png - [控制流]

image.png

image.png

3. 过程抽象

可以通过解耦并将通用的组件模型抽象出来重构案例二的代码

image.png

image.png 过程抽象: 为了能将只执行一次的需求复用,处理多种事件,可以将这个需求剥离出来进行复用。

高阶函数: 以函数作为参数,以函数作为返回值。经常用于做函数的装饰器。

  • Once
  • Throttle 节流函数
  • Debounce 防抖函数
  • Consumer
  • Iterative

纯函数: 如果一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用则称该函数为纯函数;使用纯函数不会对外界产生影响,在多人开发时能够方便进行单元测试,减少系统中非纯函数的数量,从而使得系统可靠性增加。