在同一模塊中將剔除代碼與jQuery混合？

Question

我正在為jQuery / javascript代碼使用模塊模式，並為Knockout.js進行自我執行的功能。 （與官方的kickout.js教程相同）。

這可能是一個非常主觀的問題 ，但是我想知道您對此有何看法，以及淘汰賽人員通常如何在其Web應用程序中處理此問題。

找到有關此主題的信息並不容易。

您是否會將敲除.js邏輯以及jQuery事件和函數混合在同一模塊中？ 還是將其分為不同的文件和模塊？

此外，有時某些事件在淘汰賽中不容易綁定：

• 滾動/鼠標滾輪事件
• 引導事件$('#demo').on('shown.bs.modal', whatever);
• 插件事件： $('#demo').bind('typeahead:select', whatever);
• 以適當的方式檢索對象$(this)不容易

例如，假設我有這個模塊來處理客戶訂單：

function order(){
    var self = this;

    for(var key in data) {
        if(!self.hasOwnProperty(key)) {
            self[key] = data[key];
        }
    }
}
function ordersViewModel(){
    var self = this;
    self.orders = ko.observableArray([]);

    //get the orders for the given date range
    self.getOrders = function(from, to){
        $.get(myUrl + 'orders/getOrders/', function(data){
            self.orders(data.map(function(ordersData) {
                return new order(ordersData);
            }));
        });
    };
}

var MasterModel = function(){
    this.orders = new ordersViewModel()
};

var mm = new MasterModel();

ko.applyBindings(mm);

然后，我有一個Orders模塊來處理屏幕上orders元素上的所有jQuery事件和動作，該模塊與kickout.js模塊分開：

function orders() {
    var self = this;
    self.tableWrapper = $('#orders-table-wrapper');

    self.init = function () {
        self.bindEvents();
        self.initTypeahead();
    };

    self.bindEvents = function () {
        //when actions menu is hidden
        self.tableWrapper.on('hide.bs.dropdown', '.dropdown', self.unSelectActions);

        $(document).on("contextmenu", "#orders-table-wrapper table > tbody > tr", self.showContextMenu);

        $('#ordersSearch').change(self.search).keyup(function () {            
            //forcing input change
            $(this).change();
        });

        $('#equipment-id-input').bind('typeahead:select', function (ev, suggestion) {
            $('#equipment-id-input').trigger('change');
        });
    };

    //when actions menu is hidden
    self.unSelectActions = function () {
        $(this).find('.moreActions').removeClass('active');
    };

    //context menu for orders table
    self.showContextMenu = function(event){
        //whatever
    }

    //table filtering
    self.search = function(){
        //whatever
    }
}

var myModels = function(){
    this.orders = new orders().init();
};

var myMasterModel = new myModels();

Answer 1

淘汰的基本原則是：不要在綁定處理程序之外與DOM混淆。 鼠標滾輪事件綁定得很好， 請參見此處 。 自舉，也有綁定這里 。 插件可以輕松包裝在自定義綁定處理程序中（ 示例 ）。

我強烈建議您熟悉自定義綁定處理程序 。 將Knockout用於基本內容，將jQuery用於其他所有內容，並不會比僅對所有內容使用jQuery（這會造成混亂）更好。