JavaScript 实现就地编辑：基于闭包的私有化封装与调试心得

JavaScript 就地编辑实现概述

基于上述需求，生成了以下实现方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title>  </head> <body> <style type="text/css"> #directEditorSpan input{ border:1px solid #ccc; background-color:#fff; color:#696969; float:left;} #info{ border-collapse:collapse; } #info td { border:1px solid #ccc; text-align:left; padding-left:10px; line-height:20px; width:100px; font-size:12px; } </style> <table id="info"> <tr><td>姓名</td><td>progresstudy</td></tr> <tr><td>年龄</td><td>22</td></tr> <tr><td>职业</td><td>学生</td></tr> </table> </script> </body> </html> 

该实现采用了类似 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 支持），但发现该方法无法实现继承（目前未找到有效的继承方案），这表明该模式存在一定局限性。

总结与局限性分析

总结建议：编码前务必进行充分规划，明确所需的设计模式，或确认是否确实需要引入模式。

最后：如果文中有任何错误或建议，欢迎指正，这也是撰写本文的初衷。