Javascript模块模式返回私有属性的初始值答案

【问题标题】：Javascript Module Pattern returning initial value of Private propertyJavascript模块模式返回私有属性的初始值
【发布时间】：2015-04-24 13:33:33
【问题描述】：

我正在尝试从模块中获取私有属性，但我总是得到它的初始值，而不是最新的。

当提交表单并调用 onSuccess 时，我设置了 partnerId = 10。

之后，我有一个点击事件，获取合作伙伴的Id，并得到-1

search.js

var SearchForm = (function ($) {
    "use strict";
    // Private variables
    // Private functions
    var onSuccess = function () {
        PartnerDetail.setPartnerId(10);
    };
    // Public functions
    return {
        onSuccess: onSuccess,
    };
})(jQuery);

detail.js

var PartnerDetail = (function ($) {
    "use strict";
    var _partnerId = -1;
    var getPartnerId = function () {
        return _partnerId;
    };
    var setPartnerId = function (id) {
        _partnerId = id;
    }
    // Public functions
    return {
        getPartnerId: getPartnerId,
        setPartnerId: setPartnerId
    };
})(jQuery);

search.internal.js

var SearchAll = (function ($) {
    "use strict";
    // Private variables
    // Private functions
    var init = function () {
        $("#partner").on("click", function () {
            var p = PartnerDetail.getPartnerId();
            console.log(p); ==> -1
        }
    };
    // Public functions
    return {
        init: init
    };
})(jQuery);

（主页）

// Load when ready
$(document).ready(function () {
    SearchAll.init();
});

【问题讨论】：

看来你必须使用闭包函数
无法重现；在小提琴中工作：jsfiddle.net/or315y60
@GiacomoPaita 嗨，这是什么意思？
Cannot reproduce
缓存值，像这样：javascriptissexy.com/understand-javascript-closures-with-ease 或者，更好的是，这里：lucybain.com/blog/2014/closures 但是，您的代码似乎已经使用了它，并且可以正常工作。

标签： jquery javascript

【解决方案1】：

您的代码似乎没问题：

我在jsFiddle 中输入了以下代码，它记录了 10：

HTML：

<button id="partner">CLICK!</button>

JS：

var PartnerDetail = (function () {
    var _partnerId = -1;
    var getPartnerId = function () {
        return _partnerId;
    };

    var load = function (id) {
        _partnerId = id;
    }

    // Public functions
    return {
        getPartnerId: getPartnerId,
        load: load
    };
})();

// File search.js

var SearchForm = (function ($) {

    "use strict";

    // Private variables

    // Private functions

    var onSuccess = function () {

        PartnerDetail.load(10);
    };

    // Public functions
    return {

        onSuccess: onSuccess,
    };

})(jQuery);


var SearchAll = (function ($) {

    "use strict";

    // Private variables

    // Private functions
    var init = function () {

        $("#partner").on("click", function () {

            var p = PartnerDetail.getPartnerId();

            console.log(p);
        });

    };

    // Public functions
    return {

        init: init
    };

})(jQuery);

// Load when ready
$(document).ready(function () {

    SearchAll.init();
    SearchForm.onSuccess();
});

【讨论】：

您好，您可以尝试从另一个 Pattern Module 中的另一个 js 文件访问它吗？
@Patrick 恐怕您必须分享更多细节：您可以在原始请求中添加其他模块的代码吗？
@Patrick 我已经更新了我的 jsfiddle。它仍然记录 10（我已经修复了几个错字，你可能想检查一下。特别是，你的代码中的 setPartnerId 是未定义的，你永远不会调用 onSuccess）
你试过不同的文件吗？ onSuccess 在提交后被表单调用

【解决方案2】：

@Patrick - 你的代码很好，除了两个小错误。您需要注释掉==> -1，并关闭下一行的括号。此外，您还没有包含有关表单的代码，以及它的行为（即调用onSuccess）。另外，您还没有指定您使用的浏览器。

即

    console.log(p); ==> -1
}

应该是

    console.log(p); // ==> -1
});

解决办法：

Here's an example of it working in jsbin

您提到onSuccess 在提交表单时被调用，但您没有在示例中包含此代码。所以我冒昧地将它添加到我的示例中。
在提交表单之前记录-1，之后记录10
在 Opera 25 中测试
使用单独的 js 文件（根据要求）

下面是一个代码 sn-p，也演示了行为（注意加载有点慢）。

// Load when ready
$(document).ready(function () {
    SearchAll.init();
});

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://rawgit.com/nickgrealy/bc1f5452cff303348fe7/raw/53c9248298268cea69a49e24895cdc59f9b7da82/detail.js"></script>
<script src="https://rawgit.com/nickgrealy/bc1f5452cff303348fe7/raw/b2cd08800fcec69195e85efd508015c699a4926d/search.internal.js"></script>
<script src="https://rawgit.com/nickgrealy/bc1f5452cff303348fe7/raw/dfb8296180dc3f3302f4a9175c6961b8089fb947/search.js"></script>

<form target="#" onsubmit="SearchForm.onSuccess();return false;">
    <input type="Submit" value="1. Form Submit" />
</form>
<input id="partner" type="button" value="2. Log partnerId"></button>

作为参考，这里是js file's source code in gist。

【讨论】：

嗨，谢谢。我必须做错事，但我找不到它是什么......似乎每次我调用“PartnerDetail.getPartnerId”时，它都会使用模块，如果它是在他的初始值中 -1
@Patrick，尝试将代码提炼到最低限度以重现问题，然后与我们分享（所有代码）（尝试创建 jsbin.com 或 jsfiddle.net ！） .另外，告诉我们一切。例如你使用的是什么浏览器？你在什么系统上运行？您是在使用网络服务器，还是只是在本地使用文件？如果我们没有所有可用信息并且无法重现问题，我们就很难诊断问题！ :)

【解决方案3】：

在我看来，这与您的事件的执行时间有关。当您提交表单时，您的 onSucess 函数会被调用，不是吗？但是您的 onClick 函数会立即执行。因此，您的变量在onClick 事件中始终具有初始属性-1，因为onSucess 在onClick 的时刻尚未被调用这里有一张小表来详细说明我对你的事件的看法：

onclick, value = -1
onclick, value = -1          value=10
onclick, value = -1          value=10
value=10

【讨论】：

【解决方案4】：

在获得PartnerDetail.getPartnerId(); 之前，请设置它的值。

PartnerDetail.setPartnerId(10);
var p = PartnerDetail.getPartnerId();
console.log(p) // 10

演示：http://jsfiddle.net/zLexLvza/1/

【讨论】：

【解决方案5】：

从外观上看。您已将函数保存在不同的文件中。每个文件都将保持自己的私有状态。您需要将代码段合并到一个文件中，或者实现一种加载模式，以授予对其他文件私有状态的访问权限。

See details about the module pattern to share private state between files

【讨论】：