javascript - js如何实现链式调用?
伊谢尔伦
伊谢尔伦 2017-04-11 08:57:16
0
5
754
  <p class="slide_window_a">
        <p 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="">
        </p>  
  </p>

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

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

reply all(5)
洪涛
  1. 运算是从左往右的

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

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

大家讲道理

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

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

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

Peter_Zhu

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

刘奇

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

黄舟

问题解决

试试加上这句: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);
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template