Question

我正在为我的网站添加一个照片库，我已经完成了所有工作，但我很好奇一些JS中发生了什么

(function($){

  $.fn.extend({

    simpleGal: function (options) {

      var defaults = {
        mainImage: ".placeholder"
      };

      options = $.extend(defaults, options);

      return this.each(function () {

        var thumbnail = $(this).find("a"),
            mainImage = $(this).siblings().find(options.mainImage);

        thumbnail.on("click", function (e) {
          e.preventDefault();
          var galleryImage = $(this).attr("href");
          mainImage.attr("src", galleryImage);
        });

      });

    }

  });

})(jQuery);

$ .fn.extend发生了什么？和默认值？我得到var thumbnail之后的所有内容，但我对上半年发生的事情感到有些困惑。

Answer 1

$ .fn.extend将两个对象合并为第一个

see refrence

这里将使用模块用户提供的自定义选项扩展defualt选项

Answer 2

来自文档的$.fn.extend函数：

扩展了jQuery原型（$ .fn）对象，以提供可以链接到jQuery（）函数的新方法。

因此它允许您向jQuery对象添加功能。这里添加了函数simpleGal。

defaults指定传递给函数的参数的默认值。然后使用extend()合并默认值 - 任何默认值都将被传入的值覆盖。这对于具有许多可能参数并替换代码的复杂函数非常有用，例如：

param1 = (typeof param1 !== 'undefined') ? param1 : 'default-val';

jQuery扩展功能发生了什么？

2 个答案: