这是我参与「第五届青训营 」笔记创作活动的第2天。
JavaScript 编码原则之各司其责
HTML/CSS/JS各司其职
避免不要的JS直接操作样式
用class表示状态
纯展示类交互寻求零JS方案
JavaScript 编码原则之组件封装
组件是可以重复利用的一个前端模板，需要有好的封装性，正确性，扩展性，和复用性。
轮播图实现
结构可以用典型的无序列表实现，之后用CSS绝对定位将图片重叠在一个位置，切换状态使用修饰符，切换动画使用transition，之后使用js封装API，这样就实现一个组件。
但是我们需要更加灵活，像maven仓库一样，可以直接添加依赖，调用各种方法，所以需要解耦，制作一个HTML模板化的组件，不用手动去修改封装的代码。图片作为数据传入，具体的代码用js生成，
抽象
抽象的模型，可以保证具体功能的大方向，并在最终的功能细节方向，按照自己的需求，添加更加细节的东西，
JavaScript 编码原则之过程抽象
处理一些局部细节的方法，函数编程的思想，
高阶函数
为了能实现特定需求，我们可以抽象出来形成函数，用函数作为参数，函数作为返回值，
常用的高阶函数，Once，Throttle，Debounce，Consumer/2，literative
高阶函数的使用场景
ajax异步请求
// callback为待传入的回调函数 var getUserInfo = function(userId, callback) { $.ajax("http://xxx.com/getUserInfo?" + userId, function(data) { if (typeof callback === "function") { callback(data); } }); } getUserInfo(13157, function(data) { alert (data.userName); });
Array.prototype.sort接受一个函数当作参数，这个函数里面封装了数组元素的排序规则。从Array.prototype.sort的使用可以看到，我们的目的是对数组进行排序，这是不变的部分；而使用什么规则去排序，则是可变的部分。把可变的部分封装在函数参数里，动态传入Array.prototype.sort，使Array.prototype.sort方法成为了一个非常灵活的方法。
实现AOP
AOP（面向切面编程）的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后，再通过“动态织入”的方式掺入业务逻辑模块中。这样做的好处首先是可以保持业务逻辑模块的纯净和高内聚性，其次是可以很方便地复用日志统计等功能模块。
通常，在JavaScript中实现AOP，都是指把一个函数“动态织入”到另外一个函数之中，具体的实现技术有很多，下面的例子通过扩展Function.prototype来做到这一点。
