JS如何实现像jquery的链式调用

发布于
2016-02-02

更新于
2016-02-02

对jquery的调用方式很感兴趣,然后在网上找资料试着写了一个js代码,基本能实现jquery的链式调用,但是引用的时候发现和jquery还是差别很大,比如去掉字符串左右两边的空格,jquery是这样实现的$.trim(str)，而我的代码必须是这样才可以$().trim(str),$后面要跟括号();
请教如何想jquery那样直接用$不加()?

代码:

<script>
(function(){
    function _$(obj){
        this._obj = document.getElementById(obj);
    }

    _$.prototype = {
        trim:function(str){//去掉字符窜左右空格
            return str.replace(/(^\s*)|(\s*$)/g,'');
        },
        
        text:function(str){//获取innerText
            return this._obj.innerText;
        }
        
    }

    window.$ = function(obj){
        return new _$(obj);
    }
})();

alert($().trim('  空格  '));

//jquery代码 alert($.trim('  空格  '));
</script>

感谢LionKissDeer回复，

window.$ = (function(obj){
  return new _$(obj);
})();

改动之后

alert($.trim(' 空格 '));

这个解决，是我需要的，但是：

alert($('aa').text());

这样代码出现问题

javascript jquery

阅读 5.4k

3 个回答

得票最新

kikong

19.1k21320

发布于
2016-02-02

✓ 已被采纳

如 @LionKissDeer 所提到的，不同用户的函数放在不同的地方

(function(){
    function _$(obj){
        this._obj = document.getElementById(obj);
    }
    _$.prototype = {
        text:function(str){//获取innerText
            return this._obj.innerText;
        }

    };

    //将工具类放在fn这个对象下
    _$.fn={};
    _$.fn.trim=function(str){//去掉字符窜左右空格
        return str.replace(/(^\s*)|(\s*$)/g,'');
    };
    
    var $;
    window.$=$=function(obj){
        return new _$(obj);
    };
    //将_$.fn下的属性复制到$下
    for(var prop in _$.fn){
        $[prop]=_$.fn[prop];
    }
})();

console.log($.trim(' 空格 '));

LiuuY

1.6k127

发布于
2016-02-02

更新于
2016-02-02

如果只针对你现在的代码的话：

window.$ = (function(obj){
  return new _$(obj);
})();

然后就可以：

alert($.trim('  空格  '));

补充对于全局方法应该：

$.trim = function() {} // 函数实现

// ...

alert($.trim('  空格  '));

而不是把他放在prototype下。

皮小蛋

8k11

发布于
2017-03-01

写了个简单的例子，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>链式调用</title>

</head>
<body>

<div id="node">test</div>
<script>
window.onload = function(){

    var jQuery = function(selector, context) {
        return new jQuery.fn.init(selector, context);
    }

    jQuery.fn = jQuery.prototype = {
        constructor: jQuery,
        setColor: function(color){
            for (var i = 0; i < this.length; i++) {
                this[i].style.color = color;
            }
            return this;
        },
        first: function() {
            return this[0];
        },
        text:function(val){
            for (var i = 0; i < this.length; i++) {
                this[i].innerHTML = val;
            }
            return this;
        }
    }

    var init = jQuery.fn.init = function(selector, context) {

        var elem = document.querySelectorAll(selector);

        for (var i = 0; i < elem.length; i++) {
            this[i] = elem[i];
        }

        this.length   = elem.length;
        this.context = document;
        this.selector = selector;

        return this;
    };

    
    init.prototype = jQuery.fn;

    window.jQuery = window.$ = jQuery;

    var $node = $('#node');

    $node.setColor('red').text('123').text('456');
    
}

</script>

</body>
</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

JS如何实现像jquery的链式调用

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

省市区街道数据在哪里可以下载？

两个promise问题？

Object assgin拷贝问题？

js如何在并发中同步两个fetch请求？

前端页面脚本更新时，如何让用户端，使用最新脚本？

solidjs中如何实现vue中的keep-alive功能？