inEdit 的设计方法--整体结构

inEdit编辑器设计

最新推荐文章于 2025-09-08 09:24:43 发布

最新推荐文章于 2025-09-08 09:24:43 发布 · 858 阅读

文章标签：

#JavaScript #编程 #OOP #OO #prototype #ViewUI

inEdit 专栏收录该内容

7 篇文章

订阅专栏

inEdit是一款基于JavaScript的WYSIWYG编辑器，采用扩展方式实现面向对象编程。设计中包含inCore、inQueue和inI18N等多个模块，支持多实例编辑，并通过简化事件处理提高效率。

我们知道 OOP 的编程方法是为多数开发者喜欢的.javascript 作为 OO 的语言也具有对 OOP 的支持,

但是 javascript 不同于其他的语言,javascript 里并没有 class 的概念.

我认为 javascript 在 OOP 实现上其实都是扩展的方法,因此在设计 inEdit 的时候我决定完全用扩展的方法来进行设计.因此在 inEdit 里是见不到 prototype 原型定义这种方法的,了解 inEdit 的设计方法对使用和扩展 inEdit 是很必要的.

为完成这个目标,首先我设计了

inMixin :混入对象,其实就是其他库里面常见的 extent 了,不过由于实现不同,就起了一个新的名字
inCore :提供了 javascript 编程里面常用的函数支持,比如字符串trim,数组/对象的遍历,ElementNode的遍历/style设置/属性设置等
inQueue :队列,我认为队列是一组顺序执行的function,因此Event也属于队列的一种,所以在设计inQueue时,把Event的处理也包括进来,对于命令式的function队列虽然也实现了,可我自己都不知道什么时候用,所以目前仅仅在理论上存在这种需求.

另外对于WYSIWYG编辑器来说,国际化支持是很必要的,因此设计了inI18N,

inEdit 就是在inCore,inQueue的基础上扩展而来的.对inI18N来说扩展这个词不合适,用inEdit 混入了 inI18N比较合适,看了代码也许大家就明白我为什么这么说了,但这样说却不会有错误:

inEdit 混入了 inCore,inQueue, inI18N.

因为对于 javascript 编程来说Mixin混入的概念仍然不确定,我这样用了当然可以用自己的理解来定义这个词.并且从词义上这种说法也可以通过.

要全面介绍这几个对象的实现还不如直接看源代码,源代码里多数函数都做了注释.
这里仅仅介绍 inEdit 在结构上的设计.

inEdit 认为:

多数情况下在一个页面上不管有多少需要 WYSIWYG编辑的元素,仅仅需要一个编辑面板就够了,当然如果需要多个面板 inEdit 也是支持的.也就是说 inEdit 支持所谓的多实例 编辑.
一个编辑器在视觉上仅仅需要三部分组成,面板(panel),弹出层(modalPanel),实例(Instance,当然可以有多个).而inEdit在设计 modalPanel 时把它作为 panel 的子节点设计了,原因很简单某一时刻只可能有一个点击行为,不管你点的按钮在 panel 上还是 modalPanel 上,因此 modalPanel 仅仅是 panel 中的一个特殊的可以隐藏或显示的按钮组罢了.
经过上面的阐述该说说事件的处理了,常见的编辑器为不同的点击命令( 触发 Element)增加了各自的 Event , inEdit 事实上把所有的触发 Element 都置于 panel 下,那其实只需要对 panel 加一个 click Event,然后通过分析触发事件的 target||srcElement 就可以了, inEdit 正是把参数以 inEditButton 对象附加到这些Element 或其 parentNode 上来完成整个触发事件的分发
上面说的是事件,具体到 inEdit 对象上其实具体体现到成员函数上了, inEditButton对象中有 command 属性,inEdit 首先判断有没有与 command 同名的成员函数有的话,就调用,没有的话就当作 document.execCommand 的命令转发出去了.
因此 inEdit 的结构是平板式的,函数就是 inEditButton 中的command 属性,inEditButton 附身于 panel (modalPanel),inEdit 监听panel的chick事件,捕获后通过分析 target||srcElement 的 inEditButton 属性来传递命令,所有的逻辑就是这么简单.