最近在做日志统计程序,发现对方的程序是在Jquery基础上进行开发的,而公司的网站的框架是prototype。而且我也早就想了解一下Jquery源码,故决定研究Jquery源码,模拟它的方法
 

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();

输出结果

代码分析

1、把cQuery注册到window属性中,当成全局变量使用。用C做为简易名称。

window.C = window.cQuery = cQuery;

2、
cQuery.fn.init.prototype = cQuery.fn;
  拿图说话(打印当前对象cQuery):

去掉该句截图。  

填上此句截图:

难点分析:原型传递
  init的原型只是当前的函数。 

  用cQuery.fn.init.prototype = cQuery.fn;覆盖init构造器的原型对象,从而实现跨域访问。
评估:
 
 这是一招妙棋,new
cQuery.fn.init()创建的新对象拥有init构造器的prototype原型对象的方法,通过改变prototype指针的指向,使其指向
cQuery类的prototype。——这样创建出来的对象就继承了cQuery.fn原型对象定义的方法。
  3、用一个var定义变量,函数。Jquery源码里用了79行定义了一连串的变量(在开头部分)。

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); });

输出结果

难点分析: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));

输出结果

window对象有一个特殊的属性window,等价于 self 属性,它包含了对窗口自身的引用。通过这个属性判断是否是window对象!

总结

  我也是刚开始研究。可能有些地方说的不是很清楚,如果有人能给我补充,那再好不过了。
  时间不早了,下回再接着研究。

jquery 源码学习(*)的更多相关文章

  1. jquery源码学习笔记三:jQuery工厂剖析

    jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...

  2. jquery源码学习(一)——jquery结构概述以及如何合适的暴露全局变量

    jQuery 源码学习是对js的能力提升很有帮助的一个方法,废话不说,我们来开始学习啦 我们学习的源码是jquery-2.0.3已经不支持IE6,7,8了,因为可以少学很多hack和兼容的方法. jq ...

  3. jQuery源码学习感想

    还记得去年(2015)九月份的时候,作为一个大四的学生去参加美团霸面,结果被美团技术总监教育了一番,那次问了我很多jQuery源码的知识点,以前虽然喜欢研究框架,但水平还不足够来研究jQuery源码, ...

  4. 读艾伦的jQuery的无new构建,疑惑分析——jquery源码学习一

    背景: 有心学习jquery源码,苦于自己水平有限,若自己研究,耗时耗力,且读懂之日无期. 所以,网上寻找高手的源码分析.再经过自己思考,整理,验证.以求有所收获. 此篇为读高手艾伦<jQuer ...

  5. jquery 源码学习(一)

    从上边的注释看,jQuery的源码结构相当清晰.条理,不像代码那般晦涩和让人纠结   1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQ ...

  6. 菜鸟的jQuery源码学习笔记(前言)

    前言 相信任何一名前端开发人员或者是前端爱好者都对jQuery不陌生.jQuery简单易用,功能强大,特别是拥有良好的浏览器兼容性,大大降低了前端开发的难度,使得前端开发变得“平易近人起来”.自从本人 ...

  7. jQuery源码学习扒一扒jQuery对象初使化

    神奇的jQuery可以这样玩jQuery("#id").css()或 jQuery("#id").html() 这么玩jQuery("#id" ...

  8. jQuery源码学习笔记一

    学习jQuery源码,我主要是通过妙味视频上学习的.这里将所有的源码分析,还有一些自己弄懂过程中的方法及示例整理出来,供大家参考. 我用的jquery v2.0.3版本. var rootjQuery ...

  9. jquery 源码学习(四)构造jQuery对象-工具函数

    jQuery源码分析-03构造jQuery对象-工具函数,需要的朋友可以参考下.   作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原 ...

随机推荐

  1. 运行时---关联Associated

    关联:指把两个对象相互关联起来,使得其中的一个对象作为另外一个对象的一部分   一.在类的定义之外为类增加额外的存储空间        使用关联,我们可以不用修改类的定义而为其对象增加存储空间.这在我 ...

  2. yii学习小结

    对yii框架搭建的平台运维过程中,会不断地发现很多新的特性和问题,现一一记录下来,便于后续学习~ 1.日志  在/runtime目录中    参考:http://www.cnblogs.com/you ...

  3. 操作系统学习笔记 对称多处理(SMP)

    SMP:一种通过复用处理器提高程序执行并行性的方式. 根据SMP,计算机系统可以分为以下四类: 单指令单数据流(SISD):一个单处理器执行一个单指令流,对保存在一个存储器中的数据进程进行操作. 单指 ...

  4. Exceeded maximum number of retries. Exceeded max scheduling attempts 3 for instance

    Exceeded maximum number of retries. Exceeded max scheduling attempts 3 for instance

  5. select,poll,epoll的归纳总结区分

    Select.Poll与Epoll比较 以下资料都是来自网上搜集整理.引用源详见文章末尾. 1 Select.Poll与Epoll简介 Select select本质上是通过设置或者检查存放fd标志位 ...

  6. css经验点滴积累

    1.filter:alpha(opacity=70);-moz-opacity:0.7;-webkit-opacity: 0.7;-o-opacity: 0.7;-ms-opacity: 0.7;op ...

  7. 如何查找Mac上的USB存储设备使用痕迹

    最近刚好有个案子的证物主机是MBP, OS X版本为El Capitan,案况与营业秘密外泄有关,当中要找有关USB存储设备的使用痕迹. 要提醒大家的是,不同版本的OS X,各种迹证的存放文件名称及路 ...

  8. 必须会的SQL语句(七)字符串函数、时间函数

    字符串函数   1.大小写转换    --upper 转化成大写    --lower  转换成小写    select upper('AsaR')   2.长度    --len 字数    --d ...

  9. nginx url重写 rewrite实例

    本文介绍下,在nginx中实现Url重写,学习rewrite的具体用法,有需要的朋友参考下吧. 原文地址:http://www.360doc.com/content/14/0202/20/142341 ...

  10. jquery.qrcode.js生成二维码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...