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

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

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

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

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

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

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

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

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

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

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); //調(diào)用應(yīng)用邏輯處理函數(shù)
    }

這樣寫有什么好處呢？

當有不同的方式觸發(fā)相同的相同過程事件的時候，這時只需調(diào)用應(yīng)用邏輯處理函數(shù)即可。

應(yīng)用邏輯處理函數(shù)可以在不添加到事件的情況下多帶帶測試。

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

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

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

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

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

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

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

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

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

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

如果值為引用類型，則用instanceof 操作符檢查其構(gòu)造函數(shù)。

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

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

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

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

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

重復(fù)值：任何在多處用到的值。

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

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

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

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

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