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

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

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

eg:textHeight

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

eg:TextHeigh

命名方法：小駝峰式命名
命名規范： 前綴名詞

eg: let minCount = 10  let price = 100

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

eg:var PRICE = 100

命名方法：單詞全部大寫

eg: const PRICE = 100

函數的命名應該能描繪出函數的作用和功能
命名方法：小駝峰式命名
命名規范： 前綴動詞

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

命名方法： 大駝峰式命名
命名規范： 前綴名稱

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");

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

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

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

點擊

如上事件處理程序屬性值的緊密耦合如果出現了js問題，就要判斷是出現在html部分上還是js文件，因此影響了可維護性,或者在js中創建大量的Dom結構

body.innerHTML = "
";

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

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

element.style.color = ‘red’;

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

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

這個事件處理程序除了應用邏輯還有事件處理，這樣方式的問題有其雙重性，首先除了通過這個事件之外沒有別的方法執行此應用邏輯，如果代碼出了問題，那么是在調用之前出了問題還是在應用邏輯中出現的問題？那就會使得調試變得困難，其次如果后續事件需要同樣的邏輯，你就需要把代碼在copy一遍，so我們需要一個好的解決方法
解決辦法：將應用邏輯和事件處理程序相分離，將應用邏輯多帶帶封裝成一個函數

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

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

,

等語義化的標簽代碼是不是會清晰很多，像這樣如果頁面的導航欄是div，側邊欄也是div，唯一對div進行區別的就是id，如果代碼規范一點的程序猿，可能會

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

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

那下面對這幾個標簽和用法大概的說一下

:定義文檔的頁眉
  

    
wecome
    
My name is da dan
  

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

    

      
不要熬夜
      

        
      
    
    
內容...
    

      
評論區
      

        

          
評論者
          

            
          
        
        
評論內容
      
    
  

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

覺得還有一個挺好用的標簽
,它規定獨立的流內容（圖像，圖表，照片，代碼等）

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

1.循環操作DOM方式

 window.onload = function(){
　　var oUl = document.getElementById("ul");
for (var i = 0; i < 5; i++) {
   var oLi = document.createElement(“li”);
   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 += “li”;
   aLi += i；
   aLi += “li”;
}
oUl.innerHtml = aLi;
}

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

        
111
        
222
        
333
        
444

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

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