资讯专栏INFORMATION COLUMN

简易jquery组件开发

jollywing / 2999人阅读

摘要:现在组件化开发,以为代表的库或框架让组件化开发逐渐推广起来。下面是我用写的一款简易的提示框组件。效果有时用户执行某个操作时,需要弹出提示框让用户确定执行某个回调函数,这样就有效的避免用户因操作失误执行不该执行的操作。从而累计事件的源码

写这篇文章主要是对自己以前学习jquery插件的总结。现在组件化开发,以vuejs 、 reactjs 、angular 为代表的库或框架让web组件化开发逐渐推广起来。下面是我用jquery写的一款简易的提示框组件。虽然没有遵守mvc写法,但也是很实用。

效果:

有时用户执行某个操作时,需要弹出提示框让用户确定执行某个回调函数,这样就有效的避免用户因操作失误执行不该执行的操作。

代码
/**
 * Created by helti on 2017/2/16 0016.
 */

!(function(window,$,undefined){

    var htmls={
        "popbg":"
", "pwraper":"
", "popheader":"
", "popdes":"

", "palert":"
", "pconfim":"
" }; var winpop=function(opt,callback){ var defaults={ headercon:"", popdes:"" } this.options= $.extend({},defaults,opt); this.$body=$("body"); //背景 this.$popbg=$(htmls.popbg); //pop父容器 this.$wraper=$(htmls.pwraper); if(callback !="undefined"){ if(typeof callback == "function"){ this.callback=callback; } }else{ throw new Error ("callback need function") } }; winpop.prototype={ /* alert 或者 confim */ createdom:function(ele){ var $popheaer=$(htmls.popheader).text(this.options.headercon); var $contenthtml=$(htmls.popdes).text(this.options.popdes); // $palert=$(htmls.palert); this.$wraper.append($popheaer).append($contenthtml).append(ele); this.$body.append(this.$popbg).append(this.$wraper); // this.callback(); // console.log(this.callback); }, okclick:function(){ //确认按钮执行回调函数 this.callback(); }, eventclick:function(){ var that=this; that.$wraper.find("#btn-ok").on("click",function(){ that.remove(); that.okclick(); }) //只通过事件委托绑定一次,如果用on绑定,因为doument无法删除,导致事件一直存在 /* $(document).one("click","#btn-ok",function(){ that.remove(); that.okclick(); });*/ that.$wraper.find(".btn-ok").on("click",function(){ that.remove(); that.okclick(); }) /* $(document).one("click",".btn-ok",function(){ that.remove(); that.okclick() });*/ that.$wraper.find(".btn-cancel").on("click",function(){ that.remove(); }) }, alertpop:function(){ var $palert=$(htmls.palert); this.createdom($palert); this.eventclick(); }, confimpop:function(){ var $pconfim=$(htmls.pconfim); this.createdom($pconfim); this.eventclick(); }, remove:function(){ this.$wraper.empty().remove(); this.$popbg.empty().remove(); } }; window.winpop=winpop; }(window,jQuery));
总结:

我们都知道动态生成的dom元素,要给它绑定事件时,必须给予事件委托,通常我们委托给document.

//这里不应该用on
$(document).one("click","#btn-ok",function(){
                  that.remove();
                  that.okclick();
                  
              });

但是我们委托给document时会出现一个问题,就是但你再次触发按钮时,原来绑定的事件不会销毁。因为document不能删除。那么用one呢?我们只让它执行一次。大家可以试下。

最终我使用了

that.$wraper.find(".btn-cancel").on("click",function(){
                  that.remove();
                  
              })

这样就避免了事件不被销毁。从而累计事件的bug.

github源码

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81556.html

相关文章

  • 前端经典文章

    摘要:上周末看这篇文章时,偶有灵光,所以,分享出来给大家一起看看前端面试四月二十家前端面试题分享请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。 前端切图神器 avocode 有了这个神器,切图再也腰不酸,腿不疼了。 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,...

    lowett 评论0 收藏0
  • 从头实现一个简易版React(二)

    摘要:写在开头从头实现一个简易版一地址上一节,我们详细介绍了实现一个简易的思路以及整体的结构,但是对于渲染和更新的原理,却还没有提及,因此,本节我们将重点放在的渲染上。 写在开头 从头实现一个简易版React(一)地址:https://segmentfault.com/a/11...上一节,我们详细介绍了实现一个简易React的思路以及整体的结构,但是对于渲染和更新的原理,却还没有提及,因此...

    vvpvvp 评论0 收藏0
  • 前端文档收集

    摘要:系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法 随笔分类 - HTML5 HTML5中40个最重要的技术点 常用meta整理 网页性能管理详解 HTML5 ...

    jsbintask 评论0 收藏0
  • 前端文档收集

    摘要:系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法 随笔分类 - HTML5 HTML5中40个最重要的技术点 常用meta整理 网页性能管理详解 HTML5 ...

    muddyway 评论0 收藏0

发表评论

0条评论

jollywing

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<