在學校敲程式碼的時候，考慮的可能是怎麼實現這個功能，怎麼樣把功能做的酷一點，可是當你進入了公司，你就會發現可能程式碼把功能實現是一方面的，你程式碼還需要良好的程式碼風格，命名規範，可讀性易於維護，以及效能等等，so出現了下面這篇文章（歡迎大家指出錯誤，侵刪）
1命名規則
按照慣例，ECMAScript識別符號采用駝峰大小寫格式
識別符號：就是指變數，函式，屬性的名字，或者是函式的引數
小駝峰式：第一個單詞首字母小寫，後面其他單詞首字母大寫；
eg:textHeight複製程式碼大駝峰式：每一個單詞字母都大寫；
eg:TextHeigh複製程式碼1.1變數
命名方法：小駝峰式命名
命名規範： 字首名詞
eg: let minCount = 10 let price = 100複製程式碼注：全域性變數單詞全部大寫
eg:var PRICE = 100複製程式碼1.2常量
命名方法：單詞全部大寫
eg: const PRICE = 100複製程式碼1.3 函式
函式的命名應該能描繪出函式的作用和功能
命名方法：小駝峰式命名
命名規範： 字首動詞
Eg: function getHeight(){};
function setHeight(){};複製程式碼1.4 類與建構函式
命名方法： 大駝峰式命名
命名規範： 字首名稱
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單行註釋
說明：單行註釋//
使用 ：與註釋程式碼（文字）程式碼之間保留一個空格
2.2多行註釋
說明：多行註釋以 /* 開頭， */ 結尾
使用：若開始 /* 和結束*/都在一行，推薦採用單行註釋。若至少三行註釋時，第一行為 /*，最後行為 */複製程式碼3 鬆散耦合
3.1html/js
雖然html和js天生就需要互動，但是有些方法將其過於緊密的耦合在了一起，如下
<button onClick="doSomething()">點選</button>複製程式碼如上事件處理程式屬性值的緊密耦合如果出現了js問題，就要判斷是出現在html部分上還是js檔案，因此影響了可維護性,或者在js中建立大量的Dom結構
body.innerHTML = '<div><ul><li></li><li></li></ul></div>';複製程式碼如上程式碼出現問題。定位到這個錯誤很困難，因為你首先需要看頁面原始碼查詢插入的這段HTML，但是找不到，因為它是動態生成，如果你對資料或者佈局更改也會要求更改js，所以html呈現應該‘儘可能’的與js分離。
3.2 css/js
有的時候css對js的過於緊密的耦合
eg：觸發焦點時，改變style
element.style.color = ‘red’;複製程式碼如果未來需要改變樣式表，css和js檔案可能都需要修改，這就不利於開發人員維護了，所以兩個層次之間需要有清晰的劃分，讓耦合變得鬆散一些所以如下所示
element.className = ‘edit’;複製程式碼只修改某個元素的css類，這樣js可以更改樣式類，但不會直接影響到元素的樣式，任何顯示問題都可以追溯到css而不是js,這樣會不會好很多
3.3應用邏輯/事件處理程式耦合
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);
}
});複製程式碼4語義化標籤
語義化的意思就是從名稱中一眼就能看出內容是什麼，HTML標籤就是通過淺顯易懂的元素名和屬性名一眼就能看出內容和作用是什麼，這樣有益於程式碼更好的維護。
不過說到標籤對於我們這種從學校初入到公司的菜鳥們最能想到的就是div標籤+span標籤了，還記得剛來公司讓做例子的時候，從標籤的使用，到變數以及函式命名再到程式碼之間的規範，沒有一個不讓我師傅頭疼，因為寫程式碼的時候太隨意了，真的是太隨意了，雖然現在也有些隨意哈
如果讓我寫一個頁面我可能用的都是div標籤，寫成之後連標籤裡的id名也只會div1 或者div2,顯然這樣的程式碼是及其難維護的，這時如果把標籤換成
<header>,<nav>,<article>,<sections>,<aside>,<footer>複製程式碼等語義化的標籤程式碼是不是會清晰很多，像這樣如果頁面的導航欄是div，側邊欄也是div，唯一對div進行區別的就是id，如果程式碼規範一點的程式猿，可能會
<div id="nav"></div>
<div id="aside"></div>複製程式碼，如果隨意一點的不太注意程式碼風格的程式設計師可能就是這樣了
<div id="div1"></div>
<div id="div2"></div>複製程式碼怎麼樣，如果是你來維護這段程式碼，過了一個月你還記的div1，div2，分別對應什麼了麼，有沒有氣的想撞牆，哈哈，所以這個時候如果你用了html5標籤會不會好很多
<nav></nav>
<aside>
<span>答案略</span>
</aside>複製程式碼那下面對這幾個標籤和用法大概的說一下
<header>:定義文件的頁首
<header>
<h1>wecome</h1>
<p>My name is da dan</p>
</header>複製程式碼<nav>:標記連結的導航
<nav>
<a href="home.index">Home</a>
<a href="personal.index">Personal</a>
</nav>>複製程式碼<article>規定獨立的自包含內容（表示的是一個文件，頁面，應用或是網站中的一個獨立容器）
<sections>標籤定義文件中的節（section、區段）。比如章節、頁首、頁尾或文件中的其他部分，應用的典型場景（文章的章節，論文的編導，標籤對話方塊的標籤頁）
註釋：sections標籤與article標籤有點容易搞混,article代表一個的完整的相關的內容塊而section只能算是整體的一部分
<article>
<header>
<h1>不要熬夜</h1>
<p>
<time pubdate datetime="2017/10/9"></time>
</p>
</header>
<p>內容...</p>
<section>
<h1>評論區</h1>
<article>
<header>
<p>評論者</p>
<p>
<time pubdate datetime="2017/10/10"></time>
</p>
</header>
<p>評論內容</p>
</article>
</section>
</article>複製程式碼so看完這個例子有沒有清晰一點
<aside>側欄標籤（可用作文章的側欄，廣告，相關文章，新聞的連結）
<aside>
<h4>learn tools</h4>
<p>小D詞典</p>
<p>開心詞場</p>
</aside>複製程式碼<footer>定義文件或節的頁尾，頁尾通常包含作者資訊，版權資訊，使用條款連結，聯絡資訊等等
<footer>
<p>Posted by: author</p>
</footer>複製程式碼覺得還有一個挺好用的標籤<figure>,它規定獨立的流內容（影像，圖表，照片，程式碼等）<figcaption>定義figure元素的標題
<figure>
<figcaption>妹子</figcaption>
<img src="girl.jpg" width="350" height="234" />
</figure>複製程式碼5效能優化
5.1減少DOM的操作
儘量不要使用迴圈操作DOM的方式，而是在迴圈結束後一次性寫入。
eg：想在ul中動態的插入多個li子節點
<ul id="ul">
</ul>複製程式碼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;
}複製程式碼5.2運用事件代理
事件冒泡->事件不僅僅可以在時間目標上處理，目標的任何祖先節點上也可以處理。在祖先節點繫結事件，只需要操作一次DOM，可以通過事件流找到目標節點，節省了遍歷子節點的時間，對於要繫結大量的子節點的時候，效率可想而知。
<ul id="ul">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>複製程式碼1.遍歷節點繫結事件：
window.onload = function(){
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onclick = function(){
alert(123);
}
}
}
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）
降低圖片的儲存質量
等等
希望此篇文章對你們能有幫助啊，筆芯