插件体系

Omi是Web组件化框架，怎么又来了个插件的概念？

可以这么理解: Omi插件体系可以赋予dom元素一些能力，并且可以和组件的实例产生关联。

omi-drag

且看这个例子:

点击这里→在线试试

..(data) () ().);

如上面的代码所示，通过在div上标记omi-drag，这个div就能够被用户使用鼠标拖拽。我们称omi-drag.js为omi插件。
是不是非常方便？那么这个omi-drag是怎么实现的？

Omi.extendPlugin

核心方法: Omi.extendPlugin( pluginName, handler )

下面的代码就是展示了如何通过 Omi.extendPlugin 赋予dom拖拽的能力:

Omi ('omi') : .()(domisMouseDown preX preY currentX currentY translateX translateY .(evt){ isMouseDown preX preY .)(evt){ if(isMouseDown){ currentX currentY (preX != null){ translateX += currentX - preX; translateY translateXtranslateYpreX = currentX; preY )(){ isMouseDown preX ).().(.(.().)();

方法: Omi.extendPlugin( pluginName, handler )

其中pluginName为插件的名称
其中handler为处理器。handler可以拿到标记了pluginName的dom以及dom所在的组件的实例，即 dom 和 instance。

通过 Omi.extendPlugin，可以赋予dom元素一些能力，也可以和组件的实例(instance)产生关联。
但是上面的例子没有和instance产生关联，我们接下来试试:

关联instance

我们想在组件里面能够监听到move并且执行回调。如下:

... ... () ...

主要被拖动过程中，moveHandler就不断地被执行。插件代码需要修改:

... (evt){ if(isMouseDown){ currentX currentY (preX != null){ translateX += currentX - preX; translateY translateXtranslateYpreX = currentX; preY .);

我们在里面增加了instance.moveHandler(evt);方法，用来执行组件实例上的moveHandler方法。
这样的话:就是组件的实例(instance)产生关联。但是还是有问题？如果标记了多个omi-drag 就会有问题！如:

... ...

通常我们系统每个omi-drag都能对应一个回调函数，如：

... ... ()() ...

怎么办？怎么实现？有办法！通过dom传递数据给插件。

传递数据

先来看最后实现的效果:

... ... ()() ...

omi-drag修改的地方:

... .(evt){ if(isMouseDown){ currentX currentY (preX != null){ translateX += currentX - preX; translateY translateXtranslateYpreX = currentX; preY = currentY; evt.preventDefault(); instance[handlerName](evt)); ...

通过 var handlerName = dom.getAttribute('dragMove') 拿到dom上声明的dragMove

通过 instancehandlerName 去执行对应的方法

点击这里→在线试试

更多插件 相关

如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)