前端有哪些輪子（不包括 Node 后端領(lǐng)域）//輪子的特點(diǎn)就是給別人用

1. 標(biāo)準(zhǔn)庫的擴(kuò)充 //因?yàn)镴avaScript系統(tǒng)提供的庫,有些缺點(diǎn)
   1. underscore.js 擴(kuò)充了 Array 和 Object 相關(guān) API
   2. moment.js 擴(kuò)充了 Date
   3. bluebird.js / hax/my-promise 實(shí)現(xiàn)了 Promise
   4. async.js 模擬了 async 操作符
   5. es5shim 用 ES 3 語法部分實(shí)現(xiàn)了 ES 5 特性
   6. handlebars.js 實(shí)現(xiàn)模板字符串功能
2. DOM 的擴(kuò)充
   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. 垂直領(lǐng)域的 UI 組件
      1. 專門做輪播的 Swiper
      2. 專門做輸入提示的 typeahead.js
      3. 專門做文件上傳的 fine-uploader
      4. 專門做 3D 瓦片效果的 vanilla-tilt.js
      5. 專門做視差效果的 parallax.js
      6. 專門做數(shù)據(jù)可視化的 D3.js
      7. 專門做圖表的 echarts.js
      8. 專門做動(dòng)畫的 velocity.js
      9. 專門做粒子效果的 particle.js
      10. 專門做手勢(shì)識(shí)別的 hammer.js
4. 編程思想類的輪子
   1. 實(shí)現(xiàn) MVC 思想的 backbone.js
   2. 實(shí)現(xiàn) MVVM 思想的 AngularJS 1 和 Vue 1
   3. 實(shí)現(xiàn) Virtual DOM 的 React 和 Preact
   4. 實(shí)現(xiàn)單向數(shù)據(jù)流（FLUX）思想的 Redux
   5. 實(shí)現(xiàn) Reactive 思想的 Rx.js
   6. 實(shí)現(xiàn) Rails 思想的 Ember.js
   7. 實(shí)現(xiàn)函數(shù)式思想的 Ramda

我們的重點(diǎn)

重點(diǎn)是 UI 組件芭商，因?yàn)?/p>

1. 我們?nèi)粘９ぷ髦薪?jīng)常用到的就是 UI 組件
2. UI 組件一般是由 HTML、CSS 和 JS 組成搀缠，把 UI 組件做好了铛楣，就能更好的做網(wǎng)頁
3. UI 組件做起來更有趣，所有效果你都能用眼睛看到艺普，而做編程思想類簸州、DOM擴(kuò)充類組件可能過于抽象

原則

（內(nèi)部）分層原則：正交原則
（對(duì)外）封裝原則：面向接口編程

例子1，一個(gè) Tab 組件

新手思維：.show .hide
正交思維：JS 不要控制樣式歧譬，只切換狀態(tài)

http://js.jirengu.com/peluzeyuse/1/edit?html,css,js,output

例子2岸浑，一個(gè) sticky 組件

新手思維：用 JS 控制定位
正交思維：JS 不要控制樣式，只切換狀態(tài)

http://js.jirengu.com/wifulosojo/1/edit?html,js,output

例子3瑰步，一個(gè) Dialog 組件

注意面向接口編程

http://js.jirengu.com/lorinerade/1/edit?css,js,output

例子4矢洲，一個(gè) suggestion 組件

注意面向接口編程

http://js.jirengu.com/yoqaliyige/1/edit?css,js,output

例子5，一個(gè)輪播組件

注意正交原則和面向接口編程

http://js.jirengu.com/gujoqanaji/1/edit?css,js,output

無縫輪播：https://frankfang.github.io/slides-demo-2/
無縫的源碼中有一處 .offset() 是一個(gè)高級(jí)用法：

<figure style="box-sizing: border-box; display: inline-block; margin: 0px; max-width: 100%; color: rgb(36, 41, 46); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(251, 253, 255);">[圖片上傳失敗...(image-f53498-1516872389448)]

<figcaption style="box-sizing: border-box; display: block; text-align: center;">圖片</figcaption>

</figure>

數(shù)據(jù)或狀態(tài)存儲(chǔ)在哪里

1. 可以存在 DOM 上面（如何 data-id缩焦、class）读虏，缺點(diǎn)：可能被同事覆蓋或修改
2. 可以存在 JS 變量里

編程原則//即將貫穿你程序員的生涯

1.正交原則//前端css/html/JavaScript樣式,內(nèi)容,行為三者分離原則
比如說jQuery提供了.show可以展示css,這明顯是JavaScript操作了css,不要這樣做,同一功能,我們可以
2.面向接口編程
我們具體實(shí)現(xiàn)一個(gè)功能,首先想到的是,用戶如何調(diào)用代碼,而不是想著實(shí)現(xiàn)細(xì)節(jié)~~~