jQuery插件命名模式、扩展jQuery的方式

(1)命名 通常情况下jquery插件采用下列模式命名

jquery.pluginname.js

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 );