如何将值从静态函数发送到另一个对象？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将值从静态函数发送到另一个对象？相关的知识，希望对你有一定的参考价值。
(function ($, window, undefined) {
'use strict';
class Slider {
static init(loop) {
Slider.loop = loop;
return Slider.loop;
}
};
$.fn.blueSlider = function(loop, options) {
var defaults = {
}
var loop = Slider.init(loop);
console.log(loop);
$.extend(defaults, options);
};
}(jQuery))
$('div').blueSlider(true);<div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>我是使用class function创建代码的新手，所以请原谅我在问题中没有提到的任何其他错误。
我正在尝试将class function和jQuery插件结合起来。这一行：$.fn.blueSlider = function(loop, options)，jQuery初始化函数有2个参数，loop参数实际上是Slider.init()的参数。所以我必须声明一个新的变量，如var loop = Slider.init(loop);，用于访问loop值。
我的期望是将loop参数放在options中，以便当我想像这样更改loop的值时，可以通过jQuery初始化方法调用它：
$(className).blueSlider({
loop: false,
// etc.
})
我试图创建一个对象options并将其放入loop参数，以将值传递给另一个对象，但它不起作用：
$.fn.blueSlider = function(options) {
var defaults = {
}
var options = {
loop: Slider.init(loop),
}
$.extend(defaults, options);
};
有什么方法可以解决这个问题吗？
答案
如果你打算使用class语法，你不想提供自定义的init函数;相反，提供一个构造函数并使用new。
同样重要的是要记住jQuery是基于集合的，这意味着当你被调用时，this是一个包含一组元素的jQuery对象。在大多数情况下，插件适当的做法就是将它们分别调用每个元素。例如：
(function ($, window, undefined) {
'use strict';
// Moved defaults out of the function, added
// more for the example
const defaults = {
someOption: "foo",
someOtherOption: "bar",
color: "green"
};
// The class
class Slider {
constructor(loop = true, options) {
// Handle initialization in the constructor
this.options = defaults;
this.setOptions(loop, options);
}
setOptions(loop, options) {
this.loop = loop;
this.options = Object.assign({}, this.options, options);
// In ES2017+, you could use:
// this.options = {...defaults, ...this.options};
}
// Use a method to handle applying the slider to an element
apply($el) {
// ...do slider's thing on $el...
$el.css("color", this.options.color);
$el.text("loop = " + this.loop);
}
}
$.fn.blueSlider = function(loop, options) {
// Loop through the elements
this.each(function() {
// Create or reuse an instance for each element
const $el = $(this);
let slider = $el.data("blueSlider");
if (slider) {
// Element already has a slider
slider.setOptions(loop, options);
} else {
// Create slider for element, remember it
slider = new Slider(loop, options);
$el.data("blueSlider", slider);
}
slider.apply($el);
});
};
}(jQuery))
$('div.a').blueSlider(true, {color: "blue"});
$('div.b').blueSlider(false);
setTimeout(() => {
$('div.a:first').blueSlider(false);
}, 800);<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="b"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>以上是关于如何将值从静态函数发送到另一个对象？的主要内容，如果未能解决你的问题，请参考以下文章