jQuery插件写法小结之重写轮播图功能
最近在维护老网站的时候，发现一些jQuery库的使用有些臃肿，并且大部分自定义的js文件很容易污染全局变量，所以想着重写下，虽然jQuery的辉煌时代已经过去了，但是他的思想，依旧灿烂（滚去维护去）
先举个栗子
;(function($) {
var methods = {
init: function(options) {
// 可自定义扩展项
options = $.extend(
true,
{},
$.fn.myPlugin.defaults,
options
);
console.log('options', options, this)
return this;
},
getName: function() {
console.log('Name is ', $.fn.myPlugin.defaults.name, '.')
},
getAge: function() {
console.log('Age is ', $.fn.myPlugin.defaults.age, '.')
},
show: function(){
return this.each(function(){
this.style.display == "none" && (this.style.display = '')
if (getComputedStyle(this, '').getPropertyValue("display") == "none")
this.style.display = defaultDisplay(this.nodeName)
})
},
hide: function() {
return this.css("display", "none")
}
};
// 命名空间最好只有一个
$.fn.myPlugin = function(method) {
// 方法调用，可满足三种情况：1. method, 2. init, 3. error
if(methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); //将具有length属性的对象转成数组
} else if(typeof method === 'object' || !method) {
// 如果没有参数或者参数
return methods.init.apply(this, arguments);
} else {
$.error('Method' + method + 'does not exist on jQuery.myPlugin.');
}
}
$.fn.myPlugin.defaults = {
'name': 'zhangsan',
'age': '20'
};
})(jQuery)
/* --- 测试 --- */
// 初始化init
$('#testPara').myPlugin()
// 修改参数
$('#testPara').myPlugin({
'name': 'wuwang',
'age': '27'
})
// 调取方法
$('#testPara').myPlugin('hide')
$('#testPara').myPlugin('show')
简单易懂，但是五脏俱全，接下来简单说明：
搞定复杂参数列表
首先，我们一般传参如下：
function foo(a1, a2, a3, a4) { }
foo(1, 2, 3, 4)
那如果不传参呐？
foo(1, null, 3, 4)
就需要如上使用 null 来站位，参数多了，保证你晕。
所以，我们使用 可选哈希参数（options hash），如：
foo(1, null, null, 4)
// 改成
foo(1, {
a4: 4
})
接着，我们使用 jQuery 的 $.extend() 工具函数合并可选参数，并设置默认值：
function foo (a1, options) {
var settings = $.extend({
a2: value2,
a3: value3,
a4: value4
}, options || {} );
}
最后，就有了栗子中形态：
var settings = $.extend(
true, // 是否为深拷贝
{}, // 使用源元素属性来扩展目标对象
$.fn.myPlugin.defaults, // 默认的一个对象，将属性添加到 target（即{}） 目标对象中
options // 多个源后会覆盖前面同名的属性
);
这样，就再也不会纠结参数的不传或者多个占位传参，挺好。
实际操作下：先看一个多个参数的：
$('#btn').myPlugin({
'mynewname': 'lisi',
'mynewage': 22
})
// 打印settings： {name: "zhangsan", age: "20", mynewname: "lisi", mynewage: 22}
再看一个：
$('#btn').myPlugin({
'name': 'lisi',
'mynewage': 22
})
// {name: "lisi", age: "20", mynewage: 22}
一看就懂，有则覆盖，无则添加，完美。
统一命名空间
由于是jQuery插件，都挂载在 jQuery 对象下，所以恰当命名空间的插件尽可能不与其他插件冲突，甚至是 jQuery 的核心库方法。
比如：
(function($) {
var defaults = {} // 定义默认项
var methods = {} // 定义方法
$.fn.myPlugin = function(method) {} // 定义 myPlugin 命名空间并赋值一个匿名函数
}(jQuery)
允许公开访问默认设置
为了更加的定制化，我们需要暴露默认的设置，这样我们就可以修改设置了。
首先修改 defaults 变量，为了暴露给外部世界，需要把它赋值给 $.fn 属性。并且为了统一命名空间原则，需要把它作为 myPlugin 的属性，如：
$.fn.myPlugin.defaults = {
'name': 'zhangsan',
'age': '20'
};
接着，当使用默认值来合并参数选项时，在项目中只出现一次，即在 init() 方法里，如：
var methods = {
init: function(options) {
// 可自定义扩展项
options = $.extend(
true,
{},
$.fn.myPlugin.defaults,
options
);
}
}
这样，当我们在浏览器里直接测试：
// 获取
$.fn.myPlugin.defaults.name // zhangsan
// 修改
$.fn.myPlugin.defaults.name = 'wangwu'
// "wangwu"
维护链式调用性
使用 return this ，可以维护链式调用性。
Array.prototype.slice.call()
Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组 （arguments.toArray().slice()）
var a={length:2,0:'first',1:'second'};
Array.prototype.slice.call(a); //Array [ "first", "second" ]
再举个栗子
项目中经常使用轮播图，我们就在前人的基础上，模仿一下吧（你就说是抄的不就行了麽）：
;
(function ($) {
function showPhoto(options, index) {
var $photoElement = $(options.photoElement);
if (!$photoElement.is(':animated')) {
$photoElement.animate({
opacity: 0.5
}, 0).attr(
'src',
options.transformer(options.$thumbnails[index].src)
).animate({
opacity: 1
}, 800);
options.current = index;
}
}
var methods = {
init: function (options) {
options = $.extend(
true, {},
$.fn.slidePhoto.defaults,
options, {
current: 0, // 初始值为0
$thumbnails: this.filter('img'), //选出所有的图片
delay: options.delay >= 1000 ? options.delay : 1000,
}
);
// 点击图片，切换对应大图
options.$thumbnails.click(function () {
showPhoto(options, options.$thumbnails.index(this));
});
// 显示下一张
$(options.nextControl + ', ' + options.photoElement).click(function () {
var index = (options.current + 1) % options.$thumbnails.length; // 取模
showPhoto(options, index);
});
// 显示上一张
$(options.previousControl).click(function () {
var index = options.current === 0 ? options.$thumbnails.length - 1 : options.current - 1;
showPhoto(options, index);
});
// 显示第一张
$(options.firstControl).click(function () {
showPhoto(options, 0);
}).triggerHandler('click'); // 主要是初始时触发，触发被选元素上指定的事件，返回事件处理函数的返回值
// 显示最后一张
$(options.lastControl).click(function () {
showPhoto(options, options.$thumbnails.length - 1);
})
// 自动播放
var tick;
function autoPlay() {
tick = window.setInterval(
function () {
$(options.nextControl).triggerHandler('click')
}, options.delay);
}
// 鼠标移入移出状态
function mouserStatus(obj) {
$(obj).mouseenter(function () {
if (tick) {
window.clearInterval(tick);
}
}).mouseleave(autoPlay);
}
if (options.autoPlayControl) {
autoPlay();
}
// 鼠标滑动暂停、播放
mouserStatus(options.photoElement);
mouserStatus(options.$thumbnails);
return this;
}
};
$.fn.slidePhoto = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if ($.type(method) === 'object') {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.slidePhoto');
}
};
$.fn.slidePhoto.defaults = {
photoElement: 'img.photomatic-photo', // 大图显示
transformer: function (name) {
return name.replace('thumbnail', 'photo'); // 将'thumbnail' 替换为 'photo'，即最终返回大图的src属性值
},
nextControl: null, // 下一张
previousControl: null, // 前一张
firstControl: null, // 第一张
lastControl: null, // 最后一张
autoPlayControl: false,
delay: 3000 // 延时
};
})(jQuery)
用法：
$('#thumbnails-pane img').slidePhoto({
photoElement: '#photo-display',
previousControl: '#previous-button',
nextControl: '#next-button',
firstControl: '#first-button',
lastControl: '#last-button',
autoPlayControl: true,
delay: 3000
});
参考：
- 《jQuery实战 第三版》
投递京东等公司10个岗位 >