一.写好JS的一些原则
01.各司其职
例子:深夜食堂
写一段JS,控制一个网页,让它支持浅色和深色两种浏览器模式。
解决方案:
1)用js+css
2) 用js+类class
3). 纯css
1)HTML/CSS/JS各司其职
2)应当避免不必要的由JS直接操作样式
3)可以用class来表示状态
4)纯展示类交互寻求零JS方案
02.组件封装
组件是指Web页面上抽象出来一个个包含模版(HTML)、功能(JS)和样式(CSS)的单元。
好的组件具备封装性、正确性、扩展性、复用性
例子:用原生JS写一个电商网站的轮播图,应该怎么实现?
结构:html
轮播图是一个典型的列表结构,我们可以使用无序列表
- 元素来实现。
表现: css
1)使用css绝对定位将图片重叠在同一个位置;
2)轮播图切换的状态使用修饰符(modifier)
3)轮播图的切换动画使用CSS transition
行为:JS
1)API设计应该保证原子操作,职责单一,满足灵活性。
2)
Slider
1) +getSelectedItem()
2) +getSelectedItemIndex()
3) +slideTo()
4) slidePrevious()
行为:控制流
使用自定义事件来解耦。
总结:基本方法
1)结构设计
2)展示效果
3)行为设计
(1)API(功能)
(2)Event (控制流)
三次重构:
重构:插件化
解耦
1)将控制元素抽取成插件
2)插件与组件之间通过依赖注入方式建立联系
重构:模版化
将html模版化,更易于扩展。
抽象:将通用的组件模型抽象出来
抽象:抽象化(组件框架)
1)可以加入css模版;
2)组件框架扩展:组件和插件结构统一化,做一个多层级的组件,解决父组件与子组件之间的状态同步,消息通信;
以上都是数据抽象。
03.过程抽象
1)用来处理局部细节控制的一些方法;
2)函数式编程思想的基础应用;
input x
function f
output f(x)
例子:操作次数限制
1)一些异步交互
2)一次性的HTTP请求
Once
为了能够让“只执行一次”的需求覆盖不同的事件处理,我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
高阶函数
1)以函数作为参数
2)以函数作为返回值
3)常用于作为函数装饰器
常用的高阶函数
1)Once
2) Throttle
3) Debounce
4) Consumer / 2
5) Iterative
纯函数:输入值和输出值是确定的。满足时间无关。
add(x,y)
非纯函数:展示效果和函数调用顺序和调用时间有关,顺序和时间不同,得到的结果不同。
使用高阶函数替代非纯函数,尽量减少非纯函数。测试容易、简单些。
二。编程范式
1.命令式与声明式
例子:
1)Toggle-命令式
2) Toggle-声明式
3) Toggle-三态
总结
1)过程抽象/HOF/装饰器
2)命令式/声明式
高阶函数参数和返回值是函数,它就是函数装饰器。
三.JS代码的质量
1.写代码关注点
1)风格
2)效率
3)约定
4)使用场景
5)设计
2.当年的Left-pad事件
事件本身的槽点
1)NPM模块粒度
2)代码风格
3)代码质量/效率
(1)代码更简洁
(2)效率提升