通过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 call 函数的用法说明
Apr 09 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 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实例分享之二维数组排序
2014/05/15 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
对python中的logger模块全面讲解
2018/04/28 Python
Php多进程实现代码
2018/05/07 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
50道外企软件测试面试题
2014/08/18 面试题
浪漫婚礼主持词
2014/03/14 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
机械工程师岗位职责
2014/06/16 职场文书
城管个人总结
2015/02/28 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL