通过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 相关文章推荐
列表内容的选择
Jun 30 Javascript
jQuery 使用手册(三)
Sep 23 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
Vue组件跨层级获取组件操作
Jul 27 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获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
php实例化一个类的具体方法
2019/09/19 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
js操作二级联动实现代码
2010/07/27 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
学习vue.js计算属性
2016/12/03 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
Javascript中的 “&” 和 “|” 详解
2017/02/02 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
Python实现二维曲线拟合的方法
2018/12/29 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
python request 模块详细介绍
2020/11/10 Python
携程英文网站:Trip.com
2017/02/07 全球购物
淘宝店铺营销方案
2014/02/13 职场文书
实名检举信范文
2015/03/02 职场文书
活动总结书怎么写
2015/05/11 职场文书
2016新年晚会开场白
2015/12/03 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL