前端有哪些轮子（不包括 Node 后端领域）
- 标准库的扩充
- underscore.js 扩充了 Array 和 Object 相关 API
- moment.js 扩充了 Date
- bluebird.js / hax/my-promise 实现了 Promise
- async.js 模拟了 async 操作符
- es5shim 用 ES 3 语法部分实现了 ES 5 特性
- handlebars.js 实现模板字符串功能
- DOM 的扩充
- jQuery.js 操作 DOM
- video.js 操作 video
- Fabric.js 操作 canvas
- UI 组件
- 纯 CSS 的 UI 组件库，如 Bulma
- 大而全的 UI 框架（CSS + JS），如 Bootstrap、Element UI
- 垂直领域的 UI 组件
- 专门做轮播的 Swiper
- 专门做输入提示的 typeahead.js
- 专门做文件上传的 fine-uploader
- 专门做 3D 瓦片效果的 vanilla-tilt.js
- 专门做视差效果的 parallax.js
- 专门做数据可视化的 D3.js
- 专门做图表的 echarts.js
- 专门做动画的 velocity.js
- 专门做粒子效果的 particle.js
- 专门做手势识别的 hammer.js
- 编程思想类的轮子
- 实现 MVC 思想的 backbone.js
- 实现 MVVM 思想的 AngularJS 1 和 Vue 1
- 实现 Virtual DOM 的 React 和 Preact
- 实现单向数据流（FLUX）思想的 Redux
- 实现 Reactive 思想的 Rx.js
- 实现 Rails 思想的 Ember.js
- 实现函数式思想的 Ramda
我们的重点
重点是 UI 组件，因为
- 我们日常工作中经常用到的就是 UI 组件
- UI 组件一般是由 HTML、CSS 和 JS 组成，把 UI 组件做好了，就能更好的做网页
- UI 组件做起来更有趣，所有效果你都能用眼睛看到，而做编程思想类、DOM扩充类组件可能过于抽象
原则
（内部）分层原则：正交原则
（对外）封装原则：面向接口编程
例子1，一个 Tab 组件
新手思维：.show .hide
正交思维：JS 不要控制样式，只切换状态
http://js.jirengu.com/peluzeyuse/1/edit?html,css,js,output
例子2，一个 sticky 组件
新手思维：用 JS 控制定位
正交思维：JS 不要控制样式，只切换状态
http://js.jirengu.com/wifulosojo/1/edit?html,js,output
例子3，一个 Dialog 组件
注意面向接口编程
http://js.jirengu.com/lorinerade/1/edit?css,js,output
例子4，一个 suggestion 组件
注意面向接口编程
http://js.jirengu.com/yoqaliyige/1/edit?css,js,output
例子5，一个轮播组件
注意正交原则和面向接口编程
http://js.jirengu.com/gujoqanaji/1/edit?css,js,output
无缝轮播：https://frankfang.github.io/slides-demo-2/
无缝的源码中有一处 .offset() 是一个高级用法：
image.png
数据或状态存储在哪里
- 可以存在 DOM 上面（如何 data-id、class），缺点：可能被同事覆盖或修改
- 可以存在 JS 变量里
