您当前的位置: 首页 >  jquery

wespten

暂无认证

  • 0浏览

    0关注

    899博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

深入学习jquery源码之方法扩展

wespten 发布时间:2018-12-23 08:58:26 ,浏览量:0

深入学习jquery源码之方法扩展

jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init()

用来在jQuery命名空间上增加新函数,相当于为Jquery全局对象添加了一个静态方法。

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5

传入jQuery参数

!function ($) {
	$.extend({
		getJSONP : function (a) {
			$.ajax({  
		        async : false,  
		        cache : false,  
		        type : 'POST',  
		        dataType : "json",  
		        url : a,  
		        error : function (e) {//请求失败处理函数 
		        	alert('获取地址数据失败');  
		        },  
		        success:function(data){ //请求成功后处理函数。
		        	getAreaListcallback(data);
		        }
		    }); 
		}
	});
}(jQuery);

而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这 是很重要的,在jQuery.js中到处体现这一点。

jQuery.fn = jQuery.prototype = {
   init: function( selector, context ) {//….
//……
};

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

$.fn.extend({          
    alertWhileClick:function() {            
          $(this).click(function(){                 
                 alert($(this).val());           
           });           
     }       
});       
$("#input1").alertWhileClick(); // 页面上为:

$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。·

 

jQuery.fn.extend = jQuery.prototype.extend

你可以拓展一个对象到jQuery的 prototype里去,这样的话就是插件机制了。

(function( $ ){
$.fn.tooltip = function( options ) {
};
//等价于
var tooltip = {
function(options){
}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );

增加两个插件方法

jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

插件的使用

(function( $ ) {
 
    $.fn.showLinkLocation = function() {
 
        this.filter( "a" ).each(function() {
            var link = $( this );
            link.append( " (" + link.attr( "href" ) + ")" );
        });
 
        return this;
 
    };
 
}( jQuery ));
 
// Usage example:
$( "a" ).showLinkLocation();
/**
 * jq操作扩展
 * @param $
 */
(function($){
	/**
	 * 判断字符串是否为空
	 */
    $.isEmptyStr = function(str){
        if(null != str && '' != str && 'undefined' != str)
        	return false;
        return true;
    };
	
	    /**
	 * 判断数组是否为空
	 */
    $.isEmptyArray = function(list){
    	if(list && list instanceof Array && list.length > 0)
    		return false;
    	return true;
    };
})(jQuery);

	
var data = retData.data;
if(!$.isEmptyArray(data)){

}

 

jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。·

prototype表示该函数的原型,也表示一个类的成员的集合。

每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性, 也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。

在通过new创建一个类的实例对象的时候,prototype对象的成员都成为实例化对象的成员。

1、该对象被类所引用,只有函数对象才可引用;

2、在new实例化后,其成员被实例化,实例对象方可调用。

全局对象Array扩展增加removeByValue方法

/** 数组扩展方法*/
Array.prototype.removeByValue = function(val) {
  for(var i=0; i 2006-07-02 08:09:04.423 
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
调用: 

var time1 = new Date().Format("yyyy-MM-dd");

var time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");

同时,函数是一个对象,函数对象若直接声明成员,不用被实例化即可调用。

对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。·

 

 

 

 

 

 

 

 

 

 

关注
打赏
1665965058
查看更多评论
立即登录/注册

微信扫码登录

0.7185s