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

时间:2013-12-12 10:24:08

标签: javascript requirejs

我正在使用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()?

2 个答案:

答案 0 :(得分: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
    };

});

答案 1 :(得分:1)

我假设您将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上创建一个闭包(第一种方法也可以,但它更标准化)。