Javascript 库开发范围和命名空间

Question

我们目前在大学的课程中学习了一些 Javascript 的东西。 为此，我们为 show()、hide()、write 等常见任务实现了一个库。

目前我正在运行这样的实现：

var myLib_maker = function () {
/*
private scope
*/
var debuggingMode=true;
var currentElement=null;
/*
end private scope
*/
return {
    getElement: function (id) {
        var o;
        if (typeof id === 'string') { o = document.getElementById(id); }
        if (!!(o && o.nodeType !== 1)) { 
            throw {
                name: 'Type Error',
                message: 'Wrong node type at id: '+id
            } 
        }
      currentElement=o;
      return this;
    },
    getCurrentElement: function() {
        console.log(currentElement)
        return currentElement;
    },
    isVisible: function () {
        return this.getCurrentElement().style.display.toLowerCase() === "block"; 
    },
    show: function () {
        this.debug("show "+this.getCurrentElement())
        this.getCurrentElement().style.display = "block";
        return this;
    },
    hide: function () {
        this.debug("hide "+this.getCurrentElement())
        this.getCurrentElement().style.display = "none";
        return this;
    },
    toggle: function() {
        this.debug("toggle "+this.getCurrentElement())
        this.isVisible() ? this.hide(): this.show();
        return this;
    },
    write: function (content){
        this.debug("write to"+this.getCurrentElement().id);
        var tg = this.getCurrentElement().tagName.toLowerCase();
        if (tg === 'input' || tg === 'textarea') {
            currentElement.value = content; 
        } else { 
            currentElement.innerHTML = content;
        }
        return this
    },
    debug: function (what) {
        if (debuggingMode===true){
            console.log("[DEBUG] "+what);
        }
        return this;
    }

};
  }
  var myLib=myLib_maker();

比我有一个外部函数（用于测试）来切换2个文本区域内容。

 function switchEditors(id1, id2){
      c1=myLib.getElement(id1).getCurrentElement().value;
      c2=myLib.getElement(id2).getCurrentElement().value;
      myLib.getElement(id1).write(c2)
      myLib.getElement(id2).write(c1)
 }

我首先尝试使用以下代码，这显然不起作用，因为我覆盖了我的私有 currentElement，所以我总是写入 id2

function switchEditors(id1, id2){
      tmp=myLib.getElement(id1).getCurrentElement().value
      myLib.getElement(id1).write(myLib.getElement(id2).getCurrentElement().value)
      myLib.getElement(id2).write(tmp)
 } 

但我最初真正想要的不是使用私有 currentElement 变量。 write 方法的第一个实现扩展了 Element 对象

Element.prototype.write= function (content){
    var tg = this.tagName.toLowerCase();
    if (tg === 'input' || tg === 'textarea') {
        this.value = content; 
    } else { 
         this.innerHTML = content;
    }
    return this;
}

，因此 getElement 函数返回

document.getElementById(id)

我想要级联（我希望这是正确的词 -> 我的意思是 myLib.getElement("myid").show().hide()连接事物）并直接访问 所有元素属性，但我们不能对我们的库使用全局范围，所以我必须以任何方式封装我的库。

那么是否有一种优雅的方法来使用级联，并且能够直接访问元素对象上的所有属性，而无需在全局元素范围内实现每个方法？

或者我的库设计完全错误并且必须完全不同。 如果是这样，请告诉我，我感谢任何帮助。 （我试图弄清楚 jQuery 是如何实际实现这些东西的，但没有得到真正的线索是如何完成的......太多的代码......:)）

我希望我描述了我的愿望和要求。如果没有，请询​​问更具体的细节。

Answer 1

正如您所了解的，currentElement 在对 getElement 的调用之间共享。相反，您可以使用 Object.create 创建 myLib-object 的新实例并绑定 currentElement 对此。

getElement: function (id) {
    var o, self = Object.create(this);
    /* ... */
    self.currentElement = o;
    return self;
}

并始终使用 this.currentElement ，以便每次调用都使用自己的当前元素。

Answer 2

虽然 Magnar 的解决方案适用于这种（单例）模式，但最好避免每次调用 getElement 时都创建一个全新的对象。创建“类”而不是单例是有原因的。

你可以这样做：

var MyLib_Maker = (function () { // I capitalized the class as a helpful 
                                // convention recommended by Douglas Crockford

    // Private static vars
    var debuggingMode = true;
    var currentElement = null;

    // Private static methods
    function _myMethod (x, y) { // call below by _myMethod(3,4);
        return x * y;
    }

    // Private instance methods (but only if called properly: 
    // invoke below by _instMethod.call(this, 3, 4); )
    function _instMethod (x, y) {
        return this.anInstanceNumber * x * y;
    }

    // Private instance properties (quite cumbersome but doable if you 
    // absolutely must--e.g., for classes whose objects need to be clean when iterated)
    // See http://brettz9.blogspot.com/2009/02/true-private-instance-variables-in.html
    // and http://brettz9.blogspot.com/2009/02/further-relator-enhancements.html
    // (put the Relator inside the closure if you don't want it reusable (and public),
    // but then your extending classes must be inside the closure too)

    function MyLib_Maker (arg1, arg2) {
        // I recommend the following check to allow your class to be
        // instantiated without the 'new' keyword (as in jQuery/$):
        if (!(this instanceof MyLib_Maker)) {
            return new MyLib_Maker(arg1, arg2);
        }
        // Other constructor code here
        // ...
    }
    // Methods added on the prototype benefit from merely 
    // providing a low-memory reference across all instances; 
    // this will avoid adding a whole new object unnecessarily 
    // into memory
    MyLib_Maker.prototype.getElement = function () {
        // ....
        return this; // Keep the chain going (if not public
        // properties, you could add a method which also avoids 
        // extending the chain, like $(el).get() in jQuery
    };


    return MyLib_Maker;
}()); // We can invoke immediately to wrap up the closure

// Usage example:
var mlm = MyLib_Maker(2, 3).getElement().doSomething();

顺便说一句，你所描述的称为链接；级联用于 CSS 之类的应用中，表示就像瀑布中的不同波浪一样，一个波浪可以覆盖另一个波浪，就像您可以通过编写覆盖 CSS 中先前规则的规则来做到这一点。

最好不要重写 Element 对象，因为无论浏览器不兼容，这都是最糟糕的全局命名空间污染，因为它会影响所有元素，增加另一个依赖该方法（或粗心的库）的机会覆盖内置原型本身）可能会给您带来意想不到的结果。