库的正式开始
var // Use the correct document accordingly with window argument (sandbox) document = window.document, version = "2.1.1", // Define a local copy of jQuery jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' // Need init if jQuery is called (just allow error to be thrown if not included) return new jQuery.fn.init( selector, context ); }, // Support: Android<4.1 // Make sure we trim BOM and NBSP rtrim = /^[suFEFFxA0]+|[suFEFFxA0]+$/g, // Matches dashed string for camelizing rmsPrefix = /^-ms-/, rdashAlpha = /-([da-z])/gi, // Used by jQuery.camelCase as callback to replace() fcamelCase = function( all, letter ) { return letter.toUpperCase(); };
这里主要定义存储,像document变量,版本信息,jquery入口,一些jquery.trim辅助正则及jquery.camelCase()方法的辅助正则和辅助方法,当然也被其它函数使用。
1.jQuery入口
(function(){ var jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' // Need init if jQuery is called (just allow error to be thrown if not included) return new jQuery.fn.init( selector, context ); }; //作为核心方法 jQuery.each = function(){ //... }; //其它在jQuery对象下的方法。 //独立jQuery对象fn作为jQuery对象方法 jQuery.fn = { init: function(a){ console.log(a) }, //other methods } //继承jQuery jQuery.fn.init.prototype = jQuery.fn window.$ = jQuery; }(window)) $(1) //1
当我们$.(selector,context)时,实际调用的是库里面的jQuery入口,进而返回new jQuery.fn.init的结果。
在这样的模式下,js函数也是对象,定义函数的同时它本身也是对象,我们使用的jQuery.each(),jQuery.trim()等方法实际上就是jQuery函数同名对象里的属性,像这样
jQuery = { each: function(){ //... }, trim: function(){ //.. } }
这个对象相对比较独立,自始至终也都存在,适合存放一些固定的核心方法。
继续,开辟一个对象jQuery.fn,在里面写上一群方法,然后将 jQuery.fn.init.prototype = jQuery.fn。js中,实例化对象继承构造函数原型的属性,这个构造函数原型的属性指向jQuery.fn,这样我们每个实例化出来的对象将继承所有jQuery.fn的方法。
2.去处空白的正则表达式,其中uFEEF字节顺序符,xA0,为特殊的空白,作者意思是Bom和NBSP两个情况下,我未验证。
在PC上,三大浏览器用String.prototype.strim,结果一样,作者的意图估计是针对一些不常用设备兼容.原注释Support :Android<4.1。
var rtrim = /^[suFEFFxA0]+|[suFEFFxA0]+$/g; console.log(' 123 uFEFFxA0'.replace(rtrim,'')) console.log(' 123 uFEFFxA0'.trim())
jQuery.trim方法就用到了此正则
var rtrim = /^[suFEFFxA0]+|[suFEFFxA0]+$/g; var jQuery = {}; jQuery.trim = function( text ) { //line396 return text == null ? "" : ( text + "" ).replace( rtrim, "" ); }
3.将形如font-size的css写法转化为fontSize的js中CSSStleDeclaration对象。
var rmsPrefix = /^-ms-/, rdashAlpha = /-([da-z])/gi, // Used by jQuery.camelCase as callback to replace() fcamelCase = function( all, letter ) { return letter.toUpperCase(); }; jQuery.camelCase = function( string ) {//line337 return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase ); } jQuery.camelCase("font-size")//fontSize jQuery.camelCase("-ms-transform")//msTransform
其中 string.replace( rmsPrefix, "ms-") 只是为了兼容微软-ms-transform前缀。而replace第二个参数为函数时,函数的第一个参数是 -([da-z]) 匹配字符,后面依次为,正则记忆字符 ([da-z]) 。更多replace函数作参数参见正则讲解。
jQuery.camlCase这个方法不作外部使用,主要服务于jQuery.fn.css。