本文详解如何使用 JavaScript 闭包实现就地编辑功能，通过类似 Java 的私有/公有方法封装提升代码清晰度。重点分析了调试中遇到的事件冒泡导致编辑域自动隐藏，以及 IE 下 innerHTML 清除节点引发的内存引用问题，并给出 removeNode 等解决方案。
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> [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 支持），但发现该方法无法实现继承（目前未找到有效的继承方案），这表明该模式存在一定局限性。
总结与局限性分析
总结建议：编码前务必进行充分规划，明确所需的设计模式，或确认是否确实需要引入模式。
最后：如果文中有任何错误或建议，欢迎指正，这也是撰写本文的初衷。