標(biāo)準(zhǔn)庫(kù)的擴(kuò)充
- underscore.js 擴(kuò)充了 Array 和 Object 相關(guān) API
- moment.js 擴(kuò)充了 Date
- bluebird.js / hax/my-promise 實(shí)現(xiàn)了 Promise
- async.js 模擬了 async 操作符
- es5shim 用 ES 3 語(yǔ)法部分實(shí)現(xiàn)了 ES 5 特性
- handlebars.js 實(shí)現(xiàn)模板字符串功能
DOM 的擴(kuò)充
jQuery.js 操作 DOM
video.js 操作 video
Fabric.js 操作 canvas
UI 組件
- 純 CSS 的 UI 組件庫(kù)跨细,如 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
- 專門做動(dòng)畫的 velocity.js
- 專門做粒子效果的 particle.js
- 專門做手勢(shì)識(shí)別的 hammer.js
編程思想類的輪子
實(shí)現(xiàn) MVC 思想的 backbone.js
實(shí)現(xiàn) MVVM 思想的 AngularJS 1 和 Vue 1
實(shí)現(xiàn) Virtual DOM 的 React 和 Preact
實(shí)現(xiàn)單向數(shù)據(jù)流(FLUX)思想的 Redux
實(shí)現(xiàn) Reactive 思想的 Rx.js
實(shí)現(xiàn) Rails 思想的 Ember.js
實(shí)現(xiàn)函數(shù)式思想的 Ramda
重點(diǎn)是 UI 組件美侦,因?yàn)?br>
我們?nèi)粘9ぷ髦薪?jīng)常用到的就是 UI 組件
UI 組件一般是由 HTML拾并、CSS 和 JS 組成豺旬,把 UI 組件做好了怕敬,就能更好的做網(wǎng)頁(yè)
UI 組件做起來(lái)更有趣,所有效果你都能用眼睛看到秕狰,而做編程思想類、DOM擴(kuò)充類組件可能過(guò)于抽象
原則
(內(nèi)部)分層原則:正交原則 (內(nèi)容躁染、樣式鸣哀、行為分離原則)
(對(duì)外)封裝原則:面向接口編程
1、tab組件
優(yōu)化
用es6語(yǔ)法改造
2吞彤、sticky組件(滾動(dòng)頁(yè)面我衬,頁(yè)面上的一個(gè)欄懸浮固定不動(dòng))
3、dialog組件
例子組件 bootboxjs.com
4饰恕、suggestion組件(自動(dòng)補(bǔ)全)
解決防抖
用其他庫(kù)來(lái)解決debounce