摘要：为的内置一个方法，用法和原生的事件机制一毛一样。
前言
上两篇Mvvm教程的热度超出我的预期，很多码友留言表扬同时希望我继续出下一篇教程，当时我也半开玩笑说只要点赞超10就兑现承诺，没想到还真破了10，所以就有了今天的文章。
准备工作熟读
【教学向】150行代码教你实现一个低配版的MVVM库（1）- 原理篇
【教学向】150行代码教你实现一个低配版的MVVM库（2）- 代码篇
本篇是在上两篇的基础之上对代码进行进一步扩展，从而实现web component功能，所以读者务必掌握mvvm的实现机制才能深入理解本篇的内容（mvvm是web component的基石）。
什么才是好的 web component 设计目前市面上各大主流前端框架，凡事带web component功能的，他们的设计水准基本都不入我的法眼，唯一看得上眼的是google的polymer，但是在某些API设计层面也显得略微繁琐（想了解polymer的朋友看一翻一下我专栏里面10篇polymer入门系列教程）
什么是componenthtml提供的原生标签，比如DIV, BUTTON, INPUT家族，Hx家族等等，这些就好比俄罗斯方块里的一块块标准积木,我们称它们为stand component
某一天这些积木不能满足你的需求了，被扩展或被组合形成了非基本形状
这些新形状就是custom component，自定义组件！为什么要有component呢，好处是什么呢？
1. 可以复用 2. 结构清晰 3. 独立开发
你稍微开动下脑筋就能分析出来了，我就不展开了。
我心目中的web component在座的各位都写过index.html么？很简单
主要就分成3大块内容，style, dom, script
然后外面用个包裹
所以这期低配版web component库设计目的很简单，作为一个开发人员，我希望在写一个custom component的时候也能按照index.html的原生风格来写，这是多么的优雅，自然，没有学习成本啊！
这也应该是无数人心目中的web component设计
所以，我们的SegmentFault.js v2.0的Web Component的设计宗旨就是，尽量接近原生的html结构和使用习惯,接近原生从而把学习成本降到最低，是我追求的东西
写个具体的例子
一个Component的描述文件定义好了，那么接下去就是如何引入它了。沿用上篇Mvvm中的风格，我们给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"这个我们刚刚注册时起的标签名来引入这个组件
...
怎么样！四个字：干净利落
一个Web Component库必须具备的基本素（功）养（能）
1. Mvvm 具备双向绑定功能
2. Shadow Style 具有独立的不污染全局的css功能
3. Communication 具有和父子兄弟组件通讯的功能
4. 拥有生命周期 （属于高级功能，本低配版库不涉及）
第一点Mvvm
Mvvm之前已经实现，我们只要套用之前的实现即可
第二点Shadow Style
可能很多人对这个没什么概念，我沿用前文中的内容，比如我们在component中定义了它的style，如
...
这里我们在标签中，定义了css，其中p和button的写法在传统观念中都是会影响html页面中所有的p元素和button元素的，这是我们不希望发生的，我们希望的是这个标签生效的作用域仅仅是在当前的，被定义的component中。这种有独立作用域的css就叫Shadow Style。
要实现Shadow Style，其实有比较简单的做法，本篇设计篇中不会涉及，你可以趁此独立思考下，待下篇看看是否与我不谋而合，或者有比我更加高级的方案。
第三点Communication
即组件之间的通讯，经常有人在sf中问到这个组件通讯问题，其实这个问题是有比较标准的答案的，即3点
1. 父子通讯: 父->子 通过 set 属性， 子->父 抛事件
2. 兄弟通讯: 大儿子 抛事件给 -> 父 -> set 小儿子 的属性
3. 远亲通讯: 走消息总线 （其实就在一个单例上搞事件机制）
要实现通讯机制，其实也不复杂，主要就2个功能，1 父组件可以set子组件的属性， 2 组件可以向外层抛事件，外层也可以监听组件抛出的事件，所以，我们会如此设计这块的内容，觉个例子,代码说话
...
大家注意看，从父组件的角度，我可以使用sf- + propertyName(这里是msg) 来实现外部父组件对组件的赋值，而且还能使用sf-on + 自定义事件名称（这里是customevent） 对组件进行监听。
换个角度，从子组件角度出发，我可以被外部赋值，我可以可以向外部dispatch事件。
使用Object.defineProperty可以很大程度上满足我们对set property的需求，另外再给component的vm挂载一个内置的函数this.dispatchEvent来发送自定义事件我们就功德圆满了。
第四点生命周期
你可以给一个组件：由注册->加载定义->显示到DOM Tree->内容更新->从DOM Tree移除->销毁 等一系时间节点定义他的生命周期，如果是做的比较考究的库，你可以把这这些时间节点的变更都一一向用户通知，或者提供api供用户控制。本文设计的低配版库阉割了这部分高级功能，我们就是一教学向的库，不整这些有的没的。
结语
至此，设计篇结束，主要介绍了一下本教学库的设计理念和一些web component的基本概念，欢迎点赞收藏评论，投硬笔投香蕉
如果本文阅读没有问题，请继续服用下一篇
【教学向】150行代码教你实现一个低配版的MVVM库（2）- 代码篇
相关阅读
【教学向】150行代码教你实现一个低配版的MVVM库（1）- 原理篇
【教学向】150行代码教你实现一个低配版的MVVM库（2）- 代码篇
【教学向】再加150行代码教你实现一个低配版的web component库（1） —设计篇
【教学向】再加150行代码教你实现一个低配版的web component库（2） —原理篇
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84968.html
相关文章
-
【教学向】150行代码教你实现一个低配版的MVVM库（2）- 代码篇
摘要：也放出地址，上面有完整工程以及在线演示地址相关阅读教学向行代码教你实现一个低配版的库原理篇教学向行代码教你实现一个低配版的库代码篇教学向再加行代码教你实现一个低配版的库设计篇教学向再加行代码教你实现一个低配版的库原理篇
书接上一篇： 150行代码教你实现一个低配版的MVVM库（1）- 原理篇
写在前面
为了便于分模块，和阅读，我使用了Typescript来进行coding，总行数是正好...
-
【教学向】150行代码教你实现一个低配版的MVVM库（1）- 原理篇
摘要：模块则负责维护，以及各个模块间的调度思考题了解了的实现机制，你能否自己动手也试着用百来行代码实现一个库呢好了本教程第一部分设计篇就写到这里，具体请移步下一篇教学向行代码教你实现一个低配版的库代码篇我会用给出一版实现。
适读人群
本文适合对MVVM有一定了解（如有主流框架ng，vue等使用经验配合本文服用则效果更佳），虽然会用这类框架，但是对框架底层核心实现又不太清楚，或者能说出个所以然...
-
2017-09-05 前端日报
摘要：前端日报精选理解构造函数与原型对象前端校招面试该考察什么听说你想写前端给程序员看的攻略上创造者，专访中文教学向再加行代码教你实现一个低配版的库代码篇我把最美的青春都献给了代码实战桌面计算器应用知乎专栏运算符规则与隐式类型转换详解
2017-09-05 前端日报
精选
理解构造函数与原型对象前端校招面试该考察什么？听说2017你想写前端？给程序员看的Javascript攻略 - Prot...
-
2017-08-29 前端日报
摘要：前端日报精选浏览器兼容性问题解决方案配置指南全新的模块化框架，知乎专栏现学现卖中文教学向再加行代码教你实现一个低配版的库原理篇我把最美的青春都献给了代码技术周刊开启浏览器全屏模式如何进行的操作掘金内存分配与垃圾回收写一
2017-08-29 前端日报
精选
浏览器兼容性问题解决方案AlloyTeam ESLint 配置指南全新的redux模块化框架，redux-arena - 知乎专栏...
-
个人分享--web前端学习资源分享
摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。
1.前言
6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...
发表评论
0条评论
Clect
男|高级讲师
TA的文章
阅读更多
LeetCode 精选TOP面试题【51 ~ 100】
阅读 2188·2021-11-15 11:38
程序员的算法趣题Q13: 满足字母算式的解法
阅读 1151·2021-09-06 15:02
hncloud，全新美国物理服务器简单测评，赠送20G DDos防御，3个IP
阅读 3379·2021-08-27 13:12
好用的px转rem插件推荐
阅读 1352·2019-08-30 14:20
TCP/IP基础总结性学习（7）
阅读 2388·2019-08-29 15:08
移动端布局与适配
阅读 636·2019-08-29 14:08
JavaScript数组去重—ES6的两种方式
阅读 1722·2019-08-29 13:43
es6 for of的使用方法
阅读 1463·2019-08-26 12:11
最新活动
