造轮子-组件实现思路

前端有哪些轮子

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 组件
      • 专门做轮播的 Swiper
      • 专门做输入提示的 typeahead
      • 专门做文件上传的 fine-uploader
      • 专门做 3D 瓦片效果的 vanilla-tilt.js
      • 专门做视差效果的 parallax.js
      • 专门做数据可视化的 D3.js
      • 专门做图表的 echarts.js
      • 专门做动画的 velocity.js
      • 专门做粒子效果的 particle.js
      • 专门做手势识别的 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扩充类组件可能过于抽象

原则

• （内部）分层原则：正交原则
• （对外）封装原则：面向接口编程

正交原则之x/y/z

永远不要用

$('#div').show() 
$('#div').hide()

因为你不知道 div以前display是什么

你应该做的是用状态控制

$('#div').addClass('active')
$('#div').removeClass('active')

内容、行为、样式分离原则

面向接口编程

你不该首先考虑代码怎么写

你该考虑用户如何调用