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

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

當(dāng)你在寫這樣的代碼的時(shí)候，我想你應(yīng)該去找個(gè)js模板引擎來(lái)了。

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

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

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

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

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

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

每個(gè)web應(yīng)用程序都有相當(dāng)多的事件處理程序，監(jiān)聽(tīng)著大量不同的事件，然而，很少能有仔細(xì)將應(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ù)
    }

這樣寫有什么好處呢？

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

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

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

在一個(gè)js文件中，最多允許有一個(gè)全局變量，讓其他對(duì)象和函數(shù)包含在其中，因?yàn)檫^(guò)多的全局變量會(huì)消耗大量?jī)?nèi)存。

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

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

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

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

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

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

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

所于當(dāng)我們遇到與null作比較的代碼的時(shí)候，我們應(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ù)中找到對(duì)應(yīng)的代碼去修改，而每次修改邏輯代碼，都有可能引入錯(cuò)誤的風(fēng)險(xiǎn)。所以我們可以把數(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í)候就無(wú)需去動(dòng)邏輯函數(shù)了，甚至可以把Constans多帶帶一個(gè)文件。那么什么樣的數(shù)據(jù)需要抽出來(lái)做常量呢？

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

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

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

任何可能在以后會(huì)改變的值。

所有編程語(yǔ)言都需要可維護(hù)性良好的代碼，這個(gè)很重要，因?yàn)榇蟛糠珠_(kāi)發(fā)人員都花費(fèi)大量時(shí)間維護(hù)他人的代碼。為了減輕相互的負(fù)擔(dān)，從今天起我要做個(gè)好人，寫好代碼！ o(╯□╰)o

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