写好JS的原则｜ 青训营笔记

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

一. 什么是JavaScript

JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

语言组成：

ECMAScript，描述了该语言的语法和基本对象。

文档对象模型（DOM），描述处理网页内容的方法和接口。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

二. 写好JS的原则

• 各司其职：让HTML、CSS和JavaScript职能分离

• JavaScript——Behavioral
  复制代码
  

• CSS——Presentational
  复制代码
  

• HTML——Structural
  复制代码
  

• 可以用class来表示状态
  复制代码
  

• 纯展示类交互寻求零JS方案
  复制代码
  

• 组件封装：好的UI组件具备正确性、扩展性、复用性

  实现组件的步骤：

• 结构设计
  复制代码
  

• 展现效果
  复制代码
  

• 行为设计：API(功能)，Event（控制流）
  复制代码
  

  三次重构：

• 插件化：将控制元素抽取成插件
          插件与组件之间通过依赖注入方式建立联系
  复制代码
  

• 模板化：将HTML模板化，更易于扩展
  复制代码
  

• 抽象化（组件框架） ：  将组件通用模型抽象出来 
  复制代码
  

• 过程抽象：用来处理局部细节控制的一些方法，应用函数式编程思想

• 为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为**过程抽象**
  复制代码
  

  高阶函数（HOF）：

• 以函数作为参数
  复制代码
  

• 以函数作为返回值
  复制代码
  

• 常用于作为函数装饰器
  复制代码
  

  常用高阶函数：

• Once：是一个简单执行一次的函数，无视后来产生的多次执行请求
  复制代码
  

• Throttle：一个函数持续地、频繁地触发，那么让它在一定时间间隔后再触发
  复制代码
  

• Debounce：一个函数持续地触发，那么只在它结束后过一段时间只执行一次
  复制代码
  

• Consumer：每隔一段时间才会去调用函数，但是会根据用户需求次数执行到底
  复制代码
  

• lterative：可迭代方法，它会返回新的函数，在新的函数中并进行判断，如果可迭代，则迭代的调用新函数里的方法，如果不可迭代，只执行一次
  复制代码
  

三. 总结与体会

这是我在青训营上的第三门课，前面对HTML和CSS都有了一些初步的了解。今天对如何写出一个更美观的JS进行了学习，在第一个原则中，提到了夜间模式是怎么写出来的，怎么写会更直观。在第二个原则中则讲了图片轮流展示，并提到了怎么进行优化。在第三个原则中，讲了一个限制操作次数的例子。