将代码转换为可重用对象

Convert code to reusable object

本文关键字：对象 代码 转换      更新时间：2023-09-26

我有一些代码，其中一部分如下所示，我多次调用这些代码来修改页面上的元素：

if ($('.el').length == 0)
{
    $('<div class="el active">Good job!</div>').hide().appendTo('body').fadeIn();
}
else
{
    $('.el').fadeOut(function()
    {
        $('.el').html('Good job!').addClass('active').fadeIn();
    });
}

由于我多次调用同一段代码（每次调用不同的消息和不同的类），我想使它能够简单地执行以下操作：

$('.el').messager({
    message: 'Good job!',
    class: 'active'
});

我如何将我所拥有的转化为我所需要的？

查找如何扩展jquery。像这样的东西应该可以做到这一点（我还没有测试代码）：

$.fn.extend({
  messager:function(options){
    var self = this;
    self.fadeOut(function(){
      self.html(options.message).addClass(options.class).fadeIn();
    });
  }
});

在页面中加载jQuery后调用上述方法一次。然后您可以调用您的方法，如下所示：

$('.el').messager({
  message: 'Good job!',
  class: 'active'
});
相关文章：