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（）后测试这些值的行为。

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

2 个答案: