非常简单的事件驱动 jQuery 插件设计模式

Posted 2023-05-09

【中文标题】非常简单的事件驱动 jQuery 插件设计模式

【英文标题】：Very simple event driven jQuery plugin design pattern

【发布时间】：2018-09-01 00:16:59

【问题描述】：

有时我有多个元素需要 click 回调函数和一些通用功能，并已实现如下：

function deleteRecord(elem, url, type) 
    if (confirm("Are you sure you wish to delete this "+type+"?")) 
        $.ajax(
            type:'DELETE',
            url: url,
            dataType: 'json',
            success: function (rsp)
                $(elem).closest('tr').remove();
            ,
            error: function (xhr) 
                alert('Error: '+xhr.responseJSON.message);
            
        );
    


$("#manual-list img.delete").click(function()  deleteRecord(this, '/1.0/manuals/'+$(this).closest('tr').data('id'),'manual'));

我一直在尝试创建一个非常简单的插件，而不是使用函数。 我已经成功地创建了https://learn.jquery.com/plugins/advanced-plugin-concepts/ 所描述的灵活的 jQuery 插件，但是，我认为对这些类型的应用程序这样做是矫枉过正的，并且希望使用一个死插件设计模式。我最近的尝试如下，但是，我没有成功地将url 参数传递给它，该参数是由应用插件的元素派生的。

一个非常简单简洁的 jQuery 事件驱动插件有哪些可用选项？

(function( $ )
    $.fn.deleteRecord = function(url, type) 
        console.log('init', url, type, this, url.call(this, url, type));
        this.click(function()
            //Confirm that this.each(function()...) is not required
            console.log('onClick', url, type, this, url.call(this, url, type))
            if (confirm("Are you sure you wish to delete this "+type+"?")) 
                console.log('onConfirm', url, type, this, url.call(this, url, type))
                var e=this;
                $.ajax(
                    type:'DELETE',
                    url: url.call(this, url, type),
                    dataType: 'json',
                    success: function (rsp)
                        $(e).closest('tr').remove();
                    ,
                    error: function (xhr) 
                        alert('Error: '+xhr.responseJSON.message);
                    
                );
            
        )
        return this;
    ;
)( jQuery );


$("#manual-list img.delete").deleteRecord(function()'/1.0/manuals/'+$(this).closest('tr').data('id'),'manual');

【参考方案1】：

你忘记了返回语句：

function()'/1.0/manuals/'+$(this).closest('tr').data('id')

改成：

function()return '/1.0/manuals/'+$(this).closest('tr').data('id');

(function ($) 
    $.fn.deleteRecord = function (url, type) 
        console.log('init', url, type, url.call(this, url, type));
        console.log('----')
        this.click(function () 
            //Confirm that this.each(function()...) is not required
            console.log('onClick', url, type, this, url.call(this, url, type))
            if (confirm("Are you sure you wish to delete this " + type + "?")) 
                console.log('onConfirm', url, type, this, url.call(this, url, type))
                var e = this;
                $.ajax(
                    type: 'DELETE',
                    url: url.call(this, url, type),
                    dataType: 'json',
                    success: function (rsp) 
                        $(e).closest('tr').remove();
                    ,
                    error: function (xhr) 
                        alert('Error: ' + xhr.responseJSON.message);
                    
                );
            
        )
        return this;
    ;
)(jQuery);


            $("#manual-list img.delete").deleteRecord(function()return '/1.0/manuals/'+$(this).closest('tr').data('id');,'manual');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table id="manual-list">
    <tr data-id="1">
        <td>
            <img class="delete" src="https://dummyimage.com/200x200/000/fff&text=1">
        </td>
    </tr>
</table>

【讨论】：

乌格！有时，一个人会因为看同一件事太久而失明。除此之外，我的方法看起来还好吗？有更好的方法吗？谢谢！

@user1032531 是的，看起来没问题。