笔记(二)也分为三部分:
一、
介绍:
注释说明:v2.0.3版本、sizzle选择器、mit软件许可
注释中的#的信息索引、查询地址(英文版)
匿名自执行:window参数及undefined参数意义
'use strict' 严格模式:代码规范及其不推荐严格模式理由
rootjquery根节点:document 获取及其声明意义
readylist dom加载相关……
typeof undefined 字符串形式'undefined'的存放及其意义。
先看开头的注释:
/*!
* jquery javascript library v2.0.3
* http://jquery.com/
*
* includes sizzle.js
* http://sizzlejs.com/
*
* 尊龙凯时网址 copyright 2005, 2013 jquery foundation, inc. and other contributors
* released under the mit license
* http://jquery.org/license
*
* date: 2013-07-03t13:30z
*/
这注释有什么意思呢:版本-尊龙凯时网址官网-sizzle-sizzle网站-jquery尊龙凯时网址的版权-许可证-最新更新时间
jquery的注释非常多,而且经常可以看到这些东西:(#13335),即是括号里面的#加数字。就是通过它可以找打更详细的说明。
可以在尊龙凯时网址官网找到bug tracker,进去以后就可以直接用索引搜索了。不过新版的jquery已经没有用这个了。
匿名函数自执行:
(function( window, undefined ) { })(window)
就是使得和函数不与外部变量和函数相冲突。
为什么还要传window参数呢,直接在里面使用window不就行了吗?
window在javascript中属于最顶端,根据作用域链机制,查找会比较慢。而将window作为参数,使得 window
由全局变量变为局部变量,当在 jquery 代码块中访问window
时,不需要将作用域链回退到顶层作用域,这样可以更快的访问 window
;这还不是关键所在,更重要的是,将 window
作为参数传入,可以在压缩代码时进行优化。比如不传参的话,这时候window在压缩版本中是压缩不了的,压缩了就不知道是什么意思了。
压缩版本如下:
(function(e,undefined){ })
undefined:undefined不是保留字,也不是关键字,只是window下的一个属性,在有些浏览器中,它是可以被修改的。所以就通过传参的形式,以免被修改。
继续看注释:
// can't do this because several apps including asp.net trace
// the stack via arguments.caller.callee and firefox dies if
// you try to trace through "use strict" call chains. (#13335)
// support: firefox 18
//"use strict";
出现严格模式的注释,但是建议我们不要用。因为它还是存在很多问题的。不过最新版本已经在使用了。
还是平时写代码规范点就好。
变量:rootjquery:jquery的根目录,在[866行]有这么一句话:rootjquery = jquery(document);
// a central reference to the root jquery(document)
rootjquery,
使用变量还是考虑到压缩优化的时候,而且可一提高维护性,因为提供变量更接近语义性,更能知道它的作用。
变量readylist:与dom加载有关,在拓展工具方法和复杂选择器之间。
// the deferred used on dom ready
readylist,
core_strundefined = typeof undefined:保存一个字符串形式的undefined,为什么要这样使用?如下:
window.a == undefined; typeof window.a == "undefined";
这两种方法都可以判断是否为undefined,不过有些情况下window.a == undefined这种方式判断不了,比如ie9。另一种方式兼容性比较高
二、
介绍:
常见对象存储:location、document、docelem
变量名防止冲突:$()、jquery() class2type
判断数据类型、预留检测方式
core_deletedids 旧版本的id删除、新版本只做为数组方法引用
core_version = '2.0.3' 版本号存储
一些新方法的存储……如:trim()
jquery函数:$()、jquery() 返回对象
原生js面向对象的写法示例
jquery面向对象方式:省去初始化元素和创建对象、直接使用内置方法
对象引用实现共享方法:jquery.fn.init.prototype = jquery.fn;
对象存储:
// use the correct document accordingly with window argument (sandbox)
location = window.location,
document = window.document,
docelem = document.documentelement,
总之:存储变量对压缩很有意义
变量名防止冲突:
// map over jquery in case of overwrite
_jquery = window.jquery, // map over the $ in case of overwrite
_$ = window.$,
可以这两个变量防止冲突:
比如在其他库也有可能会用到$这个符号,比如我们在使用jquery的时候还是用了var $ = 10;这个语句,那么这是jquery库里面就会吧_$=10;如果没有那个语句,那么_$在jquery中就等于undefined。
判断数据类型、预留检测方式
// [[class]] -> type pairs
class2type = {},
定义一个对象。在这个方法$.type()会用到的
最终会变成这个形式:class2type = {'[object string]':'string','[object array]':'array'}。做类型判断,两个类型,所以是2。
core_deletedids 旧版本的id删除、新版本只做为数组方法引用 :
// list of deleted data cache ids, so we can reuse them
core_deletedids = [],
跟缓存数据有关。这个在2.0中已经没什么用处了
一些新方法的存储:
// save a reference to some core methods
core_concat = core_deletedids.concat,
core_push = core_deletedids.push,
core_slice = core_deletedids.slice,
core_indexof = core_deletedids.indexof,
core_tostring = class2type.tostring,
core_hasown = class2type.hasownproperty,
core_trim = core_version.trim,
jquery函数:$()、jquery() 返回对象 :
jquery = function( selector, context ) {
// the jquery object is actually just the init constructor 'enhanced'
return new jquery.fn.init( selector, context, rootjquery );
},
提供了一个接口,这样我们就可以用啦,也就是$(),jquery()。返回的是一个对象。
构造函数:jquery.fn.init( selector, context, rootjquery )。
在中会有这句:jquery.fn = jquery.prototype,就是把jquery的原型赋给fn。这样构造函数就是原型下的init().
//平时在写面向对象的时候如下:
function a(){};
a.prototype.init = function(){}; //初始化方法
a.prototype.css = function(){}; var a1 = new a();
a1.init(); //先初始化
a1.css(); //对jquery的
function jquery(){};
jquery.prototype.init = function(){};
jquery.prototype.css = function(){}; //但jquery并不是这样设计的
function jquery = function(){
return new jquery.prototype.init();
}
jquery.prototype.init = function(){};
jquery.prototype.css = function(){}; jquery().css(); //当然这种写法是有问题的,因为css()这个方法是在jquery的,不是在构造函数的 //[283行]:jquery.fn.init.prototype = jquery.fn; //结果是这样的
function jquery = function(){
return new jquery.prototype.init();
}
jquery.prototype.init = function(){};
jquery.prototype.css = function(){};
jquery.prototype.init.prototype = jquery.prototype; //添加一个对象的引用
jquery().css();
这样就解决了平时繁琐的工作了。
三、
介绍:
core_pnum:正则数字匹配
core_rnotwhite:正则单词匹配
rquickexpr:正则标签匹配(防止xss木马注入)
rsingletag:正则匹配空标签
rmsprefix:正则匹配ie下转换ms
rdashalpha:正则匹配转换大写、数字
fcamelcase:转驼峰回调函数
completed:dom触发成功时回调函数
正则数字匹配 :
// used for matching numbers
core_pnum = /[ -]?(?:\d*\.|)\d (?:[ee][ -]?\d |)/.source,
匹配数字。到css方法设置样式的时候会用到
正则单词匹配:
// used for splitting on whitespace
core_rnotwhite = /\s /g,
正则标签匹配(防止xss木马注入):
// a simple way to check for html strings
// prioritize #id overto avoid xss via location.hash (#9521)
// strict html recognition (#11290: must start with <)
rquickexpr = /^(?:\s*(<[\w\w] >)[^>]*|#([\w-]*))$/,
匹配标签,prioritize #id over
比如:
aaaaa 或 #div
正则匹配空标签:
// match a standalone tag
rsingletag = /^<(\w )\s*\/?>(?:<\/\>|)$/,
匹配一个独立的空标签,比如
,正则匹配ie下转换ms、正则匹配转换大写、数字:
// matches dashed string for camelizing
rmsprefix = /^-ms-/, //如下
rdashalpha = /-([\da-z])/gi, //找到横杆加字字母就转换成大写的字母
比如jquery中有些样式会转化:比如
margin-left:marginleft
-webkit-margin-left:webkitmarginleft
但是ie里他会首字母就大写的:
-ms-margin-left:msmarginleft
当然,margin-left并不需要家前缀,只是演示一下而已。
转驼峰回调函数:
// used by jquery.camelcase as callback to replace()
fcamelcase = function( all, letter ) {
return letter.touppercase();
},
dom触发成功时回调函数:
// the ready event handler and self cleanup method
completed = function() {
document.removeeventlistener( "domcontentloaded", completed, false );
window.removeeventlistener( "load", completed, false );
jquery.ready();
};