1.養成良好的編程習慣css
1.1如何避免js衝突編程
咱們能夠使用當即調用函數將腳本包起來，能夠有效控制全局變量，避免衝突隱患。瀏覽器
如：mvc
<script>框架
(function(){var a=123,b="hello world";...})();函數
</script>工具
....ui
<script>spa
(function(){var a,c="abc";...})();對象
</script>
爲了實如今不一樣腳本之間進行通訊，咱們能夠在window做用域下定義一個全局變量，把它做爲一個橋樑，完成匿名函數之間的通訊。可是爲了減小全局變量的個數，咱們能夠使用一個{}對象類型的變量做爲全局變量。若匿名函數間須要多個變量來作通訊橋樑，能夠將這些變量做爲全局變量的屬性。同時爲了防止屬性之間被相互覆蓋，咱們能夠添加命名空間來區分各個做用域中的同名屬性。
<script>
var GLOBAL={};
</script>
<script>
//=================================
//功能A
//工程師甲
//email：。。。
//最近修改時間：2009-11-4
//=================================
(function(){
var a=123,b="hello world";
GLOBAL.A={};
GLOBAL.A.str2=a;
GLOBAL.A.str=b;
})();
</script>
...
<script>
//=================================
//功能B
//工程師乙
//email：。。。
//最近修改時間：2009-11-4
//=================================
(function(){
var a=,c="abc";
GLOBAL.B={};
GLOBAL.A.str=b;
})();
</script>
...
<script>
//=================================
//功能C
//工程師丙
//email：。。。
//最近修改時間：2009-11-4
//=================================
(function(){
var a=GLOBAL.A.str2,b=GLOBAL.A.str;
var d=a+","+b;
})();
</script>
此外，爲了提升代碼的可維護性，咱們須要添加註釋。
綜上所述：讓js不產生衝突，須要避免全局變量的泛濫，合適使用命名空間以及爲代碼添加必要的註釋。
1.2給程序一個統一的入口--window.onload和DOMReady
網頁中的js從功能上，應該分爲兩個大部分-框架部分和應用部分。框架部分提供的是對js代碼的組織做用，包括定義全局變量，定義命名空間方法等，它和具體應用無關，每一個頁面都須要包括相同的框架，因此框架部分的代碼在每一個頁面都相同。應用部分提供的的頁面功能邏輯，不一樣頁面會有不一樣的功能，不一樣頁面應用部分的代碼也不一樣。
咱們能夠將功能代碼放在一個統一的函數入口中，如init()函數，方便對功能的添加和修改。咱們能夠在window.onload事件或DOMReady事件中調用init()函數。兩者的區別在於：window.onload須要當頁面徹底加載完成時纔會觸發，包括圖片，flash等富媒體；DOMReady只判斷頁面全部的DOM節點是否已經所有生成，至於節點的內容是否加載完成，它並不關心。因此DOMReady觸發的速度比window.onload更快。特別是當頁面內有大量圖片等富媒體資源時，DOMReady觸發好久以後window.onload纔會觸發。可是DOMReady並非js的原生事件，能夠使用一些js框架調用它。如jQuery中的$(document).ready();
另一種模擬DOMReady事件的方法是將init()的調用放在文件的尾部，此時DOM元素都已生成。
1.3 css放在頁頭、js放在頁尾
js加載會「阻塞」其後面內容的生成；若將css放在內容以後，頁面中的元素會沒有樣式。因此爲了防止頁面長時間空白或頁面沒有樣式，建議將css放在頁面頭部，js放在頁面尾部。
1.4 文件壓縮
爲了減小網頁大小，縮短網頁的下載時間，能夠使用壓縮工具對文件進行壓縮處理。經常使用的壓縮工具備Packer和YUI Compressor。Packer的網址是：http://dean.edwards.name/packer; YUI Compressor網址：http://developer.yahoo.com/yui/compressor.
2.JavaScript的分層概念和JavaScript庫
咱們能夠將js文件分爲3層，從下到上依次爲：base層、common層和page層。
base層有兩個職責。一個是封裝不一樣瀏覽器下js的差別，提供統一的接口，依靠它來實現跨瀏覽器的兼容工做。另外一個是擴展js語言底層提供的接口，讓它能提供更多更爲易用的接口。
common層依賴於base層提供的接口。common層提供可複用的組件，它是典型的mvc模式中的m，和頁面的具體功能沒有直接關係。common層的功能是給page層提供組件。
page層位於三層的最頂端。這一層和頁面裏的具體功能需求直接現骨幹，是mvc模式中的c。page層依賴於base層和common層。page層的功能是完成頁面內的功能需求。
2.1 base層
base層的接口從大的方向上看，能夠分爲3塊兒，一塊是用來操做DOM，包括獲取DOM節點和設置DOM屬性；一起用來操做事件，包括訪問event對象的屬性和設置事件監聽；還有比部分用來模仿其餘語言提供原生的js不提供的函數。咱們也能夠分別用GLOBAL.Dom,GLOBAL.Event和GLOBAL.Lang做爲base層函數的命名空間。
2.2 common層
common層和base層都是供page層調用的，兩者的區別在於common層提供的不是簡單的藉口，而是相對更龐大的組件。common層提供的組件並不像base層那麼通用，它和具體的功能相關，若是頁面裏不須要相關的工恩呢該，就不必加載。
2.3 page層
page層是mvc中的c，和頁面裏的具體功能需求直接相關。若是頁面裏的功能需求簡單，頁面裏能夠沒有base層代碼，能夠沒有common層代碼，但必定會有page層代碼。base層和common層都是屬於框架級的，page層是屬於應用級的，它能夠調用base層的接口和common層的組件。