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

Add javascript namespacing to a huge project

本文关键字：一个 巨大 项目 命名空间 javascript 添加      更新时间：2023-09-26

我有一个庞大的项目，大约有4000行JavaScript。这个项目从未打算在另一个项目站点中使用，它一直被计划为单侧应用程序。遗憾的是，客户改变了他的观点，现在它应该与同一个网站应用程序中包含的其他3个项目一起运行。

现在，我必须确保没有一个变量或方法可以从另一个加载的js代码中"每次意外"删除或触摸，例如，如果下一个项目加载如"var mPath=/NowNewPath/"，"var mPath=/MyPath"当然会被覆盖。

如何添加以确保不会发生这种情况？添加命名空间，对吗？有什么想法可以解决所有4000行代码的清理问题吗？

首先，将所有内容封装在立即调用函数表达式中，以将所有变量封装在一个独立的范围中。

(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"

如果对每个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之类的方法。所有方法都应该很快添加，但您需要找到模块依赖项，无论如何，使用名称空间方法都可以找到这些依赖项。

相关文章：