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