jQuery源码阅读5-1:字串数组工具1

Posted on   |   In   |  

第一次jQuery.extend中, 有不少工具函数,
这次拆解一下字符串操作 和 头几个数组操作

一.1:转成驼峰命名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//==>源码70行
rmsPrefix = /^-ms-/,//是否以-ms-开头, 针对ie的处理
rdashAlpha = /-([\da-z])/gi,//"-"后边紧跟字母, 多次查找, 忽略大小写
//作为replace的第二个参数传入
//string.replace()方法的第二个参数的传参比较复杂:
//第二个函数参数：
//前几个参数依次对应匹配结果，如果有捕获分组，则按顺序对应第一个第二个。。。。，接下来是匹配开始位置，
//再接下来是整个字符串，如果还有多余参数，则赋值undefined。
 
//这里如果传入"background-color", 那就接收rdashAlpha.exec("background-color")的结果, 就是["-c", "c"]
//"-c"强转成字串,再换成大写,返回
fcamelCase = function( all, letter ) {
    return ( letter + "" ).toUpperCase();
},
//==>源码571行
camelCase: function( string ) {
    //第一次替换把可能出现的-ms-开头 换成ms-开头
    //主要是第二次替换,把"-"紧跟字母的,去掉"-"补一个大写字母
    return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
},

一.2:trim

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
core_trim = String.prototype.trim,
// Make sure we trim BOM and NBSP (here's looking at you, Safari 5.0 and IE)
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
//==>源码621行
//有原生trim且通过检测的(\uFEFF是标记)
//!core_trim.call("\uFEFF\xA0")是个浏览器检测, 我手里支持String.prototype.trim的浏览器这个测试都返回true
trim: core_trim && !core_trim.call("\uFEFF\xA0") ?
    function( text ) {
        return text == null ?
            "" :
            core_trim.call( text );//调原生trim
    } :
    //ie8以下没有String.prototype.trim, 
    function( text ) {
        return text == null ?
            "" :
            ( text + "" ).replace( rtrim, "" );//实现去掉\s ,\uFEFF\和\xA0
    },

二.1:判断在数组中位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//缓存原生Array.indexOf
core_indexOf = Array.prototype.indexOf,
//==>源码656行
//判断元素是否在数组中
inArray: function( elem, arr, i ) {
    var len;
 
    if ( arr ) {
        if ( core_indexOf ) {
            //有Array.prototype.indexOf的就用原生方法
            return core_indexOf.call( arr, elem, i );
        }
 
        len = arr.length;
        //中间加个括号比较好读
        // i ?    (i < 0 ? Math.max( 0, len + i ) : i )  : 0;
        //没有i返回0 , 否则:(小于0就倒着减去i, 大等0就从i开始)
        i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
 
        for ( ; i < len; i++ ) {
            //数组可以用in操作符: idx(数字) in array(数组) 
            //对象的in操作符是: key(键值的键) in Obj(对象)
            //且要求强等
            if ( i in arr && arr[ i ] === elem ) {
                return i;
            }
        }
    }
 
    return -1;
},

二.2: 合并数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//合并数组,类数组
merge: function( first, second ) {
    var l = second.length,
        i = first.length,
        j = 0;
 
    //length是数字,是一般数组
    if ( typeof l === "number" ) {
        for ( ; j < l; j++ ) {
            first[ i++ ] = second[ j ];//把second[j]拷贝到first[i],之后i自增,first.length还没变
        }
 
    } else {
        //second.length不是数字时, 可能是类数组
        //要验证不是"undefined"再拷贝
        while ( second[j] !== undefined ) {
            first[ i++ ] = second[ j++ ];
        }
    }
 
    //first.length更新
    first.length = i;
 
    return first;
},

数组操作还有仨: makeArray , grep , map 明儿再说