对于组件化本身的理解

组件化

这里首先介绍WebComponents标准，如下为腾讯alloyteam团队的一篇文章里的内容。

1. <template>模板能力，WebComponent提供原生的模板能力

2. ShadowDOm封装组件独立的内部结构，ShadowDOm能够理解为一份有独立做用域的html片断。这些html片断的css环境和主文档隔离的，各自保持内部的独立性。也是ShadowDOm的独特性，使得组件化成为了可能。

3. 自定义原生标签

4. imports解决组件间的依赖

5. <link rel="import" href="datapciker.html">

咱们简单来回顾一下WebCompoents的四部分功能：

1. <template>定义组件的HTML模板能力

2. Shadow Dom封装组件的内部结构，而且保持其独立性

3. Custom Element 对外提供组件的标签，实现自定义标签

4. 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：这里只是一个菜鸟(目前实习还未找到)的见解，缺乏实践，只能本身去想和尝试，可能内容有"胡言乱语",请大牛能指出问题，虚心求教。明天会继续探求和尝试。