前端有哪些輪子（不包括 Node 后端領(lǐng)域）
- 標準庫的擴充
- underscore.js 擴充了 Array 和 Object 相關(guān) API
- moment.js 擴充了 Date
- bluebird.js / hax/my-promise 實現(xiàn)了 Promise
- async.js 模擬了 async 操作符
- es5shim 用 ES 3 語法部分實現(xiàn)了 ES 5 特性
- handlebars.js 實現(xiàn)模板字符串功能
- DOM 的擴充
- jQuery.js 操作 DOM
- video.js 操作 video
- Fabric.js 操作 canvas
- UI 組件
- 純 CSS 的 UI 組件庫艺糜，如 Bulma
- 大而全的 UI 框架（CSS + JS）髓涯，如 Bootstrap、Element UI
- 垂直領(lǐng)域的 UI 組件
- 專門做輪播的 Swiper
- 專門做輸入提示的 typeahead.js
- 專門做文件上傳的 fine-uploader
- 專門做 3D 瓦片效果的 vanilla-tilt.js
- 專門做視差效果的 parallax.js
- 專門做數(shù)據(jù)可視化的 D3.js
- 專門做圖表的 echarts.js
- 專門做動畫的 velocity.js
- 專門做粒子效果的 particle.js
- 專門做手勢識別的 hammer.js
- 編程思想類的輪子
- 實現(xiàn) MVC 思想的 backbone.js
- 實現(xiàn) MVVM 思想的 AngularJS 1 和 Vue 1
- 實現(xiàn) Virtual DOM 的 React 和 Preact
- 實現(xiàn)單向數(shù)據(jù)流（FLUX）思想的 Redux
- 實現(xiàn) Reactive 思想的 Rx.js
- 實現(xiàn) Rails 思想的 Ember.js
- 實現(xiàn)函數(shù)式思想的 Ramda
我們的重點
重點是 UI 組件，因為
- 我們?nèi)粘９ぷ髦薪?jīng)常用到的就是 UI 組件
- UI 組件一般是由 HTML籽孙、CSS 和 JS 組成，把 UI 組件做好了肆糕，就能更好的做網(wǎng)頁
- UI 組件做起來更有趣态鳖，所有效果你都能用眼睛看到，而做編程思想類耿芹、DOM擴充類組件可能過于抽象
原則
（內(nèi)部）分層原則：正交原則
（對外）封裝原則：面向接口編程
例子1崭篡，一個 Tab 組件
新手思維：.show .hide
正交思維：JS 不要控制樣式，只切換狀態(tài)
http://js.jirengu.com/peluzeyuse/1/edit?html,css,js,output
例子2吧秕，一個 sticky 組件
新手思維：用 JS 控制定位
正交思維：JS 不要控制樣式琉闪，只切換狀態(tài)
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
數(shù)據(jù)或狀態(tài)存儲在哪里
- 可以存在 DOM 上面（如何 data-id、class）砂碉，缺點：可能被同事覆蓋或修改
- 可以存在 JS 變量里
