JS，是一种嵌入到HTML页面中的编程语言，由浏览器一边解释一边执行。单纯只有HTML和CSS的页面一般只供用户浏览，而JavaScript的出现，使得用户可以与页面进行交互（如定义各种鼠标效果），让网页实现更多绚丽的效果。

一、JavaScript好代码的标准

写好JS的一些基本原则：

1、让HTML、CSS、JavaScript职能分离。

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

3、过程抽象：处理一些UI交互的时候，使UI组件具备更好的扩展性、复用性。会应用到函数式编程思想。

二、HTML/CSS/JS 各司其责

HTML负责结构，CSS负责表现，JS负责行为。尽可能保证结构、表现、行为分离，使其各司其责。

在纯样式改变的情况下最好只用CSS控制样式，应当避免不必要的由JS直接操作样式，可以用class来表示状态，纯展示类交互寻求零JS方案。

三、组件封装

1）组件的定义解析及特征

组件是指Web页面上拖出来一个个包含模板、功能和样式的单元。

好的组件具备正确性、扩展性、复用性。

2）组件封装基本方法

实现组件的步骤（以轮播图的设计来举例）：

①HTML实现结构设计：先将轮播图以无序列表的形式拆分成几张独立排序的图片。

②CSS展现效果：使用 CSS 绝对定位将图片重叠在同一个位置。

轮播图切换的状态使用修饰符(modifier)；轮播图的切换动画使用 CSS transition

③用JS进行行为设计：

Ⅰ、API：API设计应该保证原子操作，职责单一，瞒住灵活性。

·Slider

getSelectedItem() 得到当前轮播图正在显示的li

getSelectedItemIndex() 获取当前轮播图的显示li的下标

sliderTo(idx) 轮播到指定的idx下标的图片

sliderNext() 下一张

sliderPrevious() 上一张

Ⅱ、控制流：通过自定义事件来解耦，实现状态的绑定。

3）组件的优化——重构：

①插件化（解决之前组件不够灵活的问题）：将控制元素抽取或插件；插件与组件之间通过依赖注入方式建立联系。

②模板化：将HTML模板化，更易于扩展。

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

四、过程抽象

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

——用来处理局部细节控制的一些方法

——函数式编程思想的基础应用

1）高阶函数

高阶函数（HOF）是对其他函数进行操作的函数，操作可以是将它们作为参数，或者是返回它们。 简单来说，高阶函数是一个接收函数作为参数或将函数作为输出返回的函数，常用于作为函数装饰器。

使用函数式编程思想中的高阶函数能够设计出简单可靠的API，这些高阶的API根据确定参数返回确定的函数，它们依然是纯函数，使得它们对简化系统，提升可扩展性和可维护性都有着非常大的帮助，同时高阶函数可以任意组合，形成强大的功能。

常见的高阶函数：

①Once（单次执行），遇到事件处理函数只能执行一次的情况下使用。

②Throttle（节流函数），用于防止频繁的执行操作，限制执行的频率。常用于按钮点击事件、拖拽事件、onScoll、计算鼠标移动的距离。在某段时间内，不管你触发了多少次回调，都只认第一次，并在计时结束时给予响应。

③debounce（防抖函数），实现的是防止多余的执行操作，只保留最后一次的执行。如果事件在极短的时间内连续触发多次，防抖函数可以防止重复无用的执行，只保留最后一次的操作。

④Consumer，通过一定的时间间隔将同步的操作分布调用出来。起到一个延时显示的效果。

⑤Lterative（可迭代函数）  

2）编程范式

命令式与声明式：简单来说，声明式代码主要关注“我想要什么”，而不关注具体该怎么实现。命令式代码主要关注“应该如何做”，计算机会严格遵循你的指令，而不理会最后的结果是不是你所想要的。