2011年12月份學習總結，創建日期：2012-01-03 22:21:31，有刪減。

• 早年的一篇總結，記錄對于前端標準的一些思考和萌芽工作；
• 對于當時的前端標準，始于2011年，在2013~2014進一步提升，編寫和制定了一些硬性條件，但在2015年沉寂和消亡，在2016~2017年有SiteAzure產品后，重新做了點工作……
• 可由始至終還沒做到位，原因很多，或者是項目性工作千化萬變，在共性與個性中，難找平衡點，或者是核心人員不斷流失，使得標準化過于空談，或者是并沒有重視質量保證和質量控制，使得初有成效的標準流于表面，沒在項目中貫徹落實……

總之，那是10年前對前端標準的一些考量，個人記錄。以下正文。

前言說的

設計中心標準化，為什么要做標準化？http://dtop.powereasy.net/pel/(注：已失效)，這篇也算是標準化建設的2011總結和2012計劃。

補充，20201226，解釋說明

• PEL(PowerEasy Layout)為動易設計中心規劃、制作的，適用于設計中心所有設計師、前端工程師，在模板定制等各種模板輸出中，規范應用起來的布局標準。
• PEL應向HTML5靠齊……

最近半年現在流行一個詞語：“站群配套”，即要做幾十個網站模板，各種各樣的，里面能搭建起幾百個站點，幾千個站點，這樣的項目我們該怎么做呢？將來怎么面對呢，貌似這一問題我個人已經思考了很久，從貴州教育的縣市網站和學校網站已經開始謀劃這類站點。

2011年10月設計中心也開始了標準化的各種規范建設，在前端輸出的標準中，從前期的貴州教育教育局站點站群項目上看到，因參與的同事較多，現有的技術水平參次不齊，各有各標準，簡單說，一個項目做一套項目模板，這套模板的就只適合這項目，以及這設計師前端工程師修改使用，其他人用起來或修改起來，得熟悉這套模板的的各種規范?？偝闪四０逯g不能通用，項目間模板不能復用，往往造成了設計中心前端輸出人員需要進行重復工作，低價值工作。

我們統一什么？統一哪些？

我們提倡，使用editplus、或者notepad++，進行前端代碼輸出，方便快捷，輕量化輸出工具，說白了就是強制背熟所有HTML、CSS的詞匯，善用各種CHM資源文檔，不再建議使用dreamweaver進行前端代碼輸出。

補充，20201226：當時還真沒sublime Text2，且當時前端工程師的要求感覺是比較低的；

• HTML的規范，我們規定，CSS/JS/盒子模型的各種使用和書寫統一等；
• CSS的規范，CSS文件的建立，我們依照這樣的規范，CSS文件的文件命名和區分等；
• JS的規范，基于jquery最新版上開發各種效果，統一學習和使用設計中心的slide庫，可應用焦點圖、滾動、切換、導航等通用效果；
• 標簽的規范，我們重構了通用信息列表、通用帶圖片信息列表、內容信息列表、內容帶圖片信息列表，已經新創了“頭條信息列表”標簽。

標題盒子模型

HTML的規范的里這里舉例說明“標題盒子模型”的例子，而標題盒子，應用最廣泛的，我們規定，必須按照box/hd/bd的規范。

一般標題盒子

<div class="box"> <div class="hd"><h3>標題</h3></div> <div class="bd">內容</div> </div>s

帶切換+標題的盒子

<div class="boxboxTab"id="hotRank"> <div class="hd"><h3>熱門</h3><ul><li>年</li>月日</ul></div> <div class="bd">內容</div> </div>

就上面標題盒子模型，基本滿足現在頁面布局的調整，再看一個舊項目，這一堆代碼，作用就是些書簽切換效果，我們需要不提倡這樣的代碼方式：

切換，你還用上面這樣的代碼嗎？我們建議統一使用slide.js或 http://www.superslide2.com/，我們只需要：

jQuery(".slideTxtBox").slide();

這是一個切換的HTML代碼：

現在我們要怎樣：結合標題盒子模型+slide.js，出來標準的切換效果：

從整個頁面上看，我們的命名和代碼結構都趨向簡潔，沒有多余的代碼，從是ID還是CLASS，都開始形成統一。

后話

曾經問過騰訊CDC的同學們，他們怎么制定內部的規范，答曰：規范就是最大內部統一，不用看別人怎樣，只需要內部協調確定，執行，那就是最好的規范。

現在標準化進程還是在開始階段，雖然已經讓各個前端同事往這標準方向靠齊，統一還需很長時間。我們標準規定，并不是限定限制知識的擴展和創新，而是在一個既定范圍內，達到最大的認同接納，目的只有方便項目實施，提高效率，可復用模板。

在現在的定制里面，很快就得應用起我們標準化的各種知識，例如在貴州教育學校模板、赫章政府站子站模板等的非常多子站站點項目上，能一試身手。在后面不斷對標準化的代碼和方法更新維護，沒有恒定的方法，只有不斷向前持續改進的標準化建設。

總結

以上是生活随笔為你收集整理的2011年12月份学习总结，在PE的前端标准思考和萌芽的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。