javascript 就地編輯實(shí)現(xiàn)代碼
更新時(shí)間:2010年05月10日 11:49:26 作者:
最近正在看《javascript設(shè)計(jì)模式》,其中有一個(gè)'就地編輯'的示例,用來表現(xiàn)不同的繼承方式,看完之后想自己憑理解寫一個(gè)類似的東西。
于是有了這個(gè):
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這個(gè)是用類似Java的方式寫的,有私有方法,私有屬性,公有方法(以前最喜歡用的方法)。
也就是這種類似的形式:
var Deditor=(function(){
//private method
//private prototype
return function(){
//public method
};
})();
我先是把大體的框架寫出來:
var Deditor=(function(){
//private method
function addEvent(){}//添加事件
function fixEvent(){}//兼容event對(duì)象
function addLinkCss(){}//添加外聯(lián)樣式
function createEditorFile(){}//創(chuàng)建必要的HTML
function addEvents(){}//為新創(chuàng)建元素綁定事件
function fileToContext(){}//編輯轉(zhuǎn)文本
function contextToFile(){}//文本轉(zhuǎn)編輯
function save(){}//保存
function cancel(){}//放棄
//private prototype
var currentContext;//當(dāng)前編輯內(nèi)容
var html;//新創(chuàng)建的html對(duì)象
var url;//AJAX請(qǐng)求,保存內(nèi)容
var currentElem;//當(dāng)前所在元素
var elems=[];//所有可就地編輯的元素
var elemItems={};//所有新創(chuàng)建的節(jié)點(diǎn)
return function(){
//public method
this.thenEffect(){}//設(shè)置所有可就地編輯的元素
this.setUrl(){}//設(shè)置url值
this.setCssHref(){}//設(shè)置外聯(lián)css的href
}
})();
剩下的工作就是把所有的方法給實(shí)現(xiàn)了,并完善它。
也許是應(yīng)為我第一個(gè)認(rèn)真學(xué)習(xí)的語言是java,所有這種形式的編寫風(fēng)格使我由始至終思路清晰,到此順利完成了
接下來調(diào)試的過程中遇到了兩個(gè)問題,在這里有必要說一下,在以后的編程中可能會(huì)遇到
一個(gè)是事件的冒泡引起的:
當(dāng)點(diǎn)擊文本框,或按鈕時(shí)可編輯域自動(dòng)隱藏了,原因是父節(jié)點(diǎn)捕獲了鼠標(biāo)點(diǎn)擊事件,并執(zhí)行了fileToContext()函數(shù)
第二個(gè)是,在IE下用innerHTML來清除內(nèi)容,會(huì)把子節(jié)點(diǎn)從內(nèi)存中徹底移除,但如果你用alert(html)檢測(cè)時(shí),它還會(huì)顯示此為node節(jié)點(diǎn)對(duì)象。
所有最好用removeNode來移除節(jié)點(diǎn),如果你打算以后還用的話。
至此'就地編輯'基本完成了(還需要AJAX支持才行),但遇到了一個(gè)問題,不能繼承(反正到目前我還沒想到一個(gè)繼承的方法),當(dāng)時(shí)實(shí)在有些無語。這種方法的確有局限性。
總結(jié)一下:編碼前一定要好好規(guī)劃一下,明確到底要使用那一個(gè)/幾個(gè)模式,或確定要不要使用模式。
最后:如果我所寫的有任何不對(duì)的地方或有任何建議請(qǐng)指正出來,這也是我寫博文的目的。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這個(gè)是用類似Java的方式寫的,有私有方法,私有屬性,公有方法(以前最喜歡用的方法)。
也就是這種類似的形式:
復(fù)制代碼 代碼如下:
var Deditor=(function(){
//private method
//private prototype
return function(){
//public method
};
})();
我先是把大體的框架寫出來:
復(fù)制代碼 代碼如下:
var Deditor=(function(){
//private method
function addEvent(){}//添加事件
function fixEvent(){}//兼容event對(duì)象
function addLinkCss(){}//添加外聯(lián)樣式
function createEditorFile(){}//創(chuàng)建必要的HTML
function addEvents(){}//為新創(chuàng)建元素綁定事件
function fileToContext(){}//編輯轉(zhuǎn)文本
function contextToFile(){}//文本轉(zhuǎn)編輯
function save(){}//保存
function cancel(){}//放棄
//private prototype
var currentContext;//當(dāng)前編輯內(nèi)容
var html;//新創(chuàng)建的html對(duì)象
var url;//AJAX請(qǐng)求,保存內(nèi)容
var currentElem;//當(dāng)前所在元素
var elems=[];//所有可就地編輯的元素
var elemItems={};//所有新創(chuàng)建的節(jié)點(diǎn)
return function(){
//public method
this.thenEffect(){}//設(shè)置所有可就地編輯的元素
this.setUrl(){}//設(shè)置url值
this.setCssHref(){}//設(shè)置外聯(lián)css的href
}
})();
剩下的工作就是把所有的方法給實(shí)現(xiàn)了,并完善它。
也許是應(yīng)為我第一個(gè)認(rèn)真學(xué)習(xí)的語言是java,所有這種形式的編寫風(fēng)格使我由始至終思路清晰,到此順利完成了
接下來調(diào)試的過程中遇到了兩個(gè)問題,在這里有必要說一下,在以后的編程中可能會(huì)遇到
一個(gè)是事件的冒泡引起的:
當(dāng)點(diǎn)擊文本框,或按鈕時(shí)可編輯域自動(dòng)隱藏了,原因是父節(jié)點(diǎn)捕獲了鼠標(biāo)點(diǎn)擊事件,并執(zhí)行了fileToContext()函數(shù)
第二個(gè)是,在IE下用innerHTML來清除內(nèi)容,會(huì)把子節(jié)點(diǎn)從內(nèi)存中徹底移除,但如果你用alert(html)檢測(cè)時(shí),它還會(huì)顯示此為node節(jié)點(diǎn)對(duì)象。
所有最好用removeNode來移除節(jié)點(diǎn),如果你打算以后還用的話。
至此'就地編輯'基本完成了(還需要AJAX支持才行),但遇到了一個(gè)問題,不能繼承(反正到目前我還沒想到一個(gè)繼承的方法),當(dāng)時(shí)實(shí)在有些無語。這種方法的確有局限性。
總結(jié)一下:編碼前一定要好好規(guī)劃一下,明確到底要使用那一個(gè)/幾個(gè)模式,或確定要不要使用模式。
最后:如果我所寫的有任何不對(duì)的地方或有任何建議請(qǐng)指正出來,這也是我寫博文的目的。
相關(guān)文章
require簡(jiǎn)單實(shí)現(xiàn)單頁應(yīng)用程序(SPA)
下面小編就為大家?guī)硪黄猺equire簡(jiǎn)單實(shí)現(xiàn)單頁應(yīng)用程序(SPA)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07深入探究JavaScript中for循環(huán)的效率問題及相關(guān)優(yōu)化
這篇文章主要介紹了JavaScript中for循環(huán)的效率問題及相關(guān)優(yōu)化,文中談到了Underscore.js庫及循環(huán)在各個(gè)瀏覽器js解釋器下的表現(xiàn),需要的朋友可以參考下2016-03-03javaScript代碼飄紅報(bào)錯(cuò)看不懂?讀完這篇文章再試試
這篇文章主要介紹了javaScript代碼飄紅報(bào)錯(cuò)看不懂?讀完這篇文章再試試,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08JS 對(duì)象屬性相關(guān)(檢查屬性、枚舉屬性等)
這篇文章主要介紹了JS 對(duì)象屬性相關(guān)(檢查屬性、枚舉屬性等),需要的朋友可以參考下2015-04-04