原型方法源码分析,英文版配书源码

jQuery.pushStack()原型方法源码分析,jquerypushstack

这次分析的方法跟前面不同,虽然pushStack也是原型方法之一,但是我们几乎从不用在页面调用,在参考手册里面也没有这个方法的使用说明,但是这个方法还是非常重要的,在使用很多jQuery的其他方式都会隐式的调用此方法:

它为以下方法提供支持:
‰ ‰ jQuery 对象遍历:.eq()、.first()、.last()、.slice()、.map()。
‰ ‰ DOM
查找、过滤:.find()、.not()、.filter()、.closest()、.add()、.andSelf()。
‰ ‰ DOM 遍历:
.parent()、.parents()、.parentsUntil()、.next()、.prev()、.nextAll()、.prevAll()、
.nextUnit()、.prevUnit()、.siblings()、.children()、.contents()。
‰ ‰ DOM 插入:
jQuery.before()、jQuery.after()、jQuery.replaceWith()、.append()、.prepent()、
.before()、.after()、.replaceWith()。

下面是1.7.1版本的源码

    // Take an array of elements and push it onto the stack
    // (returning the new matched element set)
    pushStack: function( elems, name, selector ) {
        // Build a new jQuery matched element set
        var ret = this.constructor();

        if ( jQuery.isArray( elems ) ) {
            push.apply( ret, elems );

        } else {
            jQuery.merge( ret, elems );
        }

        // Add the old object onto the stack (as a reference)
        ret.prevObject = this;

        ret.context = this.context;

        if ( name === "find" ) {
            ret.selector = this.selector + ( this.selector ? " " : "" ) + selector;
        } else if ( name ) {
            ret.selector = this.selector + "." + name + "(" + selector + ")";
        }

        // Return the newly-formed element set
        return ret;
    },

在英文注释里面已经告诉我们这个方法是干什么的了,就是把获取的元素数组放到栈中返回一个新的被匹配的数组,说白了就是在执行jQuery构造函数之后会产生一个实例对象,里面放着匹配到的元素,当使用这一个方法是就会在新建一个空的jQuery对象,然后把调用这个方法的对象匹配到的元素放到栈中,就是一个数组然后通过一个指针指向调用此方法的对象,这样就就是一个链式栈可以不断扩展。可以让我们实现“向后”操作,比如end()方法,下面分析源码:

‰ ‰ 参数 elems:将放入新 jQuery 对象的元素数组(或类数组对象) 。
‰ ‰ 参数 name:产生元素数组 elems 的 jQuery 方法名。
‰ ‰ 参数 selector:传给 jQuery 方法的参数,用于修正原型属性 .selector。

 // Build a new jQuery matched element set
        var ret = this.constructor();

构造一个新的空 jQuery 对象 ret,this.constructor 指向构造函数
jQuery(),ret就是一个空的jQuery对象

 if ( jQuery.isArray( elems ) ) {
            push.apply( ret, elems );

        } else {
            jQuery.merge( ret, elems );
        }

判断一下elems是不是数组,如果不是用merge(后续分析)转换成数组,如果是放ret中,此时的elems是一个数组不能直接ret.push否则就会变成二维数组,这里也是巧妙的利用了apply的数组参数属性直接将一个数组的元素添加到另一个数组组,很好用的方法赶紧收藏!这样就实现了数据转移

 // Add the old object onto the stack (as a reference)
        ret.prevObject = this;

既然是链式的那么必须有指针,在新对象中添加这么一个属性来指向当前的jQuery对象

if ( name === "find" ) {
            ret.selector = this.selector + ( this.selector ? " " : "" ) + selector;
 } else if ( name ) {
            ret.selector = this.selector + "." + name + "(" + selector + ")";
 }

给ret加一个selector属性,这里的selector并不是之前分析的原型属性selector表示的选择字符串,它的主要作用是为了调试方便,可以看到方法名和旧的对象的选择字符串以及传入的参数selector,至于为什么把find方法单独列出来还要等到find方法分析完再看吧

 // Return the newly-formed element set
        return ret;

最后把新的jQuery对象返回出去,其实这个方法代码量不大就是思想比较难理解,为此调用下看下结构:

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>jQuery源码分析-原型属性和方法</title>
    </head>
    <body>
       <div>
       </div>
       <div><a></a></div>     
    </body>
    <script src='jquery-1.7.1.js'></script>
    <script>
        console.dir($('a').parent().parent(0));
    </script>
</html>

然后看下元素机构

图片 1

这样就很容易理解了,这个时候再来看出栈的方法end()

    end: function() {
        return this.prevObject || this.constructor(null);
    },

 

原来这个方法就是找的prevObject,根据上面的结构图不难看出 

$('a').parent().parent(0).end()

运行结果指向的是div元素这两个方法一进一出搭配使用,只不过是end方法是在页面大摇大摆的被使用参考手册也有其使用方法,而pushStack只能做一个幕后英雄啦

这次分析的方法跟前面不同,虽然pushStack也是原型方法之一,但是我们几乎从不用在页面调用…

Ajax in action英文版的配书源码,找了N久,终于找到了。
近期有时间的话放在网上做个demo
本地下载

  1. 为什么需要HTML5的桌面通知

近期有时间的话放在网上做个demo 本地下载…

传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户。这种方式有个弊端就是:当我在使用京东进行购物的时候,我是不知道人人网有消息推送过来给我的,而必须要等我把当前页面切到人人网才知道有消息推送了。这种方式的消息推送它是基于页面存活的,但是我们需要这么一种策略:无论你在看哪个页面,只要有消息都应该能推送给我看到,这就是webkitNotification要解决的问题。Notification生成的消息不依附于某个页面,仅仅依附于浏览器。

 

  1. 一个桌面通知生成的正常流程

我们先来看看一个桌面通知是如何生成的:

 

检查浏览器是否支持Notification

检查浏览器的通知权限(是否允许通知)

若权限不够则获取浏览器的通知权限

创建消息通知

展示消息通知

NOTE:
关于第一点的说明需要做一些说明,Notification目前还没有标准化,所以目前只支持chrome19+和safari6+;网上有资料显示Firefox26+也支持,但是我拿我的Firefox27检测的结果是无法支持。

  1. notification api基础说明及代码示例

目前notification的实现有两种:一种是之前草案中的形式:webkitNotifications对象,
另一种就是未来标准化的形式:Notification对象。首先来说一下webkitNotifications所包含的内容:

 

3.1 webkitNotifications:

3.1.1. 静态方法

 

window.webkitNotifications.checkPermission()

//该方法返回0, 1,
2三个值,0代表PERMISSION_ALLOWED,即’允许’;1代表PERMISSION_NOT_ALLOWED,即不允许;2代表PERMISSION_DENIED,即拒绝

window.webkitNotifications.requestPermission()

//调用该方法将会在浏览器的信息栏弹出一个是否允许桌面通知的提醒,该方法只能由用户主动事件触发,如click
或 mouse over,也就是说你不能在document.ready里面直接调用该方法。

window.webkitNotifications.createNotification(‘icon-url’,’title’, ‘body’
)

//调用该方法将返回一个实例化的webkitNotifications对象

PS:调用以上方法都会存在安全异常,也就是当前页面的permission是否为0。

 

notificationInstance.show()

//调用该方法将在右下角弹出一个通知窗口

notificationInstance.cancel()

//调用该方法将关闭通知窗口

3.2 Notification:

在chrome26+
终端里面输入window.Notification并键入回车键,会发现这东西它也是存在的,根据某些博客的说法,这个Notification会是webkitNotifications的标准化形态(传说中的进化),这种方式的实现相对于webkitNotifications的实现更简洁,更面向对象一些。
构造函数:

 

 

Notification(title, options)

//@param {String} title 要显示的通知标题

//@param {Object} options 备选项参数,键值对

//option 结构如下

dictionary NotificationOptions {

  NotificationDirection dir = “auto”;

  DOMString lang = “”;

  DOMString body;

发表评论

电子邮件地址不会被公开。 必填项已用*标注