通过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 相关文章推荐
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 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
PHP4中实现动态代理
2006/10/09 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python Queue模块详解
2014/11/30 Python
python映射列表实例分析
2015/01/26 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
python脚本开机自启的实现方法
2019/06/28 Python
使用python实现kNN分类算法
2019/10/16 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
一文读懂Python 枚举
2020/08/25 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
绿色环保演讲稿
2014/05/10 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书