造轮子

前端有哪些轮子（不包括 Node 后端领域）

1. 标准库的扩充
   1. underscore.js 扩充了 Array 和 Object 相关 API
   2. moment.js 扩充了 Date
   3. bluebird.js / hax/my-promise 实现了 Promise
   4. async.js 模拟了 async 操作符
   5. es5shim 用 ES 3 语法部分实现了 ES 5 特性
   6. handlebars.js 实现模板字符串功能
2. DOM 的扩充
   1. jQuery.js 操作 DOM
   2. video.js 操作 video
   3. Fabric.js 操作 canvas
3. UI 组件
   1. 纯 CSS 的 UI 组件库，如 Bulma
   2. 大而全的 UI 框架（CSS + JS），如 Bootstrap、Element UI
   3. 垂直领域的 UI 组件
      1. 专门做轮播的 Swiper
      2. 专门做输入提示的 typeahead.js
      3. 专门做文件上传的 fine-uploader
      4. 专门做 3D 瓦片效果的 vanilla-tilt.js
      5. 专门做视差效果的 parallax.js
      6. 专门做数据可视化的 D3.js
      7. 专门做图表的 echarts.js
      8. 专门做动画的 velocity.js
      9. 专门做粒子效果的 particle.js
      10. 专门做手势识别的 hammer.js
4. 编程思想类的轮子
   1. 实现 MVC 思想的 backbone.js
   2. 实现 MVVM 思想的 AngularJS 1 和 Vue 1
   3. 实现 Virtual DOM 的 React 和 Preact
   4. 实现单向数据流（FLUX）思想的 Redux
   5. 实现 Reactive 思想的 Rx.js
   6. 实现 Rails 思想的 Ember.js
   7. 实现函数式思想的 Ramda

我们的重点

重点是 UI 组件，因为

1. 我们日常工作中经常用到的就是 UI 组件
2. UI 组件一般是由 HTML、CSS 和 JS 组成，把 UI 组件做好了，就能更好的做网页
3. 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

数据或状态存储在哪里

1. 可以存在 DOM 上面（如何 data-id、class），缺点：可能被同事覆盖或修改
2. 可以存在 JS 变量里