淺談前端開(kāi)發(fā)規(guī)范

Luosunce 發(fā)布于2019-08-30 12:47 / 1614人閱讀

結(jié)構(gòu) 樣式行為分離模板只包含html文件，模板的書(shū)寫(xiě)順序
相應(yīng)的命名規(guī)則

html：語(yǔ)義化
css：類(lèi)名以功能或內(nèi)容命名

樣式復(fù)用 
最好少于三級(jí) 
在沒(méi)有必要的情況下避免元素選擇器疊加 Class、ID 使用  
屬行的書(shū)寫(xiě)順序
性能

js：避免重復(fù)查找dom

三元操作符電梯if條件語(yǔ)句
二元布爾操作符
樣式寫(xiě)在一起
變量聲明，保存在一個(gè)變量里，避免多次查找dom
jQuery鏈?zhǔn)綄?xiě)法

1、獲取DOM對(duì)象后緩存到j(luò)s變量中，避免重復(fù)查找DOM數(shù)
2、適配手機(jī)不同分辨率最好用CSS3提供的media query（如果涉及到計(jì)算還是需要用到j(luò)s）
3、jQuery中css()方法可以接受多個(gè)樣式不需要每個(gè)樣式都寫(xiě)一遍 $("body").css({"width":"1px","height":"1px"})
4、ajax提交都需要做失敗處理
5、if..else中存在相同的代碼，應(yīng)該寫(xiě)在ifelse外
6、重復(fù)的代碼封裝成函數(shù)，方便復(fù)用
7、為了不污染全局作用域，建議將變量放在匿名函數(shù)中（注意某些情況需要在全局域中定義變量）
8、建議在定義變量時(shí)可一次性定義改域下所有要用到的變量，不用重復(fù)定義
9、$(".example").css("display","block")可以寫(xiě)成$(".example").show()；$(".example").css("display","none")可以寫(xiě)成$(".example").hide()；注意show()和hide()的使用方法。
10、使用鏈?zhǔn)綄?xiě)法，jQuery的一大特點(diǎn)，就是允許使用鏈?zhǔn)綄?xiě)法
$("div").find("h3").eq(2).html("Hello")采用鏈?zhǔn)綄?xiě)法時(shí)，jQuery自動(dòng)緩存每一步的結(jié)果，因此比非鏈?zhǔn)綄?xiě)法要快。根據(jù)測(cè)試，鏈?zhǔn)綄?xiě)法比（不使用緩存的）非鏈?zhǔn)綄?xiě)法，大約快了25%。

GPU云服務(wù)器云服務(wù)器前端規(guī)范前端規(guī)范文檔開(kāi)發(fā)規(guī)范 PHP開(kāi)發(fā)規(guī)范

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/115064.html

相關(guān)文章

淺談前端開(kāi)發(fā)規(guī)范

結(jié)構(gòu) 樣式行為分離模板只包含html文件，模板的書(shū)寫(xiě)順序相應(yīng)的命名規(guī)則 html：語(yǔ)義化css：類(lèi)名以功能或內(nèi)容命名樣式復(fù)用最好少于三級(jí) 在沒(méi)有必要的情況下避免元素選擇器疊加 Class、ID 使用屬行的書(shū)寫(xiě)順序性能 js：避免重復(fù)查找dom 三元操作符電梯if條件語(yǔ)句二元布爾操作符樣式寫(xiě)在一起變量聲明，保存在一個(gè)變量里，避免多次查找dom jQuery鏈?zhǔn)綄?xiě)法 1、獲...

phodal 2019-08-19 17:36 評(píng)論0 收藏0
淺談前端開(kāi)發(fā)規(guī)范

結(jié)構(gòu) 樣式行為分離模板只包含html文件，模板的書(shū)寫(xiě)順序相應(yīng)的命名規(guī)則 html：語(yǔ)義化css：類(lèi)名以功能或內(nèi)容命名樣式復(fù)用最好少于三級(jí) 在沒(méi)有必要的情況下避免元素選擇器疊加 Class、ID 使用屬行的書(shū)寫(xiě)順序性能 js：避免重復(fù)查找dom 三元操作符電梯if條件語(yǔ)句二元布爾操作符樣式寫(xiě)在一起變量聲明，保存在一個(gè)變量里，避免多次查找dom jQuery鏈?zhǔn)綄?xiě)法 1、獲...

mumumu 2019-08-01 15:04 評(píng)論0 收藏0
淺談前后端分離與實(shí)踐之 nodejs 中間層服務(wù)（二）

摘要：服務(wù)端任需要進(jìn)行校驗(yàn)來(lái)達(dá)到數(shù)據(jù)的可靠性前端的路由可能在服務(wù)端并不存在等等這一系列重用性的問(wèn)題。串行并行，大幅縮短請(qǐng)求時(shí)間。關(guān)于作者本人主頁(yè)本文部分圖片段落參考文章淘寶前后端分離實(shí)踐微信公眾號(hào)會(huì)不定期推送前端技術(shù)文章，歡迎關(guān)注一、背景書(shū)接上文，淺談前后端分離與實(shí)踐(一) 我們用mock服務(wù)器搭建起來(lái)了自己的前端數(shù)據(jù)模擬服務(wù)，前后端開(kāi)發(fā)過(guò)程中只需定義好接口規(guī)范，便可以相互進(jìn)行各自的開(kāi)發(fā)...

ddongjian0000 2019-08-21 17:13 評(píng)論0 收藏0
淺談前后端分離與實(shí)踐之 nodejs 中間層服務(wù)（二）

摘要：服務(wù)端任需要進(jìn)行校驗(yàn)來(lái)達(dá)到數(shù)據(jù)的可靠性前端的路由可能在服務(wù)端并不存在等等這一系列重用性的問(wèn)題。串行并行，大幅縮短請(qǐng)求時(shí)間。關(guān)于作者本人主頁(yè)本文部分圖片段落參考文章淘寶前后端分離實(shí)踐微信公眾號(hào)會(huì)不定期推送前端技術(shù)文章，歡迎關(guān)注一、背景書(shū)接上文，淺談前后端分離與實(shí)踐(一) 我們用mock服務(wù)器搭建起來(lái)了自己的前端數(shù)據(jù)模擬服務(wù)，前后端開(kāi)發(fā)過(guò)程中只需定義好接口規(guī)范，便可以相互進(jìn)行各自的開(kāi)發(fā)...

mochixuan 2019-08-01 17:51 評(píng)論0 收藏0
后端語(yǔ)言選型淺談

摘要：再往后來(lái)，也就是這種以事件循環(huán)常駐內(nèi)存為特點(diǎn)的后端平臺(tái)，姑且能算是第四代后端平臺(tái)。前不久回答了一個(gè)關(guān)于后端語(yǔ)言選型的問(wèn)題，寫(xiě)的回答也讓筆者有了很多感觸，因此在這里談?wù)撓伦约簩?duì)后端語(yǔ)言選型的心得體會(huì)，姑且算是拋磚引玉，希望大家能分享各自的心得。后端語(yǔ)言發(fā)展歷史 Web 后端語(yǔ)言的興起是從靜態(tài)網(wǎng)頁(yè)向動(dòng)態(tài)網(wǎng)頁(yè)的發(fā)展所產(chǎn)生的，最早的動(dòng)態(tài)頁(yè)面技術(shù)就是 CGI 技術(shù)，將客戶(hù)端的輸入交給 CGI...

xcc3641 2019-06-27 14:09 評(píng)論0 收藏0