jQuery插件封装方法
转载自：https://www.jianshu.com/p/5196cb659fb6
如何编写jQuery插件
闭包
// 立刻执行函数
(function($){
// code
})(jQuery);
参数说明
形参： $
实参: jQuery
闭包的作用
避免全局依赖
避免第三方破坏
兼容jQuery操作符’$'和jQuery；
开发方式
类级别组件开发
即是给jQuery命名空间下添加新的全局函数，也称为静态方法；
代码结构如下:
jQuery.pluginName = function() {
// code
};
例如：$.Ajax(), $.extend()就是采用的类级别组件开发；
对象级别组件开发
即是挂在jQuery原型下的方法，这样通过选择器获取的jQuery对象实例也能共享改方法，称为动态方法；
代码结构如下：
$.fn.pluginName = function() {
// code
};
其中：
$.fn === $.prototype;
例如：addClass(),attr()等方法，需要创建实例来调用这些方法；
链式调用
// 例子
$('div').next().addClass()...
$.fn.plugin = function() {
return this.each(function() {
// code
})
}
代码说明
return this: 返回当前对象，来维护插件的链式调用;
each: 循环实现每个元素的访问；
单例模式
创建对象的实例，存在单例模式；
$.fn.pluginName = function() {
var me = $(this),
instance = me.data('pluginName');
if (!instance) {
me.data("pluginName", (instance = new pluginName()));
}
}
说明：
如果实例存在，则不再重新创建；
利用data方法来存放插件对象的实例；
jQuery框架基本结构
利用闭包创建一个自执行的函数
(function($) {
// code
})(jQuery);
定义插件对象
var pluginName = (function() {
// code
// 返回插件对象
return pluginName ;
})();
在插件对象的原型链上定义用户配置项
$.fn.pluginName.defaults = {
optionName: value
...
};
创建插件的实例对象
$.fn.pluginName = function() {
// 实现链式调用
return this.each(function(options) {
// 缓存this对象
var me = this;
var instance = me.data('pluginName');
// 判断实例是否存在，不存在则创建对象，并将该对象及配置项传入
if (!instance) {
instance = new pluginName(me, options);
// 存放实例
me.data('pluginName', instance)
}
// 在外部可以通过$(selection).pageSwitch("init")
if ($.type(options) === "String") {
return instance[options]();
}
});
};
给对象添加属性和方法,及初始化插件
function pluginName(element, options) {
// 深拷贝，合并对象
this.settings = $.extend(true, $.fn.pluginName.defaults, options || []);
this.element = element;
// 初始化插件
this.init();
}
在插件的原型上定义方法，以便实例可以调用
pluginName.prototype = { fnName: function() {} };
案例代码
(function($) {
// 私有方法
var privateFun = function() {};
// 合并对象等
var pageSwitch = (function() {
function pageSwitch(element, options) {
// 设置为true深拷贝,合并对象
this.settings = $.extend(true, $.fn.pageSwitch.default, options || {});
this.element = element;
// 初始化插件
this.init()
}
// 在pageSwitch原型上定义方法,让实例可以调用这些方法
pageSwitch.prototype = {
// 功能方法
init: function() {}
};
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);
}
// 在外部可以通过$(selection).pageSwitch("init")
if ($.type(options) === "String" || $.type(options) === "string") {
return instance[options]();
}
});
};
// 配置参数
$.fn.pageSwitch.default = {
// 选择器
selectors: {
// 父层容器
sections: '.sections',
// 页面容器
section: '.section',
// 分页容器
page: '.pages',
// 分页选中时的高亮效果
active: '.active'
},
// 页面开始的索引值
index: 0,
// 动画的效果
easing: 'ease',
// 动画执行的时间
duration: 500,
// 页面是否循环播放
loop: false,
// 是否进行分页处理
pagination: true,
// 是否触发键盘事件
kerboard: true,
// 全屏方向，横屏，竖屏
direction: 'vertical',
// 实现滑屏动画后执行的回调函数
callback: ""
};
// 在插件内部初始化，但是这种写法需要在目标元素上添加data-pageSwitch
$(function() {
$("[data-pageSwitch]").pageSwitch();
})
})(jQuery)
插件的初始化
外部初始化
<script>
$("#container").pageSwitch("init")
</script>
使用data-*
在目标元素上添加data-*属性，来初始化；
<div id="container" data-pageSwitch>
<div class="sections">
<div class="section" id="section0">
</div>
<div class="section" id="section1">
</div>
<div class="section" id="section2">
</div>
<div class="section" id="section3">
</div>
</div>
</div>