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

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（））都适用。 但是，当库中的一个函数引用另一个函数时，例如linkClicked（）调用loadURL（），我得到一个错误：

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的闭包（第一种方法也可以，但是更加标准化）。