Question

我已经成为一名网络开发人员已有近15年的历史，主要是后端PHP的东西，并且涉及这些年来的前端。

最近几年，我发现自己越来越多地使用JavaScript构建，所以我努力学习更好。

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

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

所以在任务模式代码中有很多事情发生。

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

阅读清晰易懂，易于理解。我今晚看到了一个示例设计模式，就像我下面的代码一样，它们称之为Facade。我从没想过这是一个门面但可能是它？

我还有很多需要学习的东西。

我的问题是关于下面的模型代码，它超过1,000行，我删除了90％的这个演示和帖子，因为我的问题很简单....

在我的代码中的其他功能中，我可以访问cached选择器或变量，如下所示：projectTaskModal.cache.NAME

我的问题是，由于cache部分不是一个函数，当我的代码运行时，我试图缓存的DOM Elements是否被调用/缓存？

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

如果没有，你会如何建议我选择大规模缓存选择器？

对不起，这个问题可能不太好，我已经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();
});

Answer 1

考虑将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()返回的对象，否则与之前相同。

基本JavaScript项目任务模式结构

1 个答案: