通過對JavaScript的學習,知道它是由C語言演變而來的，而且在很大程度上借用了Java的語法，而Java又是由C和C++演生而來的，所以JavaScript和C有許多相似的語法特點。JavaScript的出現，可以使得信息和用戶之間不僅只是一種顯示和瀏覽的關系，而是實現了一種實時的、動態的、可交互的表達能力。從而基于CGI靜態的HTML頁面將被可提供動態實時信息，并對客戶操作進行反應的Web頁面取代。JavaScript 腳本正是滿足這種需求而產生的語言。它深受廣泛用戶的喜愛和歡迎，它是眾多腳本語言中較為優秀的一種。
JavaScript是一種基于對象和事件驅動并具有安全性能的腳本語言。使用它的目的是與HTML超文本標記語言、Java 腳本語言一起實現在一個Web頁面中鏈接多個對象，與Web客戶交互作用。從而可以開發客戶端的應用程序等。它是通過嵌入或調入在標準的HTML語言中實現的。它的出現彌補了HTML語言的缺陷，它是Java與HTML折衷的選擇，具有以下幾個基本特點：
JavaScript是一種腳本語言，它采用小程序段的方式實現編程。像其它腳本語言一樣,JavaScript 同樣已是一種解釋性語言，它提供了一個簡易的開發過程。它的基本結構形式與C、C++、VB等語言十分類似。但它不像這些語言一樣，需要先編譯，而是在程序運行過程中被逐行地解釋。它與HTML標識結合在一起，從而方便用戶的使用操作。
JavaScript是一種基于對象的語言，同時以可以看作一種面向對象的。這意味著它能運用自己已經創建的對象。因此，許多功能可以來自于腳本環境中對象的方法與腳本的相互作用。
JavaScript的簡單性主要體現在：首先它是一種基于Java 基本語句和控制流之上的簡單而緊湊的設計, 從而對于學習Java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴格的數據類型。
JavaScript 是一種安全性語言，它不允許訪問本地的硬盤，并不能將數據存入到服務器上，不允許對網絡文檔進行修改和刪除，只能通過瀏覽器實現信息瀏覽或動態交互。從而有效地防止數據的丟失。
JavaScript 是動態的，它可以直接對用戶或客戶輸入做出響應，無須經過Web 服務程序。它對用戶的反映響應，是采用以事件驅動的方式進行的。所謂事件驅動，就是指在主頁中執行了某種操作所產生的動作，就稱為“事件”。比如按下鼠標、移動窗口、選擇菜單等都可以視為事件。當事件發生后，可能會引起相應的事件響應。
根據JavaScript腳本編寫的方式,腳本的執行也分為多種情況。當瀏覽器打開一個HTML文檔時它將從頭開始解釋整個文檔，而有一些腳本如函數function，則會在它們被調用的時候運行，腳本函數的調用往往都是通過事件來進行驅動的，如在一個HTML 文檔被裝載onLoad的時候可以執行腳本函數。
作為一名開發人員（WEB前端JavaScript開發），不規范的開發不僅使日后代碼維護變的困難，同時也不利于團隊的合作，通常還會帶來代碼安全以及執行效率上的問題。本人在開發工作中就曾與不按規范來開發的同事合作過，與他合作就不能用“愉快”來形容了。現在本人撰寫此文的目的除了與大家分享一點點經驗外，更多的是希望對未來的合作伙伴能夠起到一定的借鑒作用。當然，如果我說的有不科學的地方還希望各路前輩多多指教。下面分條目列出各種規范要求，這些要求都是針對同事編碼毛病提出來的，好些行業約定的其它規范可能不會再提及。
對于大型的JavaScript項目，一般會在產品發布時對項目包含的所有JavaScript文件進行壓縮處理，比如可以利用Google Closure Compiler Service對代碼進行壓縮，新版jQuery已改用這一工具對代碼進行壓縮，這一般會去掉開發時寫的注釋，除去所有空格和換行，甚至可以把原來較長的變量名替換成短且無意義的變量名，這樣做的目的是加快文件的下載速度，同時也減小網站訪問帶來的額外數據流量，另外在代碼保護上也起到了一點點作用，至少壓縮后的代碼即使被還原還是沒那么容易一下讀懂的。要想代碼能正確通過壓縮，一般要求語句都要以分號正常結束，大括號也要嚴格結束等，具體還要看壓縮工具的要求。所以如果一開始沒有按標準來做，等壓縮出錯后再回去找錯誤那是浪費時間。
一般較為完善的開發工具（比如Aptana Studio）都有代碼“自動格式”化功能，這一功能幫助實現統一換行、縮進、空格等代碼編排，你可以設置自己喜歡的格式標準，比如左大括號{是否另起一行。達到這個要求的目的在于方便你的開發團隊成員拿你代碼的一個副本用IDE自動格式化成他喜歡或熟悉的風格進行閱讀。你同事需要閱讀你的代碼，可能是因為你寫的是通用方法，他在其它模塊開發過程中也要使用到，閱讀你的代碼能最深入了解方法調用和實現的細節，這是簡單API文檔不能達到的效果。
這一要求算是最基本的，這有利于在方法調用處看到方法的具體傳參提示，也可以利用配套文檔工具生成html或其它格式的開發文檔供其他團隊成員閱讀，你可以嘗試使用jsdoc-toolkit。如果你自動生成的API是出自一個開放平臺，就像facebook.com應用，那么你的文檔是給天下所有開發者看的。另外編寫完整注釋，也更方便團隊成員閱讀你的代碼，通過你的參數描述，團隊成員可以很容易知道你編寫的方法傳參與實現細節。當然也方便日后代碼維護，這樣即使再大的項目，過了很長時間后，回去改點東西也就不至于自己都忘記了當時自己寫的代碼是怎么一回事了。
使用規范有意義的變量名可以提高代碼的可讀性，作為大項目開發成員，自己寫的代碼不僅僅要讓別人容易看懂。開發大項目，其實每個人寫的代碼量可能都比較大，規范命名，日后自己看回自己的代碼也顯的清晰易懂，比如日后系統升級或新增功能，修改起代碼來也輕松多了。如果到頭發現自己當初寫的代碼現在看不太懂了，那還真是天大的笑話了。
當然，使用有意義的變量名也盡量使用標準的命名，比如像這里：var me = this也許沒有var self = this好，因為self是Python中的關鍵字，在Python中self就是通常語言this的用法。再看下面一個例子，加s顯然比沒有加來的科學些，這樣可以知道這個變量名存的是復數，可能是數組等：
var li = document.getElementsByTagName('li')var lis = document.getElementsByTagName('li')
JavaScript作為一門動態腳本語言，靈活性既是優點也是缺點，眾所周知，動態語言不同層次開發人員對實現同樣一個功能寫出來的代碼在規范或語法上會存在較大的差別。不管怎么樣，規范編碼少搞怪，不把簡單問題復雜化，不違反代碼易讀性原則才是大家應該做的。比如這語句：typeof(b)== 'string' && alert(b)應該改為：if(typeof(b)== 'string')alert(b)，像前面那種用法，利用了&&運算符解析機制：如果檢測到&&前語句返回false就不再檢測后面語句，在代碼優化方面也有提到把最可能出現的情況首先判斷，像這種寫法如果條件少還好，如果條件較多而且語句也長，那代碼可讀性就相當差。
又比如：+function(a){var p = a;}('a')應該改為：(function(a){var p = a;})('a')，其實function前面的+號與包含function的()括號作用是一樣的，都是起運算優先作用，后者是常見且容易看明白的防止變量污染的做法，比如好些流行JavaScript框架就是采用后面這種方式。
再說個降低代碼可讀性的例子，如：function getPostionTxt(type){return type == 2 ? “野外” :(type == 3 ? “商城” :(type == 4 ? “副本” : null));}應該改成：function
getPostionTxt(type){var typeData={“2”:“野外”,“3”:“商城”,“4”:“副本”};if(typeData[type])return typeData[type];else return null;}。如果type是從0開始不間斷的整數，那么直接使用數組還更簡單，這種結果看起來就清晰多了，看到前面那種多層三元表達式嵌套頭不暈嗎。
語句中不應該出現中文我想一般人都知道，雖然這樣做不影響程序運行，但是顯然有背行業標準要求，當然我們也不是在使用“易語言”做開發。關于這一個問題，我本來不想把它拿出來說的，但我確實遇到有人這樣做的，也不知道是不是因為他的英語實在太爛了，至少還可以用拼音吧，另外尋求翻譯工具幫忙也不錯的選擇。我舉例如下，像以下寫法出現在教學中倒還可以理解： this.user['名字'] = '張三' 或者 this.user.名字 = '張三'
固定數量參數的函數內部不使用arguments去獲取參數，因為這樣，你定義的方法如果包含較多的腳本，就不能一眼看到這個方法接受些什么參數以及參數的個數是多少。比如像下面： var $ = function(){return document.getElementById(arguments[0]);}應該改成：var $ = function(elemID){return document.getElementById(elemID);}
雖然知道事件可以動態綁定，比如使用addEventListener或者使用jQuery的bind方法，也知道采用動態事件綁定可以讓XHTML更干凈，但是一般情況下我還是建議直接把事件寫在DOM節點上，我認為這樣可以使代碼變得更容易維護，因為這樣做，我們在查看源代碼的時候就可以容易地知道什么Element綁定了什么方法，簡單說這樣更容易知道一個按鈕或鏈接點擊時調了什么方法腳本。
不要過于依賴DOM的一些內容特征來調用不同的腳本代碼，而應該定義不同功能的方法，然后在DOM上調用，這樣不管DOM是按鈕還是鏈接，方法的調用都是一樣的，比如像下面的實現顯然會存在問題：
因為JavaScrip是弱類型的，在編寫函數的時候有些人對于返回類型的處理顯得比較隨便，我覺得應該像強類型語言那樣返回，看看下面的兩個例子： function getUserName(userID){ if(data[userID])
return “";} 這個方法如果在C#中定義，我們知道它準備返回的數據類型應該是字符串，所以如果沒有找到這個數據我們就應該返回空的字符串，而不是返回布爾值或其它不合適的類型。這并沒有影響到函數將來的調用，因為返回的空字符串在邏輯判斷上可被認作“非”，即與false一樣，除非我們使用全等于“===”或typeof進行判斷。
使用標準肯定是有好處的，那么為什么還是有人不使用標準呢？我想這可能是懶或習慣問題。也許還會有人跟我說，少寫引號可以減輕文件體積，我認為這有道理但不是重點。對于服務器返回的JSON數據，使用標準結構可以利用Firefox瀏覽器的JSONView插件方便查看（像查看XML那樣樹形顯示），另外你如果使用jQuery做開發，最新版本jQuery1.4+是對JSON格式有更高要求的，具體的可以自己查閱jQuery更新文檔。比如：{name:”Tom“}或{'name':'Tom'}都應該改成{”name“:”Tom“}。
當代碼調整或重構后，之前編寫的不再使用的代碼應該及時刪除，如果認為這些代碼還有一定利用價值可以把它們剪切到臨時文件中。留在項目中不僅增加了文件體積，這對團隊其它成員甚至自己都起到一定干擾作用，怕將來自己看回代碼都搞不懂這方法是干什么的，是否有使用過。當然可以用文檔注釋標簽@deprecated把這個方法標識為不推薦的。
對于大型項目，一般會有部分開發成員實現一些通用方法，而另外一些開發成員則要去熟悉這些通用方法，然后在自己編寫模塊遇到有調用的需要就直接調用，而不是像有些開發者喜歡“單干”，根本不會閱讀這些通用方法文檔，在自己代碼中又寫了一遍實現，這不僅產生多余的代碼量，當然也是會影響團隊開發效率的，這是沒有團隊合作精神的表現，是重復造輪子的悲劇。比如在通用類文件Common.js有定義function $(elemID){return document.getElementById(elemID)}那么就不應該在Mail.js中再次出現這一功能函數的重復定義，對于一些復雜的方法更應該如此。
當有幾個方法都可以實現同類功能的時候，我們還是要根據場景選擇使用最合適的方法。下面拿jQuery框架的兩個AJAX方法來說明。如果確定服務器返回的數據是JSON應該直接使用$.getJSON，而不是使用$.get得到數據再用eval函數轉成JSON對象。如果因為本次請求要傳輸大量的數據而不得以使用$.post也應該采用指定返回數據類型（設置dataType參數）的做法。如果使用$.getJSON，在代碼中我們一眼能看出本次請求服務器返回的是JSON。溫馨提示：jQuery1.4后，如果服務器有設置數據輸出的ContentType，比如ASP.NET C#設置 Response.ContentType = ”application/json“，那么$.get將與$.getJSON的使用沒有什么區別。
{ ”name“:”Tom"}
1、JavaScript變量可以使用var事先進行聲明，也可以用賦值語句隱藏聲明。對于一個變量，它存在指的是它擁有值。檢查一個變量是否有值的方法是使用Window對象，因為JavaScript聲明或使用的變量都屬于Window對象的屬性。
2、JavaScript函數使用function命令聲明，如果函數有返回值，在調用時就可以使用指定語
句獲取返回值。當調用函數傳入參數時，函數即使沒有指明參數名稱，也一樣可以使用參數數組的對象arguments獲取參數的個數和參數值。
3、局部變量：在函數內聲明，只能在函數內的程序使用；全局變量：在函數外聲明，整個
JavaScript程序的函數和程序代碼都可以使用。
4、自定義JavaScript的對象：直接建立Object對象副本后，可新增所需的屬性和方法；建
立對象的構造函數，定義屬性和方法，使用new命令建立對象副本時，構造函數傳入的參數是對象的屬性值，如果在建立副本時未指定屬性值，一樣可以在建立副本后再設置對象的屬性值。
5、JavaScript的內置對象：Array、Date、Function、Math、String···
6、DHTML對象模型：是將瀏覽器和HTML文件的標簽都對象化，以便JavaScript程序代
碼可以輕易地操控瀏覽器和訪問HTML標簽的對象。
版本3.xBOM、版本4.xDHTML=BOM+DHTML DOM、版本5.xBOM+W3C DOM7、DOM對象模型是一種擁有擴展性的文件架構
DOM Level 0-DHTML DOM、DOM Level 1 – W3C DOM
DHTML DOM 和 W3C DOM 的差異在于DHTML DOM只是將整份HTML文件都對象化，每一個HTML標簽都對應有標簽對象；W3C DOM屬于一種通用的文件瀏覽和訪問機制，可以將整份HTML或XML文件視為一種階層架構的樹狀結構。
8、DHTML對象模型的完整架構是由BOM的根對象Window開始。
9、Window對象：瀏覽器的窗口對象
瀏覽器的狀態欄：屬性defaultStatus、status
定時器：方法setTimeout(express,time)clearTimeout()
只會運行一次，在經過設置的一段時間后，運行指定的函數或表達式
方法setInterval(express,time)clearInteval()
一旦啟動就可以周期性地運行函數或表達式
窗口的打開與關閉：open(url,winName)方法可以打開一個全新的窗口，并且使用JavaScript程序代碼獲取新窗口的Window對象；在父窗口使用winID訪問新窗口的屬性和方法，Window對象的opener屬性可以參考到父窗口的Window對象。
Close()方法可以關閉一個窗口。
10、Window對象內置對話框：
alert(message)顯示一個警告信息的窗口，參數就是顯示的信息內容。
confirm(message)一個確認的對話框，參數為信息內容，傳回true表示單擊”確認”按鈕，false為”取消”按鈕。
Prompt(msg,value)顯示輸入文字內容的對話框，參數msg為信息內容，value為默認值，傳回用戶輸入的字符串。
showModelessDialog(url,arguments,features)顯示一個新的窗口，參數url為顯示的網頁。arguments為傳送到顯示網頁的參數，可以是任何數據，例如對象；在顯示的網頁中可以使用window對象的dialogArguments屬性獲取傳遞過來的參數。feature參數可以設置對話框的外觀。
11、更改窗口的尺寸和位置：
Window對象的屬性：screenLeft傳回左邊界的坐標 screenTop傳回上邊界的坐標
Window對象的方法：moveTo(x,y)將瀏覽器移到坐標x和y的位置
moveBy(offsetx,offsety)將瀏覽器目前的位置移動參數的位移量
resizeTo(width,height)將瀏覽器窗口調整為參數width和height的尺寸resizeBy(offsetx,offsety)將瀏覽器窗口尺寸放大或縮小
12、窗口內容的卷動
Window對象的方法：scroll(x,y)、scrollTo(x,y)滾動窗口內容到指定的位置
scrollBy(offsetx,offsety)從目前窗口內容的位置，滾動參數的位移量
13、Navigator對象：獲取瀏覽器和系統資源的信息
14、History對象：保存歷史記錄
15、Location對象：保存目前URL網址的詳細數據
屬性：href 返回完整的URL字符串，重設該屬性可以轉向鏈接到其他的網址
方法：reload()重新加載現在打開的HTML文件，如同瀏覽器工具欄中的“刷新”按鈕replace(url)轉向到參數url的網址，如同設置href屬性
16、Document對象：
打開與寫入文件：方法open(“text/html”,”replace”)可以清除目前的文件內容，第一個參數是MIME類型，text/html就是html文件，第二個參數replace可以取代歷史記錄，瀏覽器就無法按工具欄的“上一頁”按鈕返回上一頁。
方法 write()或writeln()輸出HTML文件的內容
方法 close()顯示輸出的內容
獲取文件的指定元素：getElementById()
17、JavaScript的Cookies處理：Cookies可以在客戶端的計算機保存所需的數據，可以使用
Document對象的cookie屬性處理Cookie的訪問，返回的字符串使用“；”分隔每一個Cookie
新增Cookie函數：saveCookie(name,value,expires)
獲取Cookie值函數：getCookie(name)
檢查Cookie是否存在的函數：checkCookieExit()
刪除Cookie函數：deleteCookie(name)
18、DHTML DOM的Collection對象：
document.all對象集合可以獲取HTML文件中所有的標簽對象，這是一個數組對象，依
照標簽在HTML文件出現的順序，可以使用索引值訪問指定的標簽對象,如document.all[i]。也可以直接使用id屬性獲取，如document.all(“myId”)或myId。
如果HTML文件擁有同名的id屬性，獲取的仍然是一個集合，還需要使用item()方法
獲取指定的標簽對象。
同理，myBody.all對象集合可以獲取id為myBody的body區域塊中的所有標簽對象。在all對象集合的所有標簽對象中，可以進一步使用tags()方法篩選出指定標簽的對象集
合，如document.all.tags(“p”)，可使用length屬性獲取共有多少個
標簽。
19、HTML文件的階層架構：
HTML文件中的標簽屬于一種階層架構，可以使用parentElement屬性獲取上一層的標
簽對象，用children對象集合獲取下一層標簽的對象集合，這個對象集合可以進一步使用item()方法獲取指定的標簽對象。
20、訪問HTML標簽的內容：
innerText()訪問標簽對象的內容
innerHTML()訪問標簽對象內的子標簽和內容，不包含標簽對象本身
outerText()訪問標簽對象的內容，可以用來取代整個標簽對象
outerHTML()訪問標簽對象的子標簽和內容，包括標簽對象本身
21、訪問HTML標簽的屬性：
在獲取HTML標簽的對象后，也可以訪問標簽對象的屬性
22、CSS層級式樣式表：
HTML標簽都擁有默認的顯示樣式，CSS能夠重新定義HTML標簽的顯示效果，也可以自定義新的樣式名稱。
如果是class屬性，則定義的樣式名稱以”.”句點開始，可以定義多個值，并且可以應用到多個標簽上
如果是id屬性，則定義的樣式名稱以”#”開始，可以定義多個值，但只能應用到一個標簽上
23、動態樣式CSS：
CSS樣式屬性可以對應Style對象的屬性，在獲取HTML標簽對象后，可以訪問Style對象的屬性，如：objEle.style.color24、DHTML的事件：
事件就是在瀏覽器顯示和閱讀HTML文件時，鼠標、鍵盤或文件加載等操作所觸發的一些動作
鼠標事件：onclick 單擊鼠標左鍵 ondbclick 雙擊鼠標左鍵 onmousemove 移動鼠標onmouseout 鼠標指針離開HTML標簽
onmouseover鼠標指針進入HTML標簽
onmousedown 按下鼠標鍵onmouseup 放開鼠標鍵
鍵盤事件：onkeydown 當按下鍵盤按鍵 onkeyup 放開鍵盤按鍵
其他常用事件：onload 當瀏覽器加載HTML文件后
onunload 當用戶離開瀏覽器，或是加載其他網頁時
onfocus 用戶指定對象擁有處理權
onblur 用戶離開擁有處理權的對象
onchange 用戶更改對象的內容
onsubmit 用戶發送窗體字段
onreset 用戶重設窗體字段
onselect 用戶選擇了網頁內容
25、JavaScript的事件處理：
方式一：在HTML標簽的屬性中設置JavaScript的事件處理函數
如：
方式二：在對象的屬性中設置JavaScript的事件處理
如：document.myForm.myButton.onclick = showAlert;
如果事件是由Window或Document等上層對象所觸發，此時只需設置對象的事件屬性，就可以指定事件的處理函數
取消事件的處理：可以取消用戶新增的事件處理函數，也可以取消瀏覽器默認的事件處
理函數。
當事件觸發后，瀏覽器默認的事件處理函數就會進行事件的處理，擁有默認處理函數的 常見事件有：元素 事件onclick 單擊可以顯示其他URL網址的HTML文件元素
元素document 事件oncontextmenu 單擊鼠標右鍵可以顯示一個快捷菜單 方式一：將事件屬性設為null
如：document.myForm.myButton.onclick = null;
方式二：使用自定義的事件處理函數，函數傳回false時就可取消事件
如：return false;
方式三：將event對象的returnValue屬性設置為false
如：event.returnValue = false;
26、Event對象：
當事件觸發時就會產生一個Event對象，它的屬性用來記錄事件觸發時的一些數據Event對象是一個全局屬性，不能把Event對象作為參數傳遞給事件處理函數屬性：srcElement 返回事件觸發時的標簽對象
returnValue 設置和取消事件的返回值
27、DHTML DOM的窗體對象的架構
使用字段名稱訪問窗體字段：如 document.myForm.myUserName.value
使用forms和elements對象訪問字段：如 document.forms[0].elements[0].value28、Form對象
屬性：name、action、method、target
方法：submit()發送窗體字段到服務器reset()重設窗體的各字段為默認值
29、Input對象
屬性：name、type、value、disabled、form、readonly、maxlength
針對單選按鈕和復選框的屬性：checked
方法：blur()設置Input對象失去處理權focus()設置Input對象擁有處理權
select()選擇Input對象click()觸發其他字段的onclick事件
30、Select對象
屬性：name、disabled、length、options、selectedIndex、size、multiple
方法：blur()設置Select對象失去處理權focus()設置Select對象擁有處理權
add(objOption, index)新增一個
使用構造函數建立Option對象：var objOption = new Option(text, value)
remove(index)刪除參數索引值的選項
31、Option對象
屬性：value、text、selected32、Textarea對象
屬性：cols、rows
方法：blur()設置Textarea對象失去處理權focus()設置Textarea對象擁有處理權
select()選擇Textarea對象
33、JavaScript的窗體字段驗證
驗證屬性： 文字、密碼和備注 value
單選按鈕和復選框 checked
下拉式菜單selected
方法：submit()onsubmit事件
34、Table對象
屬性：border、cellPadding、cellSpaing、rows
方法：insertRow(index)在表格插入一個新行，插入的位置是在參數的行號之前deleteRow(index)在表格刪除傳入參數行號的表格行
35、TableRow對象
屬性：cells、rowIndex
方法：insertCell(index)插入單元格，是插在傳入的單元格編號之前
deleteCell(index)刪除傳入單元格編號參數的單元格
36、TableCell對象
屬性：colSpan、rowSpan、cellIndex37、Window對象的frames對象集合當瀏覽器顯示框架頁時，框架頁的每一個框架都是一個Window對象，使用frame[]對象集合獲取各框架的Window對象，也可以直接使用框架標簽的名稱來獲取各框架的Window對象。
Window對象的屬性：self 返回目前的Window對象
parent 返回目前框架的上一層對象
top 如果是一個嵌套框架，top就是最上層的Window對象
38、FrameSet對象
屬性：name、cols、rows39、Frame對象
屬性：name、src40、Iframe對象
屬性：name、src41、Anchor對象
屬性：href、target 訪問顯示的框架名稱或窗口（默認值有_blank _self _parent）方法：blur()設置Anchor對象失去處理權focus()設置Anchor對象擁有處理權
42、W3C DOM瀏覽節點
DHTML DOM 和W3C DOM最主要的差異就是獲取節點的方式
DHTML DOM需要使用id/name屬性或者對象集合等不同方式才能獲得標簽對象
W3C DOM提供一致的走訪方式，只要建立好樹狀結構，所有能走訪到的節點就是標簽
對象
只讀屬性：firstChild、lastChild、parentNode、nextSibling、previousSibling、nodeName讀/寫屬性：nodeValue訪問文字節點的內容
對象集合：childNodes子節點的對象集合、attributes節點屬性的對象集合43、Ajax應用程序架構
傳統Web應用程序架構：瀏覽器向web服務器提出HTTP請求，web服務器處理后產生HTML文件，就可以傳回瀏覽器來顯示。服務器可能單純傳回請求的HTML文件，或運行服務器網頁技術ASP、JSP等，動態產生或進一步從數據庫取出所需數據來建立相應的HTML文件。在客戶端瀏覽器只是單純顯示HTML網頁內容，而且瀏覽器需要等待服務器響應后，才能顯示網頁內容。
Ajax應用程序架構：最大差異是在客戶端新增JavaScript編寫的Ajax引擎來處理HTTP請求，并獲取服務器的響應數據，更新網頁接口的部分內容。用戶不再需要等待服務器的相應，就可以進行其他操作。
44、XML的基礎
XML是可擴展的標識語言，用來描述數據，需要自行定義描述數據所需的各種標簽。XML文件的組成元素：
元素、屬性、實體參考：< <> >& &'?" “
批注：PCDATA：XML文件的文字內容
CDATA區塊： 通常用來保存程序代碼數據
PI： 允許XML文件包含傳送給應用程序的命令。
DTD：XML文件的驗證機制，可以檢查XML標簽和文件架構是否正確。
45、XHTML的基礎
XHTML仍然使用HTML4.0版的標簽，它是W3C制定用來取代HTML4.0版的下一代HTML。XHTML文件是良好格式的HTML，它必須遵循XML文件的編寫規則： ·不可以省略結尾標簽，保證所有標簽都成對出現
·標簽和屬性都是使用小寫的英文字
·屬性值需要使用引號括起來
·name屬性使用id屬性取代
46、XML DOM
XML DOM是W3C DOM針對XML文件所提供應用程序的標準的程序接口，可以通過接口來訪問各種節點對象。
兩個基本點
1.擇重避輕，有所取舍。
? 核心優先
通常來講，系統是都是龐大的，不要太完美主義，先抓住重點，理解那些是我們的核心頁面，那些頁面對我們來說是最重要的，那些頁面訪問量最高，核心優先。
? 主要問題在那，抓住瓶頸點。
治病要醫本。優化前，需要進行細致的分析，抓住主要瓶頸點，對癥下藥。優化那么多的方子，別全采用，通常幾個就能達到效果 2.簡單有效才是硬道理
越是簡單的東西越容易控制，越不容易出錯，盡量避免將系統設計的過于龐大，過于復雜，記住，這是在做產品，而不是在搞研發。很多看似很蠢的方法，往往越是有效。
新技術，新方法的引用是具備一定的風險的，要評估，要慎重。
Js處理
1.盡量放到頁面尾部
Js的加載時阻塞頁面的，沒下載完畢后面的內容不會出來，所以盡量避免把JS放到頁面頭部，按照經驗估計，整個頁面中所用的JS邏輯，90%都是可以放到頁面尾部。2.延遲加載（按需加載）
很多的業務邏輯并非每次都使用也不是要立即使用，首次加載過程中僅僅加載那些必須的，只有當必要的條件觸發，才去加載請求必要的JS.比如說權限驗證通過，加載管理模塊。點擊發表文章按鈕，加載與發表文章有關的驗證和處理函數。
如果寫過C++的肯定會接觸過動態庫和靜態庫，這個與之類似，什么時候需要什么時候再加載，首次打開頁面肯定會清凈了許多，而且業務邏輯也由此分離開來，管理和維護也會方便很多，畢竟減少了那么多的耦合。
按照BBS項目經驗估計，普通頁面的所有業務邏輯中需要在首次請求中加載的不到50%，我們的JS又由此砍掉了一半。3.合并JS，減少請求
請求多個小文件的效率遠小于請求一個大文件的效率，因為需要多次DNS解析，多次連接，瀏覽器和server端也需要進行多次開啟進程、權限驗證和預處理，以及 http請求在數據包傳遞上的一些問題。
所以盡量避免在頁面中加載一堆的js 文件，需要先講需要的小的JS合并成一個大的JS文件統一輸出，頁面因此被卡住的時間肯定會減少很多。
為了提高開發效率，合并建議不要每次都手動來進行，導致之后維護成本很大，相信些個XML配置文件，確定合并規則以及依賴關系后，用程序自動合并效率會高很多，后面有我附上的一個配置示例，僅作參考形式不重要
4.JS壓縮 此手段屬前端特有，畢竟流量意味著速度，意味著金錢。是在降低代碼的可讀性為前提。但事物的兩面性告訴我們，可讀性差也意味著安全，而且可讀性可以通過保存壓縮前的源文件來解決。
所謂的壓縮，就是把場的變量名換成短的變量名，去掉沒用的空格和換行符，從而節省我們JS程序的長度，不過目前這種處理已經很成熟，通過搜索可以搜出很多相關的工具。不再細說
經驗值，能壓縮50%以上，視程序與壓縮工具而論。
5.盡量少用第三方庫
在我的印象中，很多框架都是很龐大20K以上，雖然很強大很方便，但如果不是做企業級應用，不要用，因為我們也許只可能用到其中很少的一部分功能卻加載了整個框架。
不過框架中的很多方法是可以提取出來滴，或者精簡成一個輕量級的框架，比如說trimPath，完全可以精簡到4k.6.合并ajax請求
Ajax請求的數據，如果涉及請求多種數據，盡量考慮到將其合并。
7.合理的使用緩存
緩存視乎是server端的事，但是js中也是經常用的。
一種是緩存在一個全局變量中，一些很復雜的計算和查找操作可以這樣做。如果大家在使用模板類trimPath經常是需要對模板進行預處理，這種預處理的結果是可以被緩存的。這種緩存的缺點是頁面刷新后數據就會失效。
另外一種是緩存在window.name或cookie里面，經常用來緩存一些AJAX調用的結果，避免反復請求server端，比如一些用戶的權限驗證信息，就沒必要總是調用server端接口，緩存了也就減少了請求，提高了性能，但cookie大家要慎用，存于一些數據比較小的還行，每次http請求他是占用上行帶寬的。
還有一種緩存的實現是借助于flash或其他的第三方組件，特點是可以緩存超大的數據，但是適應場景優先，需要特殊的平臺支持，不過FLASH目前已經很通用了。
8.能靜態化輸出，盡量少用JS渲染輸出
頁面制作
1.素材合并
盡量把頁面中的圖片合并在一起，利用css sprite切割。這樣減少了請求的次數。通常合并成3長大的圖片，一張是有固定寬高的（比如說按鈕），另外兩張是分別橫向或縱向平鋪的1像素的小圖，用來做背景用。2.CSS壓縮處理
道理同JS壓縮，也是有很多工具實用的可用。
3.圖片背景切割與平鋪
切圖是很有講究的，很多區域能切成用1像素平鋪，盡量用1像素小圖平鋪，盡量用一個較大的圖片設置成背靜。4.少用iframe和frameset 首先一點frame會阻塞頁面，第二，產生額外的請求，第三，如果涉及交互，增加開發維護成本，第四對搜索引擎優化不好 5.CSS盡量放到頁面頭部
瀏覽器只有等CSS下載完畢后，才會真正的顯示頁面，所以為了讓頁面盡快有所輸出，把CSS放到頭部，而且瀏覽器對CSS的處理時并行的，不會像JS那樣會阻塞頁面。
Server處理
1.啟用gzip壓縮，約能壓縮70%~80% 2.js,css,圖片添加過期頭，讓瀏覽器能緩存。能減少1/3以上的請求。3.靜態頁面、js、css等靜態文件單獨遷移
第一，可以針對靜態文件做專門優化，比如說squid反向代理，nginx代替apache做靜態server。
第二，便于管理和維護，以后遷移和拓展方便。
4.js、css、圖片等靜態文件與當前應用放到不同的域名下。
不再傳遞那些無必要的cookie，減少傳輸。
5.圖片服務器分多域名。
瀏覽器對同一域名的只允許使用2個并發，如果頁面圖片過多，會由于并發排隊從而阻塞頁面。但域名也不能太多，會消耗DNS解析的時間，建議4個為佳。
附加
1.JS合并配置文件示例
2.常見分析與調試工具
IE Httpwatch Firefox firebug
本文地址 http://user.qzone.qq.com/165162897/blog/1248096280
點擊咨詢 