一種JavaScript的設(shè)計模式
更新時間:2006年11月22日 00:00:00 作者:
一種JavaScript的設(shè)計模式
//簡單的類的設(shè)計模式
//定義一個類class1
function class1() {
//構(gòu)造函數(shù)
}
//通過指定prototype對象來實(shí)現(xiàn)類的成員定義
class1.prototype = {
someProperty:"simple",
someMethod:function {
//方法代碼
},
//其實(shí)屬性和方法
}在一個類的成員之間互相引用,必須通過this指針來進(jìn)行。因?yàn)樵贘avaScript中第個屬性和方法都是獨(dú)立的,它們通過this指針聯(lián)系在一個對象上。
//簡單的帶參數(shù)的事件設(shè)計模式
<script language="JavaScript" type="text/javascript">
<!--
//將有參數(shù)的函數(shù)封裝為無參數(shù)的函數(shù)
function createFunction(obj, strFunc) {
var args = [];//定義args用于存儲傳遞給事件處理程序的參數(shù)
if(!obj) obj = window;//如果是全局函數(shù)則obj=window;
//得到傳遞給事件處理程序的參數(shù)
for(var i=2; i<arguments.length; i++) {
args.push(arguments[i]);
}
//用無參數(shù)函數(shù)封裝事件處理程序的調(diào)用
return function() {
obj[strFunc].apply(obj, args);//將參數(shù)傳遞給指定的事件處理程序
}
}
//定義類class1
function class1() {
//構(gòu)造函數(shù)
}
class.prototype = {
show:function() {
//show函數(shù)的實(shí)現(xiàn)
this.onshow();//觸發(fā)onshow事件
},
onShow:function() {}//定義事件接口
}
//創(chuàng)建class1的實(shí)例
var obj = new class1();
//創(chuàng)建obj的onshow事件處理程序
function objOnshow(userName) {
alert("hello,"+userName);
}
//定義變量userName
var userName = "terry";
//綁定obj的onShow事件
obj.onShow=createFunction(null, "objOnshow", userName);
//調(diào)用obj的show方法
obj.show();
//-->
</script>
通過createFunction封裝,就可以用一種通用的方案實(shí)現(xiàn)參數(shù)傳遞。
//一個簡單的開發(fā)框架
<script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定處理函數(shù)、發(fā)送請求的函數(shù)
http_request = false;
//開始初始化XMLHttpRequest對象
if(window.XMLHttpRequest) { //Mozilla 瀏覽器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//設(shè)置MiME類別
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE瀏覽器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 異常,創(chuàng)建對象實(shí)例失敗
window.alert("不能創(chuàng)建XMLHttpRequest對象實(shí)例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 確定發(fā)送請求的方式和URL以及是否同步執(zhí)行下段代碼
http_request.open("GET", url, true);
http_request.send(null);
}
// 處理返回信息的函數(shù)
function processRequest() {
if (http_request.readyState == 4) { // 判斷對象狀態(tài)
if (http_request.status == 200) { // 信息已經(jīng)成功返回,開始處理信息
alert(http_request.responseText);
} else { //頁面不正常
alert("您所請求的頁面有異常。");
}
}
}
</script>
//簡單的類的設(shè)計模式
//定義一個類class1
function class1() {
//構(gòu)造函數(shù)
}
//通過指定prototype對象來實(shí)現(xiàn)類的成員定義
class1.prototype = {
someProperty:"simple",
someMethod:function {
//方法代碼
},
//其實(shí)屬性和方法
}在一個類的成員之間互相引用,必須通過this指針來進(jìn)行。因?yàn)樵贘avaScript中第個屬性和方法都是獨(dú)立的,它們通過this指針聯(lián)系在一個對象上。
//簡單的帶參數(shù)的事件設(shè)計模式
<script language="JavaScript" type="text/javascript">
<!--
//將有參數(shù)的函數(shù)封裝為無參數(shù)的函數(shù)
function createFunction(obj, strFunc) {
var args = [];//定義args用于存儲傳遞給事件處理程序的參數(shù)
if(!obj) obj = window;//如果是全局函數(shù)則obj=window;
//得到傳遞給事件處理程序的參數(shù)
for(var i=2; i<arguments.length; i++) {
args.push(arguments[i]);
}
//用無參數(shù)函數(shù)封裝事件處理程序的調(diào)用
return function() {
obj[strFunc].apply(obj, args);//將參數(shù)傳遞給指定的事件處理程序
}
}
//定義類class1
function class1() {
//構(gòu)造函數(shù)
}
class.prototype = {
show:function() {
//show函數(shù)的實(shí)現(xiàn)
this.onshow();//觸發(fā)onshow事件
},
onShow:function() {}//定義事件接口
}
//創(chuàng)建class1的實(shí)例
var obj = new class1();
//創(chuàng)建obj的onshow事件處理程序
function objOnshow(userName) {
alert("hello,"+userName);
}
//定義變量userName
var userName = "terry";
//綁定obj的onShow事件
obj.onShow=createFunction(null, "objOnshow", userName);
//調(diào)用obj的show方法
obj.show();
//-->
</script>
通過createFunction封裝,就可以用一種通用的方案實(shí)現(xiàn)參數(shù)傳遞。
//一個簡單的開發(fā)框架
<script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定處理函數(shù)、發(fā)送請求的函數(shù)
http_request = false;
//開始初始化XMLHttpRequest對象
if(window.XMLHttpRequest) { //Mozilla 瀏覽器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//設(shè)置MiME類別
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE瀏覽器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 異常,創(chuàng)建對象實(shí)例失敗
window.alert("不能創(chuàng)建XMLHttpRequest對象實(shí)例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 確定發(fā)送請求的方式和URL以及是否同步執(zhí)行下段代碼
http_request.open("GET", url, true);
http_request.send(null);
}
// 處理返回信息的函數(shù)
function processRequest() {
if (http_request.readyState == 4) { // 判斷對象狀態(tài)
if (http_request.status == 200) { // 信息已經(jīng)成功返回,開始處理信息
alert(http_request.responseText);
} else { //頁面不正常
alert("您所請求的頁面有異常。");
}
}
}
</script>
您可能感興趣的文章:
- JavaScript 設(shè)計模式學(xué)習(xí) Singleton
- 小議javascript 設(shè)計模式 推薦
- JavaScript 設(shè)計模式之組合模式解析
- javascript 設(shè)計模式之單體模式 面向?qū)ο髮W(xué)習(xí)基礎(chǔ)
- javascript 模式設(shè)計之工廠模式學(xué)習(xí)心得
- JavaScript 設(shè)計模式 安全沙箱模式
- JavaScript面向?qū)ο笤O(shè)計二 構(gòu)造函數(shù)模式
- javascript設(shè)計模式之對象工廠函數(shù)與構(gòu)造函數(shù)詳解
- 學(xué)習(xí)JavaScript設(shè)計模式(多態(tài))
- 常用的Javascript設(shè)計模式小結(jié)
相關(guān)文章
TypeScript基礎(chǔ)入門教程之三重斜線指令詳解
這篇文章主要給大家介紹了關(guān)于TypeScript基礎(chǔ)入門教程之三重斜線指令的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-10-10
關(guān)于JavaScript遞歸經(jīng)典案例題詳析
遞歸是算法中一個重要的解法,因此,有必要單拎出來講講,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript遞歸經(jīng)典案例題的相關(guān)資料,需要的朋友可以參考下2021-07-07
JS JSON對象轉(zhuǎn)為字符串的簡單實(shí)現(xiàn)方法
這篇文章主要介紹了JS中JSON對象轉(zhuǎn)為字符串的簡單實(shí)現(xiàn)方法。需要的朋友可以過來參考下,希望對大家有所幫助
2013-11-11
JavaScript拆分字符串時產(chǎn)生空字符的解決方案
使用JavaScript的split方法拆分字符串時出現(xiàn)一些空字符串"",尤其是當(dāng)使用正則表達(dá)式作為分隔符的時候。那么,產(chǎn)生這些空字符串的原因是什么?又該如何來處理呢,這就是今天我們要探討的問題
2014-09-09
JavaScript關(guān)于某元素點(diǎn)擊事件的監(jiān)聽和觸發(fā)
本文主要介紹了JavaScript關(guān)于某元素點(diǎn)擊事件的監(jiān)聽和觸發(fā),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07 
