通过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 相关文章推荐
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
JS中数据结构之栈
Jan 01 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
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+xml编程之xpath的应用实例
2015/01/24 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python定时执行之Timer用法示例
2015/05/27 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
橄榄树药房:OLIVEDA
2019/09/01 全球购物
简述数组与指针的区别
2014/01/02 面试题
简历中的自我评价怎么写
2014/01/29 职场文书
股权转让意向书
2014/04/01 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
人才市场接收函
2015/01/30 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python