本文將詳細介紹JS編程風格的幾個要點

松耦合

當修改一個組件而不需要更改其他組件時，就做到了松耦合

1、將JS從CSS中抽離：不要使用CSS表達式

//不好的做法.box{width: expression(document.body.offsetWidth + 'px')}

2、將CSS從JS中抽離：通過JS修改CSS樣式時，使用className或classList，不要逐條修改style樣式

//不好的做法一ele.style.color = 'red';ele.style.left= '10px';//不好的做法二ele.style.cssText ='color:red;left:10px;';

.reveal{color:red;left:10px;}//好的做法一ele.className += 'reveal';//好的做法二ele.classList.add('reveal');

3、將JS從HTML中抽離：從JS文件放入外置文件中

4、將HTML從JS中抽離：不要在innerHTML中拼接DOM結構，而是使用字符串模板，如handlerbars

全局變量

創建全局變量被認為是糟糕的實踐，尤其在團隊開發的大背景下更是問題多多。隨著代碼量的增長，全局變量會導致一些非常重要的可維護性難題，全局變量越多，引入錯誤的概率會變得越高

一般而言，有如下三種解決辦法

1、零全局變量

實現方法是使用一個立即調用函數IIFE并將所有腳本放置其中

(function(){ var doc = win.document;})(window);

這種模式的使用場景有限，只要代碼需要被其他的代碼所依賴，或者需要在運行中被不斷擴展或修改，就不能使用這種方式

2、單全局變量和命名空間

依賴盡可能少的全局變量，即只創建一個全局變量，使用單變量模式，如YUI或jQuery

單全局變量，即所創建的這個唯一全局對象名是獨一無二的，并將所有的功能代碼都掛載到這個全局對象上。因此，每個可能的全局變量，都成為唯一全局變量的屬性，從而不會創建多個全局變量

命名空間是簡單的通過全局對象的單一屬性表示的功能性分組。比如Y.DOM下的所有方法都是和DOM操作相關的，Y.Event下的所有方法都是和事件相關的。常見的約定是每個文件中都通過新的全局對象來聲明自己的命名空間

3、使用模塊

模塊是一種通用的功能片段，它并沒有創建新的全局變量或命名空間。相反，所有的這些代碼都存放于一個表示執行一個任務或發布一個接口的單函數中。可以用一個名稱來表示這個模塊，同樣這個模塊可以依賴其他模塊

事件處理

將事件處理相關的代碼和事件環境耦合在一起，導致可維護性很糟糕

1、隔離應用邏輯

將應用邏輯從所有事件處理程序中抽離出來是一種最佳實踐，將應用邏輯和事件處理的代碼拆分開來

//不好的做法function handleClick(event){ var popup = document.getElementById('popup'); popup.style.left = event.clientX + 'px'; popup.style.top = event.clientY + 'px'; popup.className = 'reveal';}addListener(element,'click',handleClick);//好的做法var MyApplication = { handleClick: function(event){  this.showPopup(event); }, showPopup: function(event){  var popup = document.getElementById('popup');  popup.style.left = event.clientX + 'px';  popup.style.top = event.clientY + 'px';  popup.className = 'reveal'; }};addListener(element,'click',function(event){ MyApplication.handleClick(event);});