JavaScript(1)| 青训营笔记

38 阅读2分钟

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

写好JS的原则

各司其职:html、css、JS职能分离
组件封装:组件具备正确性、扩展性、复用性
过程抽象:应用函数式编程思想

各司其职

尽量避免在JS里直接修改样式,尽可能将样式内容写到css中,js只负责对用户行为做出响应。

组件封装

轮播图

这是我跟着月影老师的课程写的轮播图

重构

三次重构

  • 插件化:解耦:将控制元素抽取成插件,插件和组件之间通过依赖注入方式建立联系
  • 模板化:解耦:将html板化能够方便扩展和解除
  • 组件框架:抽象:将通用组件模型抽象出来

过程抽象

过程抽象用来处理局部细节控制的一下方法,是函数式编程思想的基础应用。

Once

为了能够让"只执行一次"的需求覆盖不同的事件处理,可以将这个需求剥离出来,这个过程称为过程抽象

高阶函数

HOF高阶函数:以函数作为参数,以函数作为返回值,常用于作为函数装饰器

  • Once:只能触发一次
  • Throttle:两次触发之间有时间限制
  • Debounce:当用户不动一定时间后触发
  • Consumer/2:每隔一段时间触发一次(延时处理)
  • Iterative

纯函数与非纯函数

纯函数:没副作用的,可预期的,好处是方便测试正确性 非纯函数:并非每次运行的结果都一样,结果依赖于其他变量

尽量使用纯函数,减少非纯函数的量,能够提升代码的可维护性,因此提倡使用高阶函数

编程规范

命令式代码:面向过程、面向对象 声明式代码:逻辑式、功能式

比起命令式编程思想,声明式的更具有天然的可扩展性。