jQuery弹簧插件编写基础之“又见弹窗”


Posted in Javascript onDecember 11, 2015

本文将通过一个实例来引出jQuery插件开发中的一些细节,首先介绍下jQuery插件开发的一些基础知识。

jQuery的插件开发主要分为两类:

1. 类级别,即在jQuery类本身上扩展方法,类似与 $.ajax,$.get 等。

2. 对象级别,这里所谓的对象是指通过jQuery选择器选中的jQuery对象,在该对象上添加方法。例如:$('div').css(), $('div').show() 等。

在实际开发中,我们通常选用对象级别的方法来开发插件,jQuery强大的选择器及对象操作是我们选择这种方式很大的一个原因。

接下来我们看看两种方式的具体写法是什么:

类级别的插件开发

$.extend({
  foo: function() {
  //...
  },
  bar: function() {
  
//...
  }
})
//调用
$.foo();

在这里,对扩展方法的命名需要考究一些,以免与jQuery类中的原有方法重名。即便如此,当我们需要在类上扩展多个方法时仍有可能会出现命名冲突的情况,为此我们可以创建自定义的命名空间:

$.myPlugin = {
  foo: function() {
    //...
  },
  bar: function() {
    //...
  }
}
 //调用
$.myPulgin.foo();

对象级别的插件开发

$.fn.foo = function() {
  //doSomething...
}
//调用(假设拥有一个id为obj的元素)
$('#obj').foo();
有个会问 fn 是什么东东?粘一段别人截取的jQuery源码就明白了:
jQuery.fn = jQuery.prototype = {
  init: function(selector, context) {
    //....
  }
}

原来是原型链啊。。。

接收配置参数

在编写一个插件时,我们可以让使用插件的人能按自己的意愿设置插件的一些属性,这就需要插件有接收参数的功能,同时当使用插件的人不传入参数时,插件内部也有一套自己默认的配置参数。

$.fn.foo = function(options) {
var defaults = {


color: '#000',

  backgroundColor: 'red'

};

var opts = $.extend({}, defaults, options); 

alert(opts.backgroundColor); //yellow
}
$('#obj').foo({
  backgroundColor: 'yellow'  
})

这里的关键就是 $.extend 方法,它能够将对象进行合并。对于相同的属性,后面的对象会覆盖前面的对象。为什么extend方法第一个参数是一个空对象呢?因为该方法会将后者合并到前者上,为了不让 defaults 被改变所以第一个参数设为空对象。

如果我们允许使用插件的人能够设置默认参数,就需要将其暴露出来:

$.fn.foo = function(options) {
var opts = $.extend({}, $.fn.foo.defaults, options); 

alert(opts.backgroundColor);
}
$.fn.foo.defaults = {
  color: '#000',
  backgroundColor: 'red'
}

这样就可以在外部对插件的默认参数进行修改了。

适当的暴露一些方法

$.fn.foo = function(options) {
var opts = $.extend({}, $.fn.foo.defaults, options); 

$.fn.foo.sayColor(opts.backgroundColor);
}
$.fn.foo.sayColor = function(bgColor) {
  alert(bgColor);
}
$.fn.foo.defaults = {
  color: '#000',
  backgroundColor: 'red'
}

改写:

$.fn.foo.sayColor = function(bgColor) {
  alert('background color is ' + bgColor);
}

暴露插件中的一部分方法是很牛逼的,它使得别人可以对你的方法进行扩展、覆盖。但是当别人对你的参数或方法进行修改时,很可能会影响其他很多东西。所以在考虑要不要暴露方法时候要头脑清楚,不确定的就不要暴露了。

保持函数的私有性

说到保持私有性,首先想到什么?没错,就是闭包:

;(function($) {
  $.fn.foo = function(options) {
    var opts = $.extend({}, $.fn.foo.defaults, options); 
    debug(opts.backgroundColor);
  }
  function debug(bgColors) {
    console.log(bgColors);
  }
  $.fn.foo.defaults = {
    color: '#000',
    backgroundColor: 'red'
  }
})(jQuery)

这是jQuery官方给出的插件开发方式,好处包括:1.没有全局依赖 2.避免其他人破坏 3.兼容 '$' 与 'jQuery' 操作符。

如上,debug 方法就成了插件内部的私有方法,外部无法对其进行修改。在闭包前面加 ; 是防止进行代码合并时,如果闭包前的代码缺少分号从而导致后面报错的情况。

合并

;(function($) {
  //定义插件
  $.fn.foo = function(options) {
    //doSomething...
  }
  //私有函数
  function debug() {
    //doSomething...
  }
  //定义暴露函数
  $.fn.foo.sayColor = function() {
    //doSomething...
  }
  //插件默认参数
  $.fn.foo.default = {
    color: '#000',
    backgroundColor: 'red'
  }
})(jQuery);

以上的代码就创建了一个完整且规范的插件骨架,看起来虽然很简单但在实际开发中还是有很多技巧与注意事项,接下来我们通过一个实例来看看。

想了半天,觉得将弹窗做成插件当作示例是比较合适的。在开发之前我们先构想一下这个弹窗插件的结构与功能等:

从上图我们看出包括三个部分,标题、内容、以及按钮组。这里需要申明一点,我们不想只做成浏览器里默认的只包含一个按钮的alert框,而是使用者可以自定义按钮数量,这样该弹出框也能完成类似confirm框的功能。

搭建插件骨架

function SubType($ele, options) {
  this.$ele = $ele;
  this.opts = $.extend({}, $.fn.popWin.defaults, options);
}
SubType.prototype = {
  createPopWin: function() {
  }
};
$.fn.popWin = function(options) {
  //this指向被jQuery选择器选中的对象
  var superType = new SubType(this, options);
  superType.createPopWin();
};
$.fn.popWin.defaults = {};

1. 我们创建了基于对象且名为 popWin 方法,并将 defaults 默认配置参数暴露出去以便使用的人进行修改;

2. 这里使用面向对象的方法来管理我们的私有函数,createPopWin 方法就是我们私有的用来创建弹窗的函数。

3. 在插件被调用时将jq对象与自定义的参数传入构造函数中并实例化。

调用

设想一下我们该怎么调用这个插件呢?我们可以在自己的文档树中合适的位置插入一个 div 元素,选中该 div 并调用我们定义在jQuery对象上的 popWin 方法。

$('#content').popWin({
  a: 1,
  b: 2,
  callback: function() {}
});

调用 popWin 的同时传入自定义的配置参数,之后被选中的 div 元素就被神奇的转化成一个弹窗了!当然,这只是我们的设想,下面开始码代码。

确定默认配置

$.fn.popWin.defaults = {
  width: '600', //弹窗宽
  height: '250', //弹窗高
  title: '标题', //标题
  desc: '描述', //描述
  winCssName: 'pop-win', //弹窗的CSS类名
  titleCssName: 'pop-title', //标题区域的CSS类名
  descCssName: 'pop-desc', //描述区域的CSS类名
  btnAreaCssName: 'pop-btn-box', //按钮区域的CSS类名
  btnCssName: 'pop-btn', //单个按钮的CSS类名
  btnArr: ['确定'], //按钮组
  callback: function(){} //点击按钮之后的回调函数
}

我们定义了如上的参数,为什么有要传入这么多的CSS类名呢?1. 为了保证JS与CSS尽可能的解耦。 2. 你的样式有很大可能别人并不适用。所以你需要配置一份样式表文件来对应你的默认类名,当别人需要更改样式时可以传入自己编写的样式。

按钮组为一个数组,我们的弹窗需要根据其传入的数组长度来动态的生成若干个按钮。回调函数的作用是在用户点击了某个按钮时返回他所点击按钮的索引值,方便他进行后续的操作。

弹窗DOM创建

var popWinDom,titleAreaDom,descAreaDom,btnAreaDom;
SubType.prototype = {
createPopWin: function() {


var _this = this;
    //首次创建弹窗


//背景填充整个窗口


this.$ele.css({



position: 'fixed',



top: 0,



left: 0,



right: 0,



bottom: 0,



backgroundColor: 'rgba(0,0,0,0.4)',



overflow: 'hidden'


});





//窗口区域


popWinDom = $('<div><div></div><div></div><div></div></div>').css({



width: this.opts.width,



height: this.opts.height,



position: 'absolute',



top: '30%',



left: '50%',



marginLeft: '-' + (this.opts.width.split('px')[0] / 2) + 'px'


}).attr('class',this.opts.winCssName);





//标题区域


titleAreaDom = popWinDom.find('div:eq(0)')







.text(this.opts.title)







.attr('class',this.opts.titleCssName);





//描述区域


descAreaDom = popWinDom.find('div:eq(1)')
            .text(this.opts.desc)
            .attr('class',this.opts.descCssName);


//按钮区域
 


btnAreaDom = popWinDom.find('div:eq(2)')
            .attr('class',this.opts.btnAreaCssName);





//插入按钮


this.opts.btnArr.map(function(item, index) {



btnAreaDom.append($('<button></button>')




.text(item)




.attr({'data-index':index, 'class':_this.opts.btnCssName})




.on('click', function() {





_this.opts.callback($(this).attr('data-index'));




}));



});





this.$ele.append(popWinDom);
  }
}

1. 首先命名了四个变量用来缓存我们将要创建的四个DOM,将传入的jQuery对象变形成覆盖整个窗口半透明元素;

2. 创建窗口DOM,根据传入的高、宽来设置尺寸并居中,之后另上传入的窗口CSS类名;

3. 创建标题、描述、按钮组区域,并将传入的标题、描述内容配置上去;

4. 动态加入按钮,并为按钮加上data-index的索引值。注册点击事件,点击后调用传入的回调函数,将索引值传回。

好了,我们先看下效果。调用如下:

$('#content').popWin({
  width: '500',
  height: '200',
  title: '系统提示',
  desc: '注册成功',
  btnArr: ['关闭'],
  callback: function(clickIndex) {
    console.log(clickIndex);
  }
});

可以看到一个弹窗的DOM已被渲染到页面中了,当点击关闭按钮时控制台会打印出 "0",因为按钮组只有一个值嘛,当然是第0个了。

如果我们需要多次调用这个弹窗,每次都要传入高、宽我会觉得很麻烦。这时我们可以直接在一开始修改插件内部的默认配置,这也是我们将默认配置暴露的好处:

$.fn.popWin.defaults.width = '500';
$.fn.popWin.defaults.height = '200';

要注意的当然是不能直接改变defaults的引用,以免露掉必须的参数。 这样以后的调用都无需传入尺寸了。

我们加一个按钮并且传入一个自定义的样式看看好使不呢?

$('#content').popWin({
  title: '系统提示',
  desc: '是否删除当前内容',
  btnArr: ['确定','取消'],
  winCssName: 'pop-win-red',
  callback: function(clickIndex) {
    console.log(clickIndex);
  }
});

可以看到都是生效了的,当点击“确定”按钮时回调函数返回 0,点击“取消”按钮时回调函数返回 1。这样使用插件的人就知道自己点击的是哪一个按钮,以完成接下来的操作。

显示&隐藏

接下来要进行打开、关闭弹窗功能的开发。回想上面介绍的概念,我们想让使用该插件的人能够对这两个方法进行扩展或者重写,所以将这两个方法暴露出去:

$.fn.popWin.show = function($ele) {
  $ele.show();
}
$.fn.popWin.hide = function($ele) {
  $ele.hide();
}

之后在createPopWin方法中需要的地方调用这两个方法。

这里多强调一点,也是做弹窗控件不可避免的一点:只有当我们点击按钮以及灰色背景区域时允许弹窗关闭,点击弹窗其他地方不允许关闭。由于弹窗属于整个灰色区域的子节点,必然牵扯到的就是事件冒泡的问题。

所以在给最外层加上点击关闭的事件时,要在弹窗区域阻止事件冒泡。

popWinDom = $('<div><div></div><div></div><div></div></div>').css({
  width: this.opts.width,
  height: this.opts.height,
  position: 'absolute',
  top: '30%',
  left: '50%',
  marginLeft: '-' + (this.opts.width.split('px')[0] / 2) + 'px'
}).attr('class',this.opts.winCssName).on('click', function(event) {
event.stopPropagation();
});

二次打开

我们只需要在第一次调用插件时创建所有创建DOM,第二次调用时只更改其参数即可,所以在createPopWin方法最前面加入如下方法:

if (popWinDom) { //弹窗已创建
popWinDom.css({


width: this.opts.width,


height: this.opts.height

}).attr('class',this.opts.winCssName);

titleAreaDom.text(this.opts.title).attr('class',this.opts.titleCssName);

descAreaDom.text(this.opts.desc).attr('class',this.opts.descCssName);

btnAreaDom.html('').attr('class',this.opts.btnAreaCssName);

this.opts.btnArr.map(function(item, index) {


btnAreaDom.append($('<button></button>')



.text(item)



.attr('data-index',index)



.attr('class',_this.opts.btnCssName)



.on('click', function() {




_this.opts.callback($(this).attr('data-index'));




$.fn.popWin.hide(_this.$ele);



}));


});

$.fn.popWin.show(this.$ele);

return;
}

合并整个插件代码

;(function($) {
function SubType(ele, options) {


this.$ele = ele;


this.opts = $.extend({}, $.fn.popWin.defaults, options);

}

var popWinDom,titleAreaDom,descAreaDom,btnAreaDom;

SubType.prototype = {


createPopWin: function() {



var _this = this;



if (popWinDom) { //弹窗已创建




popWinDom.css({





width: this.opts.width,





height: this.opts.height




}).attr('class',this.opts.winCssName);




titleAreaDom.text(this.opts.title).attr('class',this.opts.titleCssName);




descAreaDom.text(this.opts.desc).attr('class',this.opts.descCssName);




btnAreaDom.html('').attr('class',this.opts.btnAreaCssName);




this.opts.btnArr.map(function(item, index) {





btnAreaDom.append($('<button></button>')






.text(item)






.attr('data-index',index)






.attr('class',_this.opts.btnCssName)






.on('click', function() {







_this.opts.callback($(this).attr('data-index'));







$.fn.popWin.hide(_this.$ele);






}));




});




$.fn.popWin.show(this.$ele);




return;
      }
      //首次创建弹窗
      this.$ele.css({
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(0,0,0,0.4)',
        overflow: 'hidden',
        display: 'none'
      }).on('click', function() {
        $.fn.popWin.hide(_this.$ele);
      });
      popWinDom = $('<div><div></div><div></div><div></div></div>').css({
        width: this.opts.width,
        height: this.opts.height,
        position: 'absolute',
        top: '30%',
        left: '50%',
        marginLeft: '-' + (this.opts.width.split('px')[0] / 2) + 'px'
      }).attr('class',this.opts.winCssName).on('click', function(event) {
        event.stopPropagation();
      });
      titleAreaDom = popWinDom.find('div:eq(0)')
              .text(this.opts.title)
              .attr('class',this.opts.titleCssName);
      descAreaDom = popWinDom.find('div:eq(1)')
              .text(this.opts.desc)
              .attr('class',this.opts.descCssName);
      btnAreaDom = popWinDom.find('div:eq(2)')
              .attr('class',this.opts.btnAreaCssName);
      this.opts.btnArr.map(function(item, index) {
        btnAreaDom.append($('<button></button>')
          .text(item)
          .attr({'data-index':index, 'class':_this.opts.btnCssName})
          .on('click', function() {
            _this.opts.callback($(this).attr('data-index'));
            $.fn.popWin.hide(_this.$ele);
          }));
      });
      this.$ele.append(popWinDom);
      $.fn.popWin.show(this.$ele);
    }
  }
  $.fn.popWin = function(options) {
    var superType = new SubType(this, options);
    superType.createPopWin();
    return this;
  }
  $.fn.popWin.show = function($ele) {
    $ele.show();
  }
  $.fn.popWin.hide = function($ele) {
    $ele.hide();
  }
  $.fn.popWin.defaults = {
    width: '600',
    height: '250',
    title: 'title',
    desc: 'description',
    winCssName: 'pop-win',
    titleCssName: 'pop-title',
    descCssName: 'pop-desc',
    btnAreaCssName: 'pop-btn-box',
    btnCssName: 'pop-btn',
    btnArr: ['确定'],
    callback: function(){}
  }
})(jQuery);

如上,一个完整的弹窗插件就在这里了。

说下这个标红的 return this 是干什么用的,前面已说过 this 在这里是被选中的jQuery对象。将其return就可以在调用完我们的插件方法后可以继续调用jQ对象上的其他方法,也就是jQuery的链式操作,说玄乎点就叫级联函数。

OK!趁热打铁,我们来看看暴露出去的两个方法重写之后效果怎么样,毕竟对插件暴露部分的扩展和重写是很牛逼的一块东西。

想象个情景,你用了这个插件后觉得简单的show和hide效果简直是low爆了,决定重写这个弹出和隐藏的效果:

$.fn.popWin.show = function($ele) {
$ele.children().first().css('top','-30%').animate({top:'30%'},500);

$ele.show();
}
$.fn.popWin.hide = function($ele) {

$ele.children().first().animate({top:'-30%'},500,function() {


$ele.hide();

});
}

你在自己的代码里加上上面两段,然后发现弹窗有了一个简单的上下滑动进入屏幕的效果,同时又不会影响我们弹窗的创建,证明我们的暴露方法还算合理。

当然你也可以让它竖着进、横着进、翻着跟头进,这就看你自己了。

最后贴上默认的样式表,为了急着想粘回去试试的同学们。

.pop-win {
  border: 1px solid #fff;
  padding: 10px;
  background-color: #fff;
  -wekbit-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.3);
  box-shadow: 0 3px 9px rgba(0,0,0,0.3);
}
.pop-win-red {
  padding: 10px;
  background-color: red;
  -wekbit-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.3);
  box-shadow: 0 3px 9px rgba(0,0,0,0.3);
}
.pop-title {
  width: 100%;
  height: 20%;
  line-height: 40px;
  padding-left: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  font-size: 17px;
  font-weight: bold;
}
.pop-desc {
  width: 100%;
  height: 60%;
  box-sizing: border-box;
  padding: 10px 0 0 10px;
  border-bottom: 1px solid #eee;
}
.pop-btn-box {
  width: 100%;
  height: 20%;
  text-align: right;
}
.pop-btn {
  margin: 10px 10px 0 0;
  width: 60px;
  height: 30px;
}

当然这只是个编写插件的例子,如果要拿出去使用还需要仔细打磨。例子虽然简单,旨在抛砖引玉。

Javascript 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
jquery动态添加option示例
Dec 30 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
Javascript基础之数组的使用
May 13 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
微信小程序自动客服功能
Nov 02 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 #Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 #Javascript
Express的路由详解
Dec 10 #Javascript
在 Express 中使用模板引擎
Dec 10 #Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 #Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 #Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 #Javascript
You might like
一个php作的文本留言本的例子(六)
2006/10/09 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
python和pyqt实现360的CLable控件
2014/02/21 Python
python检测远程udp端口是否打开的方法
2015/03/14 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
python关于倒排列的知识点总结
2020/10/13 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
UNIX文件系统常用命令
2012/05/25 面试题
教师推荐信范文
2013/11/24 职场文书
导游个人求职信范文
2014/03/23 职场文书
白酒代理协议书范本
2014/10/26 职场文书
教师自荐信范文
2015/03/06 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书