Question

我一直在阅读有关命名空间，对象文字，IIFE等的内容，我正在尝试了解以下哪种方法可以命名JavaScript代码？

使用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中运行，“application”将少于500行代码，因此我计划将其全部放在一个文件中。我对那些不建议使用AMD，CommonJS，Browserify，Webpack，ES6模块等的答案特别感兴趣。

Answer 1

恕我直言最好的方法是使用CommonJS标准，从你的代码我可以看到你已经在使用EcmaScript6，所以最好的方法是使用ES6 modules。

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

// 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语句，它有助于提高可读性：

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

  return {
    foo: foo
  };

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

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

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

如何在有或没有IIFE的情况下命名JavaScript代码？

1 个答案: