脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery插件命名模式、扩展jQuery的方式，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
(1)命名 通常情况下jquery插件采用下列模式命名
min版本也有一个规范的命名： 添加一个min标识
jquery.pluginName.min.js
(2)扩展jQuery的方式
1.使用jQuery.fn ----推荐使用
在jQuery源码中jQuery.fn =jQuery.PRototyPE = {//对象属性//}
所以可以采用
jQuery.fn.newStuff = function(){ //code};
2.使用$.extend(); 在调用extend方法如果只传入一个参数，即将该参数融入的jQuery属性中
$.extend({
newStuff : function(){
console.LOG("IT is jquery funciton")}
})
3.jQuery UI Widget Factory
$.widget('namespace.newStuff':{})
(3)注意点
*在jQuery插件上下文中，this关键字通常是指代的是jquery对象本身
*在定义插件前插入一个';'有利于最小化脚本
*尽可能的返回jQuery对象，有利于支持链式调用
*很多时候jQuery都是返回一个集合，而且jQuery方法调用的时候即对集合中的每一个都调用了此方法，所以尽量不要采用遍历去实现对集合中的每一项执行同一个jQuery方法
例如：
; (function($){
//插件定义
$.fn.newFunction = function(){
//this指代jQuery对象本身
return this.each(function(){
//this指代的是dom元素
$(this).css("color","red");
})
}
})(jQuery); /**该做法的另一个好处是确保$总是代表的是jQuery对象**/
(4)最佳实践
1.如果这些方法属于同一板块的，建议采用统一的入口
(function( $ ){
VAR methods = {
init : function( options ) {
// init
},
flip : function( howMany ) {
// flip
},
flop: function( ) {
// flop
},
fly : function( ) {
// fly
}
};
$.fn.bestPluginEver = function( method ) {
if ( methods[method] ) {
return methods[ method ].apply( this,
Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( ';method '
+ method
+ ' does not exist in the bestPluginEver' );
}
};
})( jQuery );
/**
methods[ method ].apply(this,arguments) 表示借用jquery的方法进行调用
如下面形式：$.methods[method](arguments);
**/
/**
Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组;后面加参数表示从第几个参数开始
var a={length:3,0:'abc',1:'def',2:'ghi'};
console.log(Array.prototype.slice.call(a));// ["abc", "def",'ghi']
var a={length:0};
console.log(Array.prototype.slice.call(a));// []
var a={length:3};
console.log(Array.prototype.slice.call(a));// [undefined, undefined, undefined]
**/
// calls the init method
$( 'p' ).bestPluginEver();
// calls the fly method
$( 'p' ).bestPluginEver('fly');
// calls the flip method with an argument
$( 'p' ).bestPluginEver('flip' , 'twice');
2.如果出现有多个参数是可选的，建议采用默认值，使用$.extend()合并参数
3.使用$.data(key,value),$.daga(key)存取参数
var data = this.data('bestPluginEver');
if (!data) {
this.data('bestPluginEver',{
"color" : "blue",
"title" : "my dashboard",
"width" : "960px"
});
}
4.注意区分私有方法和公有
(function($) {
$.fn.dataCruncher = function(options) {
//inaccessible outside the plug-in
function privateSort( data ){
//private method
}
return this.each(function() {
var data = privateSort( data );
});
};
(function($) {
$.fn.dataCruncher = function( options ) {
var data = $.fn.dataCruncher.sort( data );
return this.each(function() {
// do stuff with data
});
};
$.fn.dataCruncher.sort = function(data) { Agreed! for ( var j = 1 test = data.length; j < test; j++ ) {
var key = data[j],
i = j - 1;
while ( i >= 0 && data[ i ] > key) {
data[ i + 1 ] = data[ i ];
i = i - 1;
}
data[i + 1] = key;
return data;
}
};
})( jQuery );
//offer a new sorting option
$.fn.dataCruncher.sort = function( data ) {
var len = data.length;
for ( var i = 0; i < len; i++ ) {
var index = i;
for ( k = i + 1; k < len; k++ ) {
if ( data[k] < data[index] ) {
index = k;
}
}
var temp = data[ i ];
data[ i ] = data[ index ];
data[ index ] = temp;
}
5.将undefined作为参数传入，以确保undifined总是undefined
6.插件默认将options暴露成全局配置
(5)metadata插件 ---存放dom对象的属性集合
var style = $.extend( settings, options ),
$this = $( this );
style = $.metadata $.extend( style, $this.metadata() ) : style;
$this.css( style );
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery插件命名模式、扩展jQuery的方式全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery插件命名模式、扩展jQuery的方式所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。