相反地，在javascript中也不能包含過多的HTMl

function insertMsg(msg){
    var container = document.getElementById("container");
    container.innerHtml = "
" + msg + "
"
}

當你在寫這樣的代碼的時候，我想你應該去找個js模板引擎來了。

對動態生成的HTML，對書寫CSS布局，定位錯誤都比較難把控。

上面說了，CSS和JS都應該各司其職，不能有太大的親密動作，秀恩愛，死得快 囧~~~。
這個問題并不能說完全解耦css和js,因為在現代web應用中常常需要javascript來更改樣式，但是我們還是盡量使他們分離。

// CSS對JS的緊密耦合
element.style.color = "red";
element.style.backgroundColor= "blue";

這樣的代碼在以后修改樣式的時候需要同時修改CSS和JS,可麻煩了。

//這樣就ok了
element.className = "color"; //color是樣式類

還有一個就是不能在CSS中寫CSS表達式，這應該是都知道的了。

每個web應用程序都有相當多的事件處理程序，監聽著大量不同的事件，然而，很少能有仔細將應用邏輯從事件處理程序中分離的，如下：

function checkValue(e){
   e = e || window.event;
   var target = e.target || e.srcElement;
   if(target.value.length < 5){
      //省略一堆邏輯處理代碼...
   }
}

將上面的代碼重寫為：

   function checkValue(value){
       if(value.length < 5){
         //省略一堆邏輯處理代碼...
       }
   }
   function handleBlur(e){
       e = e || window.event;
       var target = e.target || e.srcElement;
       checkValue(target.value); //調用應用邏輯處理函數
    }

這樣寫有什么好處呢？

當有不同的方式觸發相同的相同過程事件的時候，這時只需調用應用邏輯處理函數即可。

應用邏輯處理函數可以在不添加到事件的情況下多帶帶測試。

在企業環境中創建的web應用往往同時由大量人員一同創作。在這種情況下的目標是確保每個人所使用的瀏覽器環境都有一致和不變的規則，因此，我們需要堅持一下的一些編程實踐：

在一個js文件中，最多允許有一個全局變量，讓其他對象和函數包含在其中，因為過多的全局變量會消耗大量內存。

//兩個全局變量
var name = "jozo";
function sayName(){
  alert("jozo");
}

上面的代碼有兩個全局變量，變量name和函數sayName()，其實可以創建一個變量包含它們：

//一個全局變量 --推薦
var person = {
    name:"jozo",
    sayName : function(){
        alert(this.name);
    }
}

這樣一個全局變量延伸開來就是‘空間的概念’了，不會與其他功能產生沖突，有助于消除功能作用域之間的混淆。

function sortArray(values){
    if(values != null){
        values.sort(比較函數);
    }
}

上面代碼中的if語句應該檢測values是否是數組，但如果與null作比較的話，字符串，數字等都會通過，導致函數拋出錯誤。這里是數組，那么我們就應該檢測其是否為數組：

function sortArray(values){
    if(values instanceof Array){
        values.sort(比較函數);
    }
}

所于當我們遇到與null作比較的代碼的時候，我們應該用下面的技術替換：

如果值為引用類型，則用instanceof 操作符檢查其構造函數。

如果值是基本類型，則用typeof操作符檢查其類型。

function validate(value){
    if(!value){
        alert("不存在");
        location.href = "/errors/invalid.php";
    }
}

現在，我想把‘不存在’改為‘該數據不存在！’，把跳轉路徑也改了，我得回到函數中找到對應的代碼去修改，而每次修改邏輯代碼，都有可能引入錯誤的風險。所以我們可以把數據多帶帶定義為常量，與應用邏輯分離：

var Constans = {
    ERRORMSG: "不存在",
    ERRORPAGE:"/errors/invalid.php"
};
function validate(value){
    if(!value){
        alert(Constans.ERRORMSG );
        location.href = Constans.ERRORPAGE ;
    }
}

這樣我們修改靜態文本內容的時候就無需去動邏輯函數了，甚至可以把Constans多帶帶一個文件。那么什么樣的數據需要抽出來做常量呢？

重復值：任何在多處用到的值。

用戶界面字符串：任何用于顯示給用戶提示信息的字符串。

URLs：在WEB項目中，資源路徑可能經常變更。在一個公共的地方存起來，修改起來更容易！

任何可能在以后會改變的值。

所有編程語言都需要可維護性良好的代碼，這個很重要，因為大部分開發人員都花費大量時間維護他人的代碼。為了減輕相互的負擔，從今天起我要做個好人，寫好代碼！ o(╯□╰)o

ok，寫了一遍，我印象又加深了！以上內容整理自《JavaScript高級程序設計》，覺得不錯點個贊唄。下一篇將整理如何書寫提高性能的JS代碼。謝謝閱讀……