将javascript名称空间添加到大型项目中

将javascript名称空间添加到大型项目中,javascript,Javascript,我有一个巨大的项目,大约4000行JavaScript。 这个项目从来没有打算在另一个projectsite中使用,它一直是作为单一应用程序计划的。 不幸的是,客户改变了他的观点,现在它应该与同一个singlesiteapp中包含的其他3个项目一起运行 现在,我必须确保没有一个变量或方法可以从另一个加载的js代码中“每一次意外”删除或触及,例如,如果下一个项目加载像“var mPath=/NowNewPath/”,那么“var mPath=/MyPath”当然可以被覆盖 如何添加以确保不会发生这

我有一个巨大的项目,大约4000行JavaScript。 这个项目从来没有打算在另一个projectsite中使用,它一直是作为单一应用程序计划的。 不幸的是,客户改变了他的观点,现在它应该与同一个singlesiteapp中包含的其他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"

首先,将所有内容包装在一个单独的范围内,将所有变量封装在一个单独的范围内

(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之类的东西。所有方法都应该可以快速添加,但您需要找到模块依赖项,这在使用名称空间方法时无论如何都是如此。

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

您已经回答了自己的问题,请使用名称空间。。。是的,重构4000行代码是一项非常艰巨的任务。虽然不是不可能。你所获得的可能值得你付出努力。我建议您使用Addy Osmani的Javascript名称空间。您已经回答了自己的问题,请使用名称空间。。。是的,重构4000行代码是一项非常艰巨的任务。虽然不是不可能。你所获得的可能值得你付出努力。我建议您使用Addy Osmani提供的Javascript名称空间。我不希望引用
窗口
。为什么不在函数中返回一些内容并将其存储在变量
myLib
?我不希望引用
窗口
。为什么不在函数中返回一些内容并将其存储在变量
myLib