$、jQuery是什么?

平时天天在用的$到底是个什么东西?$("id")思考,感觉像个工厂方法。提供selector创建jquery对象。
一看源码绕晕了,剥茧抽丝吧
定义jquery对象,原型上添加方法
function _jQuery(selector){}
_jQuery.prototype={...}
****************************************************
想更简洁的创建jQuery对象
jQuery=function(selector){return new _jQuery(selector);
}
function _jQuery(selector){}
创建一个快捷接口方便修改jQuery原型
jQuery.fn=_jQuery.prototype={...}
****************************************************
将_jQuery挂到jQuery的原型属性init上
jQuery.prototype.init=_jQuery=function(selector){...
}
jQuery.fn=_jQuery.prototype={...}=jQuery.prototype.init.prototype
jQuery=function(selector){return new jQuery.prototype.init(selector);
}
****************************************************
将_jQuery去掉
jQuery.prototype.init=function(selector){...
}
jQuery.fn={...}=jQuery.prototype.init.prototype
jQuery=function(selector){return new jQuery.prototype.init(selector);
}看到这里应该明白了平时我们用的最多jQuery($)只是个包装方法。
为了方便我们扩展实际的_jQuery对象(jQuery.prototype.init)原型暴露出$.fn,
在这基础上jQuery.fn=jQuery.prototype让我们用的更习惯。
所以最后出来这绕来绕去略显奇葩的源码:jQuery=function(selector){return new jQuery.prototype.init(selector);
}
jQuery.fn=jQuery.prototype={...init:function(){...}
}

细不细很开心哦,豁然开朗

$.extend是做什么的?

  这个接口有点灵活,还是看过源码后用起来才有底气

jQuery.extend = jQuery.fn.extend = function() {var src, copyIsArray, copy, name, options, clone,target = arguments[0] || {},i = 1,length = arguments.length,deep = false;// Handle a deep copy situationif ( typeof target === "boolean" ) {deep = target;target = arguments[1] || {};// skip the boolean and the targeti = 2;}// Handle case when target is a string or something (possible in deep copy)if ( typeof target !== "object" && !jQuery.isFunction(target) ) {target = {};}// extend jQuery itself if only one argument is passedif ( length === i ) {target = this;--i;}for ( ; i < length; i++ ) {// Only deal with non-null/undefined valuesif ( (options = arguments[ i ]) != null ) {// Extend the base objectfor ( name in options ) {src = target[ name ];copy = options[ name ];// Prevent never-ending loopif ( target === copy ) {continue;}// Recurse if we're merging plain objects or arraysif ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {if ( copyIsArray ) {copyIsArray = false;clone = src && jQuery.isArray(src) ? src : [];} else {clone = src && jQuery.isPlainObject(src) ? src : {};}// Never move original objects, clone themtarget[ name ] = jQuery.extend( deep, clone, copy );// Don't bring in undefined values} else if ( copy !== undefined ) {target[ name ] = copy;}}}}// Return the modified objectreturn target;
};

jquery 的$.extend经常用的,参数灵活给人有点混乱的感觉,有时不注意可能会使用不当遇到坑。

$.extend(true,objA,objB,objC)  第一参数如果是boolean类型,则用来标明是否深克隆拷贝对象。将objB深克隆拷贝到objA,再将objC深克隆拷贝到objA
$.extend(objA,objB,objC)   若第一个参数不为boolean,则用直接值复制的方式拷贝对象,第一个参数对象(包括object、array、function类型)定义为target目标对象:将objB值复制到objA,再将objC复制到objA
$.extend(objA)         如果只有一个参数对象,则target目标对象设为this($.fn/$):将objA属性值赋值给$.fn/$
例:
获得A对象的深拷贝               $.extend(true,{},A);
克隆A对象同时,获得B、C对象的属性。      $.extend(true,{},A,B,C);
jquery插件写法                
$.extend({
center:function(){...}
});
=$.fn.center=function(){...}  

$.Deferred $.callback的用途?

jquery对于方法回调有2个很有意思的封装$.Deferred,$.callback。各有各的适用场景:

$.callback("rule") :

1.维护一个有规则的回调方法列表,提供add、fire、remove接口给调用者

2.关注的是多个事件以何种逻辑调用

3.作为回调方法的中间层,将方法的执行fire和方法的监听add、remove解耦

规则rule:

once 每次调用后方法置空
memory add新方法时,调用上一次fire的参数值触发当前方法
unique 不重复
stopOnFalse false 执行链中断

function fn1( value ){console.log( value );return false;
}function fn2( value ){fn1("fn2 says:" + value);return false;
}var callbacks = $.Callbacks( "unique memory" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn1 ); // repeat addition
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.add( fn2 );
callbacks.fire( "baz" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );/*
output:
foo
fn2 says:foo
bar
fn2 says:bar
baz
fn2 says:baz
foobar
*/

$.Deferred

1.作为回调方法中间层,解耦事件的定义dfd.done(fn).fail(fn)和方法的执行dfd.resolve(ars)
2.支持链式,擅长控制处理事件调用的时机
3.提供灵活的接入代码方式:最强大的莫过于$.Deferred()可以接受一个函数参数,$.Deferred()所生成的deferred对象将作为这个函数的默认参数。

        function wait(dtd){setTimeout(function(){dtd.resolve("yinshen");},2000);}        /**最基础的实现,传入Deferred对象var dtd=$.Deferred();dtd.done(function(data){console.log(data);});wait(dtd);**//**定义实现Deferred接口* var dtd=$.Deferred();dtd.promise(wait);wait.done(function(data){console.log(data);});    wait(dtd);**/        /**将自己包装成Deferred对象,简洁**/$.Deferred(wait).done(function(data){console.log(data);});    

转载于:https://www.cnblogs.com/yinshen/archive/2013/03/16/2963944.html

jQuery源码学习相关推荐

  1. jQuery源码学习之Callbacks

    jQuery源码学习之Callbacks jQuery的ajax.deferred通过回调实现异步,其实现核心是Callbacks. 使用方法 使用首先要先新建一个实例对象.创建时可以传入参数flag ...

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

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

  3. jQuery源码学习(1)——addClass

    最近比较闲,寻思着学习下jQuery源码,看了好多博客,很多都讲的比较详细.jQuery虽然只有那么200多K,但内容却比较丰富,对于我这样一个js菜鸟,看起来相当吃力.骨头太大,只能化整为零,从简单 ...

  4. jquery源码学习笔记一:总体结构

    练武不练功,到老一场空.计算机也一样. 计算机的功,就是原理.如果程序员只会使用各种函数,各种框架,而不知其原理,顶多熟练工人而已.知其然,更要知其所以然. jquery我们用得很爽,但它究竟咋实现的 ...

  5. jQuery源码学习第二天--jQuery的extend扩展

    Jquery中的extend扩展 一.看下常见的extend扩展: 1: jQuery.extend({ 2: noConflict: function( deep ) { 3: if ( windo ...

  6. jQuery源码学习(6)-Sizzle选择器(2)

    1.CSS选择器的位置关系: 四种关系:"+" 紧挨着的兄弟关系:">" 父子关系:" " 祖先关系:"~" 之后 ...

  7. jQuery源码学习(5)-Sizzle选择器(1)

    1.常见的选择器: #test表示id为test的DOM节点 .aaron 表示class为aaron的DOM节点 nav>li 表示在nav内部子li的样式,而不是所有的后代元素,只是往下一层 ...

  8. 通过jQuery源码学习javascript(三)

    序 承接上两篇继续写下去.我尽量把我明白的地方给大家说清楚.有些大家的提问我也有点搞不明白,如果有人能解答,再好不过了. 疑问 第一篇中有位博友提出了以下的问题,我也不太明白,如果有明白的,能否告知一 ...

  9. jQuery源码学习视频

    为什么80%的码农都做不了架构师?>>>    http://bbs.miaov.com/forum.php?mod=viewthread&tid=7385&extr ...

最新文章

  1. python代码壁纸-Python爬取高清壁纸
  2. Android 音视频深入 十一 FFmpeg和AudioTrack播放声音(附源码下载)
  3. php+html5+jquery断点续传_PHP学习路线:PHP从入门到精通教程
  4. 【JUC系列】Future异步回调模式
  5. wxWidgets:wxSplitterEvent类用法
  6. 石牌村中的美好 ...
  7. golang中package的4种导入方式
  8. DOMJavaScript示例练习
  9. 面试题28:字符串全排列
  10. 力扣199. 二叉树的右视图(JavaScript)
  11. java mysql数据库操作_java 操作mysql数据库
  12. CentOS 安装 PPTP ××× 客户端安装脚本
  13. SmartAdmin(SmartAdmin_v1.5.2)
  14. flask + websocket
  15. 可以写进简历的软件测试项目实战经验(包含电商、银行、app等)
  16. bt tracker服务器 相关内容
  17. 【回归预测】基于GPML工具箱的高斯过程回归附matlab代码
  18. 《活法》 -豆瓣评分8.4
  19. 发布一个太空大战小游戏
  20. 交替打印A1B2C3-Java多线程实现方式

热门文章

  1. 快速配置MPLS ×××
  2. 【C/C++语言入门篇】-- 文件操作
  3. hard sampling
  4. 协方差特征 image feature 二阶pooling + ECCV12
  5. 【Python学习系列十七】基于scikit-learn库逻辑回归训练模型(delta比赛代码2)
  6. Java运行时动态加载类之Class.forName
  7. 注册表修改之USB口启用
  8. 修改mdev配置支持SD卡自动挂载
  9. Rest 微服务工程搭建02——微服务消费者订单Module模块 || @RequestBody 的重要作用
  10. arthas-boot.jar 工具的简单使用