【教学向】再加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结构和使用习惯,接近原生从而把学习成本降到最低,是我追求的东西