为了账号安全,请及时绑定邮箱和手机立即绑定
  • //简单模拟(闭包)

      function aDeferred() {

        var arr = [];

        return {

          then: function(fn) {

            arr.push(fn)

            return this;

          },

          resolve: function(args) {

            var returned;

            arr.forEach(function(fn, i) {

              var o = returned || args;

              returned = fn(o)

            })

          }

        }

      }


  • element.querySelectorAll 在文档内找全部符合选择器描述的节点包括Element本身

    问题出在aaRoot.querySelector尽然还有返回值!因为上下文查找的范围包含了自身了

  • 简单来说,就是IE8之前的版本,需使用getAttribute('className')才能获得class属性的值,FF及IE8之后的版本则是W3C的标准getAttribute('class')。

    这是因为IE 混淆了 DOM 对象属性(property)及 HTML 标签属性(attribute),造成了对 setAttribute、getAttribute 的不正确实现。


  • $.Deferred的resolveWith( context [, args]).如:var dtd=$.Deferred(); function car(age,name){this.age=age;this.name=name}; dtd.done(car); var obj={}; dtd.resolveWith(obj,[8,"jeep"]);console.log(obj.age+","+obj.name)


    callbacks.add( callbacks )


    参数描述
    callbacksFunction,Array类型 一个函数或者一个函数数组,用来添加到回调列表


  • var cbs = $.Callbacks('once memory');

    cbs.add(fn1);



    console.log('..........')


    cbs.add(fn2);

    cbs.fire('bar');


    VM9160:5 ..........

    VM9100:7 fn1 says bar

    VM9100:10 fn2 says bar

    {add: ƒ, remove: ƒ, has: ƒ, empty: ƒ, disable: ƒ, …}

    cbs.fire('foo');

    {add: ƒ, remove: ƒ, has: ƒ, empty: ƒ, disable: ƒ, …}


  • var dfd=$.Deferred();
    dfd.progress(function(data){
        alert(data);
    }).done(function(data){
        alert("done:>>>>>"+data);
    }).fail(function(data){
        alert("fail:>>>>"+data);
    });function getProcess(){
        dfd.notify("我是progress回调函数的参数");    var a=true;    //下面判断是为了执行done还是fail
        if(a){
            dfd.resolve("执行done.....");
        }else{
            dfd.reject("执行fail......");
        }
    }


    <input type="button" value="确定" onclick="getProcess()" />


  • 重点

    //内部promise对象,作用:

          //1:通过promise.promise( deferred );混入到deferred中使用

          //2:可以生成一个受限的deferred对象,

          //   不在拥有resolve(With), reject(With), notify(With)这些能改变deferred对象状态并且执行callbacklist的方法了

          //   换句话只能读,不能改变了


  • 实际上在Callback源码fire方法有一句 memory = options.memory && data;这样就很巧妙的缓存当前参数5的值,提供给下一个使用,这个就是then,pipe链式数据的一个基础了,此刻的操作,我们把memory保存了这个数据的值。

    重点来了,下一个defer.done的操作也是走的add的处理,把done的回调函数加入到list队列中的之后,接着就会触发。


  • jQuery.extend({
       Deferred:function(func){
            ...省略代码....
            return deferred
       },
       when:function(func){
          ...省略代码....
          return deferred.promise();
       }
    })


    Deferred方法内部建议了2个对象,一个是deferred外部接口对象,一个是内部promise对象。



    promise对象解释是一个受限的对象, 这就是所谓的受限制的deferred对象,因为相比之前, 返回的deferred不再拥有resolve(With), reject(With), notify(With)这些能改变deferred对象状态并且执行callbacklist的方法了,只能是then、done、fali等方法。

  • 摘过来一句话:deferred.promise()的作用是,在原来的deferred对象上返回另一个deferred对象,后者只开放与改变执行状态无关的方法(比如done()方法和fail()方法),屏蔽与改变执行状态有关的方法(比如resolve()方法和reject()方法),从而使得执行状态不能被改变。

  • var body1 = $("body")

    undefined

    $.data(body1, "bar", '慕课网一');

    "慕课网一"

    $.data(body1, "bar");

    "慕课网一"

    $.data(body1, "bar", '慕课网一1');

    "慕课网一1"

    $.data(body1, "bar");

    "慕课网一1"

    $.data($("body"), "bar", '慕课网一1');

    "慕课网一1"

    $.data($("body"), "bar");

    undefined


    $.data是绑定在对象上

    $().data是绑定在dom上

  • 静态方法data的实现不像attr操作直接把数据作为属性捆绑到元素节点上


    globalCache” 包含了多个 DOM Element 的 “cache”,并在 DOM Element 上添加一个属性,存放 “cache” 对应的 uid。



    jQuery中每一个对象都是一个新的jQuery.fn.init()实例,所以即使两个jQuery中包含的DOM元素相同,这两个jQuery对象也并无关系。
    好了,那么静态方法就是给jQuery对象附加一个uid,而实例方法则就是给jQuery对象中的DOM节点上附加uid。这就是为啥静态方法不覆盖而实例方法覆盖的原因了

  • 在jQuery的官方文档中,提示用户这jQuery.data()是一个低级的方法,应该用.data()方法来代替。$.data( element, key, value )可以对DOM元素附加任何类型的数据,但应避免循环引用而导致的内存泄漏问题。


    这里有疑问:

    $().data()是直接关联到dom上的,为什么说比$.data更好呢?

    • 第一组,通过$().data()的方式,只取到最后一个a值,之前的被覆盖

    • 2222

    • 2222


    • 第二组,通过$.data的方式,取到2组b值,未覆盖

    • 1111

    • 2222


  • .eq()  减少匹配元素的集合,根据index索引值,精确指定索引对象。
    .get() 通过检索匹配jQuery对象得到对应的DOM元素。




    .slice( start [, end ] )

    作用:

    根据指定的下标范围,过滤匹配的元素集合,并生成一个新的 jQuery 对象。



    this.pushStack


  • [].slice.call({ 'a': 'a', 'b': 'b', length: 2 })

    (2) [empty × 2]

    [].slice.call({ 1: 'a', 2: 'b', length: 2 })

    (2) [empty, "a"]

    [].slice.call({ 0: 'a', 1: 'b', length: 2 })

    (2) ["a", "b"]

    将类似数组的对象转为真正的数组

  • var a = [1,2,{a:12}];

    var b = [{a:12},4];

    var arr = $.merge( a, b );


    1. 0: 1

    2. 1: 2

    3. 2: {a: 12}

    4. 3: {a: 12}

    5. 4: 4

    参数只能是数组,合并不会覆盖

  • $("#cnblogs_post_body").find(".cnblogs_code").find("img").end()表示:

    $("#cnblogs_post_body").find(".cnblogs_code")



    $("#cnblogs_post_body").find(".cnblogs_code").find("img").addBack()表示:

    $("#cnblogs_post_body").find(".cnblogs_code").find("img") + $("#cnblogs_post_body").find(".cnblogs_code")


  • 这里有一个设计的重点,通过调用的上下文,我们来确定这个方法是作为静态还是实例处理,在javascript的世界中一共有四种上下文调用方式:方法调用模式、函数调用模式、构造器调用模式、apply调用模式:

          jQuery.extend调用的时候上下文指向的是jQuery构造器      jQuery.fn.extend调用的时候上下文指向的是jQuery构造器的实例对象了

            通过extend()函数可以方便快速的扩展功能,不会破坏jQuery的原型结构,jQuery.extend = jQuery.fn.extend = function(){...}; 这个是连等,也就是2个指向同一个函数,怎么会实现不同的功能呢?这就是this力量了!

            fn与jQuery其实是2个不同的对象,在之前有讲解:jQuery.extend 调用的时候,this是指向jQuery对象的(jQuery是函数,也是对象!),所以这里扩展在jQuery上。而jQuery.fn.extend 调用的时候,this指向fn对象,jQuery.fn 和jQuery.prototype指向同一对象,扩展fn就是扩展jQuery.prototype原型对象。这里增加的是原型方法,也就是对象方法了。所以jQuery的API中提供了以上2个扩展函数。


  • var aQuery = function(selector) {

        //强制为对象

    if (!(this instanceof aQuery)) {

    return new aQuery(selector);

    }

    var elem = document.getElementById(/[^#].*/.exec(selector)[0]);

    this.length = 1;

    this[0] = elem;

    this.context = document;

    this.selector = selector;

    this.get = function(num) {

    return this[num];

    }

    return this;

    }


  • (function(window, undefined) {
        var jQuery = function() {}
        // ...
        window.jQuery = window.$ = jQuery;
    })(window);

    从上面的代码可看出,自动初始化这个函数,让其只构建一次。详细说一下这种写法的优势:

      1、window和undefined都是为了减少变量查找所经过的scope作用域。当window通过传递给闭包内部之后,在闭包内部使用它的时候,可以把它当成一个局部变量,显然比原先在window scope下查找的时候要快一些。
      2、undefined也是同样的道理,其实这个undefined并不是JavaScript数据类型的undefined,而是一个普普通通的变量名。只是因为没给它传递值,它的值就是undefined,undefined并不是JavaScript的保留字。



    为什么要传递undefined?

    Javascript 中的 undefined 并不是作为关键字,因此可以允许用户对其赋值。




    总结:全局变量是魔鬼, 匿名函数可以有效的保证在页面上写入JavaScript,而不会造成全局变量的污染,通过小括号,让其加载的时候立即初始化,这样就形成了一个单例模式的效果从而只会执行一次。

  • JQuery的立即调用表达式有三种
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
源码的阅读不是一蹴而就的,需要大家有一定的功底,比如jQuery的基础运用以及API的熟悉度,除此之外要有牢固的javascript、DOM、CSS的基础功底,甚至还需要理解常见的设计模式、数据结构等等。当然大家也不要被这些给吓住了,理解,总是需要一种慢慢的学习过程。
老师告诉你能学到什么?
通过本课程的学习,您可以由浅入深地剖析jQuery库的设计与实现。 其中我们围绕的重心: 1、设计理念 2、结构组织 3、接口设计 4、模式运用 5、场景套用

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!