zoukankan      html  css  js  c++  java
  • jquery里的函数 grep,each,,trim,map,extend 解析

    $.trim(text)

    去掉两端的空格$.trim(" aaa ") ==> "aaa"

    [suFEFFxA0] 某些软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM),转码后是“uFEFF”,因此我们在读取时需要自己去掉这些字符。“xA0”其实就是HTML中常见的“&nbsp”

    // [suFEFFxA0] 某些软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM),转码后是“uFEFF”,因此我们在读取时需要自己去掉这些字符。“xA0”其实就是HTML中常见的“&nbsp”
    var  rtrim = /^[suFEFFxA0]+|[suFEFFxA0]+$/g,
    // Support: Android <=4.0 only
    trim: function( text ) {
    	return text == null ?
    		"" :
    		( text + "" ).replace( rtrim, "" );
    },
    
    

    $.each(text)

    这个函数主要是用作遍历数组或者对象 NodeList ,arguments

    each: function( obj, callback ) {
        var length, i = 0;
        
        if ( isArrayLike( obj ) ) {
        	length = obj.length;
        	for ( ; i < length; i++ ) {
        		// TODO: 如果each 回调函数renturn false, 那么退出,而EcmaScript原生forEach()语法 中,则继续下一个回调
        		if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
        			break;
        		}
        	}
        } else {
            // 用for in 循环遍历对象可enumable元素
        	for ( i in obj ) {
        		if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
        			break;
        		}
        	}
        }
        
        return obj;
    },
    

    $.grep

    用法:
    $.grep([0,1,2,3,4,5],function(item,index){ return item>2});//=> [3,4,5]

    grep: function( elems, callback, invert ) {
    	var callbackInverse,
    		matches = [],
    		i = 0,
    		length = elems.length,
    		callbackExpect = !invert;
    
    	// Go through the array, only saving the items
    	// that pass the validator function
    
    	// TODO:遍历函数,获取出elems 中在回调中return true 的元素,若invert=1,则返回return false的元素
    	for ( ; i < length; i++ ) {
    		callbackInverse = !callback( elems[ i ], i );
    		if ( callbackInverse !== callbackExpect ) {
    			matches.push( elems[ i ] );
    		}
    	}
    
    	return matches;
    },
    

    $.map

    用法:

    $.map([1,2,3],function(item,i){ return item+1;})  //=>[2,3,4]
    
    // arg is for internal usage only
    map: function( elems, callback, arg ) {
        var length, value,
        	i = 0,
        	ret = [];
        
        // Go through the array, translating each of the items to their new values
        // TODO:遍历类数组元素,调用callback 生成隐射数组
        if ( isArrayLike( elems ) ) {
        	length = elems.length;
        	for ( ; i < length; i++ ) {
        		value = callback( elems[ i ], i, arg );
        
        		if ( value != null ) {
        			ret.push( value );
        		}
        	}
        
        // Go through every key on the object,
        // TODO: 如果不是类数组或者数组元素,调用for in循环,获得隐射数组
        } else {
        	for ( i in elems ) {
        		value = callback( elems[ i ], i, arg );
        
        		if ( value != null ) {
        			ret.push( value );
        		}
        	}
        }
        
        // Flatten any nested arrays
        return concat.apply( [], ret );
    },
    

    $.proxy

    用法:类似ECMAScript5 中的bind 方法,保证函数的执行上下文

    $('#myElement').click(function() {
    
        setTimeout(function() {
    
              // Problem! In this function "this" is not our element!
    
            $(this).addClass('aNewClass');
    
        }, 1000);
    
    });
    
    // Bind a function to a context, optionally partially applying any
    // arguments.
    // TODO: 强行执行fn 内,context 上下文的函数
    proxy: function( fn, context ) {
    	var tmp, args, proxy;
    
    	if ( typeof context === "string" ) {
    		tmp = fn[ context ];
    		context = fn;
    		fn = tmp;
    	}
    
    	// Quick check to determine if target is callable, in the spec
    	// this throws a TypeError, but we will just return undefined.
    	if ( !jQuery.isFunction( fn ) ) {
    		return undefined;
    	}
    
    	// Simulated bind
    	// TODO:获取后面的参数,传入fn内
    	args = slice.call( arguments, 2 );
    	proxy = function() {
    		return fn.apply( context || this, args.concat( slice.call( arguments ) ) );
    	};
    
    	// Set the guid of unique handler to the same of original handler, so it can be removed
    	//[问题]?: guid:guid 一般的作用是生成一个16 32 位的唯一字符串 用来唯一标示key用的
    	proxy.guid = fn.guid = fn.guid || jQuery.guid++;
    
    	return proxy;
    },
    

    $.extend(obj1,obj2)

    用法:常用来继承 或者写jq的插件函数,默认如果obj2 省略,obj1 会复制到jQuery.prototype上

    var newSrc=$.extend({},src1,src2,src3...)
    var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
    
    jQuery.extend = jQuery.fn.extend = function() {
        var src, copyIsArray, copy, name, options, clone,
            target = arguments[0] || {},    // 常见用法 jQuery.extend( obj1, obj2 ),此时,target为arguments[0]
            i = 1,
            length = arguments.length,
            deep = false;
    
        // Handle a deep copy situation
        if ( typeof target === "boolean" ) {    // 如果第一个参数为true,即 jQuery.extend( true, obj1, obj2 ); 的情况
            deep = target;  // 此时target是true
            target = arguments[1] || {};    // target改为 obj1
            // skip the boolean and the target
            i = 2;
        }
    
        // Handle case when target is a string or something (possible in deep copy)
        if ( typeof target !== "object" && !jQuery.isFunction(target) ) {  // 处理奇怪的情况,比如 jQuery.extend( 'hello' , {nick: 'casper})~~
            target = {};
        }
    
        // extend jQuery itself if only one argument is passed
        if ( length === i ) {   // 处理这种情况 jQuery.extend(obj),或 jQuery.fn.extend( obj )
            target = this;  // jQuery.extend时,this指的是jQuery;jQuery.fn.extend时,this指的是jQuery.fn
            --i;
        }
    
        for ( ; i < length; i++ ) {
            // Only deal with non-null/undefined values
            if ( (options = arguments[ i ]) != null ) { // 比如 jQuery.extend( obj1, obj2, obj3, ojb4 ),options则为 obj2、obj3...
                // Extend the base object
                for ( name in options ) {
                    src = target[ name ];
                    copy = options[ name ];
    
                    // Prevent never-ending loop
                    if ( target === copy ) {    // 防止自引用,不赘述
                        continue;
                    }
    
                    // Recurse if we're merging plain objects or arrays
                    // 如果被拷贝的属性值本身是个对象,则深拷贝
                    if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                        if ( copyIsArray ) {    // 被拷贝的属性值是个数组
                            copyIsArray = false;
                            clone = src && jQuery.isArray(src) ? src : [];
    
                        } else {    //被拷贝的属性值是个plainObject,比如{ nick: 'casper' }
                            clone = src && jQuery.isPlainObject(src) ? src : {};
                        }
    
                        // Never move original objects, clone them
                        target[ name ] = jQuery.extend( deep, clone, copy );  // 递归~
    
                    // Don't bring in undefined values
                    } else if ( copy !== undefined ) {  // 浅拷贝,且属性值不为undefined
                        target[ name ] = copy;
                    }
                }
            }
        }
    
        // Return the modified object
        return target;
    }
    
  • 相关阅读:
    BAT带队烧钱圈地华为们猛追云计算
    各浏览器的cookie的name个数/最大容量限制测试
    多备份:云端数据物流平台为企业提供云备份服务(通过增值服务盈利,数据备份相当于买保险)
    多备份CEO胡茂华:创业路上的五道坎
    蜡笔同步:同步通讯录,同步短信,用电脑发短信
    MIUI是小米的核心竞争力
    tggg
    Ubuntu 创建启动器
    TProcedure,TMethod,TNotifyEvent,TWndMethod的区别,并模拟点击按钮后发生的动作
    所有语言的Awesome
  • 原文地址:https://www.cnblogs.com/Alencong/p/5861606.html
Copyright © 2011-2022 走看看