HTML5技术

Omi教程-插件体系 - 【当耐特】

字号+ 作者:H5之家 来源:H5之家 2017-03-02 18:00 我要评论( )

插件体系 Omi是Web组件化框架,怎么又来了个插件的概念? 可以这么理解: Omi插件体系可以赋予dom元素一些能力,并且可以和组件的实例产生关联。 omi-drag 且看这个例子: 点击这里→在线试试 ..(data) () ().) ; 如上面的代码所示,通过在div上标记omi-drag,

插件体系

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)
    

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • AlloyTouch之select选择插件 - 【当耐特】

      AlloyTouch之select选择插件 - 【当耐特】

      2017-02-28 11:01

    • Omi教程-生命周期和事件处理 - 【当耐特】

      Omi教程-生命周期和事件处理 - 【当耐特】

      2017-02-23 12:00

    • plugman创建cordova插件 - 520倾情

      plugman创建cordova插件 - 520倾情

      2017-02-23 11:07

    • Omi教程-组件通讯攻略大全 - 【当耐特】

      Omi教程-组件通讯攻略大全 - 【当耐特】

      2017-02-17 14:00

    网友点评
    t