Question

我有一个这样的模块：

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只评估返回的对象一次。有谁知道这里发生了什么？

Answer 1

您的表单模块仅在加载模块时返回$('#email')的值;将$('#email').val()设置为变量按值存储，而不是通过引用元素的值。

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

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

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

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

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

Answer 2

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

两种情况下的行为都是一样的; requirejs缓存返回的对象。唯一的区别在于返回的内容。

在第一个场景中，返回（并缓存）字符串值;它不再引用输入字段，因此不会反映任何更改。

在第二个场景中，返回对jQuery结果集的引用;此对象保留了对输入字段的引用，因此在其上调用.val()将始终返回最新值。

Answer 3

根据requirejs文档：

RequireJS中的模块是模块模式的扩展，其优点是不需要＆gt; globals引用其他模块。 http://requirejs.org/docs/api.html#define

与模块模式类似，define()函数仅调用一次以初始化模块。所以这个：

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

即使多次拨打require()，也会调用一次。

您可以获得有关模块模式here

的更多信息

RequireJS或JQuery似乎是缓存数据

3 个答案: