通过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 相关文章推荐
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
JS使用for in有序获取对象数据
May 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
php 静态变量的初始化
2009/11/15 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
php格式文件打开的四种方法
2018/02/24 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
Web安全测试之XSS实例讲解
2016/08/15 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
Python常见异常分类与处理方法
2017/06/04 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
python制作简单五子棋游戏
2019/06/18 Python
HTML的form表单和django的form表单
2019/07/25 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
给老婆的保证书范文
2014/04/28 职场文书
2014年学校工作总结
2014/11/20 职场文书
汽车转让协议书范本
2014/12/07 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库