javascript - Javascript库开发范围和 namespace

我们目前在大学的一门课程中学习一些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)

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

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

还是我的lib设计完全错误，必须完全不同。
如果是这样，请告诉我，谢谢您的帮助。
（我试图弄清楚jQuery是如何实现这些事情的，但是并没有真正的线索来知道它是如何完成的……代码太多……：））

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

最佳答案

如您所知，在currentElement的调用之间共享getElement。相反，您可以使用Object.create创建myLib对象的新实例，并将currentElement绑定到该实例。

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

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

关于javascript - Javascript库开发范围和 namespace ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5602229/