学习在Javascript中使用名称空间和模块

因此，我在JSFIDLE中有一个例子需要一些帮助。我有一个html格式的表单，以及我想要填充的数据。我已经将这样做的逻辑封装在一个名称空间定义中，我认为它是正确的，但是JsHint认为它不是，是的，我的数据没有呈现在表单控件中。我希望能得到一些帮助来解决这个问题。绝对不能使用Jquery，因为我只使用Ext.js库。提前谢谢

[JSFiddle链接到我的示例][1]

 var data = {
        Tasks = [{
            "taskid": 1,
                "author": "Bill Maher",
                "description": "Purple Rain purple",
                "dateCreated": "12/23/2013",
                "dataModified": "2/23/2013",
                "dueDate": "2/30/2014",
                "status": "in progress"
        }, {
            "taskid": 2,
                "author": "Seth Green",
                "description": "I am not certain this is needed",
                "dateCreated": "3/24/2011",
                "dataModified": "",
                "dueDate": "5/3/2011",
                "status": "completed"
        }, {
            "taskid": 3,
                "author": "Arnold Schwatsheneggar",
                "description": "I would of course like to have data to test with",
                "dataModified": "",
                "dueDate": "",
                "status": "in progress"
        }, {
            "taskid": 4,
                "author": "Lilly blue",
                "description": "make the sun shine high again",
                "dateCreated": "4/12/2014",
                "dataModified": "",
                "dueDate": "5/10/2014",
                "status": "started"
        }, {
            "taskid": 5,
                "author": "Sam Raj",
                "description": " when will I see you again",
                "dateCreated": "",
                "dataModified": "",
                "dueDate": "",
                "status": "in progress"
        }, {
            "taskid": 6,
                "author": "Kate Kurtmann",
                "description": "Show me that you love me. See ya!",
                "dateCreated": "",
                "dataModified": "",
                "dueDate": "",
                "status": "in progress"
        }, {
            "taskid": 7,
                "author": "Kristen BenBazza",
                "description": "I am a real American",
                "dateCreated": "3/4/2013",
                "dataModified": "12/3/14",
                "dueDate": "5/23/2014",
                "status": "in progress"
        }, {
            "taskid": 8,
                "author": "Venkat Shack",
                "description": "You are the bravest of hearts, you are the strongest of souls",
                "dateCreated": "12/1/2001",
                "dataModified": "12/12/2003",
                "dueDate": "7/6/2003",
                "status": "started"
        }, {
            "taskid": 9,
                "author": "Sunny Chan",
                "description": "WHat the f is FADs anyway",
                "dateCreated": "12/1/2011",
                "dataModified": "3/12/2013",
                "dueDate": "10/10/2014",
                "status": "completed"
        }, {
            "taskid": 10,
                "author": "William Rolloff",
                "description": "Accounting for the costs improving care",
                "dateCreated": "2/12/2013",
                "dataModified": "12/01/2014",
                "dueDate": "10/15/2015",
                "status": "completed"
        }, {
            "taskid": 11,
                "author": "Aakash Khandari",
                "description": "Making a move to a better life and career",
                "dateCreated": "4/3/2000",
                "dataModified": "4/7/2005",
                "dueDate": "7/17/2014",
                "status": "in progress"
        }

        ]
    };

// more code goes here but has been deleted for brevity

   //revealing public API
    return {
        exporter.tracy: {//namespace definition 
            data = data,
            trainingTask: {//second namespace
                add = addTask,
                update = UpdateTask,
                load = loadDetail,
                clearDetail = clearForm,
                save = SubmitTask,
                remove = deleteRecord,
                expandGroup = groupexpand,
                collapseGroup = groupcollapse,
                toggleGroup = toggleGroup,
                fillMenu = fillMenu,
                setGroupStyle = setGroupStyle,
                isGrouped = isGrouped
            };
        };
    };
};
/*ending of the module*/
}(this)); //close tracy.trainingtask

---

var

声明一个变量，可以选择将其初始化为一个值。引述：

使用var声明的变量的作用域是其当前执行上下文，它可以是封闭函数，也可以是在任何函数之外声明的全局变量

在JSFIDLE中，您似乎希望能够访问函数中定义的变量，但这是不可能的

我本想用叉子叉你的小提琴，但它太大了。下面是一个使用“名称空间”的小例子，请记住其目的是不污染全局范围：

(function(export) {

  var some_private_variable;
  var some_other_private_variable;

  function loadDetail () {

  }

  var taskSet = [{
    //a task  
  }];


  export.Tracy = {
    trainingTask: {
      load: loadDetail,
      add: addTask
    },
    TaskSet: taskSet
  };

})(this);

由于执行此操作时，

this

是全局对象（窗口），因此，

export

是窗口对象。因此，您可以按如下方式使用：

 Tracy.trainingTask.load(..)

---

您正在闭包（自执行匿名函数）中声明和定义

TaskSetJson

，这对于模块化代码是正确的

但是你忘了揭发它

您可以使用RMP（显示模块模式），如下所示：

tracy = (function() {
  var foo = function(a,b,c) { ... };
  var var = function(e,f,g) { ... };
  var private_value = 1;
  var public_value = 2;
  // "Reveal" the public parts of your module
  return {
    foo: foo,
    var: var,
    public_value: public_value
  };
})();

使用此模式，变量和函数在闭包（匿名函数）中声明。所以，它们只能在闭包内使用。但您可以通过返回它们，使它们在闭包之外可用

如果要在保存var的位置扩展现有全局变量，而不是返回模块的显示部分，可以将其传递给自执行函数，并直接附加到它：

(function(tracy) {
  var foo = function(a,b,c) { ... };
  var var = function(e,f,g) { ... };
  var private_value = 1;
  var public_value = 2;
  // "Reveal" the public parts of your module
  tracy = {
    foo: foo,
    var: var,
    public_value: public_value
  };
})();

这两个示例略有不同，但在这两种情况下，您都可以调用

tracy.foo

，

tracy.var

，或者访问

tracy.public\u value

---

第一个示例更加灵活，因为您可以获得模块的多个独立实例，并将它们存储在不同的变量中。

我想我明白您的意思了。但我有几个问题。最后你为什么不关上第一个支架？我的意思是，我在return语句后面看到了一个开括号，然后是一个闭括号，但我没有看到语句中第一个括号的闭括号。我是背诵的。。。那是个打字错误。我已经改正了。这是一个问题。第二个？因此，我使用上面的方法构造了一个名称空间示例，并结合了下面示例中描述的方法。然而，我似乎在回电时遇到了问题。请看我上面的更新。注意代码。您需要以任何方式将模块分配给您的var（tracy）。那不是奇迹般的发生。请查看第二个示例，并将其与您的代码进行比较。关于“导出”主题，您是否不需要在某个地方声明导出以表明它是全局对象？或者这就是您最终将其传递给函数的原因吗？另外，我尝试了这种方法，但JsHint特别抱怨了导出部分；“需要一个标识符，但看到的是“export”，您知道这意味着什么吗？export是函数的参数…我用“this”调用函数。还修复了您在JsHint中发现的错误。