首先要说明的是，这不是一篇关于WebComponents的科普文章。如果你不太了解，建议先阅读《A Guide to Web Components》。古语有云——“授人以鱼不如授人以渔”。如果把组件比作“鱼”，对于前端开发者来说，W3C组织制定的HTML标准和浏览器厂商的实现就是“鱼”。“而不是‘钓鱼’，开发者在需求无法满足的情况下，通过现有的技术创造各种组件。虽然短期内满足了需求，但由于严重缺乏标准，同一个组件的类似实现有数千种，但它们之间不能相互复用，极大地制约了组件化的最大价值——复用，而WebComponents在组件标准化方面又向前迈进了一大步，组件化大大提高了前端开发的效率，组件化的UI框架应运而生一个又一个，从EXTJs、YUI到jQueryUI，再到Bootstrap、React、Ratchet、Ionic等等，等等，几乎每年都会涌现出很多新的UI框架，这些框架不是借鉴就是颠覆现有的框架，简单比较一下就会发现：这些框架的很大一部分模块在功能上是有重叠的，但只是在功能层面，代码层面确实是完全无法比拟的表。接下来选择jQueryUI、KendoUI、Bootstrap中的Dialog组件，从初始化、方法调用、事件响应等方面做一个简单的对比。jQueryUI//初始化$("#dialog").dialog({dialogClass:"no-close"});//显示$(".selector").dialog({show:{effect:"blind",duration:800}});//关闭事件$(".selector").on("dialogclose",function(e,ui){//dosomething...});KendoUI//初始化$("#dialog").kendoWindow({actions:["Minimize","Maximize"]});//显示vardialog=$("#dialog").data("kendoWindow");dialog.open();//关闭事件vardialog=$("#dialog").data("kendoWindow");dialog.bind("close",function(e){//dosomething...});Bootstrap//init$('#myModal').modal({keyboard:false});//显示$('#myModal').modal('show');//关闭事件$('#myModal').on('hidden.bs.modal',函数(e){//做某事...});简单对比一下，几乎相同的功能在接口层面是完全不兼容的，导致用户从一种实现切换到另一种实现的成本非常高。这反映了目前Web组件化的混乱和缺乏标准。让我们看看浏览器中“内置”组件的当前状态。HTML4、HTML5等各种标准由标准化组织制定。浏览器制造商根据标准实施“内置”组件，并声称与某些标准兼容。开发者按照标准来使用组件，使得代码在不同的浏览器中能够以相同的方式使用组件。以“内置”组件视频为例：//初始化（直接写
