在开发jquery插件之前,需要有下面的准备工作。
1. 定义全局变量。就是可以使用“jQuery.methodName()”形式使用的函数
/*
定义新的全局函数
可以以jQuery.func1()形式,也可以以$.func1() 的形式调用
*/
jQuery.func1 = function(){
alert( "this is function func1()----------");
}
/*
带参数的函数
*/
jQuery.func2 = function(param){
alert( "this is function func2()----"+param+ "----");
}
$.func3 = function(){
alert( "this is function func3()----------");
}
/*
覆盖了func1()
*/
$.func1 = function(){
alert( "this is function func1() override----------");
}
/*
也覆盖了前面已经定义的func1(),即使参数列表不一样,在JS中不存在重载的说法
*/
$.func1 = function(param){
alert( "this is function func1() override--"+param+ "-------");
}
/*------------------------------------
第2种声明全局函数
可能会出现与其他插件,函数名冲突的危险
------------------------------------*/
jQuery.extend({
func4: function(){
alert( "this is named func4() defined by extend");
},
func5: function(param){
alert( "this is named func5(param) defined by extend and parma ="+param);
}
});
/*
----------------------------------------------------------
第3种声明全局函数,可以防止包名冲突
调用形式
jQuery.myplugin.func6();
jQuery.myplugin.func7('我是个参数');
----------------------------------------------------------
*/
jQuery.myplugin = {
func6: function(){
alert( "this is function named func6() by jQuery.myplugin");
},
func7: function(param){
alert( "this is function named func7(param) by jQuery.myplugin and param="+param);
}
}
/*
第4种声明全局函数,和第三种效果一样
*/
jQuery.myplugin.func8 = function(){
alert( "this is function named func8() by jquery.myplugin.func8--------");
}
2.声明对象的方法
扩展对象的内置方法,调用形式:obj.methodName()。其中obj 为jq对行啊,methodName为函数名称。
/*
声明jQuery 对象的方法
*/
jQuery.fn.func9 = function(){
alert( "func9() start---------"+ this);
}
/* 应该返回jquery 对象,支持连缀功能*/
jQuery.fn.func10 = function(){
return this.each( function(){
alert( "func10() start---------"+ this);
})
}
// 只能使用defaults,不能使用其他标记
jQuery.fn.func11 = function(parameters){
defaults ={
aString: "byebye",
aNumber:250
};
jQuery.extend(defaults,parameters);
alert( "aString="+defaults.aString+ " aNumber="+defaults.aNumber);
}
声明jQuery 对象的方法
*/
jQuery.fn.func9 = function(){
alert( "func9() start---------"+ this);
}
/* 应该返回jquery 对象,支持连缀功能*/
jQuery.fn.func10 = function(){
return this.each( function(){
alert( "func10() start---------"+ this);
})
}
// 只能使用defaults,不能使用其他标记
jQuery.fn.func11 = function(parameters){
defaults ={
aString: "byebye",
aNumber:250
};
jQuery.extend(defaults,parameters);
alert( "aString="+defaults.aString+ " aNumber="+defaults.aNumber);
}
注意jquery 对象环境。有时候jquery 引用对象是个数组,可以通过隐式迭代来防止该情况发生,比如方法func10。
还要注意方法连缀,防止破坏破坏作用发生。可以使用pushStack、 end 方法实现(不太明白)。
在参数传递过程中,注意extend方法的使用,该方法主要作用是为了简化继承。而且extends 目标对象只能是
defaults,不能是其他关键字。
本文转自 randy_shandong 51CTO博客,原文链接:http://blog.51cto.com/dba10g/239741,如需转载请自行联系原作者