通过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 学习第三章 内容表格
Feb 19 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 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
php cookis创建实现代码
2009/03/16 PHP
php split汉字
2009/06/05 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
mac下如何将python2.7改为python3
2018/07/13 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
python实现简单五子棋游戏
2019/06/18 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
访谈节目策划方案
2014/05/15 职场文书
演讲比赛策划方案
2014/06/11 职场文书
商场促销活动策划方案
2014/08/18 职场文书
上学路上观后感
2015/06/16 职场文书
教师个人教学反思
2016/02/23 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL
如何通过cmd 连接阿里云服务器
2022/04/18 Servers