javascript - 简单的js框架，DOM。 (模块样式，尝试使其类似于jQuery样式)

这只是一个训练练习。
为了解决这个问题，我已经使用material编写了这样的脚本

    (function(window) {
    function smp(selector) {
    return new smpObj(selector);
    }

    function smpObj(selector) {
        this.length = 0;
        if (!selector ) {
            this.el = [];
            return this;
            }
        if (selector.nodeType ) {
            this.el = selector;
            this.length = 1;
            return this;
        } else if(selector[0]==='#'){
            this.el = document.getElementById(selector.slice(1, selector.length));
            this.length = 1;
            return this;
        } else if(selector[0]==='.'){
            this.el = document.getElementsByClassName(selector.slice(1, selector.length));
            this.lenghth=this.el.length
            return this;
        }
        else return null;
    }
 })(window);

然后我尝试这样打电话：

smp('body');

但浏览器找不到我的smp定义。
将来我想添加一些使用它的方法（例如，更改颜色）：

 smp('.myClass').method('attr')

如果有人可以告诉我我的错误，我将不胜感激。

UPD：
添加方法仍然存在一些问题，例如：

  smp('.myClass').method('attr')

我已经试过像这样：

  (function color(smp) {
    window.smp.prototype.changeColor = function() {
        for (var i = 0; i < this.length; i++)
            this.el[i].style.color = color;
        return this;
    };
})(smp);

最佳答案

您链接到的文章中的Module Export部分对此进行了说明。

为了实际使用该函数，您需要将其分配给全局或局部变量。您可以在本地通过以下方式做到这一点：

var smp = (...)(window)

但这意味着您必须在函数中返回某些内容。因此，在代码结尾处，在})(window)返回smp函数之前

return smpSelector

放在一起：

var smp = (function(window) {

    function smpSelector(selector) {
      // ... snip
    }

    function smpObj(selector) {
      // ... snip
    }

    return smpSelector;

 })(window);

最后，如果您希望将其保存在单独的文件中，并且仍然可以访问smp，则可以对其进行全局分配。实际上，这是大多数库（包括jQuery）的作用：

(function(window) {

    function smpSelector(selector) {
      // ... snip
    }

    function smpObj(selector) {
      // ... snip
    }

    window.smp = smpSelector

 })(window);

现在，从另一个文件中，我们可以执行以下操作：

 <script src="/path/to/smp/file"></script>
 var foo = smp('something')