AD

javascript 就地编辑实现代码

最近正在看《javascript设计模式》,其中有一个'就地编辑'的示例,用来表现不同的继承方式,看完之后想自己凭理解写一个类似的东西。

于是有了这个:

无标题文档

姓名 progresstudy
年龄 22
职业 学生

[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支持才行),但遇到了一个问题,不能继承(反正到目前我还没想到一个继承的方法),当时实在有些无语。这种方法的确有局限性。

总结一下:编码前一定要好好规划一下,明确到底要使用那一个/几个模式,或确定要不要使用模式。

最后:如果我所写的有任何不对的地方或有任何建议请指正出来,这也是我写博文的目的。

标签: JavaScript, 就地编辑
分类: javascript技巧
时间: 2014-06-11

相关文章

  1. JavaScript 就地编辑HTML节点实现代码

    JavaScript 就地编辑HTML节点实现代码 点击编辑当前内容 Edit Demo 脚本之家 www.jb51.net Copyright:Super sha. [Ctrl+A 全选 注:如需引入外部Js需刷新才能 ...
  2. javascript 双击文本框编辑功能代码

    javascript 双击文字后实现编辑文本功能代码 javascript 双击文本框编辑功能代码 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
  3. 分享9个最好用的JavaScript开发工具和代码编辑器

    这篇文章主要介绍了9个最好用的JavaScript开发工具和代码编辑器,需要的朋友可以参考下 Web设计和开发是现今越来越流行的职业方向之一.工欲善其事,必先利其器,如果你想在这个领域出类拔萃,那么你就必须具备一些优秀的 ...
  4. javascript 网页编辑框及拖拽图片的问题

    javascript 网页编辑框及拖拽图片的问题,需要的朋友可以参考下. function keyPress(ev){ if(ev.keyCode==13){ //在光标所在处创建一个区域. var range=docu ...
  5. 基于jquery实现状态限定编辑的代码

    基于jquery实现状态限定编辑的代码,需要的朋友可以参考下 页面表单初始情况如图,所有文本框都是不能编辑的 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//E ...
  6. jQuery 就地编辑库 x-editable

    x-editable 网站 : http://vitalets.github.io/x-editable/ x-editable 是 jQuery,jQuery UI,Bootstrap 就地编辑库.x-editable ...
  7. 9个最好用的JavaScript开发工具和代码编辑器

    Web设计和开发是现今越来越流行的职业方向之一.工欲善其事,必先利其器,如果你想在这个领域出类拔萃,那么你就必须具备一些优秀的技能,例如能操作不同的平台.IDE和其他各种各样的工具. 谈到平台和IDE,现在已经不是以前那 ...
  8. javascript 实现滚动效果代码整理

    javascript 实现滚动效果代码整理,需要的朋友可以参考下. 1.先写两个最常用最简洁的滚动代码 代码如下: 水平滚动: <marquee direction="left" align=& ...
  9. JavaScript之HTMLCollection接口代码

    JavaScript之HTMLCollection接口代码,需要的朋友可以参考下. interface HTMLCollection { //包含结点的个数 readonly attribute unsigned lon ...
  10. 动态载入/删除/更新外部 JavaScript/Css 文件的代码

    动态载入/删除/更新外部 JavaScript/Css 文件的代码 动态载入 JavaScript/Csss 文件 传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在<hea ...
  11. 可以测试javascript运行效果的代码

    在这个页面中可以简单的测试一些简单的JavaScript语句 可以再代码框中编写简单的JavaScript [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 以上是从一个实验的例子中找出的,贴出来和大家分享,也 ...
  12. JavaScript Konami Code 实现代码

    JavaScript Konami Code 实现代码 在 Facebook 上有一个彩蛋: 登录 facebook.com ,点击你首页的任何地方,键盘输入 Up, Up, Down, Down, Left, Righ ...
  13. javascript 打字游戏实现代码

    javascript 打字游戏实现代码,非常不错的效果,功能还不是很完善,喜欢的朋友可以参考下. 效果如图所示: 下面是核心代码 GAME = { //随机产生字母 randLetter: function() { va ...
  14. Javascript读取cookie函数代码

    Javascript读取cookie函数代码,需要的朋友可以参考下. 用法: 一.设置cookie var cookie = new JSCookie(); // 普通设置 cookie .SetCookie(" ...
  15. JavaScript 密码强度判断代码

    JavaScript 密码强度判断代码,其实就是利用了判断一些特殊符号,字符串长度等来实现判断. <script type="text/javascript"> //CharMode函数 ...
  16. javascript 获取网页标题代码实例

    这篇文章主要介绍了javascript 获取网页标题代码实例,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
  17. javascript GUID生成器实现代码

    javascript GUID生成器实现代码, 需要的朋友可以参考下. /jslib/other/IntUtil_post.js 大家先把上面的代码保存到本地.保存为IntUtil_post.js 测试代码: <s ...
  18. javascript 控制图片播放代码

    无标题文档 昆山论坛"新世军"军团掠影 2009年昆山第三届徒步大会昆坛会员合影 昆坛会员相聚阳澄湖畔野炊活动 昆坛大合唱"相亲相爱一家人"家人风采 "我是女生" ...
  19. JavaScript 时分秒时间代码(自动补零)

    JavaScript 时分秒时间代码,时间小于10的就补充一个零. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] javascript 补零 函数集合