组件化
这里起首引见WebComponents范例，以下为腾讯alloyteam团队的一篇文章里的内容。
<template>模板才能，WebComponent供应原生的模板才能ShadowDOm封装组件自力的内部构造，ShadowDOm能够明白为一份有自力作用域的html片断。这些html片断的css环境和主文档断绝的，各自坚持内部的自力性。也是ShadowDOm的独特性，使得组件化成为了能够。
自定义原生标签
imports处理组件间的依靠
<link rel="import" href="datapciker.html">
我们简朴来回忆一下WebCompoents的四部份功用：
<template>定义组件的HTML模板才能
Shadow Dom封装组件的内部构造，而且坚持其自力性
Custom Element 对外供应组件的标签，完成自定义标签
import处理组件连系和依靠加载
由此我们能看出一个真正成熟牢靠的组件化计划，须要具有的才能:
资本高内聚—- 组件资本内部高内聚，组件资本由本身加载掌握
作用域自力—-内部构造密封，不与全局或其他组件产生影响
自定义标签—-定义组件的运用体式格局
可互相组合—-组件真正壮大的处所，组件间组装整合
接口范例化—-组件接口有一致范例，或许是生命周期的治理
如今盛行的React算是很好的完成了组件化，这里我想谈的是本身关于组件化的明白，探讨和尝试。 我以为组件化可分为UI组件化和JS方面的组件化(名字没有想好)。以下是关于这两方面的主意:
组件化之UI组件化
所谓UI组件化，能够想到这里触及到了HTML和CSS。
在HTML上，我们应当保证组件内部的标签要语义化。组件的自定义标签具有语义，是对组件的一种申明，概略。简朴的说就是,组件内部标签对内语义化，组件自定义标签对外语义化
对内语义化保留自定义标签具有准确的语义，自定义标签对外语义是对内部标签组合出的功用归纳综合。
在CSS上，保证代码上的模块化，具有自力作用域；内部的规划，字体的变化(不包括色彩这类是不可控的)只由其最外层容器影响。归纳综合的说就是，组件内部的规划只受容器变化影响。在容器不受外部影响变化的前提下，内部容器的款式不被外部所影响
_然则实际上_，我以为CSS是这里最不可控的。我们能保证在代码上模块化，自力作用域，这是在写less(或许运用sass)上获得的体验，比方下面:
#header{
h1{
a{
}
}
nav {
ul {
li {
}
}
}
}在写less的时刻，能感遭到一切的款式都在#header的作用域下发挥作用。实际上也是如许的，然则我为何说CSS是最不可控的呢？这也是我关于CSS怕惧的处所—-同一个组件构造是能够具有不一样的款式的，也就是说在我们的html构造雷同，js完成的一些功用也雷同的时刻，然则我们的款式是能够差别的，规划，色彩，字体等等。所以同样是一个导航组件，能够会有差别的模样。这里我以为他们算是差别的组件，由于组件是由构造，款式和逻辑组成的。我把没有款式的组件叫做 无款式组件 或 可反复利用用组件 ，而具有款式的组件叫做 完全部组件 或许 一次性组件。
PS：这里只是一个菜鸟(现在练习还未找到)的意见，缺乏实践，只能本身去想和尝试，能够内容有”胡说八道”,请大牛能指出问题，谦虚讨教。明天会继承探乞降尝试。
