3.JavaScript介绍

一.写好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）效率提升