通过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 指南/入门基础
Nov 30 Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
python中异常报错处理方法汇总
2016/11/20 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python字典快速保存于读取的方法
2018/03/23 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
对python中Json与object转化的方法详解
2018/12/31 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
自我推荐信格式模板
2015/03/24 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
环境卫生整治简报
2015/07/20 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
python对文档中元素删除,替换操作
2022/04/02 Python