如何在有或没有IIFE的情况下命名空间JavaScript代码? [英] How do I namespace JavaScript code with or without IIFEs?

问题描述

我一直在阅读命名空间，对象文字，IIFE等，并且试图了解以下哪项是命名空间JavaScript代码的正确方法?

I have been reading up on namespacing, Object literals, IIFEs, etc. and I'm trying to understand which of the following is the right way to namespace JavaScript code?

使用IIFE具有嵌套外部函数的命名空间

let myApp = myApp || {};

myApp.some_var = "someString";

myApp.some_func = (function(){ const some_const = 1;

let some_other_func = function(){
    console.log(some_const);
};

return {
    some_other_func: some_other_func
}

}());

myApp.another_func = (function(){ const another_const = 2;

let another_func = function(){
    myApp.some_func.some_other_func();
};

return {
    another_func: another_func
}

}());

具有不使用IIFE的嵌套外部函数的命名空间

let myApp = myApp || {};

myApp.some_var = "someString";

myApp.some_func = function(){ const some_const = 1;

let some_other_func = function(){
    console.log(some_const);
};

return {
    some_other_func: some_other_func
}

};

myApp.another_func = function(){ const another_const = 2;

let another_func = function(){
    myApp.some_func.some_other_func();
};

return {
    another_func: another_func
}

};

具有内部嵌套函数的命名空间

let myApp = (function() { let some_var = "someString";

let some_func = function(){
    const some_const = 1;

    let some_other_func = function(){
        console.log(some_const);
    };

    return {
        some_other_func: some_other_func
    }
};

let another_func = function(){
    const another_const = 2;

    let another_func = function(){
        some_func.some_other_func();
    };

    return {
        another_func: another_func
    }
};

return {
    some_var: some_var,
    some_func: some_func,
    another_func: another_func
}

}());

IIFE功能

let a_func = (function(){ let some_var = "someString"; }());

let some_func = (function(){ const some_const = 1;

let some_other_func = function(){
    console.log(some_const);
};

return {
    some_other_func: some_other_func
}

}(another_func, a_func));

let another_func = (function(){ const another_const = 2;

let another_func = function(){
    some_func.some_other_func();
};

return {
    another_func: another_func
}

}(a_func, some_func));

在我自己的特定示例中，该代码将在node.js中运行，并且应用程序"的代码少于500行，因此我计划将其全部存储在一个文件中.我对不建议使用AMD，CommonJS，Browserify，Webpack，ES6模块等的答案特别感兴趣.

In my own particular example the code will be running in node.js and the "application" will be less than 500 lines of code so I'm planning on having it all in one file. I'm particularly interested in answers that don't suggest using AMD, CommonJS, Browserify, Webpack, ES6 Modules, etc.

推荐答案

恕我直言，最好的方法是使用CommonJS标准，从您的代码中我可以看到您已经在使用EcmaScript6，所以最好的方法是使用 ES6模块.

IMHO the best way is to use CommonJS standard, from your code I can see that you are already using EcmaScript6, so the best way will be to use ES6 modules.

在我自己的项目中，我使用 browserify -它允许我使用nodejs/CommonJS模块:

In my own projects I use browserify - it allows me to use nodejs/CommonJS modules:

// module1.js
exports.foo = function(value) {
  return value + x;
};

exports.CONST = 1;

// module2.js
var m1 = require('module1');
m1.foo();

您提出的所有方法大致相同，就我个人而言，我喜欢 revealing-module-pattern ，并在无法使用CommonJS时尝试使用它.我还喜欢在模块的开头移动return语句，这有助于提高可读性:

All approaches presented by you, are roughly equivalent, personally I like revealing-module-pattern, and try to use it whenever I cannot use CommonJS. I also like to move return statement at the beginning of the module, it help readability:

var MyModule = (function() {
  'use strict';

  return {
    foo: foo
  };

  function foo() {
    return 1;
  } 
}());

另一个重要的问题是将整个模块代码包含在IFFE中，尤其是当您使用strict mode并连接js文件时.

Another important issue is to have entire module code enclosed in IFFE, especially when you use strict mode and you concatenate js files.

好的，这可能不是您的问题的答案，但也许可以帮助您看到更大的图片...

OK this may not be the answer for your question, but maybe it help you to see the bigger picture...

这篇关于如何在有或没有IIFE的情况下命名空间JavaScript代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！