通过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 建设银行登陆键盘
Jun 10 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 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
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
PHP可变函数的使用详解
2013/06/14 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
对Python中数组的几种使用方法总结
2018/06/28 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
Python的UTC时间转换讲解
2019/02/26 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
python把一个字符串切开的实例方法
2020/09/27 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
食品营养与检测应届生求职信
2013/11/08 职场文书
五年级音乐教学反思
2014/02/06 职场文书
领导失职检讨书
2014/02/24 职场文书
精彩广告词大全
2014/03/19 职场文书
代领毕业证委托书
2014/08/02 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers
Python使用永中文档转换服务
2022/05/06 Python