jquery进阶

最新推荐文章于 2025-07-11 09:54:16 发布

weixin_33890526

最新推荐文章于 2025-07-11 09:54:16 发布

阅读量42

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/shyl/blog/779675

为什么80%的码农都做不了架构师？>>>

jquery主要的三种开发方式：

通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建

1. $.extend

用法：为jquery添加一个静态方法。


$.extend({
   sayHello: function(name){
       console.log('hello ' + name + '!!');

   }

});


//调用

$.sayHello('word');

2. $.fn

用法：为DOM元素扩展方法。


$.fn.changeColor = function(){

   this.color('color', 'red');
}

//用法
$(funtion(){
    $('a').changeColor();
});



//进阶版,可通过参数修改颜色

$.fn.changeColor = function(options){
   var defaults = {
      'color': 'red',
      'fontSize': '12px',
   };

   //将选项配置扩展进jquery对象，前面加空对象的是为了防止新加的配置修改默认配置,保护好默认参数
   var settings = $.extend({}, defaults, options);
   
   //返回对象，方便链式操作
   return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize

   });

};

3. 面向对象的插件开发。

为什么要有面向对象的思维，因为如果不这样，你可能需要一个方法的时候就去定义一个function，当需要另外一个方法的时候，再去随便定义一个function，同样，需要一个变量的时候，毫无规则地定义一些散落在代码各处的变量。不方便维护，也不够清晰，切污染全局。

对上面的例子进行扩展：


//定义Beautifier的构造函数

var Beautifier = function(ele, opt){
	this.element = ele,
	this.defaults = {
		'color': 'red',
		'fontSize': '12px',
		'textDecoration': 'none',
	
	},

	this.options = $.extend({}, this.defaults, opt);

}

Beautifier.prototype = {
	
	beautify: function(){
		return this.$element.css({
		
			'color': this.options.color,
			'fontSize': this.options.fontSize,
			'textDecoration': this.options.textDecoration,
		
		});
	
	}
}


//在插件中使用Beautifier对象

$.fn.changeColor = function(options){

	var beautifier = new Beautifier(this, options);

	return beautifier.beautify();

}


//用法

$(function(){

   $('a').changeColor({
        'color': 'red',
        'fontSize': '20px',
        'textDecoration': 'underline'

   });
})

4. 命名空间

在写任何JS代码时都应该注意的一点是不要污染全局命名空间，一个好的做法是始终用自调用匿名函数包裹你的代码，这样就可以完全放心，安全地将它用于任何地方了，绝对没有冲突。

修改后的：


(function(){
//定义Beautifier的构造函数

var Beautifier = function(ele, opt){
	this.element = ele,
	this.defaults = {
		'color': 'red',
		'fontSize': '12px',
		'textDecoration': 'none',
	
	},

	this.options = $.extend({}, this.defaults, opt);

}

Beautifier.prototype = {
	
	beautify: function(){
		return this.$element.css({
		
			'color': this.options.color,
			'fontSize': this.options.fontSize,
			'textDecoration': this.options.textDecoration,
		
		});
	
	}
}


//在插件中使用Beautifier对象

$.fn.changeColor = function(options){

	var beautifier = new Beautifier(this, options);

	return beautifier.beautify();

}


//用法

$(function(){

   $('a').changeColor({
        'color': 'red',
        'fontSize': '20px',
        'textDecoration': 'underline'

   });
})
}())

为了防止之前的代码对我们新引入代码的影响，要在代码开始加分号，要养成这个习惯。

;(function(){


})()

我们可以将系统参数传进去

;(function($, window, document, undefined){
 //coding......

})(jQuery, window, document)

至于这个undefined，稍微有意思一点，为了得到没有被修改的undefined，我们并没有传递这个参数，但却在接收时接收了它，因为实际并没有传，所以‘undefined’那个位置接收到的就是真实的'undefined'了。

那么完整的代码就是：


;(function($, window, document, undefined){
//定义Beautifier的构造函数

var Beautifier = function(ele, opt){
	this.element = ele,
	this.defaults = {
		'color': 'red',
		'fontSize': '12px',
		'textDecoration': 'none',
	
	},

	this.options = $.extend({}, this.defaults, opt);

}

Beautifier.prototype = {
	
	beautify: function(){
		return this.$element.css({
		
			'color': this.options.color,
			'fontSize': this.options.fontSize,
			'textDecoration': this.options.textDecoration,
		
		});
	
	}
}


//在插件中使用Beautifier对象

$.fn.changeColor = function(options){

	var beautifier = new Beautifier(this, options);

	return beautifier.beautify();

}


//用法

$(function(){

   $('a').changeColor({
        'color': 'red',
        'fontSize': '20px',
        'textDecoration': 'underline'

   });
})
})(jQuery, window, document)

转载于:https://my.oschina.net/shyl/blog/779675