js组件化开发发展

从第一代程序员写下第一行代码开始到上个世纪的80年代的软件危机，程序员一直在考虑一个问题，怎么写代码更容易。所形成的一套思路就是大团队的协同合作（如同cpu发展史一样，从飙主频到飙核数）

几乎所有的程序员开始写代码的时候，写代码都是以自我为中心的，代码风格随意看心情。这就导致了写代码协作起来极为麻烦，为什么呢？我写代码的时候，我和上帝知道我写的什么，过了一个月就只有上帝知道写的是什么了。这个问题在前端领域尤其严重，原因有如下几点：

1：因为这个领域没有多少年（1997 年，JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会（ECMA））

2：html/js/css发明出来的时候就只是玩玩而已的工具，技术非常不成熟。

3：这个领域人员水平参差不齐。

4：这个最重要也是最坑的：js是单线程的，css是全局的，如果几个人一起开发，一个bug集体加班（活那么多，人那么多，相互坑不出活，老板会fire掉大家）

很早就有人来想办法解决这个问题，解决这个问题的法宝---组件化。当然当时不是这样叫的，是通过两个原则来规范这个问题的，这两个原则就是：内聚性和耦合性。

意思就是：我想按时回家哄妹子！！！你怎么写代码我不管，你的功能全在你这儿实现（内聚性），不要让我还帮你写那块功能。另外，求你了，你代码不要影响我的代码（低耦合性）。

既然解决问题的思路在这里，前端大牛一代代前赴后继在这条路上飞奔下去。

第一代：YUI

200X年的时候，这个框架火啊，把js的坑都填了以后，比较low的事情就差不多解决完了，就直接扑组件化，当时一派盛世，仿佛从此以后，前端界一马平川，大家再也不用一行行代码去写了。

你要写个切换头图-----new Y.SlideShow，你要写个时间取值----new Y.Timepicker。

但是YUI还是倒在历史的车轮下（jquery UI也一样）,为什么呢

YUI解决了组件化的问题，但是太过学院派。要求每个用这个的程序员如同学校里的好学生一样要熟悉整套UI规范和使用规范。就是你还要熟悉YUI的CSS，HTML，JS，这样才能用的非常爽。这就如同你如果是个学渣，学霸把卷子给你抄了，如果你没好好听过课，给你抄你都会把&抄成8。

第二代 ExtJS

extjs是踩着YUI的尸体走过来的，第一版的extjs完全是拿yui改的。我第一次接触EXtjs的时候，我哭了。。。我感觉我要失业了。太特么的好用了，这完全是给后端程序员的大大的礼物，看着一个个java程序员写着自己的业务逻辑，顺带把前端全搞定，而且还比你们一个个前端程序员还搞的好得多的时候，完完全全的失落感，好像时间已经完全不需要前端了，整个世界都变黑了。。。。

extjs比YUI进步在哪儿呢，首先他表面上有一套漂亮的UI。这个实质上就是你不用写CSS，他帮你写好了。另外你HTML也不用写了，他也帮你写好了。这不对啊，前端页面怎么可以没有HTML和CSS呢----------------extjs都帮你封装到js里了。。。。。

这就如同你是个学渣，学霸把卷子给你抄了，而且这回的卷子还都是选择题。。。

可是PM、老板都不是吃素的。。。大家都有一身好手艺，难分高下，那来个附加题吧。。。这一块不好看，价格闪闪的效果，那一块只有动动吧。。。

extjs用是很简单，定制的话。。。。还是改错一处，全局错。。。。

第三代：web component

w3c跟google 突然有一天发现，iphone移除，我们的数钱数得手抽筋的好日子是快完了吧。以后感觉没web什么事了额。。。。。

帅哥，美女一见面都问装啥app，都不用电脑，笔记本，更谈不上看网页了呢。。。。

　　 gg一想，"不行啊"，然后google买了android，"还是不行啊，我现在这么容易挣这么多钱，我就是把android养大了也不见得挣现在这么多钱额。我还是得把web这块保住啊”，w3c赶紧附和道：“对，对，对”。然后大家都知道了chrome 拼命刷版本从1~47没用几年吧。。。。web的规范是一波波的出啊， es4,5,6,7全出来了。

然后就有了web component横空出世，带着四个小弟shadow dom/custom element/template/import.

这次的组件化完完全全不一样了，custom element的出来的组件，可以是以前任意的东西，然后注册成任意一个名字的组件，可以就<niubi-xxxcomponent>，也可叫<my-cat>，反正你想叫啥，就叫啥，然后小伙伴(host)把你的组件(element)直接import进去了以后，完全不会影响大家的开发。注意，是完全不会影响，css只是组件局部，js也是只管自己的。终于实现了大家一起出力，各干各的，完全不会相互影响。。。。这可是真正的齐头并进啊。

来个例子：

<link rel="import" href="banner.html">
<link rel="import" href="phones.html">
<link rel="import" href="list.html">
<template name="t-listBox">
    <t-banner></t-banner>
    <t-phone></t-phone>
    <t-list></t-list>
</template>

这是前端代码么，怎么这么少。。。。。
这可是妥妥一个完整的界面啊，有banner，电话输入框，和电话列表啊。
　　 这正是奥妙之所在，可以三个同学同时写<t-banner><t-phone><t-list>三个组件，然后直接import进来以后就可以直接用了。。。
高内聚，低耦合
但是一般都是故事的，这规范到不成熟，到处都是坑

说个简单的，这一个个组件都是独立的，那样式不受外部影响，那通用样式怎么办，难道一个个组件去改嘛

当组件化时代已经开启，为了填原生js的坑，

已有无数勇士踩着前者的尸体来了：

1： angular

2： VUE

3： react