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

JavaScript

写好JS的一些原则

1.各司其责

让HTML、CSS和JavaScript职能分离

避免不必要的JS直接操作样式；可以用class来表示状态；纯展示类交互寻求零JS方案

2.组件封装：

1. 原则：好的UI组件具备正确性、扩展性、复用性、扩展性

2. 步骤：（经典轮播图）

• 结构设计（HTML）:使用无序列表ul实现；

• 展现效果（CSS）:使用绝对定位将图片重叠在同一个位置；轮播图切换状态使用修饰符（modifier）；切换动画使用CSS transition

• 行为设计（JS）：（1）API（功能），getSelectedItem()获取当前选中的元素；getSelectedItedIndex()获取当前选中元素的下标；slideTo()到指定的位置;slideNext()轮播下一张图片;slidePrevious()轮播上一张图片 （2）Event（控制流），自定义事件解耦

3. 三次重构

• 【1】插件化

解耦：将控制元素抽取或插件；插件与组件之间通过依赖注入方式建立联系

• 【2】模板化

将HTML模板化，更易于扩展

• 【3】抽象化（组件框架）

抽象：将组件通用模型抽象出来

3.过程抽象

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

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

• 高阶函数：以函数为参数、以函数为返回值，通常称作为高阶函数装饰器

• 常用高阶函数：Once（只执行一次）、Thtottle（截流函数）、Debounce（防抖）、Consumer/2（接口）、Iterative（遍历）

4.编程范式

命令式与声明式

• 命令式主要强调怎么做，把具体做法写出来

• 声明式倾向于做什么，更加简洁