今天找文件的時候突然發現了一枚總結文檔，覺得有必要留存，以防下次找不着就一不小心發了這篇，哈哈哈
一直做后台管理系統，采用react前后端分離，以接口的形式相互交流，猝不及防得來了三個頁面開發，然后：
項目概況：二月開始接手A項目，該項目由前端寫靜態頁面，php開發嵌套數據的形式展現，為期一個月，給前端時間為兩周，然后交付到數據嵌套的人員；三月中旬開始接手B項目，該項目有兩個端，支付寶端C端以及后台管理平台，這兩個項目統統由前端寫靜態頁面，java來嵌套數據。
項目詳情：
1.A項目：由於一直沒有好好的啃過bootstrap，對於這個有點熟悉又陌生，使用過但是都是別人已經搭好整體框架，自己在那個框架的基礎之上進行修改調整迭代需求，也就是粘過來刪刪改改。於是最開始沒想要運用這個，試圖自己從0開始寫頁面，當然也是覺得這個框架不夠輕便，有很多的強大的功能，自己又用不上那么多，比如優雅的響應式，覺得蠻累贅的。技術選型的時候有同事推薦bootstrap：有小組件可以拿過來直接使用比如彈框。表單等，還有就是兼容性會不需要我們自己來考慮，針對我覺得這個比較大型累贅的想法，提議一張圖片就比這個框架大得許多了。
對於網站類項目經驗缺乏，然后又是第一次自己一個人擔任一個完整的前端，沒有一點兒懈怠，就開始了bootstrap的摸索之路。開始寫demo實驗，差不多試驗了兩天把頭部尾部等公共部分完成，寫好了一個頁面。在試驗響應式的時候，沒有手機端頁面設計，然后做起來也花費大量時間經歷，結合產品方面的需求，最后決定將頁面寬度定位1200px，大於時左右留白顯示，小於時將允許出現滾動條。由於是官網的項目，測試了各瀏覽器的兼容性都沒問題，最后測試結果表明基本沒有兼容性問題。
對於文件的結構糾結了一段時間，一開始給每個頁面都寫了一個樣式文件，但是請求這么多樣式文件也是很消耗資源的，有的頁面樣式添加的還是蠻少的，到后來就把自己寫的全部樣式文件都寫入到了一個文件里面index.css有大概50k的樣子。
2.支付寶C端：根據之前支付寶生活號的開發，便於后期統一管理維護，於是借鑒了他們采用的技術，采用antUI組件，所有新增樣式差不多22k的樣子，對於手機端還是蠻好用的，手機端的常用組件基本上都有，在支付寶里面也不會存在兼容性。
3.后台B端：本來特別想爭取這個項目用react那一套來做的，antDesign功能全面，系統可維護性高。但是現在這個項目時間緊急，前端這邊抽不出更多人手，我一個人負責兩個端頁面開發已經夠嗆，於是java組抽出人手來做嵌套的工作。最后這個項目根據metronic.bootstrap框架來做，一個基於bootsrtap的成熟框架。
存在的問題：
1.常用的控件應該積累起來，到時候要用了直接取過來用。控件比如：時間選擇，分頁，輸入匹配，輪播，彈框，弱提示，等等
2.對於框架里面的樣式我們是直接重寫，還是自己再取class來覆蓋掉
3.UI設計跟框架出入較大，調整內容較多。
4.交付之前總是很想盡善盡美，但是一交付出去就出現問題，這次一連三個項目都這樣，同類型的技術形式沒有放一起總結。嵌套形式的完整交付必須包括：頁面沒有遺漏，錯誤頁面，表單驗證機制，通用的報錯提醒，弱提示，彈框的用法。
解決問題：
1.針對控件的積累問題，在查找控件的時候發現一個好辦法，那就是把平常的好用的控件都放到一個地方集中管理，推薦放到GIthub找的時候比較方便不用電腦里死找文件。借鑒一些好的做法，然后自己寫寫，自己寫的用起來肯定更加順手，有些控件基本上每個系統會出現，更加得自己動手去寫，理解其中的原理。
2.在項目中采用的方法是，在自己的class下覆蓋框架內部。
3.盡量避免UI在前端之前介入產品，盡量在技術框架選定之后再去進行針對性的UI設計，不然會有很多調整，重寫。
4.***important***頁面一般不會落下，下次嵌套項目進行之前，首先把基礎設施建好，可行性demo，錯誤頁面，表單驗證機制，通用的報錯提醒，弱提示，彈框的用法，在這些全部完成的情況下再去動手寫頁面，預防最后匆匆交付然后遺漏了。
總結：三種框架之前都沒有用過，能在項目開始之前寫可行性demo，在技術選型的時候聽取同事提出的的建議，在A項目前台開發的時候，推薦的bootstrap獲得良好的兼容性，antUI是借鑒之前支付寶生活號的開發方式，B端選型的時候在項目經理確定只能出靜態頁面時，采用原來php開發人員用的metronic.bootstrap。
之前一直很恐懼的用插件框架，感覺無法駕馭，擔心用着不完全符合需求，后期自己不會改，這次之后，能自己動手找到問題所在，然后進行調整（A項目輪播，帶戶型說明等），一步一步摸索，變得不那么害怕新的東西，也不那么害怕自己一個人去整理規划整個項目了。