組件式開發

爲何要作組件化？

不管前端也好，後端也好，都是整個軟件體系的一部分。軟件產品也是產品，它的研發過程也必然是有其目的。絕大多數軟件產品是追逐利潤的，在產品目標肯定的狀況下，成本有兩個途徑來優化：減小部署成本，提升開發效率。

減小部署成本的方面，業界研究得很是多，好比近幾年很流行的「去IOE」，就是很典型的，從一些費用較高的高性能產品遷移到開源的易替換的產品集羣，又好比使用Linux + Mono來部署.net應用，避開Windows Server的費用。

提升開發效率這方面，業界研究得更多，主要途徑有兩點：加快開發速度，減小變動代價。怎樣才能加快開發速度呢？若是咱們的開發不是從新造輪子，而是 每一次作新產品均可以利用已有的東西，那就會好不少。怎樣才能減小變動代價呢？若是咱們可以理清模塊之間的關係，合理分層，每次變動只須要修改其中某個部 分，甚至不須要修改代碼，僅僅是改變配置就能夠，那就更好了。 咱們先不看軟件行業，來看一下製造行業，好比汽車製造業，他們是怎麼造汽車的呢？造汽車以前，先設計，把整個汽車分解爲不一樣部件，好比輪子，引擎，車門， 座椅等等，分別生產，最後再組裝，因此它的製造過程能夠較快。若是一輛汽車輪胎被扎破了，須要送去維修，維修的人也沒有在每一個地方都修一下，而是隻把輪胎 拆下來修修就行了，這個輪胎要是實在壞得厲害，就乾脆換上個新的，整個過程不須要不少時間。

 

JavaScript這個部分有好幾個發展階段。

• 早期的共享文件，把公共功能的代碼提出出來，多個頁面共用
• 動態引用，消滅全局變量
• 在某些框架上進一步劃分，好比Angular裏面又分爲provider，service，factory，controller

JavaScript組件化的目標是什麼呢，是清晰的職責，鬆耦合，便於單元測試和重複利用。這裏的鬆耦合不只體如今js代碼之間，也體如今js跟 DOM之間的關係，因此像Angular這樣的框架會有directive的概念，把DOM操做限制到這類代碼中，其餘任何js代碼不操做DOM。

如上圖所示，總的原則是先分層次，層內再做切分。這麼作的話，再也不存在以前那種端到端組件了，使用起來沒有原先那麼方便，但在另外不少方面比較好。

6.3. CSS的組件化

這方面，業界也有不少探索，好比LESS，SASS，Stylus等。爲何CSS也要作組件化呢？傳統的CSS是一種扁平的文本結構，變動成本較 高，好比說想要把結構從鬆散改緊湊，須要改動不少。若是把實際使用的CSS只看成輸出結果，而另外有一種適合變動的方式看成中間過程，這就好多了。好比 說，咱們把一些東西定義成變量，每一個細節元素使用這些變量，當須要總體變動的時候，只需修改這些變量而後從新生成一下就能夠了。