不要熬夜
內(nèi)容...
評(píng)論區(qū)
評(píng)論者
評(píng)論內(nèi)容
摘要:遍歷節(jié)點(diǎn)綁定事件利用事件代理文件的引用將文件的引用放在頭部,文件的引用放在尾部。
在學(xué)校敲代碼的時(shí)候,考慮的可能是怎么實(shí)現(xiàn)這個(gè)功能,怎么樣把功能做的酷一點(diǎn),可是當(dāng)你進(jìn)入了公司,你就會(huì)發(fā)現(xiàn)可能代碼把功能實(shí)現(xiàn)是一方面的,你代碼還需要良好的代碼風(fēng)格,命名規(guī)范,可讀性易于維護(hù),以及性能等等,so出現(xiàn)了下面這篇文章(歡迎大家指出錯(cuò)誤,侵刪)
1命名規(guī)則按照慣例,ECMAScript標(biāo)識(shí)符采用駝峰大小寫格式
標(biāo)識(shí)符:就是指變量,函數(shù),屬性的名字,或者是函數(shù)的參數(shù)
小駝峰式:第一個(gè)單詞首字母小寫,后面其他單詞首字母大寫;
eg:textHeight
大駝峰式:每一個(gè)單詞字母都大寫;
eg:TextHeigh1.1變量
命名方法:小駝峰式命名
命名規(guī)范: 前綴名詞
eg: let minCount = 10 let price = 100
注:全局變量單詞全部大寫
eg:var PRICE = 1001.2常量
命名方法:?jiǎn)卧~全部大寫
eg: const PRICE = 1001.3 函數(shù)
函數(shù)的命名應(yīng)該能描繪出函數(shù)的作用和功能
命名方法:小駝峰式命名
命名規(guī)范: 前綴動(dòng)詞
Eg: function getHeight(){}; function setHeight(){};1.4 類與構(gòu)造函數(shù)
命名方法: 大駝峰式命名
命名規(guī)范: 前綴名稱
eg: class Person{ constructor(name){ this.name = name; } } var person = new Person("dadan");
eg:function Person(name){ this.name = name; } var person = new Person("dadan");2 注釋 2.1單行注釋
說明:?jiǎn)涡凶⑨?/
使用 :與注釋代碼(文字)代碼之間保留一個(gè)空格
說明:多行注釋以 /* 開頭, */ 結(jié)尾 使用:若開始 /* 和結(jié)束*/都在一行,推薦采用單行注釋。若至少三行注釋時(shí),第一行為 /*,最后行為 */3 松散耦合 3.1html/js
雖然html和js天生就需要交互,但是有些方法將其過于緊密的耦合在了一起,如下
如上事件處理程序?qū)傩灾档木o密耦合如果出現(xiàn)了js問題,就要判斷是出現(xiàn)在html部分上還是js文件,因此影響了可維護(hù)性,或者在js中創(chuàng)建大量的Dom結(jié)構(gòu)
body.innerHTML = "";
如上代碼出現(xiàn)問題。定位到這個(gè)錯(cuò)誤很困難,因?yàn)槟闶紫刃枰错撁嬖创a查找插入的這段HTML,但是找不到,因?yàn)樗莿?dòng)態(tài)生成,如果你對(duì)數(shù)據(jù)或者布局更改也會(huì)要求更改js,所以html呈現(xiàn)應(yīng)該‘盡可能’的與js分離。
3.2 css/js有的時(shí)候css對(duì)js的過于緊密的耦合
eg:觸發(fā)焦點(diǎn)時(shí),改變style
element.style.color = ‘red’;
如果未來需要改變樣式表,css和js文件可能都需要修改,這就不利于開發(fā)人員維護(hù)了,所以兩個(gè)層次之間需要有清晰的劃分,讓耦合變得松散一些所以如下所示
element.className = ‘edit’;
只修改某個(gè)元素的css類,這樣js可以更改樣式類,但不會(huì)直接影響到元素的樣式,任何顯示問題都可以追溯到css而不是js,這樣會(huì)不會(huì)好很多
3.3應(yīng)用邏輯/事件處理程序耦合document.addEventListener("keypress", function (event) { if (event.keyCode === 13) { var value = (Math.random() + 1) * 5; if (value < 7) { console.log(value); } } });
這個(gè)事件處理程序除了應(yīng)用邏輯還有事件處理,這樣方式的問題有其雙重性,首先除了通過這個(gè)事件之外沒有別的方法執(zhí)行此應(yīng)用邏輯,如果代碼出了問題,那么是在調(diào)用之前出了問題還是在應(yīng)用邏輯中出現(xiàn)的問題?那就會(huì)使得調(diào)試變得困難,其次如果后續(xù)事件需要同樣的邏輯,你就需要把代碼在copy一遍,so我們需要一個(gè)好的解決方法
解決辦法:將應(yīng)用邏輯和事件處理程序相分離,將應(yīng)用邏輯多帶帶封裝成一個(gè)函數(shù)
function getValue(value){ if(value < 7){ console.log(value); } document.addEventListener("keypress", function (event) { if (event.keyCode === 13) { var value = (Math.random() + 1) * 5; getValue(value); } });4語義化標(biāo)簽
語義化的意思就是從名稱中一眼就能看出內(nèi)容是什么,HTML標(biāo)簽就是通過淺顯易懂的元素名和屬性名一眼就能看出內(nèi)容和作用是什么,這樣有益于代碼更好的維護(hù)。
不過說到標(biāo)簽對(duì)于我們這種從學(xué)校初入到公司的菜鳥們最能想到的就是div標(biāo)簽+span標(biāo)簽了,還記得剛來公司讓做例子的時(shí)候,從標(biāo)簽的使用,到變量以及函數(shù)命名再到代碼之間的規(guī)范,沒有一個(gè)不讓我?guī)煾殿^疼,因?yàn)閷懘a的時(shí)候太隨意了,真的是太隨意了,雖然現(xiàn)在也有些隨意哈
如果讓我寫一個(gè)頁面我可能用的都是div標(biāo)簽,寫成之后連標(biāo)簽里的id名也只會(huì)div1 或者div2,顯然這樣的代碼是及其難維護(hù)的,這時(shí)如果把標(biāo)簽換成
,
等語義化的標(biāo)簽代碼是不是會(huì)清晰很多,像這樣如果頁面的導(dǎo)航欄是div,側(cè)邊欄也是div,唯一對(duì)div進(jìn)行區(qū)別的就是id,如果代碼規(guī)范一點(diǎn)的程序猿,可能會(huì)
,如果隨意一點(diǎn)的不太注意代碼風(fēng)格的程序員可能就是這樣了
怎么樣,如果是你來維護(hù)這段代碼,過了一個(gè)月你還記的div1,div2,分別對(duì)應(yīng)什么了么,有沒有氣的想撞墻,哈哈,所以這個(gè)時(shí)候如果你用了html5標(biāo)簽會(huì)不會(huì)好很多
那下面對(duì)這幾個(gè)標(biāo)簽和用法大概的說一下
:定義文檔的頁眉 wecome
My name is da dan
規(guī)定獨(dú)立的自包含內(nèi)容(表示的是一個(gè)文檔,頁面,應(yīng)用或是網(wǎng)站中的一個(gè)獨(dú)立容器) 標(biāo)簽定義文檔中的節(jié)(section、區(qū)段)。比如章節(jié)、頁眉、頁腳或文檔中的其他部分,應(yīng)用的典型場(chǎng)景(文章的章節(jié),論文的編導(dǎo),標(biāo)簽對(duì)話框的標(biāo)簽頁) 注釋:sections標(biāo)簽與article標(biāo)簽有點(diǎn)容易搞混,article代表一個(gè)的完整的相關(guān)的內(nèi)容塊而section只能算是整體的一部分 不要熬夜
內(nèi)容...
評(píng)論區(qū)
評(píng)論者
評(píng)論內(nèi)容
so看完這個(gè)例子有沒有清晰一點(diǎn)
覺得還有一個(gè)挺好用的標(biāo)簽5性能優(yōu)化 5.1減少DOM的操作
盡量不要使用循環(huán)操作DOM的方式,而是在循環(huán)結(jié)束后一次性寫入。
eg:想在ul中動(dòng)態(tài)的插入多個(gè)li子節(jié)點(diǎn)
1.循環(huán)操作DOM方式
window.onload = function(){ var oUl = document.getElementById("ul"); for (var i = 0; i < 5; i++) { var oLi = document.createElement(“l(fā)i”); oLi.innerText = i; oUl.appendChild(oLi); } }
2.一次性插入
window.onload = function(){ var oUl = document.getElementById("ul"); var aLi = “”; for (var i = 0; i < 5; i++) { aLi += “l(fā)i”; aLi += i; aLi += “l(fā)i”; } oUl.innerHtml = aLi; }5.2運(yùn)用事件代理
事件冒泡->事件不僅僅可以在時(shí)間目標(biāo)上處理,目標(biāo)的任何祖先節(jié)點(diǎn)上也可以處理。在祖先節(jié)點(diǎn)綁定事件,只需要操作一次DOM,可以通過事件流找到目標(biāo)節(jié)點(diǎn),節(jié)省了遍歷子節(jié)點(diǎn)的時(shí)間,對(duì)于要綁定大量的子節(jié)點(diǎn)的時(shí)候,效率可想而知。
1.遍歷節(jié)點(diǎn)綁定事件:
window.onload = function(){
var oUl = document.getElementById("ul1"); var aLi = oUl.getElementsByTagName("li"); for(var i=0;i}
2.利用事件代理:window.onload = function(){ var oUl = document.getElementById("ul"); oUl.onclick = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == "li"){ alert(123); alert(target.innerHTML); } } }5.3文件的引用:將css文件的引用放在頭部,js文件的引用放在尾部。
5.4減少重繪重排
瀏覽器在渲染的過程中,遇到j(luò)s文件會(huì)暫停當(dāng)前的渲染進(jìn)程,優(yōu)先執(zhí)行js的進(jìn)程,而文檔渲染時(shí)至上而下的,如果把js放到文件頭部,則會(huì)影響接下來的DOM的渲染。典型的,在頭文件中用alert,瀏覽器就會(huì)在先彈出alert對(duì)話框,停止接下來的DOM渲染,會(huì)有白屏現(xiàn)象。還有一種情況是,js可能會(huì)改變DOM文檔的結(jié)構(gòu),典型的有,document.write,這樣都會(huì)造成不必要的重繪和重排。5.4.1 Repaint(重繪)就是在一個(gè)元素的外觀被改變,但沒有改變布局(寬高)的情況下發(fā)生,如改變visibility、outline、背景色等等。
5.4.2 Reflow(重排)就是DOM的變化影響到了元素的幾何屬性(寬和高),瀏覽器會(huì)重新計(jì)算元素的幾何屬性,會(huì)使渲染樹中受到影響的部分失效,瀏覽器會(huì)驗(yàn)證DOM樹上的所有其它結(jié)點(diǎn)的visibility屬性,這也是Reflow低效的原因。如:改變窗囗大小、改變文字大小、內(nèi)容的改變、瀏覽器窗口變化,style屬性的改變等等。如果Reflow的過于頻繁,CPU使用率就會(huì)噌噌的往上漲
在下面幾種情況會(huì)重排:
頁面初始渲染
添加/刪除可見DOM元素
改變?cè)匚恢?br>改變?cè)爻叽纾▽挕⒏摺?nèi)外邊距、邊框等)
改變?cè)貎?nèi)容(文本或圖片等)
改變窗口尺寸
2.通過設(shè)置style屬性改變結(jié)點(diǎn)樣式的話,每設(shè)置一次都會(huì)導(dǎo)致一次reflow,所以最好通過設(shè)置class的方式; 有動(dòng)畫效果的元素,它的position屬性應(yīng)當(dāng)設(shè)為fixed或absolute,這樣不會(huì)影響其它元素的布局;如果功能需求上不能設(shè)置position為fixed或absolute,那么就權(quán)衡速度的平滑性。
怎么減少重排?說一下我的方法:1.分離讀寫操作 var curLeft=div.offsetLeft; var curTop=div.offsetTop; div.style.left=curLeft+1+"px"; div.style.top=curTop+1+"px";2.樣式集中改變 可以添加一個(gè)類,樣式都在類中改變
5.5 其他:
3.可以使用absolute脫離文檔流。
4.使用 display:none ,不使用 visibility,也不要改變 它的 z-index
5.能用CSS3實(shí)現(xiàn)的就用css3實(shí)現(xiàn)。合并圖片(css sprites精靈)
合并CSS和JS文件
縮小圖片的分辨率
改變圖片的格式(png)
降低圖片的保存質(zhì)量
等等
希望此篇文章對(duì)你們能有幫助啊,筆芯
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/89208.html
摘要:遍歷節(jié)點(diǎn)綁定事件利用事件代理文件的引用將文件的引用放在頭部,文件的引用放在尾部。 在學(xué)校敲代碼的時(shí)候,考慮的可能是怎么實(shí)現(xiàn)這個(gè)功能,怎么樣把功能做的酷一點(diǎn),可是當(dāng)你進(jìn)入了公司,你就會(huì)發(fā)現(xiàn)可能代碼把功能實(shí)現(xiàn)是一方面的,你代碼還需要良好的代碼風(fēng)格,命名規(guī)范,可讀性易于維護(hù),以及性能等等,so出現(xiàn)了下面這篇文章(歡迎大家指出錯(cuò)誤,侵刪) showImg(https://segmentfaul...
摘要:遍歷節(jié)點(diǎn)綁定事件利用事件代理文件的引用將文件的引用放在頭部,文件的引用放在尾部。 在學(xué)校敲代碼的時(shí)候,考慮的可能是怎么實(shí)現(xiàn)這個(gè)功能,怎么樣把功能做的酷一點(diǎn),可是當(dāng)你進(jìn)入了公司,你就會(huì)發(fā)現(xiàn)可能代碼把功能實(shí)現(xiàn)是一方面的,你代碼還需要良好的代碼風(fēng)格,命名規(guī)范,可讀性易于維護(hù),以及性能等等,so出現(xiàn)了下面這篇文章(歡迎大家指出錯(cuò)誤,侵刪) showImg(https://segmentfaul...
摘要:大學(xué),光學(xué)工程研究生畢業(yè),和程序猿完全不搭邊。那怎么辦,試著學(xué)一學(xué)唄,學(xué)習(xí)才是程序猿的天性。所以我在想程序猿是不是都需要新知識(shí)刺激一下,才能保持興奮的頭腦。有句話說的很對(duì)程序猿就像好奇的貓,追著毛球的線頭玩,最后一個(gè)毛球在腦袋里攪漿糊。 說說我自己的經(jīng)歷。211大學(xué),光學(xué)工程研究生畢業(yè),和程序猿完全不搭邊。 畢業(yè)后進(jìn)了成都某國字頭研究所,在行業(yè)里摸爬滾打了四年,2018年機(jī)緣巧合在家養(yǎng)...
閱讀 2600·2021-11-15 11:38
閱讀 2618·2021-11-04 16:13
閱讀 17981·2021-09-22 15:07
閱讀 1014·2019-08-30 15:55
閱讀 3261·2019-08-30 14:15
閱讀 1663·2019-08-29 13:59
閱讀 3207·2019-08-28 18:28
閱讀 1575·2019-08-23 18:29