Jquery 自定义插件函数验证选项

Question

假设我定义了一个 JQuery 函数，如下所示：

jQuery.fn.extend({
  objectParallax: function(speed) {
    var $window = $(window);
    return this.each(function() {
      var elem = $(this);
      var defaultTop = parseInt(elem.css('top'));
      $window.on('scroll', function() {
        var scrolled = $window.scrollTop();
        elem.css('top', (defaultTop - (scrolled * speed)) + 'px');
      });
    })
  }
});

我希望参数speed是一个选项而不是参数（我的实际功能比这个复杂一点，它还有几个我也想成为选项的参数）。我怎样才能做到这一点？我如何验证 speed 是 -2 和 2 之间的数字，如果不是，则在控制台中抛出错误？

Answer 1

现在您想定义选项对象并传入一个对象而不是 speed 变量并使用用户定义的选项扩展默认值

基本情况如下：

jQuery.fn.extend({
  objectParallax: function(options) {

    // plugin defaults
    var defaults = {
      speed: '.5', // expect values between -2 & 2
      /* other properties and default values */   
    };

    // in case no user options object provided make sure we pass object to settings extend
    options = options ? options : {};

    // create settings by extending defaults with user defined opts
    var settings = $.extend({}, defaults, options);

    // ultra basic speed validation
    if (settings.speed < -2 || settings.speed > 2) {
      console.error('Speed not in limits');
      return;  // quit if not valid  
    }   

    var $window = $(window);
    return this.each(function() {
      var elem = $(this);
      var defaultTop = parseInt(elem.css('top'));
      $window.on('scroll', function() {
        var scrolled = $window.scrollTop();
        // use settings properties instead of `speed` argument
        elem.css('top', (defaultTop - (scrolled * settings.speed)) + 'px');
      });
    });
  });
});

现在不是传递字符串变量而是传递一个选项对象，该对象可以包含插件所需的任何或所有属性。如果您不包含 property/value，那么插件将使用默认的

var opts = {speed: 1.5 };
$('#floating-parallax-1, #floating-parallax-2').objectParallax(opts);

jQuery Learning Center/Plugins

中概述了大部分内容以及一些更高级的概念

Web 上还有许多其他资源关于 jQuery 插件模式以及样板站点和种子项目

Jquery 自定义插件函数验证选项

Jquery custom plugin function validate options

jquery

jquery-plugins