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

phodal 發(fā)布于2019-08-19 17:36 / 1341人閱讀

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

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

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78682.html

相關(guān)文章

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

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

Luosunce 2019-08-30 12:47 評論0 收藏0
淺談前端開發(fā)規(guī)范

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

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

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

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

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

mochixuan 2019-08-01 17:51 評論0 收藏0
后端語言選型淺談

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

xcc3641 2019-06-27 14:09 評論0 收藏0