關於組件化開發的思考

too young to simple！

大四上學期那會，在南昌科泰華軟件有限公司的實習期間，有一個「自助拍照機」的項目，當時不知在哪一個博文看到了以爲單頁應用真的艹雞棒，並且暑假也作過一段時間移動端的H5，想一想恰好有新項目來了，能夠用這個‘自助拍照機’項目來練練手。當時我心裏就這麼愉快的決定了，但是公司另外一個前端因爲對這個沒有概念（我心裏真特麼是秀才遇到兵）。因而我跟他和另兩個作java後臺的討論的下：

單頁應用優勢：頁面無刷新，用戶體驗好。

單頁應用缺點：另外一個前端沒作過大型項目的單頁應用，後臺以爲代碼維護困難，特別是若是後期若是要加功能的話，更改難度大。

後來由於和前端鬧了一些矛盾，和另外一個前端吵了一架（如今想一想也怪當時衝動，爲了工做不必傷感情），後來經理調解了，經理以爲公司這種項目沒作過單頁，並且正如晨晨（作java後臺的）所說，後期維護困難，仍是按照之前的思路，不要作單頁應用。

---------------------------分割線--------------------------------

2016年初順利到深圳一家公司（第四次元科技有限公司）謀生了，公司CTO（江湖人稱俊哥，有着一副21.2歲的外表，實際上是84年的+_+0）對前端實現手段放得開，因此咱們也能自由發揮，之前不敢或者公司不讓用的劍法在這裏都用於實現了，剛入職是2.16.2.2九、如今2016.4.23了，用了sass預處理，也小小的重構了之前的頁面（感受就是把之前人寫的頁面重寫，而後接口粘過來~把多餘的插件都刪掉了，只留下了一個jQuery），也認識了一個感受技術挺踏實的一個前端，名：成功。雖然他起點不高，可是很努力，在公司也不多看他講話，幾乎都在埋頭作項目，我就給他取名em吧，由於他切頁面真的很喜歡用em標籤，常常把em看成塊或者盒子來用。另外一個西南交大的」鬆鬆「，我眼中的學霸，學習能力很強，之後也能獨擋一面。-----------------哎喲我草，徹底脫離主題了。。。。

進入正題了----

用了3周寫一個boss管理系統，開始沒想到這麼複雜，我把他寫成了單頁應用了，控制頁面全部的點擊事件或者方法在一個js裏面，差很少有1300行js。整個頁面都是js生成的，想起了react，若是公司一股腦說必定要用react或許會是另外一個天地。由於有一個側邊欄點擊而後頁面中間content這塊顯示相應內容，可是呢，中間生成的內容也有兩個點擊控制區域，content分content-header和content-content，content-header有天，周，月可點，點擊content顯示相應的內容；content-conten也有查看詳情按鈕，點擊次查看詳情按鈕和點擊側邊欄效果差很少，存在很強的耦合性。content-conten除了一個和點擊側邊欄效果幾乎同樣的clickbutton，還有一個內容查看顯示狀態不同的clickbutton，分別是分表格顯示信息和圖標顯示信息。能夠相互切換。大爺聽到這裏可能暈了，你特麼到是貼張圖出來啊。哦，我不貼。

根據我多年逛各類草根（liu）社區的經驗，每一個客官的口味是不同的，若是把全部的客官部分老弱病殘都來看狂野歐美風格，那可能80歲的老頭要看吐血了。因此，我把想到了我遠房親戚webpack，es2015的export，之因此叫遠房親戚，是由於我只據說過它們的大名和偶爾打打電話，歷來沒用過實際項目。

因此朕的洪荒之力從凳子上的兩個球一直到大腦皮層，稱新版本剛上線，時間也不緊，那我就來用webpack+es6+bable來改良這個單頁應用吧。

具體思路是把側邊欄點擊中間顯示內容和content-header和content-content裏面的clickbutton分離出來，寫成一個個組件。webpack來打包，es6的模塊管理工具開控制組件，bable來轉6轉5

 

等適當實際我把這個系統的網址貼不來吧