javascript 就地編輯實(shí)現(xiàn)代碼
更新時間：2010年05月10日 11:49:26 作者：
最近正在看《javascript設(shè)計(jì)模式》，其中有一個'就地編輯'的示例，用來表現(xiàn)不同的繼承方式，看完之后想自己憑理解寫一個類似的東西。
于是有了這個：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這個是用類似Java的方式寫的，有私有方法，私有屬性，公有方法(以前最喜歡用的方法)。
也就是這種類似的形式：
var Deditor=(function(){
//private method
//private prototype
return function(){
//public method
};
})();
我先是把大體的框架寫出來：
var Deditor=(function(){
//private method
function addEvent(){}//添加事件
function fixEvent(){}//兼容event對象
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對象
var url;//AJAX請求，保存內(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)為我第一個認(rèn)真學(xué)習(xí)的語言是java，所有這種形式的編寫風(fēng)格使我由始至終思路清晰，到此順利完成了
接下來調(diào)試的過程中遇到了兩個問題，在這里有必要說一下，在以后的編程中可能會遇到
一個是事件的冒泡引起的：
當(dāng)點(diǎn)擊文本框，或按鈕時可編輯域自動隱藏了，原因是父節(jié)點(diǎn)捕獲了鼠標(biāo)點(diǎn)擊事件，并執(zhí)行了fileToContext()函數(shù)
第二個是，在IE下用innerHTML來清除內(nèi)容，會把子節(jié)點(diǎn)從內(nèi)存中徹底移除，但如果你用alert(html)檢測時，它還會顯示此為node節(jié)點(diǎn)對象。
所有最好用removeNode來移除節(jié)點(diǎn)，如果你打算以后還用的話。
至此'就地編輯'基本完成了(還需要AJAX支持才行)，但遇到了一個問題，不能繼承(反正到目前我還沒想到一個繼承的方法)，當(dāng)時實(shí)在有些無語。這種方法的確有局限性。
總結(jié)一下：編碼前一定要好好規(guī)劃一下，明確到底要使用那一個/幾個模式，或確定要不要使用模式。
最后：如果我所寫的有任何不對的地方或有任何建議請指正出來，這也是我寫博文的目的。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這個是用類似Java的方式寫的，有私有方法，私有屬性，公有方法(以前最喜歡用的方法)。
也就是這種類似的形式：
復(fù)制代碼 代碼如下:
var Deditor=(function(){
//private method
//private prototype
return function(){
//public method
};
})();
我先是把大體的框架寫出來：
復(fù)制代碼 代碼如下:
var Deditor=(function(){
//private method
function addEvent(){}//添加事件
function fixEvent(){}//兼容event對象
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對象
var url;//AJAX請求，保存內(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)為我第一個認(rèn)真學(xué)習(xí)的語言是java，所有這種形式的編寫風(fēng)格使我由始至終思路清晰，到此順利完成了
接下來調(diào)試的過程中遇到了兩個問題，在這里有必要說一下，在以后的編程中可能會遇到
一個是事件的冒泡引起的：
當(dāng)點(diǎn)擊文本框，或按鈕時可編輯域自動隱藏了，原因是父節(jié)點(diǎn)捕獲了鼠標(biāo)點(diǎn)擊事件，并執(zhí)行了fileToContext()函數(shù)
第二個是，在IE下用innerHTML來清除內(nèi)容，會把子節(jié)點(diǎn)從內(nèi)存中徹底移除，但如果你用alert(html)檢測時，它還會顯示此為node節(jié)點(diǎn)對象。
所有最好用removeNode來移除節(jié)點(diǎn)，如果你打算以后還用的話。
至此'就地編輯'基本完成了(還需要AJAX支持才行)，但遇到了一個問題，不能繼承(反正到目前我還沒想到一個繼承的方法)，當(dāng)時實(shí)在有些無語。這種方法的確有局限性。
總結(jié)一下：編碼前一定要好好規(guī)劃一下，明確到底要使用那一個/幾個模式，或確定要不要使用模式。
最后：如果我所寫的有任何不對的地方或有任何建議請指正出來，這也是我寫博文的目的。
相關(guān)文章
JS實(shí)現(xiàn)頁面跳轉(zhuǎn)與刷新的方法匯總
這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)頁面跳轉(zhuǎn)與刷新的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JavaScript如何讓select選擇框可輸入和可下拉選擇
我們知道一般select下拉框是只能選擇的,而有時我們會遇到下拉框中沒有要選擇的信息項(xiàng)或者下拉選項(xiàng)特別多時,需要允許用戶輸入想要的內(nèi)容,這篇文章主要給大家介紹了關(guān)于JavaScript如何讓select選擇框可輸入和可下拉選擇的相關(guān)資料,需要的朋友可以參考下2023-10-10
JavaScript自定義等待wait函數(shù)實(shí)例分析
這篇文章主要介紹了JavaScript自定義等待wait函數(shù),實(shí)例分析了自定義等待函數(shù)的實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2015-03-03
JavaScript如何動態(tài)監(jiān)聽DOM元素高度詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript如何動態(tài)監(jiān)聽DOM元素高度，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-07-07
javascript和jquery分別實(shí)現(xiàn)的九九乘法表代碼
javascript 九九乘法表 附j(luò)query 實(shí)現(xiàn)的九九乘法表代碼2010-03-03
常用Javascript函數(shù)與原型功能收藏(必看篇)
下面小編就為大家?guī)硪黄Ｓ肑avascript函數(shù)與原型功能收藏(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
JavaScript常用的返回，自動跳轉(zhuǎn)，刷新，關(guān)閉語句匯總
這篇文章主要介紹了JavaScript常用的返回，自動跳轉(zhuǎn)，刷新，關(guān)閉語句,實(shí)例匯總了常用的javascript技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-01-01
Javascript拖拽&拖放系列文章3之細(xì)說事件對象
Javascript中的事件對象其實(shí)和.NET中繼承自EventArgs類的派生類類似，用來給事件處理程序傳遞狀態(tài)信息，從而進(jìn)行相應(yīng)的操作。這一篇文章將講述Javascript事件對象中和實(shí)現(xiàn)拖拽功能相關(guān)的幾個屬性，并在最后將IE事件模型和標(biāo)準(zhǔn)DOM事件模型的差異封裝到一個類中，從而適應(yīng)所有的瀏覽器。2008-09-09
本文給大家介紹如何判斷用戶是否是用微信瀏覽器的實(shí)例代碼，根據(jù)關(guān)鍵字 MicroMessenger 來判斷是否是微信內(nèi)置的瀏覽器，感興趣的朋友可以參考下實(shí)現(xiàn)代碼2016-06-06
基于javascript、ajax、memcache和PHP實(shí)現(xiàn)的簡易在線聊天室
這篇文章主要介紹了基于javascript、ajax、memcache和PHP實(shí)現(xiàn)的簡易在線聊天室,需要的朋友可以參考下2015-02-02