首頁 > 開發者 > JavaScript
一直以來都想把在實際開發中的一些經驗系統地整理一下，共用出來給一些有志於深入B/S開發的朋 友，趁著國慶忙裡偷閒，先實驗性的寫一下有關於Javascript開發中的比較有用的東西。
設計模 式一直以來都是在物件導向的語言，或比較正規化的開發中才會出現的一門程式設計思想。一直以來眾 多的前端開發人員認為使用OO方式來寫JS更像是一個程式開發人員，殊不知一旦將這門指令碼語言深入進去後 ，僅僅才是一個開始，設計模式僅能算是對程式設計深入瞭解的第一步。
為什麼要用設計模式我 就不多說了，仁者見仁的問題，現在還有一種反設計模式，如果有興趣的話可以搜尋一下相關的資料。
觀察者模式在程式設計裡面的使用頻率是很高的，與簡單原廠模式，適配器模式基本相當，那麼 現在就直接進入主題。
首先我們寫一個最基本的HTML頁面，包含一些基本的JS代碼，目的很簡單 ，當你輸入一些字元到表單後，點擊按鈕，會改變相應的幾個HTML對象的內容：
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Observer Pattern - sample 01</title>
<script type="text/javascript">
//<![CDATA[
/**
* Get Element by ID
* @param {Object} id
* @return Element
*/
function $(id) {
return document.getElementById(id);
}
/**
* Window onload function
*/
window.onload = function(){
var formObj = $("form1");
formObj["changes"].onclick = function(){
$("Box_A").innerHTML = $("Box_A").id + ": "+formObj["fillbox"].value;
$("Box_B").innerHTML = $("Box_A").id + ": "+formObj ["fillbox"].value;
$("Box_C").innerHTML = $("Box_A").id + ": "+formObj["fillbox"].value;
}
}
//]]>
</script>
</head>
<body>
<form id="form1">
<div>
<input type="text" name="fillbox" size="50" />
<input type="button" value="改變內容" name="changes" />
</div>
</form>
<div id="Box_A">Box_A</div>
<div id="Box_B">Box_B</div>
<div id="Box_C">Box_C</div>
</body>
</html>
上面都是最簡單的面向過程的方法，這裡有兩點需要告訴大家的是：
1.我們完 全可以不再HTML裡面直接寫然後一個對象的時間方法(比如：<a onclick="func ();"></a>),這樣是完全沒有必要的，因為我們可以使用動態方式綁定這些方法到對象上 面。
2.在C/S開發中，每個程式總是要是有一個入口的，就是程式最初的觸發方式，而所有的程 序都是從這個地方開始，在代碼的可讀性上來說，這樣做可以方便維護的時候快速找到程式入口，所以 基本我是不會直接在JS裡面去執行方法，而是使用window.onload事件來開始程式。當然更進階的技巧是 使用DOM load方式，這樣就可以避免大的圖片載入前，你的JS什麼都不能做的缺陷，具體的方式我會抽 時間詳細講解B/S開發的入口設計。
然後我們就要開始修改這些JS代碼，最遲的修改肯定是把相 同的方法給抽象出來，我們發現每個對象的innerHTML複製方式是一樣的，那麼我們就抽象這個方法出來 ：
程式碼
/**
* 改變內容
* @param {Node} elem-節點對象
* @param {String} value 值
*/
function ChangeContent(elem, value){
elem.innerHTML = elem.id + ": "+ value;
}
這個時候的onload方 法就變為：
程式碼
/**
* Window onload function
*/
window.onload = function(){
var formObj = $("form1");
formObj["changes"].onclick = function(){
ChangeContent ($("Box_A"),formObj["fillbox"].value);
ChangeContent ($("Box_B"),formObj["fillbox"].value);
ChangeContent ($("Box_C"),formObj["fillbox"].value);
}
}
當需求告訴我們，每個對象的內容需要顯示不同的時候，我們就要把抽象方法按不同的需求重寫一次， 這個時候JS顯示如下：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
