javascript - JS如何实现像jquery的链式调用-PHP中文网问答

对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());

这样代码出现问题

(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(' 空格 '));

<p id="node">test</p> <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'); }