資訊專欄INFORMATION COLUMN
摘要：為的內(nèi)置一個(gè)方法，用法和原生的事件機(jī)制一毛一樣。
前言
上兩篇Mvvm教程的熱度超出我的預(yù)期，很多碼友留言表?yè)P(yáng)同時(shí)希望我繼續(xù)出下一篇教程，當(dāng)時(shí)我也半開玩笑說(shuō)只要點(diǎn)贊超10就兌現(xiàn)承諾，沒(méi)想到還真破了10，所以就有了今天的文章。
準(zhǔn)備工作熟讀
【教學(xué)向】150行代碼教你實(shí)現(xiàn)一個(gè)低配版的MVVM庫(kù)（1）- 原理篇
【教學(xué)向】150行代碼教你實(shí)現(xiàn)一個(gè)低配版的MVVM庫(kù)（2）- 代碼篇
本篇是在上兩篇的基礎(chǔ)之上對(duì)代碼進(jìn)行進(jìn)一步擴(kuò)展，從而實(shí)現(xiàn)web component功能，所以讀者務(wù)必掌握mvvm的實(shí)現(xiàn)機(jī)制才能深入理解本篇的內(nèi)容（mvvm是web component的基石）。
什么才是好的 web component 設(shè)計(jì)目前市面上各大主流前端框架，凡事帶web component功能的，他們的設(shè)計(jì)水準(zhǔn)基本都不入我的法眼，唯一看得上眼的是google的polymer，但是在某些API設(shè)計(jì)層面也顯得略微繁瑣（想了解polymer的朋友看一翻一下我專欄里面10篇polymer入門系列教程）
什么是componenthtml提供的原生標(biāo)簽，比如DIV, BUTTON, INPUT家族，Hx家族等等，這些就好比俄羅斯方塊里的一塊塊標(biāo)準(zhǔn)積木,我們稱它們?yōu)閟tand component
某一天這些積木不能滿足你的需求了，被擴(kuò)展或被組合形成了非基本形狀
這些新形狀就是custom component，自定義組件！為什么要有component呢，好處是什么呢？
1. 可以復(fù)用 2. 結(jié)構(gòu)清晰 3. 獨(dú)立開發(fā)
你稍微開動(dòng)下腦筋就能分析出來(lái)了，我就不展開了。
我心目中的web component在座的各位都寫過(guò)index.html么？很簡(jiǎn)單
主要就分成3大塊內(nèi)容，style, dom, script
然后外面用個(gè)包裹
所以這期低配版web component庫(kù)設(shè)計(jì)目的很簡(jiǎn)單，作為一個(gè)開發(fā)人員，我希望在寫一個(gè)custom component的時(shí)候也能按照index.html的原生風(fēng)格來(lái)寫，這是多么的優(yōu)雅，自然，沒(méi)有學(xué)習(xí)成本??！
這也應(yīng)該是無(wú)數(shù)人心目中的web component設(shè)計(jì)
所以，我們的SegmentFault.js v2.0的Web Component的設(shè)計(jì)宗旨就是，盡量接近原生的html結(jié)構(gòu)和使用習(xí)慣,接近原生從而把學(xué)習(xí)成本降到最低，是我追求的東西
寫個(gè)具體的例子
一個(gè)Component的描述文件定義好了，那么接下去就是如何引入它了。沿用上篇Mvvm中的風(fēng)格，我們給SegmentFault這個(gè)Class弄個(gè)registerComponent(tagName,compPath)方法，比如在index.html中
var sf = new SegmentFault();
sf.registerController("xxx",xxx);
...
sf.registerComponent("my-comp","components/myComp.html");
...
sf.init();
而在父組件中我們就可以通過(guò)"my-comp"這個(gè)我們剛剛注冊(cè)時(shí)起的標(biāo)簽名來(lái)引入這個(gè)組件
...
怎么樣！四個(gè)字：干凈利落
一個(gè)Web Component庫(kù)必須具備的基本素（功）養(yǎng)（能）
1. Mvvm 具備雙向綁定功能
2. Shadow Style 具有獨(dú)立的不污染全局的css功能
3. Communication 具有和父子兄弟組件通訊的功能
4. 擁有生命周期 （屬于高級(jí)功能，本低配版庫(kù)不涉及）
第一點(diǎn)Mvvm
Mvvm之前已經(jīng)實(shí)現(xiàn)，我們只要套用之前的實(shí)現(xiàn)即可
第二點(diǎn)Shadow Style
可能很多人對(duì)這個(gè)沒(méi)什么概念，我沿用前文中的內(nèi)容，比如我們?cè)赾omponent中定義了它的style，如
...
這里我們?cè)?style>標(biāo)簽中，定義了css，其中p和button的寫法在傳統(tǒng)觀念中都是會(huì)影響html頁(yè)面中所有的p元素和button元素的，這是我們不希望發(fā)生的，我們希望的是這個(gè)標(biāo)簽生效的作用域僅僅是在當(dāng)前的，被定義的component中。這種有獨(dú)立作用域的css就叫Shadow Style。
要實(shí)現(xiàn)Shadow Style，其實(shí)有比較簡(jiǎn)單的做法，本篇設(shè)計(jì)篇中不會(huì)涉及，你可以趁此獨(dú)立思考下，待下篇看看是否與我不謀而合，或者有比我更加高級(jí)的方案。
第三點(diǎn)Communication
即組件之間的通訊，經(jīng)常有人在sf中問(wèn)到這個(gè)組件通訊問(wèn)題，其實(shí)這個(gè)問(wèn)題是有比較標(biāo)準(zhǔn)的答案的，即3點(diǎn)
1. 父子通訊: 父->子 通過(guò) set 屬性， 子->父 拋事件
2. 兄弟通訊: 大兒子 拋事件給 -> 父 -> set 小兒子 的屬性
3. 遠(yuǎn)親通訊: 走消息總線 （其實(shí)就在一個(gè)單例上搞事件機(jī)制）
要實(shí)現(xiàn)通訊機(jī)制，其實(shí)也不復(fù)雜，主要就2個(gè)功能，1 父組件可以set子組件的屬性， 2 組件可以向外層拋事件，外層也可以監(jiān)聽組件拋出的事件，所以，我們會(huì)如此設(shè)計(jì)這塊的內(nèi)容，覺(jué)個(gè)例子,代碼說(shuō)話
...
大家注意看，從父組件的角度，我可以使用sf- + propertyName(這里是msg) 來(lái)實(shí)現(xiàn)外部父組件對(duì)組件的賦值，而且還能使用sf-on + 自定義事件名稱（這里是customevent） 對(duì)組件進(jìn)行監(jiān)聽。
換個(gè)角度，從子組件角度出發(fā)，我可以被外部賦值，我可以可以向外部dispatch事件。
使用Object.defineProperty可以很大程度上滿足我們對(duì)set property的需求，另外再給component的vm掛載一個(gè)內(nèi)置的函數(shù)this.dispatchEvent來(lái)發(fā)送自定義事件我們就功德圓滿了。
第四點(diǎn)生命周期
你可以給一個(gè)組件：由注冊(cè)->加載定義->顯示到DOM Tree->內(nèi)容更新->從DOM Tree移除->銷毀 等一系時(shí)間節(jié)點(diǎn)定義他的生命周期，如果是做的比較考究的庫(kù)，你可以把這這些時(shí)間節(jié)點(diǎn)的變更都一一向用戶通知，或者提供api供用戶控制。本文設(shè)計(jì)的低配版庫(kù)閹割了這部分高級(jí)功能，我們就是一教學(xué)向的庫(kù)，不整這些有的沒(méi)的。
結(jié)語(yǔ)
至此，設(shè)計(jì)篇結(jié)束，主要介紹了一下本教學(xué)庫(kù)的設(shè)計(jì)理念和一些web component的基本概念，歡迎點(diǎn)贊收藏評(píng)論，投硬筆投香蕉
如果本文閱讀沒(méi)有問(wèn)題，請(qǐng)繼續(xù)服用下一篇
【教學(xué)向】150行代碼教你實(shí)現(xiàn)一個(gè)低配版的MVVM庫(kù)（2）- 代碼篇
相關(guān)閱讀
【教學(xué)向】150行代碼教你實(shí)現(xiàn)一個(gè)低配版的MVVM庫(kù)（1）- 原理篇
【教學(xué)向】150行代碼教你實(shí)現(xiàn)一個(gè)低配版的MVVM庫(kù)（2）- 代碼篇
【教學(xué)向】再加150行代碼教你實(shí)現(xiàn)一個(gè)低配版的web component庫(kù)（1） —設(shè)計(jì)篇
【教學(xué)向】再加150行代碼教你實(shí)現(xiàn)一個(gè)低配版的web component庫(kù)（2） —原理篇
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84968.html
相關(guān)文章
-
【教學(xué)向】150行代碼教你實(shí)現(xiàn)一個(gè)低配版的MVVM庫(kù)（2）- 代碼篇
摘要：也放出地址，上面有完整工程以及在線演示地址相關(guān)閱讀教學(xué)向行代碼教你實(shí)現(xiàn)一個(gè)低配版的庫(kù)原理篇教學(xué)向行代碼教你實(shí)現(xiàn)一個(gè)低配版的庫(kù)代碼篇教學(xué)向再加行代碼教你實(shí)現(xiàn)一個(gè)低配版的庫(kù)設(shè)計(jì)篇教學(xué)向再加行代碼教你實(shí)現(xiàn)一個(gè)低配版的庫(kù)原理篇
書接上一篇： 150行代碼教你實(shí)現(xiàn)一個(gè)低配版的MVVM庫(kù)（1）- 原理篇
寫在前面
為了便于分模塊，和閱讀，我使用了Typescript來(lái)進(jìn)行coding，總行數(shù)是正好...
-
【教學(xué)向】150行代碼教你實(shí)現(xiàn)一個(gè)低配版的MVVM庫(kù)（1）- 原理篇
摘要：模塊則負(fù)責(zé)維護(hù)，以及各個(gè)模塊間的調(diào)度思考題了解了的實(shí)現(xiàn)機(jī)制，你能否自己動(dòng)手也試著用百來(lái)行代碼實(shí)現(xiàn)一個(gè)庫(kù)呢好了本教程第一部分設(shè)計(jì)篇就寫到這里，具體請(qǐng)移步下一篇教學(xué)向行代碼教你實(shí)現(xiàn)一個(gè)低配版的庫(kù)代碼篇我會(huì)用給出一版實(shí)現(xiàn)。
適讀人群
本文適合對(duì)MVVM有一定了解（如有主流框架ng，vue等使用經(jīng)驗(yàn)配合本文服用則效果更佳），雖然會(huì)用這類框架，但是對(duì)框架底層核心實(shí)現(xiàn)又不太清楚，或者能說(shuō)出個(gè)所以然...
-
2017-09-05 前端日?qǐng)?bào)
摘要：前端日?qǐng)?bào)精選理解構(gòu)造函數(shù)與原型對(duì)象前端校招面試該考察什么聽說(shuō)你想寫前端給程序員看的攻略上創(chuàng)造者，專訪中文教學(xué)向再加行代碼教你實(shí)現(xiàn)一個(gè)低配版的庫(kù)代碼篇我把最美的青春都獻(xiàn)給了代碼實(shí)戰(zhàn)桌面計(jì)算器應(yīng)用知乎專欄運(yùn)算符規(guī)則與隱式類型轉(zhuǎn)換詳解
2017-09-05 前端日?qǐng)?bào)
精選
理解構(gòu)造函數(shù)與原型對(duì)象前端校招面試該考察什么？聽說(shuō)2017你想寫前端？給程序員看的Javascript攻略 - Prot...
-
2017-08-29 前端日?qǐng)?bào)
摘要：前端日?qǐng)?bào)精選瀏覽器兼容性問(wèn)題解決方案配置指南全新的模塊化框架，知乎專欄現(xiàn)學(xué)現(xiàn)賣中文教學(xué)向再加行代碼教你實(shí)現(xiàn)一個(gè)低配版的庫(kù)原理篇我把最美的青春都獻(xiàn)給了代碼技術(shù)周刊開啟瀏覽器全屏模式如何進(jìn)行的操作掘金內(nèi)存分配與垃圾回收寫一
2017-08-29 前端日?qǐng)?bào)
精選
瀏覽器兼容性問(wèn)題解決方案AlloyTeam ESLint 配置指南全新的redux模塊化框架，redux-arena - 知乎專欄...
-
個(gè)人分享--web前端學(xué)習(xí)資源分享
摘要：前言月份開始出沒(méi)社區(qū)，現(xiàn)在差不多月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過(guò)的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。
1.前言
6月份開始出沒(méi)社區(qū)，現(xiàn)在差不多9月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...
發(fā)表評(píng)論
0條評(píng)論
Clect
男|高級(jí)講師
TA的文章
閱讀更多
LeetCode 精選TOP面試題【51 ~ 100】
閱讀 2198·2021-11-15 11:38
程序員的算法趣題Q13: 滿足字母算式的解法
閱讀 1161·2021-09-06 15:02
hncloud，全新美國(guó)物理服務(wù)器簡(jiǎn)單測(cè)評(píng)，贈(zèng)送20G DDos防御，3個(gè)IP
閱讀 3399·2021-08-27 13:12
好用的px轉(zhuǎn)rem插件推薦
閱讀 1369·2019-08-30 14:20
TCP/IP基礎(chǔ)總結(jié)性學(xué)習(xí)（7）
閱讀 2404·2019-08-29 15:08
移動(dòng)端布局與適配
閱讀 647·2019-08-29 14:08
JavaScript數(shù)組去重—ES6的兩種方式
閱讀 1732·2019-08-29 13:43
es6 for of的使用方法
閱讀 1468·2019-08-26 12:11
最新活動(dòng)
