如何将JavaScript文件组织成更小的片段？

问题描述：

我目前有一个大的外部JavaScript文件，在页面上使用。我目前将代码包装在一个自调用函数中，因为我有其他部分使用ajax选项卡加载，所以我想避免与其他外部js文件命名冲突。如何将JavaScript文件组织成更小的片段？

该文件中的代码组织如下。我想将plannerTab命名空间中的一些代码拆分为更小的文件，但它仍然是该命名空间的一部分。

我该怎么做？或者，你们是否推荐了一种不同的方法？谢谢！

// Document Ready 
$(function() 
{ 
    // initializes table 
    plannerTab.plannerTable.init(); 
}); 


var plannerTab = (function() 
{ 
    // All the code for the page is in here. I would like to extract sections 
    // from in here and put them into their own external files while still keeping 
    // the namespacing 
}();

更新

我怎么会从plannerTab变量中独立的部分到更小的外部JS文件，并仍然认为他们是plannerTab命名空间的一部分吗？下面是一个小例子。

// Scope: plannerTab.config - Would like to store configuartion into a separate file 
    var config = { 

     selectors: { 
      tableId: '#plannerTable', 
      addTaskId: '#AddTask', 
      editTaskSelector: '#plannerTable .edit', 
      dateFilterSelector: '#plannerTable_TimeFilter li', 
      deleteTaskClass: '.delete', 
      searchFilter: '#plannerTable_filter', 
      selectedDateFilter: 'selected-dateFilter', 
      taskCellSelector: '#plannerTable .task-col', 
      taskClass: '.taskId' 
     }, 

     urls: { 
      addTaskFormURL: '/Planner/Planner/LoadAddTaskForm', 
      editTaskFormURL: '/Planner/Planner/LoadEditTaskForm', 
      deleteTaskURL: '/Planner/Planner/DeleteTask', 
      getTasksByDateRangeURL: '/Planner/Planner/GetTasksByDateRange', 
      viewTaskURL: '/Planner/Planner/ViewTask' 
     } 
    };

这是为了简化开发还是部署？我建议你保留一个文件，以减少HTTP请求。 – 2011-02-15 00:16:10

答

看看这个例子（从谷歌）

<script type="text/javascript"> 
function importScript(url){ 
    var tag = document.createElement("script"); 
    tag.type="text/javascript"; 
    tag.src = url; 
    document.body.appendChild(tag); 
} 
window.onload = function(){ 
    // imports go here 
    importScript("foo.js"); // example 
}; 
</script>

答

我假定plannerTab成为自我执行功能的一个目的返回结果。如果您需要动态添加属性或方法到该对象，您可以看看jQuery.extend（）http://api.jquery.com/jQuery.extend/

您需要修改外部JS以使用jQuery扩展方法添加到现有属性和方法plannerTab。只要您将plannerTab保留为全局变量，您将在导入更多外部js文件时继续添加它。

如果您使用模块模式来维护plannerTab中的私有变量，请务必在使用jQuery.extend（）后测试这些值的行为方式。

是的，plannerTab是一个包含许多其他对象的对象，例如这样的页面事件，配置等......将这个变量添加到Jquery对象或向对象本身添加更多属性会更好吗（这是可能的吗？） – chobo 2011-02-14 22:49:36

如何将JavaScript文件组织成更小的片段？

相关推荐