分类 大前端 下的文章

jQuery源码分析(四): get(n)与eq(n)


起步

构造器之后,就是定义一些函数的了:

jQuery.fn = jQuery.prototype = {
    jquery: version,
    constructor: jQuery,
    selector: "",
    length: 0,
    toArray: function() {},
    get: function( num ) {},
    pushStack: function( elems ) {},
    eq: function( i ) {},
    push: push,
    sort: arr.sort,
    splice: arr.splice
}

看到geteq不经想起那时候用jq的时候特地去找了他们的区别。


jQuery源码分析(三):构造器


起步

这篇是对上一篇的一个补充,静态与实例方法共享设计的在上一篇也提过了:

$(".xx").each()    //作为实例方法存在
$.each()           //作为静态方法存在

源码中:

jQuery.fn = jQuery.prototype = {
    each: function( callback, args ) {
        return jQuery.each( this, callback, args );
    }
};

实例方法取于静态方法,这就是静态与实例方法共享设计。所以jQuery通过2个构造器划分2种不同的调用方式一种是静态,一种是原型。


jQuery源码分析(二):无new构建原理


起步

jQuery里面,你既可以用$.isArray()调用jq的静态方法,也可以通过$().css()获取对象执行对象方法。

在js中,要实现一个变量既能被new,又能调用它的方法,其实不难实现:

var a = function () {};
a.func = function () {alert("静态方法");};
a.prototype.t = function () {alert("对象方法");};

var t = new a();
t.t();
a.func();


jQuery源码分析(一):立即调用函数


起步

想看jquery源码已经很久了,用它来dom、动画、事件等操作真是太方便了。终于有个时间来看看源码,结构清晰,模块紧凑,很适合有点小空闲就拿出来阅读,第一次读觉得枯燥无味,多次看就会赞叹它的精妙无比。

应该是会有版本之间的差异,我看的版本是2.14。


Diigo技术调研


简介:

Diigo:像在本子上一样为网页做笔记,后面再进入(本地)该页面会显示原来做的笔记

功能调研

功能一:选择一段文字 可以设置背景颜色

diigo不支持选择文字的再选择,我们调研时 做成可再选择的。 比如一段

<div class="test">
    <p>对于选中的一段文本 应该记录其在dom节点的所有段 给其加标签</p>

    <ol>
        什么鬼啊
        <li>回复数阿飞</li>
        666
        <li>找商店帖</li>
        <li>言论是对的,在100年</li>
    </ol>
</div>

然后选中了

                                             有段 给其加标签</p>

    <ol>
        什么鬼啊
        <li>回复数阿飞</li>
        666
        <li>找商

如果是直接输出window.getSelection()的话是有段 给其加标签什么鬼啊回复数阿飞666找商 与标签无关,没有任何意义 这时候应该按如下步骤去操作:

获取Range

var range=window.getSelection().getRangeAt(0);

什么是Range及用法请参考这里

利用Range得到选中文字两端所在的dom节点

var startNode = range.startContainer; //得到‘选择文字’左部所在的容器节点(文本节点,nodeType=3)
//如这边startNode.nodeName是#text 而不是p
var endNode = range.endContainer; 
//文本节点获取其父节点:Element节点 用parentElement 也可以
//不能只记录父节点,需要记录父节点的第几个#TEXT 因为文本节点的父节点不一样只有一个child文本节点 如本例中的<ol>
//不能记录文本节点,因为getElementsByTagName不支持search #TEXT
var startParentNode = startNode.parentNode;
var endParentNode = endNode.parentNode;