我们知道 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 属性来传递命令,所有的逻辑就是这么简单.