通过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 相关文章推荐
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 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中的串行化变量和序列化对象
2006/09/05 PHP
php 高效率写法 推荐
2010/02/21 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
python3操作mysql数据库的方法
2017/06/23 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
优纳科技软件测试面试题
2012/05/15 面试题
英文版销售经理个人求职信
2013/11/20 职场文书
教师推荐信范文
2013/11/24 职场文书
学校大课间活动方案
2014/01/30 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
青春励志演讲稿
2014/04/29 职场文书
2014年母亲节寄语
2014/05/07 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
nginx七层负载均衡配置详解
2022/07/15 Servers