jquery -随时从对象外部调用原型函数

utugiqy6  于 2022-11-03  发布在  jQuery
关注(0)|答案(4)|浏览(174)

我不知道如何称呼我的问题,所以我希望你们能帮助我,即使问题的名称不好。
我有一个从github下载的morhpext库。整个代码看起来像这样:

/*!
 * Morphext - Text Rotating Plugin for jQuery
 * https://github.com/MrSaints/Morphext
 *
 * Built on jQuery Boilerplate
 * http://jqueryboilerplate.com/
 *
 * Copyright 2014 Ian Lai and other contributors
 * Released under the MIT license
 * http://ian.mit-license.org/
 */

/*eslint-env browser */
/*global jQuery:false */
/*eslint-disable no-underscore-dangle */

(function ($) {
    "use strict";

    var pluginName = "Morphext",
        defaults = {
            animation: "bounceIn",
            separator: ",",
            speed: 2000,
            complete: $.noop
        };

    function Plugin (element, options) {
        this.element = $(element);

        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._init();
    }

    Plugin.prototype = {
        _init: function () {
            var $that = this;
            this.phrases = [];

            this.element.addClass("morphext");

            $.each(this.element.text().split(this.settings.separator), function (key, value) {
                $that.phrases.push($.trim(value));
            });

            this.index = -1;
            this.animate();
            this.start();
        },
        animate: function () {
            this.index = ++this.index % this.phrases.length;
            this.element[0].innerHTML = "<span class=\"animated " + this.settings.animation + "\">" + this.phrases[this.index] + "</span>";

            if ($.isFunction(this.settings.complete)) {
                this.settings.complete.call(this);
            }
        },
        start: function () {
            var $that = this;
            this._interval = setInterval(function () {
                $that.animate();
            }, this.settings.speed);
        },
        stop: function () {
            this._interval = clearInterval(this._interval);
        },
        kalreg: function () {
            console.log("call invoked!");
        }
    };

    $.fn[pluginName] = function (options) {
        return this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
        });
    };
})(jQuery);

它有自己的“函数”- animate、start和stop。不幸的是,这些函数只能从原型内部或回调函数中调用。最后一个函数在每次动画完成时调用(使用setInterval/setTimeout)。我不想等到动画完成后再从回调函数中调用任何东西-我想在任何时候从原型外部停止它。因此,如果我使:

$(".title").Morphext({
        animation: [ "bounceIn"],
        speed: (1000,
        complete: function () {
            if (this.index === this.phrases.length - 1) {
                this.stop();
            };
    }

我也会随时启动原型中的一些东西。我创建了一个函数“kalreg”(上面提到的第一个)。我的意思是这样的:

$(".title").kalreg()

$(".title").Morphext().kalreg()

$(".title").Morphext(kalreg())

换句话说就是:我想调用kalreg函数,它是Morphext原型的一部分,可以在任何时候在任何DOM元素上调用,也可以在代码的任何部分调用。怎么做?

pxq42qpu

pxq42qpu1#

您可以像下面这样构建插件:

(function($){
  var App = function(){};//constructor

    App.prototype.callables = {//Return closure
      hello: function(){
            alert('Hello');
        },
      hi: function(){
          alert('hi');
        }
    }

    $.fn.app = function(){
        return new App().callables;//basically send back an instance of your plugin class with the closure
    }
})(jQuery)

var x = $('#test').app();
x.hello();//call individual functions
x.hi();
h5qlskok

h5qlskok2#

你提到的插件在功能上看起来很有限。你说的是在执行过程中停止动画,它需要一些重新创作才能正常工作。
你会更好地服务于一个更强大的动画包,这听起来像。我强烈推荐Greensock / TweenMax库。

cwtwac6a

cwtwac6a3#

我是这个项目的作者,从 'outside' 调用这些方法是非常简单的(尽管我真的应该更好地记录它)。
实际上,当最初添加stop()start()时,添加它们的目的是允许您从外部停止/启动它(除了回调之外)。
除非我误解了您的问题,否则您可以通过执行类似以下操作来实现您想要实现的目标:

var morphext = $("#js-rotating").Morphext({
   animation: "rotateIn"
});
var data = morphext.data("plugin_Morphext");

// Start Morphext (autostarts by default)
data.start();

// Stop Morphext
data.stop();

上述内容记录在release notes中。
默认的功能是有意限制的,但是它们很容易扩展。
希望能帮上忙。如果不行就告诉我。

p8ekf7hl

p8ekf7hl4#

随时更改属性的简单方法是从css事件中输入方法,然后访问$self.settings.method_name$self.settings.default_value之类的值。
例如:在某些方法上或在init上:

var $self = this;
//method_name
$self.animate();
$self.start();

//default_value
$self.settings.speed = 100;

这里我做了一个例子。我改变并添加了方法morphext.js,这样你就可以看到我可以像往常一样从内部改变插件的一些默认值。如果你想与其他dom元素而不是xml数据交互,你可以添加 AJAX 方法并响应传入的更改数据。是的,ajax post方法将从远程在线检查中响应。这里是www.example.com的地址链接infinityfree.net:https://viena.lovestoblog.com/Morphext/05/index.html
它仍然有限制的影响,因为我不知道如何安装主机共享。是的,无论如何感谢任何尊重和关注。

相关问题