关于组件化开发

一 什么是组件化

   前端做过一段时间的小伙伴都知道，目前组件化规范程度其实是相当低的，同一个组件做出来的API都不尽相同，这就给组件使用带来了很大的麻烦。 那么公司会花费大量时间将Jq插件重写为React插件就不必感到奇怪了，根本原因就是没有统一的规范。 比如Modal 组件（一个模态框，背景置灰），你看下BootStrap，jq，react-componets等不同的实现，虽然功能大同小异，但是通用就变得很困难。几乎完全相同的功能在接口层面完全不兼容，导致使用者从某个实现切换到另一个实现时需要非常高的成本，这就是目前Web组件化方面无序和缺乏标准的一个写照。组件框架目前无序、缺乏标准以及低效复用方面的问题需要通过组件标准化来解决，而Web Components则是标准化的一个很好的选择。

二 组件化规范

1.国际规范

  在讲述国际规范之前，我们来想象一下，怎么样的组件化才是我们所希望的呢？  很简单，我们希望我们编写的组件可以独立于框架，可以不经过或经过很少的修改便可以用于不同项目。比如有一个组织L，L规定了Modal  必须有如下几个方法: open()  close()必须有title，content属性，必须有open和close的事件梳理函数接口。   ok！  我们开始开发组件，组件对外的接口是一致的，这时候A公司出了一个很牛的Modal组件实现，我们只要拿过来将我们的事件处理函数对应移植过去，一切ok。nice，我们就想要这样。   其实这里面是有几个点的：1. 组件要独立于框架 2. js css 不能污染我的应用 。 这里先留着不谈。 

  回顾浏览器的发展历史，也曾经历混乱和无序，随着W3C标准化组织的出现这一局面有了翻天覆地的变化，而对于Web组件而言，Web Components 的出现才仅仅是这一变化的开始，随着更为复杂的多端环境的出现，组件标准化还有着更大的想象空间。

2.公司规范？

  在web components普遍之前，公司应该先要建立一套组件规范，帮助公司内部完善组件重用机制。前面谈到了要想实现组件化，必须要考虑两点：1。组件要独立于框架，什么是独立于框架呢，必然是封装Dom api（不考虑svg），将dom api 封装起来，曝露出更加抽象的接口。2. js css 不能污染我的应用。  js变量污染从很久之前就有很多解决方法，而且都做的很好，包括现在es6的模块，证明js模块化已经很成熟了，不需要过多考虑。然后是css，css众所周知是全局的，那么css必然会造成变量污染啊！  针对于此，主要有两种解决方法 ， 一个是使用prefix来’试图‘创建一个唯一的名字。二是hash话，这样就不会污染了，但是css重用会存在问题，关于css可以搜索  css  module 获取更多信息。

三 谈谈比较流行的React组件化

  最近一段时间，写了一个组件项目。目的就是将你的组件开发从具体项目中独立出来。 这样做主要有两个好处：1. 让更多人看到你的项目，不一定是项目中的人，大家互相分享，甚至贡献代码  2. 组件写好直接就是一个可发布单元。

  先写到这，改天继续写，贴代码和图