2019-05-17 造輪子

標(biāo)準(zhǔn)庫(kù)的擴(kuò)充

  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 語(yǔ)法部分實(shí)現(xiàn)了 ES 5 特性
  6. handlebars.js 實(shí)現(xiàn)模板字符串功能

DOM 的擴(kuò)充
jQuery.js 操作 DOM
video.js 操作 video
Fabric.js 操作 canvas

UI 組件

  1. 純 CSS 的 UI 組件庫(kù)跨细,如 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

編程思想類的輪子
實(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組件


image.png

image.png

優(yōu)化


image.png

用es6語(yǔ)法改造


image.png

2吞彤、sticky組件(滾動(dòng)頁(yè)面我衬,頁(yè)面上的一個(gè)欄懸浮固定不動(dòng))


image.png

image.png

image.png

3、dialog組件


image.png

image.png

例子組件 bootboxjs.com


image.png

4饰恕、suggestion組件(自動(dòng)補(bǔ)全)


image.png

image.png

image.png

解決防抖


image.png

用其他庫(kù)來(lái)解決debounce
image.png

image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末挠羔,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子埋嵌,更是在濱河造成了極大的恐慌破加,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,036評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件雹嗦,死亡現(xiàn)場(chǎng)離奇詭異范舀,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)了罪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門锭环,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人泊藕,你說(shuō)我怎么就攤上這事辅辩。” “怎么了娃圆?”我有些...
    開封第一講書人閱讀 164,411評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵玫锋,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我踊餐,道長(zhǎng)景醇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,622評(píng)論 1 293
  • 正文 為了忘掉前任吝岭,我火速辦了婚禮三痰,結(jié)果婚禮上吧寺,老公的妹妹穿的比我還像新娘。我一直安慰自己散劫,他們只是感情好稚机,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,661評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著获搏,像睡著了一般赖条。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上常熙,一...
    開封第一講書人閱讀 51,521評(píng)論 1 304
  • 那天纬乍,我揣著相機(jī)與錄音,去河邊找鬼裸卫。 笑死仿贬,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的墓贿。 我是一名探鬼主播茧泪,決...
    沈念sama閱讀 40,288評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼聋袋!你這毒婦竟也來(lái)了队伟?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,200評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤幽勒,失蹤者是張志新(化名)和其女友劉穎嗜侮,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體代嗤,經(jīng)...
    沈念sama閱讀 45,644評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡棘钞,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,837評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了干毅。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宜猜。...
    茶點(diǎn)故事閱讀 39,953評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖硝逢,靈堂內(nèi)的尸體忽然破棺而出姨拥,到底是詐尸還是另有隱情,我是刑警寧澤渠鸽,帶...
    沈念sama閱讀 35,673評(píng)論 5 346
  • 正文 年R本政府宣布叫乌,位于F島的核電站,受9級(jí)特大地震影響徽缚,放射性物質(zhì)發(fā)生泄漏憨奸。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,281評(píng)論 3 329
  • 文/蒙蒙 一凿试、第九天 我趴在偏房一處隱蔽的房頂上張望排宰。 院中可真熱鬧似芝,春花似錦、人聲如沸板甘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)盐类。三九已至寞奸,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間在跳,已是汗流浹背枪萄。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留硬毕,地道東北人呻引。 一個(gè)月前我還...
    沈念sama閱讀 48,119評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像吐咳,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子元践,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,901評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5韭脊? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,486評(píng)論 1 45
  • 前端有哪些輪子(不包括 Node 后端領(lǐng)域) 標(biāo)準(zhǔn)庫(kù)的擴(kuò)充underscore.js 擴(kuò)充了 Array 和 Ob...
    YQY_苑閱讀 501評(píng)論 0 0
  • 前端有哪些輪子(不包括 Node 后端領(lǐng)域)//輪子的特點(diǎn)就是給別人用 標(biāo)準(zhǔn)庫(kù)的擴(kuò)充 //因?yàn)镴avaScript...
    joker731閱讀 2,856評(píng)論 0 11
  • 一:什么是閉包单旁?閉包的用處沪羔? (1)閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。在本質(zhì)上象浑,閉包就 是將函數(shù)內(nèi)部和函數(shù)外...
    xuguibin閱讀 9,606評(píng)論 1 52
  • 0. 寫在前面 當(dāng)你開始工作時(shí)蔫饰,你不是在給你自己寫代碼,而是為后來(lái)人寫代碼愉豺。 —— Nichloas C. Zak...
    康斌閱讀 5,322評(píng)論 1 42