欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-20 23:52:46
(1)命名 通常情况下jquery插件采用下列模式命名 jquery.pluginname.js min版本也有一个规范的命名: 添加一个min标识 jquery.plugi...

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