通过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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 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实现的农历算法实例
2015/08/11 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python实现文件名批量替换和内容替换
2014/03/20 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
什么是python的id函数
2020/06/11 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
停车位租赁协议书
2014/09/24 职场文书
事业单位个人总结
2015/02/12 职场文书
会计入职心得体会
2016/01/22 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis