首页 \ 问答 \ Javascript模块模式使用Prototype创建多个实例(Javascript Module Pattern create multiple instances using Prototype)

Javascript模块模式使用Prototype创建多个实例(Javascript Module Pattern create multiple instances using Prototype)

我想要完成的任务:使用javascript中的原型创建模块,以便用户可以使用不同的选项多次实例化模块。

问题 :使用var my_module3 = new module(); 然后尝试使用my_module3.init({ option: "value" });设置选项my_module3.init({ option: "value" }); 每次都不会更改对象,它只会更改一次。

测试:当使用console.log我们可以看到它打印出具有相同选项的两个对象,即使它们设置不同

Object {first: "Barry", second: "Larry", third: "Sam"} 
Object {first: "Barry", second: "Larry", third: "Sam"} 

这是我的jsFiddle完整代码: http //jsfiddle.net/11bLouc8/2/

        var module = (function () {
        // default options
        var options = {
            first: "test",
            second: "test2",
            third: "test3"
        };
        // take in useroptions and replace default options
        var module = function(userOptions) {
            if (userOptions != null && userOptions != undefined
                && userOptions != 'undefined') {
                for (var opt in options) {
                    if (userOptions.hasOwnProperty(opt)) {
                        options[ opt ] = userOptions[ opt ];
                    }
                }
            }
        };

        //prototype
        module.prototype = {
            init: module,
            options: options
        };

        return module;

    })();

    // create a new instance
    var my_module3 = new module();
    my_module3.init({
        first: "Mike",
        second: "Lisa",
        third: "Mary"
    });

    // another instance
    var my_module2 = new module();
    my_module2.init({
        first: "Barry",
        second: "Larry",
        third: "Sam"
    });

What I want to accomplish: Create modules using prototyping in javascript so that a user can instantiate a module multiple times each with different options.

The Problem: when using var my_module3 = new module(); and then trying to set the options with my_module3.init({ option: "value" }); does not change the object each time, it only changes it once.

Testing: When using console.log we can see that it prints out the two objects with the same options even though they are set differently

Object {first: "Barry", second: "Larry", third: "Sam"} 
Object {first: "Barry", second: "Larry", third: "Sam"} 

Here is my jsFiddle full code: http://jsfiddle.net/11bLouc8/2/

        var module = (function () {
        // default options
        var options = {
            first: "test",
            second: "test2",
            third: "test3"
        };
        // take in useroptions and replace default options
        var module = function(userOptions) {
            if (userOptions != null && userOptions != undefined
                && userOptions != 'undefined') {
                for (var opt in options) {
                    if (userOptions.hasOwnProperty(opt)) {
                        options[ opt ] = userOptions[ opt ];
                    }
                }
            }
        };

        //prototype
        module.prototype = {
            init: module,
            options: options
        };

        return module;

    })();

    // create a new instance
    var my_module3 = new module();
    my_module3.init({
        first: "Mike",
        second: "Lisa",
        third: "Mary"
    });

    // another instance
    var my_module2 = new module();
    my_module2.init({
        first: "Barry",
        second: "Larry",
        third: "Sam"
    });

原文:https://stackoverflow.com/questions/26427639
更新时间:2023-08-07 12:08

最满意答案

你需要添加 ul元素的scrolltop,而不是减去它:

var offset = $(this).offset().top + $(this).parent().scrollTop();

片段:

$('li').click(function() {
  var offset = $(this).offset().top + $(this).parent().scrollTop();

  $('ul').animate({
    scrollTop: offset
  }, 500);
});
ul {
  width: 200px;
  height: 300px;
  overflow: scroll;
}

li {
  margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Sample 1</li>
  <li>Sample 2</li>
  <li>Sample 3</li>
  <li>Sample 4</li>
  <li>Sample 5</li>
  <li>Sample 6</li>
  <li>Sample 7</li>
  <li>Sample 8</li>
  <li>Sample 9</li>
  <li>Sample 10</li>
  <li>Sample 1</li>
  <li>Sample 2</li>
  <li>Sample 3</li>
  <li>Sample 4</li>
  <li>Sample 5</li>
  <li>Sample 6</li>
  <li>Sample 7</li>
  <li>Sample 8</li>
  <li>Sample 9</li>
  <li>Sample 10</li>
</ul>


You need to add the ul element's scrolltop, not subtract it:

var offset = $(this).offset().top + $(this).parent().scrollTop();

Snippet:

$('li').click(function() {
  var offset = $(this).offset().top + $(this).parent().scrollTop();

  $('ul').animate({
    scrollTop: offset
  }, 500);
});
ul {
  width: 200px;
  height: 300px;
  overflow: scroll;
}

li {
  margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Sample 1</li>
  <li>Sample 2</li>
  <li>Sample 3</li>
  <li>Sample 4</li>
  <li>Sample 5</li>
  <li>Sample 6</li>
  <li>Sample 7</li>
  <li>Sample 8</li>
  <li>Sample 9</li>
  <li>Sample 10</li>
  <li>Sample 1</li>
  <li>Sample 2</li>
  <li>Sample 3</li>
  <li>Sample 4</li>
  <li>Sample 5</li>
  <li>Sample 6</li>
  <li>Sample 7</li>
  <li>Sample 8</li>
  <li>Sample 9</li>
  <li>Sample 10</li>
</ul>

相关问答

更多

相关文章

更多

最新问答

更多
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • TensorFlow:基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误:RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • NumPy:将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全?(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet?(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用:悬停在悬停时:在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)
  • 是否可以嵌套hazelcast IMaps?(Is it possible to nest hazelcast IMaps? And whick side effects can I expect? Is it a good Idea anyway?)
  • UIViewAnimationOptionRepeat在两个动画之间暂停(UIViewAnimationOptionRepeat pausing in between two animations)
  • 在x-kendo-template中使用Razor查询(Using Razor query within x-kendo-template)
  • 在BeautifulSoup中替换文本而不转义(Replace text without escaping in BeautifulSoup)
  • 如何在存根或模拟不存在的方法时配置Rspec以引发错误?(How can I configure Rspec to raise error when stubbing or mocking non-existing methods?)
  • asp用javascript(asp with javascript)
  • “%()s”在sql查询中的含义是什么?(What does “%()s” means in sql query?)
  • 如何为其编辑的内容提供自定义UITableViewCell上下文?(How to give a custom UITableViewCell context of what it is editing?)
  • c ++十进制到二进制,然后使用操作,然后回到十进制(c++ Decimal to binary, then use operation, then back to decimal)
  • 以编程方式创建视频?(Create videos programmatically?)
  • 无法在BeautifulSoup中正确解析数据(Unable to parse data correctly in BeautifulSoup)
  • webform和mvc的区别 知乎
  • 如何使用wadl2java生成REST服务模板,其中POST / PUT方法具有参数?(How do you generate REST service template with wadl2java where POST/PUT methods have parameters?)
  • 我无法理解我的travis构建有什么问题(I am having trouble understanding what is wrong with my travis build)
  • iOS9 Scope Bar出现在Search Bar后面或旁边(iOS9 Scope Bar appears either behind or beside Search Bar)
  • 为什么开机慢上面还显示;Inetrnet,Explorer
  • 有关调用远程WCF服务的超时问题(Timeout Question about Invoking a Remote WCF Service)