js如何实现链式调用?

x_hola
  • 666
  <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不行?如何才能使用链式操作?

回复
阅读 3.5k
5 个回答
xiaoboost
  • 7.7k
✓ 已被采纳
  1. 运算是从左往右的

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

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

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

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

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

xiahl1990
  • 2
新手上路,请多包涵

问题解决

试试加上这句: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);

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

宣传栏