您所在的位置:小祥子 » 编程 » JavaScript » 正文

jQuery静态方法noop,camelCase,nodeName,trim使用和源码分析

时间:2015-07-27 编辑:梁洋洋 来源:CnBlogs

noop方法

jQuery.noop()函数是一个空函数,它什么也不做。

当某些时候你需要传入函数参数,而且希望它什么也不做的时候,你可以使用该函数,也无需再新建一个空的函数。

示例:

// 传入一个空函数作为参数,返回一个空数组
// 空函数的返回值为undefined,而null或undefined值会被$.map()忽略掉。
var result = $.map( [1, 2, 3], $.noop );
document.writeln( result.length ); // 0

源码分析:

noop: function() {},

camelCase方法

jQuery.camelCase函数的功能就是将形如background-color转化为驼峰表示法:backgroundColor。 
此函数在jQuery的data函数,以及涉及到CSS的诸多函数中都有用到。

示例:

var cssStr='background-color';
alert($.camelCase(cssStr)); //backgroundColor

源码分析:

// Convert dashed to camelCase; used by the css and data modules
// Microsoft forgot to hump their vendor prefix (#9572)
camelCase: function( string ) {
        return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
},

该方法的使用主要依赖以下3个正则表达式

// Matches dashed string for camelizing
rdashAlpha = /-([a-z]|[0-9])/ig,
rmsPrefix = /^-ms-/,

// Used by jQuery.camelCase as callback to replace()
fcamelCase = function( all, letter ) {
    return ( letter + "" ).toUpperCase();
},

正则 rdashAlpha 用于匹配字符串中连字符“ -”和其后的第一个字母或数字。如果连字符“ -”后是字母,则匹配部分会被替换为对应的大写字母;如果连字符“ -”后是数字,则会删掉连字符“-” ,保留数字

正则 rmsPrefix 用于匹配字符串中前缀“-ms-” ,匹配部分会被替换为“ms-” 。这么做是因为在 IE 中,连字符式的样式名前缀“-ms-”对应小写的“ms” ,而不是驼峰式的“ Ms” 。例如, “ -ms-transform”对应“ msTransform”而不是“ MsTransform” 。在 IE 以外的浏览器中,连字符式的样式名则可以正确地转换为驼峰式,例如, “ -moz-transform”对应“MozTransform”。

函数 fcamelCase() 负责把连字符后的字母转换为大写并返回

在方法 jQuery.camelCase() 中,先用正则 rmsPrefix 匹配前缀“ -ms-” ,如果有则修正为“ms-” ;

然后用正则 rdashAlpha 匹配连字符“-”和其后的第一个字母或数字,并用字符串方法 replace() 和函数 fcamelCase() 把匹配部分替换为对应的大写字母或数字

nodeName方法

jQuery.nodeName( elem, name ) 用于检查 DOM 元素的节点名称(即属性 nodeName)与指定的值是否相等,检查时忽略大小写

示例:

alert($.nodeName(document.getElementsByTagName('div')[0],'div'));//true

源码分析:

nodeName: function( elem, name ) {
        return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
 },

接收两个参数,一个是dom元素,一个是待检测的节点名称,直接返回这两个参数转化为大写之后作全等比较的结果,当然在比较之前首先要保证elem必须是dom节点

trim方法

 jQuery.trim( str ) 用于移除字符串开头和结尾的空白符如果传入的参数是 null 或undefined,则返回空字符串;如果传入的参数是对象,则先获取对象的字符串表示,然后移除开头和结尾的空白符,并返回

示例:

var str='  abcdefg   ';
alert(str.indexOf(' ')); //0
alert($.trim(str).indexOf(' ')); //-1

源码分析:

// Use native String.trim function wherever possible
trim: trim ?
     function( text ) {
            return text == null ?
                "" :
                trim.call( text );
     } :

     // Otherwise use our own trimming functionality
       function( text ) {
            return text == null ?
                "" :
                text.toString().replace( trimLeft, "" ).replace( trimRight, "" );
     },

trim方法是ECMA5新增的方法,对于支持此方法的浏览器而言可以直接调用,如果传入的是null会返回一个空字符串,对于不支持此trim方法的浏览器来说使用正则匹配

// IE doesn't match non-breaking spaces with \s
if ( rnotwhite.test( "\xA0" ) ) {
    trimLeft = /^[\s\xA0]+/;
    trimRight = /[\s\xA0]+$/;
}

在 IE 9 以下的浏览器中,\s 不匹配不间断空格 \xA0,需要为正则trimLeft 和 trimRight 加上“\xA0” 

先调用toString方法说明是可以传入对象或者数组的,如果是对象或者数组就用他们的字符串形式来操作,分别匹配到左右空格之后替换为空字符串(不是含有空格的字符串)

 

关键词:静态 方法 使用 源码