js - 避免命名空间冲突

Question

到目前为止，我只参与过相对较小的项目（而且大多是独自一人），但这次我必须与其他程序员合作...主要是因为我必须非常仔细地规划网站的结构避免花费数小时调试代码。

此时我想按以下方式进行。我将我的代码分成模块，并将每个模块存储在一个对象（或函数）内的单独文件中，该文件具有一个虚构的名称（lzheA、lzheB、lzheC 等），以避免是否使用具有相同名称的对象发生冲突另一段代码。加载文档时，我声明一个变量（一个对象）用作应用程序的主命名空间。对象的属性是我之前定义的模块。

// file BI.lib.js
var lzheA = {
    foo: function() {

    },
    bar: function() {

    },
}

// file BI.init.js
function lzheK() {
    BI.loadPage();
}

// file BI.loadPage.js
function lzheC() {
    var result = document.getElementById('result');
    result.innerHTML = "that worked";
}

// and so on
var lzheA,lzheB,lzheD,lzheE,lzheF,lzheG,lzheH,lzheI,lzheJ;

// doing the following when the document is loaded
var BI = {
    lib: lzheA,
    menu: lzheB,
    loadPage: lzheC,
    customScripts: lzheD,
    _index: lzheE,
    _briefs: lzheF,
    _shop: lzheG,
    _cases: lzheH,
    _blog: lzheI,
    _contacts: lzheJ,
    init: lzheK,
}

BI.init();

https://jsfiddle.net/vwc2og57/2/

问题是……这种构建方式是否值得一试，还是我因为缺乏经验而错过了什么？模块的虚构名称是否会使您感到困惑，而不管每个模块只使用两次 - 同时声明变量并将其分配给属性？

Answer 1

当您想在 Javascript 中模块化应用程序时，我认为命名空间是一个不错的选择。但是我用不同的方式声明它们

var myModule = myModule || {}; // This will allow to use the module in other places, declaring more than one specificComponent in other js file for example
myModule.specificComponent = (function(){

   // Private things
   var myVar = {};

   var init = function() {
       // Code
   };

   return {
       init: init // Public Stuff
   };

})();

如果要调用init方法，可以这样调用

myModule.specificComponent.init();

通过这种方法，我保证模块不会被另一个地方的另一个声明覆盖，而且我可以将内部组件声明到我的命名空间中。此外，仅在 return 块中公开您想要的内容的技巧将使您的组件更安全，并且您将以一种漂亮的方式封装您的代码。

希望对您有所帮助

js - 避免命名空间冲突

js - avoiding namespace conflict

javascript

namespaces

modularization