通过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 相关文章推荐
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
用PHP生成静态HTML速度快类库
2007/03/18 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
js实现小时钟效果
2020/03/25 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
python写一个随机点名软件的实例
2019/11/28 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
J2EE模式面试题
2016/10/11 面试题
服务中心夜班服务员岗位职责
2013/11/27 职场文书
给医务人员表扬信
2014/01/12 职场文书
元旦晚会策划方案
2014/02/18 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
国旗下的演讲稿
2014/05/08 职场文书
2015年预算员工作总结
2015/05/14 职场文书
学历证明样本
2015/06/16 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电