0

我有一个这样的模块：

define([ 'jquery' ], function($) {
    'use strict';

    return {
        email: $('#email').val() //$('#email') is a html input box
    };
});

从我运行时需要此模块的页面

var Form= require('src/form');
Form.email;

它将获得正确的值，但是，如果我输入一个新的电子邮件地址，它会一直获得原始值并且不会更新。

如果我更改为以下内容，它将起作用：

define([ 'jquery' ], function($) {
    'use strict';

    return {
        email: $('#email');
    };
});

...

var Form= require('src/form');
Form.email.val();

在我看来，RequireJs 只评估返回的对象一次。有谁知道这里发生了什么？

4

3 回答 3

0

根据requirejs文档：

RequireJS 中的模块是模块模式的扩展，其好处是不需要 > 全局变量来引用其他模块。 http://requirejs.org/docs/api.html#define

就像在模块模式中一样，该define()函数只被调用一次来初始化模块。所以这：

return {
    email: $('#email').val() //$('#email') is a html input box
};

即使您require()多次调用它也会调用一次。

您可以在此处获得有关模块模式的更多信息

于 2013-09-02T06:04:23.160 回答
0

您的表单模块只会返回$('#email')模块加载时的值；对变量的设置$('#email').val()通过值而不是通过引用元素的值来存储它。

您必须保留更新并返回$('#email')缓存 jQuery 选择器的缓存，以便您可以在每次要查找它的时间点找到它的值。

为避免暴露 jQuery 选择器，请通过闭包使用封装并在模块中创建 getter 方法：

 define([ 'jquery' ], function($) {
   'use strict';
   var $email = $('#email');

   return {
     getEmail: function() {
       return $email.val();
     }
   }
 });

然后用于Form.getEmail()检索值

于 2013-09-02T05:38:46.223 回答
0

在我看来，RequireJs 只评估返回的对象一次。有谁知道这里发生了什么？

两种情况下的行为相同；requirejs 缓存返回的对象。唯一的区别在于返回的内容。

在第一种情况下，返回（并缓存）一个字符串值；它不再引用输入字段，因此不会反映任何更改。

在第二种情况下，返回一个对 jQuery 结果集的引用；此对象保留了对输入字段的引用，因此调用.val()该对象将始终返回最新值。

于 2013-09-02T05:42:17.213 回答