对于组件化自己的理解

组件化

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