造轮子-组件实现思路

JS不知深浅

前端有哪些轮子

  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

永远不要用 

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

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

你应该做的是用状态控制

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

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

面向接口编程

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

你该考虑用户如何调用