2

假设我有一个 javascript 库（.js 文件），它可以在页面上的 div 元素上绘制 SVG 图。该库应用业务逻辑并为单击元素等创建事件处理程序。伪代码可能如下所示：

myLib = {};
myLib.dummy = null;
mylib.doStuff = function(divID) {
  //divID is the ID of the element on which SVG graph will be drawn
  //does graph drawing and sets up myLib.dummy for feedback or such, e.g.:
  myLib.dummy = $("#divID").width();
}

我的问题是：如何处理我想将此脚本应用于同一页面上的 2 个（或更多）元素的情况，然后将 myLib 的单独“实例”与每个元素相关联。我知道我不能从页面上这样称呼它：

myLib.doStuff('topDiv');   //myLib.dummy will be say 400;
myLib.doStuff('bottomDiv');   //myLib.dummy will be say 600;

使用上面的代码，我将无法再访问与 ID = 'topDiv' 的 div 相关的 myLib.dummy，因为它们使用相同的命名空间。

我怀疑我错过了一种设计模式，或者答案可能只是命名空间的一个例子。

我将不胜感激任何建议或帮助。

4

1 回答 1

2 
function makeALib() {
    var myLib = {};
    myLib.dummy = null;
    mylib.doStuff = function(divID) {
      //divID is the ID of the element on which SVG graph will be drawn
      //does graph drawing and sets up myLib.dummy for feedback or such, e.g.:
      myLib.dummy = $("#divID").width();
    }
    return myLib;
}

var libA = makeALib();
var libB = makeALib();

libA.doStuff('topDiv'); 
libB.doStuff('bottomDiv');

您可以在许多不同的领域引入分离或间接。在不了解您的使用上下文的情况下，很难说什么是好的选择。但以上是众多工作选择之一。

于 2012-10-18T02:15:19.857 回答