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个textareas内容。

 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 Object

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)

我想要级联（我希望这是正确的词 - ＆gt;我的意思是myLib.getElement（“myid”）。show（）。hide（）连接事物）并获得直接访问权限所有Element属性，但我们不能对我们的库使用全局范围，所以我必须以任何方式封装我的库。

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

或者我的lib设计完全错误，必须完全不同。如果是这样，请告诉我，我感谢任何帮助。（我试图弄清楚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对象，因为无论浏览器不兼容，这都是最糟糕的全局命名空间污染，因为它影响所有元素，增加了依赖于该方法的另一个库的机会（或者在重写内置原型本身时不小心可能会给你带来意想不到的结果。

Javascript库开发范围和命名空间

2 个答案: