第五章:高質量的Javascript

這章的內容我看的最久,這是跟我js基礎沒打好有著莫大的關係，但是還是耐著性子看完了， 不懂的東西都是百度上搜索，理解後再繼續。下面是記錄下來的筆記。

1）如何避免JS衝突

A:匿名函式

在多人合作一個網站時，每個人都會寫自己的JS程式碼，定義變數的時候有可能會引起命名衝突，如何避免這種衝突隱患呢？

一種最簡單有效的辦法是“匿名函式”將指令碼包起來，讓變數的作用域控制在匿名函式之內。

匿名函式：(function (){})() 前面的括號內是函式體，後面的()表示執行。

如：(function(){

　　var name,user="test";      //包含在這個匿名函式中的變數，作用域不再是window,而是侷限在函式內部。 因為各自包在不同的匿名函式內，也就不再互相沖突了。

　　})();

用匿名函式將指令碼包起來，可以有效的控制全域性變數，避免衝突隱患。

B:解決匿名函式之間的通訊問題

上面的匿名函式確實解決了衝突,但是如果兩個程式碼段之間需要訪問彼此的變數,那就被分隔開了,沒法訪問對方作用域中的變數.

一個比較好的解決辦法是"在window的作用域下定義一個全域性變數",但是從上面的衝突來看,全域性變數是引起衝突的殺手,如果又這樣定義,就違背了我們使用匿名函式的初衷,所以應該嚴格控制全域性變數的數量!

為了控制全域性變數的數量,用Hash物件作為全域性變數。  var GLOBAl={};  //一個物件型別的變數作為全域性變數，擴充套件性好

定義好物件型別變數後,在匿名函式A中定義GLOBAL的屬性：GLOBAL.str1="aaa";   在匿名函式B中可以直接訪問var b = BLOBAl.str1;

這樣又出現了一個問題，當在匿名函式B中它也定義一個屬性BLOBAl.str1="bbb"; 這個時候就會把A塊中的屬性str1給覆蓋掉.如何避免這種衝突呢？不可能每個開發者在使用GLOBAL物件之前，都要查詢一下綁定了哪些屬性。

這時，名稱空間就出現了，它是一種特殊的字首，在js中它其實是通過一個{}物件來實現的。我們可以給每個匿名函式宣告不同的名稱空間，然後每個匿名函式中GLOBAL物件的屬性都不要直接掛在GLOBAl物件上，而是掛在此匿名函式的名稱空間下，既：window全域性的GLOBAL.名稱空間.屬性變數  ,這樣申明屬性名稱的時候，即使同名，空間不一樣也不會引起衝突。如：GLOBAL.A={};// 定義名稱空間； GLOBAL.A.str1="aaa";//定義屬性變數

複雜的匿名函式中，你還可以生產二級名稱空間，如GLOBAL.A={};//一級名稱空間，GLOBAL.A.CAT={};GLOBAL.A.DOG={};//二級名稱空間；

生成名稱空間是一個很常用的功能，可以將其封裝為一個函式。

var GLOBAL={};

GLOBAL.namespace=function(str){

　　var arr=str.split("."),o=GLOBAL;

　　for(i=(arr[0]=="GLOBAL")?1:0; i<arr.length; i++){

　　　　o[arr[i]]=o[arr[i]] || {};

　　　　o=o[arr[i]];

　　}

}    

呼叫： GLOBAL.namespace(A.DOG);      GLOBAL.namespace(GLOBAL.B);

總結:解決js衝突-------名稱空間+全域性變數+匿名函式 很好的結合使用才能更好的解決衝突。

C:註釋

新增必要的程式碼註釋，可大大提高可維護性，對團隊合作來說，是很重要的。

註釋新增的資訊包括：功能說明；工程師姓名；工程師聯絡方式；程式碼最後修改時間；

讓JS不產生衝突，需要避免全域性變數的泛濫，合理使用名稱空間，以及給程式碼添加註釋。

2）JS程式碼程式統一入口---------window.onload和DOMready

JS從功能上分為兩部分：1 框架部分（提供的是對JS程式碼的組織作用，包括定義全域性變數，名稱空間等，和具體的應用無關，該部分被每個頁面都包括的）---base層，common層；

                               2 應用部分（頁面功能邏輯的程式碼段，不同頁面有不同的功能，不同頁面應用部分的程式碼也不同）---page層；

而應用部分的程式碼最好包在一個約定好的入口函式裡，（程式統一入口，是針對js應用部分來說的），一般初始化的部分會放在一個統一的函式function init(){}中,然後在頁面完全載入完畢後觸發；

window.onload：需要在頁面完全載入完成時才會觸發，包括圖片，flash等富媒體，

DOMReady:只需要判斷頁面內所有的DOM節點是否已經完成載入，至於節點的內容載入是否完成，他並不關心。

所以DOMReady觸發的速度比window.onload快，它比window.onload更適合用來呼叫初始化函式。【我一般使用jquery,所以頁面載入完畢會用$(fuction(){...});或$(document).ready(function(){...});】

另外一種模擬Ready的效果是將初始化的js程式碼塊 放在body結束標籤的前面js ...</body>，這樣會按照順序來載入。

3)CSS放在頁頭，JS放在頁尾

瀏覽器載入網頁，載入到JS時，由於指令碼比較多，而html程式碼還沒有載入，這是頁面會顯示空白，指令碼阻塞了html的載入，等到毫不容易載入完成了，有時候會發現這些網頁元素沒有樣式，所以一個好的習慣是，CSS放在頁頭，JS放在頁尾（先載入css,再載入html,再載入js.） 這樣就能適時的將介面呈現給使用者，減少頁面空白的時間。

4）引入編譯的概念---------檔案壓縮

JS壓縮通常的做法是去掉空格和換行，去掉註釋，將複雜變數名替換為簡單的變數名；壓縮後的js檔案的確變小了，但是壓縮後的檔案無法反壓縮恢復成原來的模樣。

壓縮命名規則：原名.js    壓縮後的名為：原名-min.js

5)js 如何分層----------（為了使程式碼更清晰，減少冗餘，提高程式碼重用率）

和css分層一樣：base層：最低端，兩個職責：1：不同瀏覽器之間js的差異提供統一介面；2：擴充套件js語言底層提供的介面，比如tostring...  

　　　　　　　　　　　　base層是給common層和page層提供介面的。

common層:提供可複用的元件，和頁面內具體功能無關。common層的功能是給page層用的；

　　　　　　　　page層：最頂端，該層主要是完成各個頁面內的功能需求。

A:base層

瑣碎知識點：

1：IE和FF下獲取childNodes會不一樣，因為FF會將包括空白、換行等文字資訊業當做childNodes中的一員，而IE會忽略它，只將DOM節點作為childNodes的一員。

2：document.all是IE支援的屬性，FF 不支援，通常也可以用來判斷瀏覽器的種類。

3：nextSibling:獲取某個節點的下一個同級節點。

獲得某個父節點下面的子節點，然而瀏覽器不一樣，為了相容，會根據瀏覽器做出一些處理，將處理封裝成函式，像這類函式將放到base層。如：getnextnode(node)

4：透明度：IE通過濾鏡實現，FF通過css的opacity屬性實現。node.style.filter='alpha(opacity='3')'; nodel.style.opacity=0.3;

5：event:  IE中event物件是window的屬性，作用於全域性作用域，在FF中，event是作為事件的引數存在。

一般 function(e){e=window.event||e;}//這樣e在IE和FF下都指向event物件。

event物件的部分屬性名在IE和FF下也是不同的，比如"觸發事件的物件（標籤）"在IE下通過srcElement屬性訪問，在FF下通過target訪問

var element= e.srcElement ||e.target;

6： 冒泡：兩個重疊的標籤點選其中一個時，另外一個也會被觸發點選事件，JS 將這種先觸發子容器監聽事件，再觸發父容器監聽事件的現象稱為冒泡。

    為了業務需要，我們需要阻止事件冒泡，在IE中通過設定event物件的cancelBubble屬性為true實現，在FF下通過呼叫Event物件的stopPropagation方法實現的。

if(document.all){

 　　e.cancelBubble=true;//IE

}else{

　　e.stopPropagation();//FF

}

7：on、attachEvent和addEventListener

我們在定義事件時，往往on**只能定義一次，如果再次定義，就會覆蓋前面定義好的方法。最常見的為onclick事件。

on***的監聽方式沒有疊加效果，最後定義的on***會將前面的事件覆蓋掉。

attachEvent(IE支援的方法)、addEventListener(FF支援的方法)，他們支援監聽處理函式的疊加。

例：btn.attachEvent("onclick",function(){...});     btn.addEventListener("click",function(){...});

總結：以上1-7點中，為了相容不同瀏覽器而封裝的一些相容處理函式，像這類函式將放到base層。如：getnextnode(node)

8：擴充套件Js語言底層的介面

例：trim() isNumber() isString() get() $() extend()等等 

base層的JS和頁面裡的具體應用邏輯無關，屬於框架級的。

B:common層

common層本身依賴於base層提供的介面，需要先載入base層程式碼。它與base層的區別是：common層不是簡單的介面，而是相對龐大的元件。(如：設定和獲取cookie，就可以封裝cookie元件). 它和具體功能相關，如果頁面裡不需要相關功能，就沒必要載入，而一個易用性和可擴充套件性都好的元件，程式碼量會偏高，所以一般common層的js要按功能分成一個個單獨的檔案，如common_cookie.js,common_drag.js,common_tab.js.

common層的JS和頁面裡的具體應用邏輯無關，屬於框架級的。

C:page層

base層和common層都是屬於框架級的，page層是屬於應用級的，它可以呼叫base層的介面和common層的元件 

6） js類庫

常見的有prototype. Dojo, Mootools,Extjs,jquery,yui等。這麼多我用的比較多的是jquery   ,好像extjs也不錯，以後有空學習學習。

轉載請註明出處