如何避免 Javascript 中的长命名空间答案

【问题标题】：how to avoid long namespaces in Javascript如何避免 Javascript 中的长命名空间
【发布时间】：2012-03-10 10:59:48
【问题描述】：

我们正在开始一个新项目，我们决定使用 javascript ""namespaces"" 来组织我们的客户端代码。问题是我们已经注意到，我们可以很容易地以难以记住的超长命名空间结束，例如

myProject.components.myComponent.doSomethig();

有没有更好的方法来做到这一点或以某种方式创建某种“别名”？

谢谢。

【问题讨论】：

标签： javascript namespaces

【解决方案1】：

在 JavaScript 中，您可以对长名称空间的东西进行快捷引用

 var myComp = myProject.components.myComponent;
 myComp.func1();

仅供参考。你可以用其他长名字来做，少写这样的

 var getEl = document.getElementById, 
     myEl = getEl('divId');

您也可以使用RequireJS 组织您的代码来组织您的代码

// 文件：myProject/components/myComponent.js

 define(function(){
       var myComponent ={};
       myComponent.func1 = function(){
           ...
       }
       return myComponent;
 });

// 文件：myProject/main.js

 require(['myProject/components/myComponent',  'myProject/components/myComponent2'], 
 function(comp1, comp2){
         var main = {};
         main.init = function() {
             ...
             comp1.func1();
         }
 });

// 文件：myProject/index.html

 <script src="libs/require.js" data-main="myProject/main"></script>

【讨论】：

【解决方案2】：

如果您在模块代码周围使用范围函数（如果不这样做，则应该这样做），那么您可以很容易地创建局部别名，作为给定模块内所有函数共享的变量。

例如，定义myComponent 组件的代码：

(function() {
    var comp = {};

    // Export our component
    myProject.components.myComponent = comp;

    // add things to `comp`; since `comp` and `myProject.components.myComponent`
    // refer to the same object, adding to `comp` is adding to the one object
    // they both refer to and so you can access those things via either reference
})();

类似地，如果您正在编写使用多个组件的应用代码：

(function() {
    var thisComp = myProject.components.thisComponent,
        thatComp = myProject.components.thatComponent;

    // Use `thisComp` and `thatComp`
})();

【讨论】：

这可能是最通用的解决方案，（只是评论为什么“应该”有意义）。范围函数可防止命名空间冲突，如果重新定义窗口对象，可能会在代码中导致灾难。

【解决方案3】：

您始终可以将子命名空间存储在局部变量中：

var myComponent = myProject.components.myComponent;

【讨论】：