javascript - javascript 对象的多个实例，无需覆盖配置选项-6ren

javascript - javascript 对象的多个实例，无需覆盖配置选项

转载作者：行者123 更新时间：2023-12-02 17:01:46

25

4

我使用滚动文本的函数构建了这个对象，但是当我尝试将实例添加到另一个元素时，以前的实例会被新实例的配置选项覆盖。

这是 jsfiddle 上的示例顶部动画完成后，文本速度和所有其他配置选项都将被覆盖。

HTML 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Notes</title>
    <script src="jquery-2.1.js"></script>
</head>
<body style="margin: 0 auto;">
    <div class="scroll">
        <div class="scrollContainer">
            <div class="scrollText"></div>
        </div>
    </div>
    <div>
        <div>
            <div id="me"></div>
        </div>
    </div>
    <div>
        <div>
            <div id="try">I'll overwrite everything!</div>
        </div>
    </div>
    <script src="scroll.js"></script>
</body>
</html>

JavaScript/jQuery 代码:

$(document).ready(function () {
    $(function () {
        var scroll = [];
        scroll = {
            config: {
                text: 'hello everybody',
                speed: 15000,
                container: $('.scrollText'),
                width: 250,
                parent: $('.scrollContainer'),
                parentContainer: $('.scroll'),
                textWidth: 0,
                totalWidth: 0
            },
            init: function (config) {
                $.extend(this.config, config);
                var self = this,
                    selfC = self.config,
                    selfE = selfC.container;
                console.log(selfE);
                selfE.html(scroll.config.text.trim());
                selfE.css({
                    display: 'inline-block'
                })
                selfC.textWidth = scroll.config.container.width();
                //console.log(scroll.config.textWidth);
                selfE.css({
                    width: selfC.textWidth + 10,
                        'margin-right': scroll.config.width,
                        'margin-left': scroll.config.width
                })
                selfC.totalWidth = selfE.outerWidth(true);
                selfC.parentContainer.css({
                    width: scroll.config.width,
                    overflow: 'hidden',
                    margin: '0 auto'
                })
                scroll.animate(selfE);
            },
            animate: function (elem) {
                var self = this,
                    selfC = self.config,
                    selfE = selfC.container;
                selfE.animate({
                    'margin-left': '-=' + (selfC.totalWidth - selfC.width)
                }, selfC.speed, function () {
                    selfE.css({
                        'margin-left': scroll.config.width
                    })
                    selfE.scrollText(selfC); //.speed -= 1000
                });
            }
        };
        $.fn.scrollText = function (config) {
            return this.each(function () {
                var obj = Object.create(scroll);
                obj.init({
                    text: config.text,
                    speed: config.speed,
                    width: config.width,
                    container: $(this),
                    parent: config.parent || $(this).parent(),
                    parentContainer: config.parentContainer || $(this).parent().parent()
                }, this)
            });
        }
        $('#me, .scrollText').scrollText({
            text: 'Help us update the names on our site by going to "Account" and selecting one of the options',
            width: 250,
            speed: 15000
        });
        $('div').last().scrollText({
            text: 'another acroll',
            speed: 5000,
            width: 50
        })
    }())
})

我需要将scrollText应用到具有自定义配置的尽可能多的元素而不覆盖。

注意当使用多个元素作为选择器调用 .scrollText 时，它的工作方式与上面的代码相同，但所有元素/实例的配置选项都相同

最佳答案

尝试将滚动对象重新定义为类

var Scroll = function () {
    this.config = {
        // initial config remain the same
    }
};

Scroll.prototype.init = function (config) {
    // init implementation remain the same
};

Scroll.prototype.animate = function (elem) {
    // animate implementation remain the same
};

现在，通过此更改，您可以在scrollText 函数上实例化一个新的 Scroll 实例，如下所示:

$.fn.scrollText = function (config) {
    return this.each(function () {
        var obj = new Scroll(); // here is the change
        obj.init({
            text: config.text,
            speed: config.speed,
            width: config.width,
            container: $(this),
            parent: config.parent || $(this).parent(),
            parentContainer: config.parentContainer || $(this).parent().parent()
        }, this)
    });
}

作为参数传递给 Object.create 的对象用作原型(prototype)来创建新对象。如果参数的某个属性是对象或函数，则该属性将用作对原始属性的引用。

了解有关 Object.create 的更多信息 here

关于javascript - javascript 对象的多个实例，无需覆盖配置选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25631395/

25

4

0

无需 video_player 插件即可轻松播放本地视频
我正在制作简单播放本地视频的应用程序。一开始我用https://pub.dev/packages/video_player , video_player: ^0.10.2+1 但是由于某种原因，它在
java - 将所需变量传递给所有代码的最佳设计模式，无需
基本上，我有一个 boolean 值，大型 API 项目中大约 20% 的类都使用它。从实用方法到更大的类，一切都使用它。我可以在程序启动时设置状态(不会改变)，但不知道访问它的“最佳”方式。最初，
python - 无需 for 循环即可高效创建数据框
我正在处理一些广告数据，例如电子邮件数据。我有两个数据集: 邮件级别，针对每个人，说明他们的邮寄日期，以及他们的转换日期。 import pandas as pd df_emailed=pd.Data
excel - 无需 VBA 即可动态创建公式
例如，我在 A 列中输入了数据，在 B 列中输入了一些复杂的公式作为 A 中数据的函数。A 中的数据行数取决于用户输入。它可以在 2 到 100,000 之间。传统上，我将使用相同的公式填充 B 列的
networking - 无需 NTP 的小尺寸时钟同步
我正在寻找一种简单的时钟同步协议(protocol)，该协议(protocol)易于实现且占用空间小，并且在没有互联网连接的情况下也可以工作，因此可以用于例如在封闭的实验室网络中。需要明确的是，我不是
cocoa - 无需 CoreData 即可管理逆向关系
这是 Objective-J/Cappuccino 的问题，但我添加了 cocoa 标签，因为框架非常相似。 Cappuccino 的缺点之一是 CoreData 尚未移植，因此您必须手动创建所有模型
javascript - 无需 kycode 即可识别特殊键字符
例如，如果您按退格键，控制台会显示 keyVal 的空字符串，但这会产生误导，因为 keyVal.length 等于 1 还有一个隐藏字符 element.on('keydown',function(
wordpress - 无需 FTP 上传主题
我已经下载了一个主题，我想安装它。现在我位于“外观”>“主题”>“添加”>“新建/上传主题”。WordPress 需要 FTP 访问。好吧，我在本地计算机上，没有 FTP 服务器正在监听端口 21。
javascript - 根据需要动态创建对象，无需 if 检查
所以我认为我疯了，也许我疯了，但这看起来很简单。假设我有这段代码: let a = {}; a.b.c.d.e.f.g = 'Something Awesome'; 现在您可以想象如果检查噩梦就必须进
azure - 无需 Azure 门户即可获得应用程序见解
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎不是关于 a specific programming problem, a software
javascript - 无需 jQuery 即可切换复选框选中属性
这个问题已经有答案了: How set item checkbox when i click on element span which have this checkbox? (3 个回答) 已关闭
Javascript 数组过滤器上的多个条件，无需 for 循环
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
angularjs - 无需 jQuery 即可访问自定义指令的子元素
我已经为下拉菜单编写了一个自定义指令。这些元素绝对定位在相对定位的父元素内，因此我需要获取下拉触发元素的高度，以便将实际菜单移动到其下方。触发器是指令元素的子元素。我想避免使用成熟的 jQuery，而
javascript - 无需 Ajax 即可捕获表单提交事件
我需要向端点提交表单，但由于我无法控制 CORS header ，因此无法使用 AJAX 执行此操作。我目前正在通过渲染隐藏的 iframe 并将提交作为目标来执行此操作。但我仍然无法捕获该事件(我
json - 流式传输到数组转换器，无需 slurp
我的 JSON 输入: { "Key": "Team", "Value": "AA" } { "Key": "Division", "Value": "BB" } 期望的输出: [
javascript - 无需 jQuery 即可拖动
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
Javascript:无需 ID 即可获取值
Pair: BUX/TIX Spread: 113 Rate: 10.159/10.272 High/Low: 115 我想获取值 113 和值 115，但
session - 无需 cookie 即可维持状态
我正在尝试了解 IPB 论坛的运作方式。如果我勾选记住我，那么即使我关闭浏览器并重新打开它，我也会保持登录状态。我正在尝试弄清楚这是如何实现的，因为服务器设置的唯一 cookie 在 sessio
macos - YouCompleteMe 无需 MacVim
我一直在阅读有关 VIM 的 youcompleteme 插件的内容。然而，问题是我想要一个可以转移到其他开发平台(OpenIndiana、FreeBSD、Linux 和 OS X)上的设置。使用
excel - 无需 VBA 查找最后一个非空单元格地址
我需要找到 Excel 电子表格中的最后一个非空单元格，但我需要它的地址，而不是它的值。例如:当我想要 K 列中最后一个非空单元格的值时，我使用以下公式: =LOOKUP(2;1/(NOT(ISBL

首页

博学

6Ren·AI

商城

javascript - javascript 对象的多个实例，无需覆盖配置选项