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');
      });
    });
  });
});

现在，不要在传递中传递字符串变量，而是可以包含插件所需的任何或所有属性的选项对象。如果您不包含属性/值，则插件将使用默认值

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

jQuery Learning Center/Plugins

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

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

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

1 个答案: