too young to simple!
大四上學期那會,在南昌科泰華軟件有限公司的實習期間,有一個“自助拍照機”的項目,當時不知在哪個博文看到了覺得單頁應用真的艹雞棒,而且暑假也做過一段時間移動端的H5,想想剛好有新項目來了,可以用這個‘自助拍照機’項目來練練手。當時我內心就這么愉快的決定了,可是公司另一個前端由於對這個沒有概念(我內心真特么是秀才遇到兵)。於是我跟他和另兩個做java后台的討論的下:
單頁應用優點:頁面無刷新,用戶體驗好。
單頁應用缺點:另一個前端沒做過大型項目的單頁應用,后台覺得代碼維護困難,特別是如果后期如果要加功能的話,更改難度大。
后來因為和前端鬧了一些矛盾,和另一個前端吵了一架(現在想想也怪當時沖動,為了工作沒必要傷感情),后來經理調解了,經理覺得公司這種項目沒做過單頁,而且正如晨晨(做java后台的)所說,后期維護困難,還是按照以前的思路,不要做單頁應用。
---------------------------分割線--------------------------------
2016年初順利到深圳一家公司(第四次元科技有限公司)謀生了,公司CTO(江湖人稱俊哥,有着一副21.2歲的外表,其實是84年的+_+0)對前端實現手段放得開,所以我們也能自由發揮,以前不敢或者公司不讓用的劍法在這里都用於實現了,剛入職是2.16.2.29、現在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
等適當實際我把這個系統的網址貼不來吧