以前那篇我写的alloyfinger源码解读那篇帖子，就说过这是一个很好用的手势库，hammer能做的，他都能做到，
而且源码只有350来行代码，很容易看懂。
那么怎么把这么好的库作为omi库的一个插件呢，使dom，用起来更爽，更方便呢？
omi自己有个叫插件体系的功能，主要是赋予dom元素一些能力，并且可以和组件的实例产生关联。
这当然棒极了。那怎么实现的呢？
还是先看个demo,看看用起来爽不，爽的话，再看原理也不迟啊。
OmiFinger.init(); // 初始化OmiFinger插件
class App extends Omi.Component {
constructor(data) {
super(data);
}
style() {
return `
.touchArea{
background-color: green;
width: 200px;
min-height: 200px;
text-align: center;
color:white;
height:auto;
}
`;
}
tap(evt) {
console.log(this.refs.div1);
this.refs.ptext.innerHTML = 'tap';
}
longTap(evt) {
console.log(evt);
this.refs.ptext.innerHTML = 'longTap';
}
swipe(evt) {
this.refs.ptext.innerHTML = evt.direction;
}
render() {
return `
<div>
<div omi-finger class="touchArea" tap="tap" longTap="longTap" swipe="swipe" ref="div1"> <!--在这里写事件名即可-->
Tap or Swipe Me!
<p ref="ptext"></p>
</div>
</div>
`;
}
}
var app = new App();
Omi.render(app, 'body');看下结果：
我热，就是这么简单，就把rotate touchStart multipointStart multipointEnd pinch swipe tap doubleTap longTap singleTap pressMove touchMove touchEnd touchCancel这14个事件都能赋给dom去监听相应的实例函数。
的确很方便，很omi,一个类(哦，不，一个组件(大家都喜欢叫组件，我内心是拒绝的))管理一切啊。
demo的疑问和疑问的说明：
疑问一：
那omi是怎么做到的啊？
答： 其实omi的插件机制代码很少，少的可怜，只是作为Component原型上_execPlugins方法，当然少不了和omi挂钩了，Omi上有个plugins对象属性，里面专门放插件名及插件函数的。
那就一步一步来吧。
demo上的OmiFinger.init();其实就是把初始化了一个插件，放到omi.plugins上去了，仅此而已，没帮我们做别的。来看源码
Omi.plugins = {}; // omi插件集合
// 扩展插件的方法(其实是给了plugins这个对象)
Omi.extendPlugin = function(name, handler) {
Omi.plugins[name] = handler;
};再来看一下OmiFinger.init();方法是不是调用了Omi.extendPlugin方法
var OmiFinger = {};
var noop = function(){ };
var getHandler = function(name, dom, instance) {
var value = dom.getAttribute(name); // 从属性上获取对应的函数名
if (value === null) {
return noop;
}else{
return instance[value].bind(instance); // 从类上找到对应的方法
};
};
OmiFinger.init = function(){
Omi.extendPlugin('omi-finger',function(dom, instance){
if (!instance.alloyFingerInstances) instance.alloyFingerInstances = []; // finger的实例都存到这里面
var len = instance.alloyFingerInstances.length;
var i = 0;
for( ; i<len; i++){
if(instance.alloyFingerInstances[i].dom === dom){ // 如果以前绑定过得, 就先销毁, 然后重新來过
instance.alloyFingerInstances[i].fg.destroy();
instance.alloyFingerInstances.splice(i,1); // 并且剔除
break;
};
};
var alloyFinger = new AlloyFinger(dom,{
touchStart: getHandler('touchStart', dom, instance),
touchMove: getHandler('touchMove', dom, instance),
touchEnd: getHandler('touchEnd', dom, instance),
touchCancel: getHandler('touchCancel', dom, instance),
multipointStart: getHandler('multipointStart', dom, instance),
multipointEnd: getHandler('multipointEnd', dom, instance),
tap: getHandler('tap', dom, instance),
doubleTap: getHandler('doubleTap', dom, instance),
longTap: getHandler('longTap', dom, instance),
singleTap: getHandler('singleTap', dom, instance),
rotate: getHandler('rotate', dom, instance),
pinch: getHandler('pinch', dom, instance),
pressMove: getHandler('pressMove', dom, instance),
swipe: getHandler('swipe', dom, instance)
});
instance.alloyFingerInstances.push({fg:alloyFinger,dom:dom});
});
}
OmiFinger.destroy = function(){
delete Omi.plugins['omi-finger'];
};
window.OmiFinger = OmiFinger;这里我把代码都贴出来，因为比较简单。
Omi.plugins有了对象插件名和函数，那是怎么循环遍历的呢？
其实就在Component类的_render方法最后面，遍历的，也就是当html插入到指定容器后，再调用的。
那是怎么调用的呢？
// 插件机制
_execPlugins(){
Object.keys(Omi.plugins).forEach(item => { // 遍历omi的插件
let nodes = Omi.$$('*['+item+']',this.node); // 具有插件名属性的dom
nodes.forEach(node => {
if(node.hasAttribute(this._omi_scoped_attr) ) { // 节点是否含有_omi_scoped_id属性
Omi.plugins[item](node, this); // 调用插件init方法中第二个函数
};
});
if(this.node.hasAttribute(item)) { // 看一下根节点是否含有插件名属性,有的话也执行
Omi.plugins[item](this.node, this);
};
});
}
可以看到，会传2个参数，一个dom,一个实例.正是验证了官网的这句话。 Omi插件体系可以赋予dom元素一些能力，并且可以和组件的实例产生关联。
至此就这么说完了。
ps:
当然还有transform.js, touch.js也可以让dom玩的飞起，后续再写帖子吧。