从模块模式开始

Starting with module pattern

本文关键字：开始 模式 模块      更新时间：2023-09-26

我试图从一开始就在JS代码中使用模块模式，但我在理解如何执行这种代码设计方面遇到了问题。

这是一个简单的事件：

$('#docTable').on('dblclick', 'tbody tr.line', function (event) {
    $('#modal1').modal({ keyboard: false, backdrop: "static", dismiss: "modal" });
    $('#modal1').modal('show');

})；

我已经创建了几个JS文件。View.js:

var task = window.task || {};
task.View = (function () {
function View(rootElement) {
    var dom = {
        table: $('#docTable'),
        },
        callbacks = {
            onsubmit: undefined
        };
    return {
    };
}
return View;
}());

和Controller.js:

$(document).on('ready', function () {
var View = task.View(document);    
});

但我不知道如何继续并赶上dblclick事件。

有人能帮我吗？

提前谢谢。

您可以创建"class"视图并将事件绑定添加到其原型中。之后，您可以在多个表上使用它。如果您想访问表中的元素，您可以向它们添加类，并在defineDOM方法中找到它们：

View.js

var task = window.task || {};
task.View = function (table) {
    this.$table = $(table);
    this.init();
};
task.View.prototype ={
    init: function () {
        this.defineDOM();
        this.bindEvents();
    },
    defineDOM: function() {
        // Search for DOM elements in context of table element
        this.$button = $('.docButton', this.$table);
        this.$links = $('.docLinks', this.$table);
    },
    bindEvents: function () {
        this.$table.on('dblclick', 'tbody tr.line', this.onDblClick.bind(this))
    },
    onDblClick: function () {
        $('#modal1').modal({ keyboard: false, backdrop: "static", dismiss: "modal" });
        $('#modal1').modal('show');
    }
}

用法

$(document).on('ready', function () {
    new task.View('#docTable');
});
相关文章：