js如何实现链式调用？

Question

  <div class="slide_window_a">
        <div class="s_scroll_a" id="s_scroll_a">
            <img src="1.jpg" alt="">
            <img src="2.jpg" alt="">
            <img src="3.jpg" alt="">
            <img src="4.jpg" alt="">
            <img src="5.jpg" alt="">
            <img src="6.jpg" alt="">
        </div>  
  </div>

  <script>
    function tag(element){
        return document.getElementsByTagName(element);
    }

    function $(element){
        return document.getElementById(element);
    }
    alert($("s_scroll_a").tag("img").length);

为何这样$("s_scroll_a").tag("img").length不行？如何才能使用链式操作？

Answer 1

1. 运算是从左往右的

2. $("s_scroll_a")返回了个Element实例，tag是你自己定义的函数，这俩半毛钱关系都没有，当然不能用链式调用。

3. 想要实现你这个东西的链式调用，你需要封装个类，然后把tag函数放到类的原型方法中。

Answer 2

链式调用的根本在于上一个函数的返回值有下一个要调用的方法，依次类推。

比较常见做法是自己写个类来封装数据，然后提供一堆处理这个数据的方法，每个（或大部分）方法都返回 this，这样就能链式调用了。

你要做的事情 jQuery 或者 Zepto 都已经封装得很好了，直接用吧。有兴趣就去研究下它们的源码。

Answer 3

问题解决

试试加上这句：document.getElementById(element).tag = tag;

例如：

function $(element){
    document.getElementById(element).tag = tag;
    return document.getElementById(element);
}

实现链式调用

var _document = window.document;

vDom = function (element) {
    return new vDom.prototype.init(element);
}

vDom.prototype = {
    tag : function (element) {
        return _document.getElementsByTagName(element);
    }
}

var init = vDom.prototype.init = function (element) {
    return this;
}

init.prototype = vDom.prototype;

alert(vDom("s_scroll_a").tag("img").length);

Answer 4

这两个函数有联系吗？没看懂你想做什么

Answer 5

推荐一个我看过的jquery 的源码解析。。。jQuery 2.0.3 源码分析core - 整体架构
里面有对jquery的分析，就有无new创建和链式调用的解释