【教学向】再加150行代码教你实现一个低配版的web component库（1） —设计篇

前言

上两篇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入门系列教程）

什么是component

html提供的原生标签，比如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设计

API设计

所以，我们的SegmentFault.js v2.0的Web Component的设计宗旨就是，尽量接近原生的html结构和使用习惯,接近原生从而把学习成本降到最低，是我追求的东西