Question

我正在使用require.js并拥有一个我在多个地方使用的函数库。我这样定义了函数：

define(function (require) {

    "use strict";

    var $ = require('jquery');

    var UsefulFuncs = {};

    UsefulFuncs.hideAlert = function() {
        $('.alert').hide();
    };


    UsefulFuncs.loadURL = function (url){
            navigator.app.loadUrl(url, { openExternal:true });
            return false; 
    };


    UsefulFuncs.linkClicked = function (e) {    
        e.preventDefault();
        var url = $(e.currentTarget).attr("rel"); 
        this.loadURL(url);
    };


    return UsefulFuncs;

});

然后，在我的骨干视图中，我从库中调用函数：

UsefulFuncs         = require('app/utils/useful_func'),

....

UsefulFuncs.linkClicked

这适用于库中的任何独立函数，例如hideAlert（）。但是当库中的一个函数引用另一个函数时，例如调用loadURL（）的linkClicked（），我得到一个错误：

Uncaught TypeError: Object [object Object] has no method 'loadURL'.

我有什么想法可以引用loadUrl（）？

Answer 1

尝试这样的事情：

define(function (require) {

    "use strict";

    var $ = require('jquery');

    var hideAlert = function() {
        $('.alert').hide();
    };


    var loadURL = function (url){
            navigator.app.loadUrl(url, { openExternal:true });
            return false; 
    };


    var linkClicked = function (e) {    
        e.preventDefault();
        var url = $(e.currentTarget).attr("rel"); 
        loadURL(url);
    };


    return {
        hideAlert : hideAlert,
        loadURL : loadURL,
        linkClicked : linkClicked
    };

});

Answer 2

我假设您将UsefulFuncs.linkClicked设置为事件的处理程序。

如果你这样使用它：

UsefulFuncs.linkClicked()

，函数内的this会引用UsefulFuncs，因此this.loadURL()有效。

但是，由于您将其设置为事件的处理程序，因此可以通过其他方式调用它，并将this设置为某个其他对象（可能是触发事件的元素）。为避免事件处理机制更改this，您可以在分配时绑定该函数：

element.onclick = UsefulFuncs.linkClicked.bind(UsefulFuncs);

另一种解决方法是避免在处理程序中使用this，如下所示：

UsefulFuncs.linkClicked = function (e) {    
    e.preventDefault();
    var url = $(e.currentTarget).attr("rel"); 
    UsefulFuncs.loadURL(url);
};

这会在UsefulFuncs上创建一个闭包（第一种方法也可以，但它更标准化）。

引用函数数组中的另一个函数

2 个答案: