Question

我有一个庞大的项目，大约有4000行JavaScript。该项目从未打算在另一个项目现场使用，它总是被计划为单一应用程序。可悲的是，客户改变了他的意见，现在它应该与其他3个项目一起运行在同一个singlesiteapp中。

现在我必须确保不会删除或触及单个变量或方法＆＃34;每次事故＆＃34;来自另一个加载的js代码，例如＆＃34; var mPath = / MyPath＆＃34;如果下一个项目加载像＆＃34; var mPath = / NowNewPath /＆＃34;。

当然可以被覆盖

如何添加确保不会发生？添加命名空间吧？任何想法如何解决所有4000行代码的干净？

Answer 1

首先，将所有内容包装在Immediately-Invoked-Function-Expression中，将所有变量括在隔离的范围内。

(function() {
    /* all 4000 lines of code */
})();

其次，确保没有偶然的全局变量 - 使用var关键字声明局部变量。

(function() {
    /* if you see this within the 4000 lines of code */
    somePath = "abc";
    /* change to this */
    var somePath = "abc";
})();

最后，只公开一个（或尽可能少的）全局变量作为库的入口点。

/* "myLib" should be your globally-unique namespace */
myLib = (function() {
    /* the 4000 lines of code */

    return {
        /* attach functions and variables */
        somePath: somePath;
    };
})();

alert(somePath); // undefined
alert(myLib.somePath); // "abc"

Answer 2

如果对每个JS文件或JS文件中的逻辑块使用立即调用的函数表达式，则不需要命名空间。所以你会得到：

// a.js
(function () {
  var mPath = "/MyPath";
})();

// b.js
(function () {
  var mPath = "/NowNewPath";
})();

两者都有自己的范围，无法访问其他范围的变量。如果一个模块需要调用另一个模块的代码，则为每个模块导出一个已定义的接口。即。

// a.js with a global variable
(function () {
  var exports = {};
  var mPath = "/MyPath";
  exports.getPath = function () {
    return mPath;
  }
  window.moduleA = exports;
})();

// b.js
(function () {
  var mPath = moduleA.getPath() || "/NowNewPath";
})();

或返回导出：

var moduleA = (function () {
  var exports = {};
  // ....
  return exports;
})();

或使用require.js之类的东西。所有方法都应该快速添加，但是您需要找到模块依赖关系，无论如何都要使用命名空间方法。

将javascript命名空间添加到一个巨大的项目中

2 个答案: