Question

最近，我一直致力于一个项目，要求我对Symfony后端进行大量的AJAX调用。由于每个AJAX调用都是针对不同的URI，我最终得到的脚本真的很长，但是有很多.on（＆＃39; event＆＃39;，function（）{.. 。}）代码块，像这样：

$(document).ready(function(){
    $('.class').on('click', function(e){
        e.preventDefault();
        //AJAX call

这基本上是一遍又一遍地重复，但由于选择器的轻微变化和要接收的数据类型，我一遍又一遍地编写同一块代码。

我一直在考虑使用构建器模式（在JS中是否可能？）来修剪代码。我对javascript不是很擅长，所以任何帮助都会非常感激。

更新：

/**
 * AJAX prototype
 *
 * @param options
 * @constructor
 */

//set TestProtObj properties in the constructor
var AjaxProt = function (options) {
    this.ajaxCallType = options.ajaxCallType;
    this.targetEl = options.targetEl;
    this.event = options.event;
    this.method = options.method;
    this.htmlFactory = options.htmlFactory;
};

//add methods to the object prototype
AjaxProt.prototype = {

    init: function () {
        var targetEl = this.targetEl;
        targetEl.on(this.event, function(e) {
            e.preventDefault();
            this.ajaxCall();
        })
    },

    modalCallback: function(successData) {
        var modal = this.htmlFactory.createHtml({
            title: 'Bet: Detailed View',
            id: '#bet-detailed-model',
            htmlType: 'modal'
        });

        if (successData.success = true) {
            $('#content').prepend(modal);
            $('#bet-detailed-model').modal({show:
                true
            });
        } else {
            $('#content').prepend(modal);
            $('#bet-detailed-model').modal({
                show: true
            });
            $('.modal-body').append(alert);
        }
    },

    ajaxCall: function() {
        var url = this.targetEl.attr('href'),
            method = this.method,
            ajaxCallType = this.ajaxCallType;

        switch (ajaxCallType) {
            case 'modalGet':
                var callback = this.modalCallback();
                break;
        }

        $.ajax({
            url: url,
            type: method,
            success: function(data) {
                callback(data)
            }
        });
    }
};

//initialize client code
$(document).ready(function () {
    // initialize new AjaxPro
    var AjaxBetDetailed = new AjaxProt ({
        ajaxCallType: 'modalGet',
        targetEl: $('.ajax-ticket-view'),
        event: 'click',
        method: 'GET',
        htmlFactory: new HtmlFactory()
    });

    //initialize concrete object
    AjaxBetDetailed.init();
});

不幸的是，似乎我的事件处理程序没有绑定，因此e.preventDefault不起作用 - 它只是遵循链接。我真的不习惯以这种方式写课，所以任何帮助都会非常感激。

更新2：

我还在jsfiddle编写了一个概念证明类，试图复制我想要实现的行为。它也无法绑定事件处理程序 - 因此必须是问题。我似乎无法解决它。

JSFiddle：Click Me Please!

Answer 1

您可以在＆＃34;轻微变化＆＃34;中重复使用相同的功能。作为参数：

function registerClick(className, url, param) {
   $('.' + className).on('click', function(e) {
     // Ajax call using url and param, for instance
   });
}

然后使用它：

registerClick('class', '/api/foo', 'bar');
registerClick('toto', '/api/foo', 'buzz');

这不是特定于JS，而是任何编程/脚本语言：将所有可重用代码放入一个函数（如果你想要它面向对象，则放入一个对象，如果你想要它面向原型，则放一个原型，等等，但想法是一样的。）

整合jQuery侦听器

1 个答案: