javascript - 在需要时创建 JavaScript 函数

Question

我正在尝试确定某些 JavaScript 对性能的影响。在我们的应用程序中，一个表单包含许多小部件。并非所有小部件都会在每个页面上使用，或者一个小部件可能会使用多次。我一直在考虑类似于以下的模型(请注意，实际脚本要复杂得多，我已将其简化为简短的):

var widget = {
    type1: function(args) {
        function getName() {
            return this._name;
        }
        return (widget.type1 = function(args) {
            return {
                _name: args.name,
                getName: getName
            };
        })(args);
    }
}

我的想法是，第一次调用 widget.type1 函数时，它将初始化 widget.type1 所需的所有代码。任何后续的 widget.type1 都将使用这些函数。我知道我可以做这样的事情:

var widget = {
    type1: function(args) {
        return {
            _name: args.name,
            getName: function getName() {
                return this._name;
            }
        };
    }
}

但是每个 type1 对象都会有它自己的函数副本，该函数执行相同的操作，我认为这会使用更多内存(我已经在浏览器调试工具中测试了 o1.getName != o2.getName)。

我可以从服务器写出当前页面上的小部件类型的脚本，但是这样我就无法从缓存单个 js 文件中受益，而且我不想将每个小部件放入其自己的 js 文件，因为这样就必须单独下载它们。

这会导致问题吗？这会/应该按照我的想法执行吗？还有其他想法吗？

编辑

我想我应该解释一下我的推理。我的想法(可能是错误的)是，第一次使用小部件时，它将初始化小部件使用的逻辑。例如，如果我从不创建 type1 小部件，则无需向 type1 小部件的原型(prototype)添加一堆函数。我编写的代码高度简化。该小部件可能使用了 500 多行代码，而且我实际上并没有使用 getName 函数，这只是一个示例。如果不使用该小部件，则根本不需要该逻辑。它还将仅由该小部件使用的函数保留在全局范围之外。

我目前正在使用对象并向该对象的原型(prototype)添加函数(例如 MyType.prototype.whatever = function(){ ... })，但我突然想到如果我从不创建 MyType 的对象，为什么还要初始化 MyType 的原型(prototype)呢？

另一种实现我想法的方法，这次使用对象原型(prototype)(同样，可能有 300 个函数添加到 type1 的原型(prototype)中。我要问的想法是，不这样做是否有意义？如果从未创建 type1，则将它们添加到 type1 的原型(prototype)中):

var widget = {
    _type1Init: function()
    {
        widget.type1.prototype.getName = function() {
            return this._name;
        }
        widget._type1Init = function(){}    //So calling again won't do anything.
    },
    type1: function(args) {
        widget._type1Init();
        this._name = args.name;
    }
}
if(*someCondition*)
    var obj = new widget.type1({ name: "hello world" });    // If an object is created, it gets initilized, otherwise it won't.

Answer 1

也许你应该考虑:

function type1(argObj){
  // use arguments Array for all arguments - you have Object notation
  this._name = argObj.name;
  // not sure why you need this function
  this.getName = function(){
    return this._name;
  }
}
function widget(){
  this.type1 = type1;
}