通过jQuery源码学习javascript(一)


Posted in Javascript onDecember 27, 2012

Jquery这么普及,必有它过人之处,通过开源代码进行学习,是个不错的学习方法啊!

以下是我模拟的方法,我尽量简化方法。

定义对象C(类似于jquery的$方法)——这个也是jquery设计非常巧妙的地方

(function(){ 
var 
_cQuery = window.cQuery, 
cQuery = function(){ 
return new cQuery.fn.init(); 
}; 
cQuery.fn = cQuery.prototype = { 
init : function () { 



 console.log(this); 
return this; 
}, 
test : function () { 
console.log('test'); 
} 
}; 
cQuery.fn.init.prototype = cQuery.fn; 
window.C = window.cQuery = cQuery; 
})(); 
C().test();

输出结果

通过jQuery源码学习javascript(一)

代码分析

1、把cQuery注册到window属性中,当成全局变量使用。用C做为简易名称。

window.C = window.cQuery = cQuery;

2、
cQuery.fn.init.prototype = cQuery.fn;

拿图说话(打印当前对象cQuery):

去掉该句截图。

通过jQuery源码学习javascript(一)

填上此句截图:

通过jQuery源码学习javascript(一)

难点分析:原型传递

init的原型只是当前的函数。 
通过jQuery源码学习javascript(一)

用cQuery.fn.init.prototype = cQuery.fn;覆盖init构造器的原型对象,从而实现跨域访问。
评估:

这是一招妙棋,new cQuery.fn.init()创建的新对象拥有init构造器的prototype原型对象的方法,通过改变prototype指针的指向,使其指向cQuery类的prototype。——这样创建出来的对象就继承了cQuery.fn原型对象定义的方法。

3、用一个var定义变量,函数。Jquery源码里用了79行定义了一连串的变量(在开头部分)。

通过jQuery源码学习javascript(一)

each方法
(function(){ 
var 
_cQuery = window.cQuery, 
cQuery = function(){ 
return new cQuery.fn.init(); 
}; 
cQuery.fn = cQuery.prototype = { 
init : function () { 
return this; 
}, 
each : function(obj, callback) { // each 方法 
var name, length = obj.length; 
for (name in obj) { 
if (callback.call(obj[name], name, obj[name]) === false) { 
break; 
} 
} 
}, 
isWindow : function(obj) { 
return obj != null && obj == obj.window; 
} 
}; 
cQuery.fn.init.prototype = cQuery.fn; 
window.C = window.cQuery =cQuery; 
})(); C().each({ Height : 'height', Width : 'width'}, function(name, type){ console.log(this, name, type); });

输出结果
通过jQuery源码学习javascript(一)
难点分析:callback.call(obj[name], name, obj[name])
callback是function(name, type){ console.log(this, name,type);}这个方法
第一个obj[name]是"height“或"width"字符串,是callback函数里的this。
name,第二个obj[name]是传给callback的参数。

isWindow()方法

在上面代码的基础上,进行编写:

isWindow : function(obj) { 
return obj != null && obj == obj.window; 
}

调用:
console.log(cquery.isWindow(window)); 
console.log(cquery.isWindow(document));

输出结果

通过jQuery源码学习javascript(一)

window对象有一个特殊的属性window,等价于 self 属性,它包含了对窗口自身的引用。通过这个属性判断是否是window对象!

总结

我也是刚开始研究。可能有些地方说的不是很清楚,如果有人能给我补充,那再好不过了。

时间不早了,下回再接着研究。

Javascript 相关文章推荐
checkbox勾选判断代码分析
Jun 11 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 Javascript
Eval and new funciton not the same thing
Dec 27 #Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 #Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 #Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 #Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 #Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 #Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 #Javascript
You might like
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
php中的异常和错误浅析
2017/05/03 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
小程序实现tab标签页
2020/11/16 Javascript
python二分法实现实例
2013/11/21 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
python制作最美应用的爬虫
2015/10/28 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
环保倡议书怎么写
2014/05/16 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
献爱心标语
2014/06/21 职场文书
北京天坛导游词
2015/02/12 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP