Js編程原則和良好習慣

標籤：http   java   使用   資料   cti   javascript   

1、預留退路：在禁止Js或者Js不被支援的情況下，網頁還能正常工作。也就是說，雖然某些功能無法使用，但最基本的操作仍能順利完成。

案例：點選連結，開啟一個新視窗。
就如本站的登入(彈出一個類比視窗)，與其讓使用者在點選連結的時候被帶離當前頁面，不如讓使用者仍停留在當前頁面，並用一個快顯視窗來顯示相關資訊，這無疑是一種更好的解決方案。
一些錯誤的寫法：
偽協議：<a href="javascript:showWindow(‘login‘, this.href);" >登入</a>
內嵌事件處理函數：<a href="#" onclick="showWindow(‘login‘, this.href); return false;">登入</a>

javascript:偽協議是人們對非標準化通訊機制的統稱，偽協議讓我們可以通過一個連結來調用Js函數。
這種做法的不好之處在於，如果偽協議不被支援或Js被禁止了，那麼這段代碼就不能執行，也就沒意義了。

好的寫法：
<a href="member.php?mod=logging&action=login" onclick="showWindow(‘login‘, this.href); return false;">登入</a>

更好的做法是將Js代碼與HTML文檔分離開來。
把href屬性設定為真實存在的URL地址後，即使Js被禁止或遇到爬蟲，這個連結仍是可用的。

2、結構與行為分離:把網頁的結構和內容與Js指令碼的動作行為分開。
所謂的"循序漸進"就是用一些額外的資訊層去包裹未經處理資料的做法。對於一個網站來說，內容就是一切，但是也不能直接將原始內容發布到網路上，而不加任何描述和修飾。
給內容加上正確的HTML標記是很重要的，也就是語義化，所以說，標記良好的內容就是一切。

還是上個案例：
html代碼:
<a href="member.php?mod=logging&action=login" class="login">登入</a>

Js代碼:
window.onload=function(){
var links=document.getElementsByTagName(‘a‘);
for(var i=0,len=links.length;i<len;i++){
if(‘login‘===links[i].getAttribute(‘class‘)){
links[i].onclick=function(){
showWindow(‘login‘, this.href);
return false;http://www.huiyi8.com/moban/ html模板

3、向後相容性:確保老版本的瀏覽器不會因為你的Js指令碼而崩潰。
一些瀏覽器可能無法理解DOM提供的方法和屬性，那麼就需要在指令碼裡對瀏覽器的Js支援程度進行檢測。
這有點兒像遊樂園裡的警告牌:"你必須達到這一身高才能參與這項遊樂活動。"換句話說，需要在Js指令碼裡表達出這樣的含義:"你必須理解這個方法或屬性，才能執行這些語句"。
一個有效檢測方法就是對象檢測(object detection):把某個方法打包在一個if語句裡，然後根據條件運算式的結果是true(存在)還是false(不存在)，決定應該採取怎樣的行動。
window.onload=function(){

if(!document.getElementsByTagName) return false;

var links=document.getElementsByTagName(‘a‘);
for(var i=0,len=links.length;i<len;i++){
if(‘login‘===links[i].getAttribute(‘class‘)){
links[i].onclick=function(){
showWindow(‘login‘, this.href);
return false;