通过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 触发a链接点击事件解决方案
May 02 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
Vue和Flask通信的实现
May 19 Vue.js
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生成zip压缩文件的方法详解
2013/06/09 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
银行见习期自我鉴定
2014/01/29 职场文书
精彩的英文自荐信
2014/01/30 职场文书
减负增效提质方案
2014/05/23 职场文书
学习十八大宣传标语
2014/10/09 职场文书
员工评语范文
2014/12/31 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
理想国读书笔记
2015/06/25 职场文书
python实现进度条的多种实现
2021/04/29 Python
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技