javascript - 如何将 javascript 文件组织成更小的 block ？

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>