Question

我有一个简化的对象，Forenames和Surname为＆＃34;属性＆＃34;并在对象中添加了两个原型函数。

var FromPageBase = function () {
    this.Forenames = null;
    this.Surname = null;
};

FromPageBase.prototype.BindTheCotrols = function () {

    // bind the controls here
    $("#textForenames").change(this.GeneralEventHandler);
    $("#textSurname").change(this.GeneralEventHandler);
    $("#buttonFromForm").click(this.GeneralEventHandler);
};


FromPageBase.prototype.GeneralEventHandler = function (evt) {

var el = evt.currentTarget
var type = evt.type;
var id = el.id
var val = el.value

console.log(id, type, val)

this.Forenames = $("#textForenames")[0].value;
this.Surname = $("#textSurname")[0].value

if (id == "buttonFromForm" && this.Forenames != null && this.Surname != null)
{
    $(":mobile-pagecontainer").pagecontainer("change", "pageTo.html", { role: "page"});
} 

}

位于名为fromPageController.js的javascript文件中。

我在下面有基本的html。

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="fromPageController.js"></script>
    <script>
        function loadIt() {
            FromPagController = new FromPageBase;
            FromPagController.BindTheCotrols();
        }
    </script>
</head>
<body onload="loadIt()">
    <div data-role="page" id="pageFrom">
        <div data-role="header">
            <h1>From Page</h1>
        </div>
        <div role="main" class="ui-content">
            <input name="textForenames" type="text" id="textForenames" value="" placeholder="Forenames" data-clear-btn="true" maxlength="20" />
            <input name="textSurname" type="text" id="textSurname" value="" placeholder="Surname" data-clear-btn="true" maxlength="20" />
            <button name="buttonFromForm" id="buttonFromForm" ></button>
        </div>
    </div>
</body>
</html>

当文本框中的数据发生更改或按下按钮时，会调用GeneralEventHandler函数，但似乎每次都会创建一个新的FromBasePage实例，因为之前在FromPageBase中设置的任何值都将丢失。有没有办法在js调用之间保留FromBasePage中保存的值。 html / js正在手机上运行，在这个例子中，页面更改并不涉及到服务器的访问。

理想情况下，当用户填写表单并将对象传递到另一个页面或图层进行处理时，我希望构建对象。

使用原型函数在javascript对象中保留数据

0 个答案: