從第一代程式設計師寫下第一行程式碼開始到上個世紀的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