摘要：遍歷節(jié)點綁定事件利用事件代理文件的引用將文件的引用放在頭部，文件的引用放在尾部。

在學(xué)校敲代碼的時候，考慮的可能是怎么實現(xiàn)這個功能，怎么樣把功能做的酷一點，可是當(dāng)你進入了公司，你就會發(fā)現(xiàn)可能代碼把功能實現(xiàn)是一方面的，你代碼還需要良好的代碼風(fēng)格，命名規(guī)范，可讀性易于維護，以及性能等等，so出現(xiàn)了下面這篇文章（歡迎大家指出錯誤，侵刪）

按照慣例，ECMAScript標(biāo)識符采用駝峰大小寫格式
標(biāo)識符：就是指變量，函數(shù)，屬性的名字，或者是函數(shù)的參數(shù)
小駝峰式：第一個單詞首字母小寫，后面其他單詞首字母大寫；

eg:textHeight

大駝峰式：每一個單詞字母都大寫；

eg:TextHeigh

命名方法：小駝峰式命名
命名規(guī)范： 前綴名詞

eg: let minCount = 10  let price = 100

注：全局變量單詞全部大寫

eg:var PRICE = 100

命名方法：單詞全部大寫

eg: const PRICE = 100

函數(shù)的命名應(yīng)該能描繪出函數(shù)的作用和功能
命名方法：小駝峰式命名
命名規(guī)范： 前綴動詞

Eg: function getHeight(){};
function setHeight(){};

命名方法： 大駝峰式命名
命名規(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");

說明：單行注釋//
使用 ：與注釋代碼（文字）代碼之間保留一個空格

說明：多行注釋以 /* 開頭， */ 結(jié)尾
使用：若開始 /* 和結(jié)束*/都在一行，推薦采用單行注釋。若至少三行注釋時，第一行為 /*，最后行為 */

雖然html和js天生就需要交互，但是有些方法將其過于緊密的耦合在了一起，如下

點擊

如上事件處理程序?qū)傩灾档木o密耦合如果出現(xiàn)了js問題，就要判斷是出現(xiàn)在html部分上還是js文件，因此影響了可維護性,或者在js中創(chuàng)建大量的Dom結(jié)構(gòu)

body.innerHTML = "
";

如上代碼出現(xiàn)問題。定位到這個錯誤很困難，因為你首先需要看頁面源代碼查找插入的這段HTML，但是找不到，因為它是動態(tài)生成，如果你對數(shù)據(jù)或者布局更改也會要求更改js，所以html呈現(xiàn)應(yīng)該‘盡可能’的與js分離。

有的時候css對js的過于緊密的耦合
eg：觸發(fā)焦點時，改變style

element.style.color = ‘red’;

如果未來需要改變樣式表，css和js文件可能都需要修改，這就不利于開發(fā)人員維護了，所以兩個層次之間需要有清晰的劃分，讓耦合變得松散一些所以如下所示

element.className = ‘edit’;

只修改某個元素的css類，這樣js可以更改樣式類，但不會直接影響到元素的樣式，任何顯示問題都可以追溯到css而不是js,這樣會不會好很多

  document.addEventListener("keypress", function (event) {
      if (event.keyCode === 13) {
        var value = (Math.random() + 1) * 5;
        if (value < 7) {
          console.log(value);
        }
      }
    });

這個事件處理程序除了應(yīng)用邏輯還有事件處理，這樣方式的問題有其雙重性，首先除了通過這個事件之外沒有別的方法執(zhí)行此應(yīng)用邏輯，如果代碼出了問題，那么是在調(diào)用之前出了問題還是在應(yīng)用邏輯中出現(xiàn)的問題？那就會使得調(diào)試變得困難，其次如果后續(xù)事件需要同樣的邏輯，你就需要把代碼在copy一遍，so我們需要一個好的解決方法
解決辦法：將應(yīng)用邏輯和事件處理程序相分離，將應(yīng)用邏輯多帶帶封裝成一個函數(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);
      }
    });

語義化的意思就是從名稱中一眼就能看出內(nèi)容是什么，HTML標(biāo)簽就是通過淺顯易懂的元素名和屬性名一眼就能看出內(nèi)容和作用是什么，這樣有益于代碼更好的維護。
不過說到標(biāo)簽對于我們這種從學(xué)校初入到公司的菜鳥們最能想到的就是div標(biāo)簽+span標(biāo)簽了，還記得剛來公司讓做例子的時候，從標(biāo)簽的使用，到變量以及函數(shù)命名再到代碼之間的規(guī)范，沒有一個不讓我?guī)煾殿^疼，因為寫代碼的時候太隨意了，真的是太隨意了，雖然現(xiàn)在也有些隨意哈
如果讓我寫一個頁面我可能用的都是div標(biāo)簽，寫成之后連標(biāo)簽里的id名也只會div1 或者div2,顯然這樣的代碼是及其難維護的，這時如果把標(biāo)簽換成

,

等語義化的標(biāo)簽代碼是不是會清晰很多，像這樣如果頁面的導(dǎo)航欄是div，側(cè)邊欄也是div，唯一對div進行區(qū)別的就是id，如果代碼規(guī)范一點的程序猿，可能會

，如果隨意一點的不太注意代碼風(fēng)格的程序員可能就是這樣了

怎么樣，如果是你來維護這段代碼，過了一個月你還記的div1，div2，分別對應(yīng)什么了么，有沒有氣的想撞墻，哈哈，所以這個時候如果你用了html5標(biāo)簽會不會好很多

那下面對這幾個標(biāo)簽和用法大概的說一下

:定義文檔的頁眉
  

    
wecome
    
My name is da dan
  

規(guī)定獨立的自包含內(nèi)容（表示的是一個文檔，頁面，應(yīng)用或是網(wǎng)站中的一個獨立容器）
標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分，應(yīng)用的典型場景（文章的章節(jié)，論文的編導(dǎo)，標(biāo)簽對話框的標(biāo)簽頁）
注釋：sections標(biāo)簽與article標(biāo)簽有點容易搞混,article代表一個的完整的相關(guān)的內(nèi)容塊而section只能算是整體的一部分

    

      
不要熬夜
      

        
      
    
    
內(nèi)容...
    

      
評論區(qū)
      

        

          
評論者
          

            
          
        
        
評論內(nèi)容
      
    
  

so看完這個例子有沒有清晰一點

覺得還有一個挺好用的標(biāo)簽
,它規(guī)定獨立的流內(nèi)容（圖像，圖表，照片，代碼等）

盡量不要使用循環(huán)操作DOM的方式，而是在循環(huán)結(jié)束后一次性寫入。
eg：想在ul中動態(tài)的插入多個li子節(jié)點

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;
}

事件冒泡->事件不僅僅可以在時間目標(biāo)上處理，目標(biāo)的任何祖先節(jié)點上也可以處理。在祖先節(jié)點綁定事件，只需要操作一次DOM，可以通過事件流找到目標(biāo)節(jié)點，節(jié)省了遍歷子節(jié)點的時間，對于要綁定大量的子節(jié)點的時候，效率可想而知。

        
111
        
222
        
333
        
444

1.遍歷節(jié)點綁定事件：
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文件的引用放在尾部。
瀏覽器在渲染的過程中，遇到j(luò)s文件會暫停當(dāng)前的渲染進程，優(yōu)先執(zhí)行js的進程，而文檔渲染時至上而下的，如果把js放到文件頭部，則會影響接下來的DOM的渲染。典型的，在頭文件中用alert，瀏覽器就會在先彈出alert對話框，停止接下來的DOM渲染，會有白屏現(xiàn)象。還有一種情況是，js可能會改變DOM文檔的結(jié)構(gòu)，典型的有，document.write，這樣都會造成不必要的重繪和重排。
5.4減少重繪重排
5.4.1 Repaint(重繪)就是在一個元素的外觀被改變，但沒有改變布局(寬高)的情況下發(fā)生，如改變visibility、outline、背景色等等。
5.4.2 Reflow(重排)就是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證DOM樹上的所有其它結(jié)點的visibility屬性，這也是Reflow低效的原因。如：改變窗囗大小、改變文字大小、內(nèi)容的改變、瀏覽器窗口變化，style屬性的改變等等。如果Reflow的過于頻繁，CPU使用率就會噌噌的往上漲
在下面幾種情況會重排：
頁面初始渲染
添加/刪除可見DOM元素
改變元素位置
改變元素尺寸（寬、高、內(nèi)外邊距、邊框等）
改變元素內(nèi)容（文本或圖片等）
改變窗口尺寸
2.通過設(shè)置style屬性改變結(jié)點樣式的話，每設(shè)置一次都會導(dǎo)致一次reflow，所以最好通過設(shè)置class的方式； 有動畫效果的元素，它的position屬性應(yīng)當(dāng)設(shè)為fixed或absolute，這樣不會影響其它元素的布局；如果功能需求上不能設(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.樣式集中改變 可以添加一個類，樣式都在類中改變
3.可以使用absolute脫離文檔流。
4.使用 display:none ，不使用 visibility，也不要改變 它的 z-index
5.能用CSS3實現(xiàn)的就用css3實現(xiàn)。
5.5 其他：
合并圖片（css sprites精靈）
  合并CSS和JS文件
  縮小圖片的分辨率
  改變圖片的格式（png）
  降低圖片的保存質(zhì)量
等等

希望此篇文章對你們能有幫助啊，筆芯