把自己写的代码封装成插件是很有必要的,不仅利于团队合作,而且今后需要的时候也可以直接调用。接下来,我为大家介绍一种实用的插件封装方式。
在开始写代码之前,我们首先了解这几个知识点。
闭包
在很多插件框架中我们都会看到这样一段代码:
(function($){
/your code
})(jQuery);
这里使用闭包的好处官方给出了三点解释:
- 避免全局依赖
- 避免第三方破坏
- 兼容jQuery操作符
'$'
和jQuery
接下来我们看一下jQuery插件的开发方式。
jQuery的开发方式有两种,
类级别组件开发
即给jQuery命名空间下添加新的全局函数,也称为静态方法。
具体代码如下:
jQuery.myPlugin = function(){ //code }
我们平时也常见到过,例如:
$.Ajax()
、$.extend()
对象级别组件开发
即挂在jQuery原型下的方法,这样通过选择器获取的jQuery对象实例也能共享该方法,也称为动态方法。
具体代码如下:
$.fn.myPlugin = function(){ //code }; /*这里$.fn === $.prototype*/
我们平时也常见到过,例如:
addClass()
、attr()
等,需要创建实例来调用
很明显,动态方法要比静态方法好用得多,因此,我们这里的插件开发采用动态方法来实现。
链式调用
这里,我们重点强调一下jQuery的链式调用$("div").next().addClass()...
,jQuery的强大之处也在于此,在插件开发时,我们需要这样来获取:
$.fn.myPlugin = function(){
return this.each(function){
//code
}
}
/*return this 返回当前对象,来维护插件的链式调用*/
/*each 循环实现每个元素的访问*/
单例模式
我们采用的是动态的开发方式,那么就需要创建实例,在创建实例的时候,有一个单例模式的概念。
我们来看一下这样一段代码:
$.fn.MyPlugin = function(){
var me = $(this),
instance = me.data("myPlugin");
if (!instance) {
me.data("myPlugin",(instance = new myPlugin()));
}
};
/*如果实例存在则不再重新创建实例*/
/*利用 data() 来存放插件对象的实例*/
实现jQuery插件的重点便只有这几点,接下来,我们来实现这个框架
//首部加一个分号是为了防止别人调用时,最后一行代码没加分号,而导致插件报错。
;(function($){
var _privateFun = function(){
//这里是私有方法:由于闭包,在外面是访问不到的
}
$fn.PageSwitch = (function(){
function PageSwitch(element,options){
this.settings = $.extend(true,$.fn.PageSwitch.default,options||{});
this.element = element;
this.init();
}
PageSwitch.prototype = {
init : function(){
//code
}
}
return PageSwitch;
})();
$.fn.PageSwitch = function(options){
//链式调用
return this.each(function(){
// 单例模式
var me = $(this),
instance = me.data("PageSwitch");
if (!instance) {
instance = new PageSwitch(me,options);
me.data("PageSwitch",instance);
}
if ($.type(options) === "string") return instance[options]();
});
}
//默认的配置参数
$.fn.PageSwitch.default = {
selectors : { //配置分页的class
sections : ".sections",
section : ".section",
page : ".pages",
active : ".active"
},
index : 0, //对应页面开始的索引值,默认为0
easing : "ease", //动画效果
duration : 500, //动画执行时间
loop : false, //是否循环播放
pagination : true, //是否分页
keyboard : true, //键盘事件
direction : "horizontal", //横竖屏切换
callback:"" //当实现滑屏后的回调函数
}
})(jQuery)
在插件外部,我们按照常规的方式去调用:
<script src="../lib/PageSwitch.js"></script>
<script>
$("#container").PageSwitch({ //里面是插件配置的属性
index : 1,
easing : "linear",
duration : 800,
loop : true,
pagination : true,
dirction : "herizontal",
});
$("#container").PageSwitch("init");
</script>
大家可以看看这个插件的框架,熟悉一下框架的组成,在今后的开发中,可以像模板一样使用,框架的代码不需要去改变,只需要根据你的需求,去完善这个PageSwitch
对象就可以啦~