周末浅谈-WEB前端组件

随着前端业务复杂化的不断加深，前端交互流程也愈加复杂，所以angularJs，vueJs，avalonJs等许多前端框架都出现了，它们不像JQ那样，只是提供一种工具的集合，它们更多的是一种前端业务的解决方案。你们它们从方法，到配置，到工具，都自成一套。虽然根子上都是操作DOM，操作DATA，但思路都各不相同。唯一的相同之处就是都把对DOM和DATA的操作进行了重重封装，有时用它们写JS，感觉就像在写config配置。这方面做到极致的，目前看来就是ExtJs了。

抛开这此框架不谈，单说组件，这东西至少包括四部分：

1，自定义的元素或DOM导入，例如，React，用jsx搞成类xml的东西，还有Extjs的requires 按需加载

2，html模板，例如，叫个框架就有TPL

3，DOM操作，就不例如了，都有

4，data操作，

至少是这四部分，加一块才算是一个组件。现在咱们先行者计划里，我讲的东西都算是组件的初级阶段，基本上写的全是jQuery插件。为什么说是初级呢？因为我要是按以上四部分组成来讲，基本上能听懂并理解，然后自己写出来的人，不到三分之一。所以退而求其次，先把jQuery插件讲明白再说吧。

前端组件化中的DOM构成，现在有二个方向，我个人觉得，一是把DOM打包然后在需要的时候import；二就是自定义标签，像React那种的。具体哪种适合，这要看具体的业务场景。

但抛开所有限制，我喜欢DOM打包然后在需要的时候导入。因为自定义标签有一个最大的问题，就是业务复杂到一定程度的时候，你的标签命名就是一个大问题了，到最后就几乎无名可用，只能是name1，name2，name3...这种的往下排了。不要笑，真有这种情况。

然后自定义标签，另一个不利因素就是它的标准现在没定，还不稳当，没法用。所以呀，自定义标签在我个人这里，就省省吧。

接着往下说哈，前些日子，讲自定义单选 & 复选框的时候，我说过要讲组件的生命周期，后来许多同学说不行啊得慢点，就暂时先放下了，咱们现在就先聊几句组件生命周期，因为无论如何，这个东西必须得学呀。不能因为某个东西太难，OK，那你说你不学了。那我要说，活着太难，你是不是就不活了啊。

生命周期哈，一般就是实例化，生存期，销毁期，清理期。各种书上说的都有略有不同。反正就是这么回事。以下是我个人理解，未必都对，

1，实例化，就是你声明了一个组件，然后给了默认值的设置，这时你可以调用了；

2，生存期，就是你可以用它干活了；

3，销毁期，就是把它的各种引用都处理掉，比如什么DOM层级啊，绑定的事件啊；

4，清理期，就是此组件和其它元素的关系，还有它用到的变量，该删删，该清清；

在这几个过程中，会有不同的方法被调用，每一个生命周期内部又会再根据不同情况，添加不同事件，调用不同的方法。这是自定义标签和导入DOM的内容。

DOM导入，也叫html import，其实就是把一段HTML另存为，然后用AJAX方法在需要的时候，给LOAD进来的意思。类似于PHP的include。在新的web标签中，我记得有一个<link rel="import" href='xxx.html' />，可以这么写，但我没这么用过，哪位同学有兴趣可以试试。

为什么要用HTML导入呢，因为DOM加载这个东西，它跟加载JS类似，都是阻塞式的，包括默认的link，都是。通俗的讲，假如你页面上有一个大菜单，你不操作的时候，它是隐藏的。但页面加载的时候，必须把它都加进来，页面才能全部显示，这速度不就慢了么。所以就用import，在需要的时候，再把这个大菜单加到页面中来。

当然了，import的使用，也是要有限度的，你不能搞成多个页面互相依赖加载，那就有点麻烦了。