2019-05-17 造轮子

标准库的扩充

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 实现模板字符串功能

DOM 的扩充
jQuery.js 操作 DOM
video.js 操作 video
Fabric.js 操作 canvas

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

编程思想类的轮子
实现 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组件

image.png

image.png

优化

image.png

用es6语法改造

image.png

2、sticky组件（滚动页面，页面上的一个栏悬浮固定不动）

image.png

image.png

image.png

3、dialog组件

image.png

image.png

例子组件 bootboxjs.com

image.png

4、suggestion组件（自动补全）

image.png

image.png

image.png

解决防抖

image.png

用其他库来解决debounce

image.png

image.png