快捷導(dǎo)航

javascript 就地編輯實(shí)現(xiàn)代碼

更新時(shí)間：2010年05月10日 11:49:26 作者：

最近正在看《javascript設(shè)計(jì)模式》，其中有一個(gè)'就地編輯'的示例，用來(lái)表現(xiàn)不同的繼承方式，看完之后想自己憑理解寫(xiě)一個(gè)類似的東西。

于是有了這個(gè)：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

這個(gè)是用類似Java的方式寫(xiě)的，有私有方法，私有屬性，公有方法(以前最喜歡用的方法)。
也就是這種類似的形式：

 
var Deditor=(function(){ 
//private method 
//private prototype 
return function(){ 
//public method 
}; 
})(); 

我先是把大體的框架寫(xiě)出來(lái)：

復(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í)的語(yǔ)言是java，所有這種形式的編寫(xiě)風(fēng)格使我由始至終思路清晰，到此順利完成了

接下來(lái)調(diào)試的過(guò)程中遇到了兩個(gè)問(wèn)題，在這里有必要說(shuō)一下，在以后的編程中可能會(huì)遇到
一個(gè)是事件的冒泡引起的：
當(dāng)點(diǎn)擊文本框，或按鈕時(shí)可編輯域自動(dòng)隱藏了，原因是父節(jié)點(diǎn)捕獲了鼠標(biāo)點(diǎn)擊事件，并執(zhí)行了fileToContext()函數(shù)
第二個(gè)是，在IE下用innerHTML來(lái)清除內(nèi)容，會(huì)把子節(jié)點(diǎn)從內(nèi)存中徹底移除，但如果你用alert(html)檢測(cè)時(shí)，它還會(huì)顯示此為node節(jié)點(diǎn)對(duì)象。
所有最好用removeNode來(lái)移除節(jié)點(diǎn)，如果你打算以后還用的話。

至此'就地編輯'基本完成了(還需要AJAX支持才行)，但遇到了一個(gè)問(wèn)題，不能繼承(反正到目前我還沒(méi)想到一個(gè)繼承的方法)，當(dāng)時(shí)實(shí)在有些無(wú)語(yǔ)。這種方法的確有局限性。

總結(jié)一下：編碼前一定要好好規(guī)劃一下，明確到底要使用那一個(gè)/幾個(gè)模式，或確定要不要使用模式。

最后：如果我所寫(xiě)的有任何不對(duì)的地方或有任何建議請(qǐng)指正出來(lái)，這也是我寫(xiě)博文的目的。