从模块模式开始

Question

我试图从一开始就在我的JS代码中开始使用moddule模式，但是我无法理解如何执行这种代码设计。

这是一个简单的事件：

$('#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事件。

有人可以帮帮我吗？

提前致谢。

Answer 1

您可以创建＆＃39; class＆＃39;查看并添加事件绑定到其原型。之后，您可以在多个表上使用它。如果您想要访问表中的元素，可以向它们添加类，并在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');
});