DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript 就地編輯實現代碼
javascript 就地編輯實現代碼
編輯:關於JavaScript     
於是有了這個:

[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
這個是用類似Java的方式寫的,有私有方法,私有屬性,公有方法(以前最喜歡用的方法)。
也就是這種類似的形式:
復制代碼 代碼如下:
var Deditor=(function(){
//private method
//private prototype
return function(){
//public method
};
})();


我先是把大體的框架寫出來:
復制代碼 代碼如下:
var Deditor=(function(){
//private method
function addEvent(){}//添加事件
function fixEvent(){}//兼容event對象
function addLinkCss(){}//添加外聯樣式
function createEditorFile(){}//創建必要的HTML
function addEvents(){}//為新創建元素綁定事件
function fileToContext(){}//編輯轉文本
function contextToFile(){}//文本轉編輯
function save(){}//保存
function cancel(){}//放棄
//private prototype
var currentContext;//當前編輯內容
var html;//新創建的html對象
var url;//AJAX請求,保存內容
var currentElem;//當前所在元素
var elems=[];//所有可就地編輯的元素
var elemItems={};//所有新創建的節點
return function(){
//public method
this.thenEffect(){}//設置所有可就地編輯的元素
this.setUrl(){}//設置url值
this.setCssHref(){}//設置外聯css的href
}
})();

剩下的工作就是把所有的方法給實現了,並完善它。
也許是應為我第一個認真學習的語言是java,所有這種形式的編寫風格使我由始至終思路清晰,到此順利完成了

接下來調試的過程中遇到了兩個問題,在這裡有必要說一下,在以後的編程中可能會遇到
一個是事件的冒泡引起的:
當點擊文本框,或按鈕時可編輯域自動隱藏了,原因是父節點捕獲了鼠標點擊事件,並執行了fileToContext()函數
第二個是,在IE下用innerHTML來清除內容,會把子節點從內存中徹底移除,但如果你用alert(html)檢測時,它還會顯示此為node節點對象。
所有最好用removeNode來移除節點,如果你打算以後還用的話。

至此'就地編輯'基本完成了(還需要AJAX支持才行),但遇到了一個問題,不能繼承(反正到目前我還沒想到一個繼承的方法),當時實在有些無語。這種方法的確有局限性。

總結一下:編碼前一定要好好規劃一下,明確到底要使用那一個/幾個模式,或確定要不要使用模式。

最後:如果我所寫的有任何不對的地方或有任何建議請指正出來,這也是我寫博文的目的。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved