How do I namespace JavaScript code with or without IIFEs?

问题

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?

Namespace with nested external functions using 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
}

}());

Namespace with nested external functions not using 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
}

};

Namespace with internal nested functions

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 functions

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));

Edit: 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.

回答1:

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.

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();

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;
  } 
}());

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...

来源：https://stackoverflow.com/questions/34954879/how-do-i-namespace-javascript-code-with-or-without-iifes

标签

javascript

namespaces

javascript-namespaces