JS编程书籍
js the definitive guide the good part
理解javascript
如何理解各司其责的特性？
第一版深夜食堂的实现js部分，通过简单的按钮控制和按钮事件addEventListener并且直接在脚本内修改。
上面是第二版的代码，通过css的class选择属性，然后完成变换。
上面是第三版本的代码的CSS部分，在HTML中定义相关内容，然后在css里通过modeCheckBox方法和.content方法更改
简而言之，各司其职的内涵即应当让每一种语言充分发挥独有的功能特性，避免语言之间越界的现象，比如使用Js操作样式，也可以用 class来表示状态。在涉及样式变换时，尽量让CSS完成，如上面的例子。
从一个轮播图说起
轮播图可以由html内的有序和无序列表实现，通过一系列API涉及了行为，通过控制流（如下）实现了事件控制。这是基于逻辑控制结构下基础的设计思想。
如果要更深层次地理解，那么需要了解耦的概念，将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系。把功能相互独立的组件分开。
也可以通过抽象的方式把具有某种特定功能的组件形成了一个特定的组件。
组件设计的步骤包括了结构设计，展现效果，行为设计。可以通过三次重构，如（插件化、模板化、抽象化）等方式优化已有的代码。
更复杂的技术
为了防止用户操作次数的过多，有时需要限制操作的次数，如一些异步交互请求和HTTP请求等。
实现的函数有Once。此外还有Throttle(截流函数，限制流量),Debounce(防止鼠标抖动),Consumer/2（用户大量输入后的批量处理）,lterative(迭代性).等函数，
const isIterable = obj => obj != null
&& typeof obj[Symbol.iterator] === 'function';
function iterative(fn) {
return function(subject, ...rest) {
if(isIterable(subject)) {
const ret = [];
for(let obj of subject) {
ret.push(fn.apply(this, [obj, ...rest]));
}
return ret;
}
return fn.apply(this, [subject, ...rest]);
}
}
const setColor = iterative((el, color) => {
el.style.color = color;
});
const els = document.querySelectorAll('li:nth-child(2n+1)');
setColor(els, 'red');
lterative函数示意如上，高阶函数以函数作为参数(fn)，以函数作为返回值，如return function(subject)。const setColor()调用函数。
声明式与命令式
这是两种不同的编程语言范式，两者在语言表现和性能等方面都有不同。
toggle声明式使用对象进行转换，可拓展性强。
toggle命令式使用简单的逻辑控制，条件判断结构实现的。
