一个javascript对象的多个实例，但不覆盖配置选项_Javascript_Jquery_Html_Object_Multiple Instances

一个javascript对象的多个实例，但不覆盖配置选项

javascript jquery html object

一个javascript对象的多个实例，但不覆盖配置选项,javascript,jquery,html,object,multiple-instances,Javascript,Jquery,Html,Object,Multiple Instances,我用滚动文本的函数构建了这个对象，但是当我尝试将一个实例添加到另一个元素时，新实例的配置选项会覆盖以前的实例下面是一个在顶部动画完成文本速度并覆盖所有其他配置选项后的示例 HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Notes</title> <script src="jquery-

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

下面是一个在顶部动画完成文本速度并覆盖所有其他配置选项后的示例

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>

我需要使用自定义配置将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的对象用作创建新对象的原型。如果参数的某个属性是对象或函数，则该属性将用作对原始属性的引用

阅读有关Object.create的更多信息。create.create将不起作用，因为子对象（又称嵌套对象）仍然是对原始对象子对象的引用，修复了一个好的原型版本应该可以正常工作

修复程序使用$.extend并传入一个名为config的新对象，而不是使用this.config，这将覆盖以前的设置：

inif: function (config) {
    config = $.extend({}, this.config, config); //new object pulls defaults from this.config and overwrites it from params

    return this.setupHtml(config)//setup html
            .setupCss(config)//css 
            .animate(config, config.container)//animating. Note: always pass in that object so it don't use defaults;
}

这是小提琴：

另外，您还可以将原型配置重命名为默认值，然后在初始化时创建一个名为config an的新属性，然后可以使用此.config，fiddle:

虽然我更喜欢使用params，但那只是我说我疯了说我笨。

你说的“Object.create仍将是对原始对象的引用”到底是什么意思？我显然没有正确表达自己，我说的是嵌套对象，例如：var a={address:{name:'shiya'}；var b=对象。创建（a）；b、 address.name='不是十雅'；console.log（a.address.name）；Will console'Not Shiya'$.extend解决了这个问题，顺便说一句，这个问题不是重复的，因为用户只是要求一个比Object.create更好的解决方案，这就是他得到的，这对我来说是新闻“默认情况下，$.extend（）执行的合并不是递归的；如果第一个对象的属性本身是对象或数组，它将被第二个或后续对象中具有相同键的属性完全覆盖。这些值不会合并。”（您指的是jQuery，对吗？），糟糕的是，我没有阅读文档，只是假设默认情况下是这样的，因为我总是传入一个空对象（一种常见的插件开发模式）作为第一个参数，我想这就是为什么人们应该在争论之前阅读内容的原因。我不认为有理由删除这个问题。

inif: function (config) {
    config = $.extend({}, this.config, config); //new object pulls defaults from this.config and overwrites it from params

    return this.setupHtml(config)//setup html
            .setupCss(config)//css 
            .animate(config, config.container)//animating. Note: always pass in that object so it don't use defaults;
}