下面是写jQuery插件时的注意点:
设定良好的API是设计插件时最重要的一步。优秀的API可以使插件更好地适应用户需求,也可以帮助其他开发者更容易地集成插件。
一般来说,良好的API应该包含以下几个方面:
例如下面的代码:
$.fn.myPlugin = function(options){
var defaults = {
speed: 'fast'
};
var settings = $.extend({}, defaults, options);
return this.each(function(){
var $this = $(this);
// ...
});
};
这段代码中,我们为插件设计了默认配置、jQuery插件主体函数以及返回函数。同时,由于可能会遇到多个插件同存的问题,我们为插件命名空间加了一个前缀。
避免全局变量是一个重要的原则,也是适用于jQuery插件开发的。全局变量会产生诸多问题,尤其是在多个插件同时存在的时候。因此,最好把代码封装起来,防止产生全局变量。
以下是示例代码:
(function($){
var myVar = 'hello';
$.fn.myPlugin = function(options){
// ...
};
})(jQuery);
在这个示例代码中,我们把插件封装在一个自执行的函数中,使得插件不会产生全局变量。
$.fn.timer = function(options) {
var defaults = {
delay: 1000
};
var settings = $.extend({}, defaults, options);
var $this = this;
var timerInterval;
function init() {
timerInterval = setInterval(function() {
$this.text(parseInt($this.text()) + 1);
}, settings.delay);
}
function stop() {
clearInterval(timerInterval);
}
this.each(init);
return {
stop: stop
};
};
在这个计时器插件中,我们为插件设计了默认配置(每秒钟加1),jQuery插件主体函数以及停止计时器函数。为了避免产生全局变量,在主体函数中设置了计时器。同时,为了适应开发者需求,我们提供了停止计时器的选项。
$.fn.carousel = function(options) {
var defaults = {
delay: 3000,
nav: true
};
var settings = $.extend({}, defaults, options);
var $this = this;
var $nav;
function navDot() {
$nav = $("<div class='nav'></div>");
for (var i = 0; i < $this.children().length; i++) {
$nav.append("<span></span>");
}
$nav.find("span").on("click", function() {
var index = $(this).index();
showImage(index);
});
$this.after($nav);
}
function showImage(index) {
$this.children().eq(index).show().siblings().hide();
$nav.find("span").eq(index).addClass("active").siblings().removeClass("active");
}
function init() {
var index = 0;
var timerInterval = setInterval(function() {
if (index >= $this.children().length - 1) {
index = 0;
} else {
index++;
}
showImage(index);
}, settings.delay);
if (settings.nav) {
navDot();
}
}
this.each(init);
return {
showImage: showImage
};
};
在这个轮播图插件中,我们为插件设计了默认配置(每3秒钟切换一张图片,需要导航点),jQuery插件主体函数以及切换图片函数。同样的,为了适应开发者需求,我们提供了切换图片的选项。同时,我们在导航点函数中再次展示了设计清晰的API。
本文链接:http://task.lmcjl.com/news/10774.html