2011年12月份學(xué)習(xí)總結(jié)，創(chuàng)建日期：2012-01-03 22:21:31，有刪減。

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

總之，那是10年前對(duì)前端標(biāo)準(zhǔn)的一些考量，個(gè)人記錄。以下正文。

前言說的

設(shè)計(jì)中心標(biāo)準(zhǔn)化，為什么要做標(biāo)準(zhǔn)化？http://dtop.powereasy.net/pel/(注：已失效)，這篇也算是標(biāo)準(zhǔn)化建設(shè)的2011總結(jié)和2012計(jì)劃。

補(bǔ)充，20201226，解釋說明

• PEL(PowerEasy Layout)為動(dòng)易設(shè)計(jì)中心規(guī)劃、制作的，適用于設(shè)計(jì)中心所有設(shè)計(jì)師、前端工程師，在模板定制等各種模板輸出中，規(guī)范應(yīng)用起來的布局標(biāo)準(zhǔn)。
• PEL應(yīng)向HTML5靠齊……

最近半年現(xiàn)在流行一個(gè)詞語：“站群配套”，即要做幾十個(gè)網(wǎng)站模板，各種各樣的，里面能搭建起幾百個(gè)站點(diǎn)，幾千個(gè)站點(diǎn)，這樣的項(xiàng)目我們?cè)撛趺醋瞿?#xff1f;將來怎么面對(duì)呢，貌似這一問題我個(gè)人已經(jīng)思考了很久，從貴州教育的縣市網(wǎng)站和學(xué)校網(wǎng)站已經(jīng)開始謀劃這類站點(diǎn)。

2011年10月設(shè)計(jì)中心也開始了標(biāo)準(zhǔn)化的各種規(guī)范建設(shè)，在前端輸出的標(biāo)準(zhǔn)中，從前期的貴州教育教育局站點(diǎn)站群項(xiàng)目上看到，因參與的同事較多，現(xiàn)有的技術(shù)水平參次不齊，各有各標(biāo)準(zhǔn)，簡(jiǎn)單說，一個(gè)項(xiàng)目做一套項(xiàng)目模板，這套模板的就只適合這項(xiàng)目，以及這設(shè)計(jì)師前端工程師修改使用，其他人用起來或修改起來，得熟悉這套模板的的各種規(guī)范。總成了模板之間不能通用，項(xiàng)目間模板不能復(fù)用，往往造成了設(shè)計(jì)中心前端輸出人員需要進(jìn)行重復(fù)工作，低價(jià)值工作。

我們統(tǒng)一什么？統(tǒng)一哪些？

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

補(bǔ)充，20201226：當(dāng)時(shí)還真沒sublime Text2，且當(dāng)時(shí)前端工程師的要求感覺是比較低的；

• HTML的規(guī)范，我們規(guī)定，CSS/JS/盒子模型的各種使用和書寫統(tǒng)一等；
• CSS的規(guī)范，CSS文件的建立，我們依照這樣的規(guī)范，CSS文件的文件命名和區(qū)分等；
• JS的規(guī)范，基于jquery最新版上開發(fā)各種效果，統(tǒng)一學(xué)習(xí)和使用設(shè)計(jì)中心的slide庫(kù)，可應(yīng)用焦點(diǎn)圖、滾動(dòng)、切換、導(dǎo)航等通用效果；
• 標(biāo)簽的規(guī)范，我們重構(gòu)了通用信息列表、通用帶圖片信息列表、內(nèi)容信息列表、內(nèi)容帶圖片信息列表，已經(jīng)新創(chuàng)了“頭條信息列表”標(biāo)簽。

標(biāo)題盒子模型

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

一般標(biāo)題盒子

<div class="box"> <div class="hd"><h3>標(biāo)題</h3></div> <div class="bd">內(nèi)容</div> </div>s

帶切換+標(biāo)題的盒子

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

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

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

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

這是一個(gè)切換的HTML代碼：

現(xiàn)在我們要怎樣：結(jié)合標(biāo)題盒子模型+slide.js，出來標(biāo)準(zhǔn)的切換效果：

從整個(gè)頁面上看，我們的命名和代碼結(jié)構(gòu)都趨向簡(jiǎn)潔，沒有多余的代碼，從是ID還是CLASS，都開始形成統(tǒng)一。

后話

曾經(jīng)問過騰訊CDC的同學(xué)們，他們?cè)趺粗贫▋?nèi)部的規(guī)范，答曰：規(guī)范就是最大內(nèi)部統(tǒng)一，不用看別人怎樣，只需要內(nèi)部協(xié)調(diào)確定，執(zhí)行，那就是最好的規(guī)范。

現(xiàn)在標(biāo)準(zhǔn)化進(jìn)程還是在開始階段，雖然已經(jīng)讓各個(gè)前端同事往這標(biāo)準(zhǔn)方向靠齊，統(tǒng)一還需很長(zhǎng)時(shí)間。我們標(biāo)準(zhǔn)規(guī)定，并不是限定限制知識(shí)的擴(kuò)展和創(chuàng)新，而是在一個(gè)既定范圍內(nèi)，達(dá)到最大的認(rèn)同接納，目的只有方便項(xiàng)目實(shí)施，提高效率，可復(fù)用模板。

在現(xiàn)在的定制里面，很快就得應(yīng)用起我們標(biāo)準(zhǔn)化的各種知識(shí)，例如在貴州教育學(xué)校模板、赫章政府站子站模板等的非常多子站站點(diǎn)項(xiàng)目上，能一試身手。在后面不斷對(duì)標(biāo)準(zhǔn)化的代碼和方法更新維護(hù)，沒有恒定的方法，只有不斷向前持續(xù)改進(jìn)的標(biāo)準(zhǔn)化建設(shè)。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。