用js单例设计模式写了一个Drag组件demo,暂时只有三个配置项。
config:{ id,toDown,toUp } //id为必填项,可以放在初始化方法init()中第一个参数。
//toDown:function类型
//toUp:function类型
源码地址:https://github.com/dingjiamughal/components/blob/master/componentDrag.html
演示效果:https://dingjiamughal.github.io/components/componentDrag.html
面向对象组件开发思路:
构造目标主题函数Drag(),声明默认options:
extend方法,覆盖默认参数:
初始化方法init,在init中调用extend方法:
基本思路完成,剩下的补充方法逻辑:
init为主接口,包含所有参数,因此所有方法都要写在init中
这里和demo版的有点区别——将id作为必选参数(id放在opt中如果不写也会报错,因为this.obj需要传id)
注意this指向问题:在init接口下的事件中的this指向this.obj,为了拿到Drag中的配置参数和Drag原型下的方法,要在init中保存this --> var _this=this;
关于This.settings.toDown():调用的是默认配置项中的方法,牵涉到extend函数将引用类型的自定义对象属性传给默认对象settings,所以直接调用默认参数即可
默认配置项settings的作用,防止多次调用产生效果冲突。
方法调用:
以上是Drag组件开发的基本流程,可以根据需求补充自定义参数settings。