如何将javascript文件组织成更小的部分？

Question

我目前有一个在页面上使用的大型外部 javascript 文件。我目前将代码包装在一个自调用函数中，因为我还有其他部分使用 ajax 选项卡加载，所以我想避免与其他外部 js 文件的命名冲突。

文件中的代码组织如下。我想将 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'
        }
    };

Answer 1

看这个例子（来自谷歌）

<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>

Answer 2

我假设 plannerTab 成为自执行函数的对象返回结果。如果你需要动态地给那个对象添加属性或方法，你可以看看 jQuery.extend() http://api.jquery.com/jQuery.extend/

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

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