基本JavaScript项目任务模式结构

我已经做了将近15年的web开发人员，主要是后端PHP的东西，这些年来我涉足了前端

最近几年，我发现自己越来越多地使用JavaScript进行构建，因此我努力学习更好的语言

我现在正在构建一个项目管理应用程序，下面的代码是一个部分的一部分，该部分将在弹出的模式窗口中打开单击任务记录

任务模式允许编辑就地任务字段、AJAX加载的注释/事件面板、自定义滚动条div、日期选择器日历、自定义警报等

因此，任务模式代码中有很多内容

编写JavaScript应用程序的方法有上百万种。对于我最近的大多数应用程序，我似乎更喜欢下面这种风格

它清晰易读，易于理解和理解。今晚我看到了一个示例设计模式，它与下面的代码类似，我们将其称为

Facade

。我从没想过这是个门面，但也许是

我还有很多东西要学

我的问题是关于下面的模拟代码，它超过1000行，我删除了90%的演示和张贴它，因为我的问题很简单

在代码中的其他函数中，我可以访问一个

缓存的

选择器或类似以下的变量：

projecttaskmodel.cache.NAME

我的问题是，由于

cache

部分不是一个函数，当我的代码运行时，我试图缓存的

DOM元素是否被称为/cached

在我的应用程序的其他部分中，我调用了一些函数，然后在其中执行代码，但是这个缓存部分没有函数调用。所以我不确定是否在页面加载时，是否会设置这些值

如果没有，您建议我如何使用海量缓存选择器

抱歉，这个问题可能不太好，我已经醒了48小时~

var projectTaskModal = {


    // Turn ON/OFF Console and Alert Debug Messages
    projectDebugConsole: true, //true;
    projectDebugAlert: false, //true;


    // Cache some values for use across the Application
    cache: {
        taskId: $('#Task-id'),
        projectId: $('#Task-project-id'),

        isTaskModalOpen: false,
        isAjaxRequestPending: false,

        updateTaskUrlEndpoint: '/updatetask',
        getTaskEventsUrlEndpoint: '/gettaskevents',
        createTaskCommentUrlEndpoint: '/createtaskcomment',
        getTaskStatusOptionsEndpoint: '/getTaskStatusOptions',

        taskStatusArray: [null, 'Not Started', 'In Progress', 'Completed'],
        taskStatusColorArray: [null, '#488ABC', '#8DC23C', '#D46060'],
        taskStatusCssClassArray: [null, 'not-started', 'in-progress', 'completed'],

        taskEventsContainer: $('#Task-events-inner-wrap'),
        //var loadingDiv: $('#task-row-1414135033730'),
        loadingDivSpinner: $('#Task-events-wrap'),
        loadingDivSpinnerImg: $('#task-events-loader-img'),
        loadingDivBackground: $('.Activity'),
        taskStatus: 'Completed',

    },


    init: function() {
        projectTaskModal.events.init();
        projectTaskModal.events.editInPlaceFieldSaveEvents();
        projectTaskModal.mockAjax.init();
        projectTaskModal.debug.log('ProjectTaskModal Init() Function Ran');
    },

};



// Run Task Modal Application
$(function() {
    projectTaskModal.init();
});

考虑将
projectTaskModal
声明作为函数：

var projectTaskModal = function() { 
    return {
        // Turn ON/OFF Console and Alert Debug Messages
        projectDebugConsole: true, //true;
        projectDebugAlert: false, //true;

        // Cache some values for use across the Application
        cache: {
            taskId: $('#Task-id'),
            projectId: $('#Task-project-id'),
            // snip for brevity
        },


        init: function() {
            projectTaskModal.events.init();
            projectTaskModal.events.editInPlaceFieldSaveEvents();
            projectTaskModal.mockAjax.init();
            projectTaskModal.debug.log('ProjectTaskModal Init() Function Ran');
        },

    };
};

随后：

$(function() { 
    projectTaskModal = projectTaskModal();
    projectTaskModal.init();
}); 

这确保选择器缓存将指向依赖于DOM准备就绪的元素。这一行：

projectTaskModal = projectTaskModal();

将函数替换为由
projectTaskModal（）
返回的对象，否则与前面相同
 由于缓存属性不在函数中，因此即使在调用init之前，它们也会被执行/初始化。我假设由于页面加载不会发生，cache.taskId、cache.projectId等将为空。您应该在init方法中设置缓存的这些特定于dom的属性，以便知道它们设置正确。@gp。谢谢，现在说得通了！我现在正在做一些重大的重组工作，这对我很有帮助！我将添加一个
loadTaskModalData（）
函数，以便在其中填充它们。现在它从任务列表中加载任务数据，因为所有数据都在DOM中，但我要让它更灵活，能够使用AJAX加载任务数据，并使用当前的DOM方法，以便任务模式可以在DOM中没有任务列表的页面上运行！有趣的是，谢谢这看起来不错，因为我似乎仍然可以保持我的整个应用程序在相同的格式/结构，我习惯了，它是简单的包装与功能，尼斯！