用js开发滑动组件

用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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,027评论 19 139
  • 如果不了解js的继承的写法,可以先去看看我之前写的js的子类继承父类文章http://www.jianshu.co...
    GQ1994阅读 2,453评论 0 3
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,785评论 18 399
  • 1. 简介 1.1 什么是 MyBatis ? MyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的...
    笨鸟慢飞阅读 5,708评论 0 4
  • Address:https://www.zybuluo.com/XiangZhou/note/208532 Exp...
    天蠍蒗漫阅读 11,424评论 2 55