javascript - jQuery插件返回未定义

Question

我有一个插件来翻译 dom 节点。这就是它的作用：

$.fn.jqTranslate = function (pkg, options) {
    var self = this;
    Translate.initialize(pkg, options).done(function () {
        return self.each(Translate.translate);
    });
};
translate: function () {
    var elem = $(this),
        key = elem.data('translate');
    if (Translate.translatable) {
        if (Translate.translatedStrings[key]) {
            if (Translate.translatedStrings[key].length === undefined) {
                // The key have nested keys
                Translate.translateElement(elem, Translate.translatedStrings[key].text);
                delete Translate.translatedStrings[key].text;
                elem.attr(Translate.translatedStrings[key]);
            }
            else Translate.translateElement(elem, Translate.translatedStrings[key]);
        }
    }
    if (typeof Translate.options.onComplete === 'function') Translate.options.onComplete.apply(this, arguments);
    return elem;
}

如果您看到，它正在返回 self 因此插件理论上可以像这样链接：

$('p').jqTranslate('global').addClass('translated')

应该工作，但它说：

未捕获的类型错误：无法调用未定义的方法“addClass”

我究竟做错了什么？

您可以在GitHub中查看完整代码。

Answer 1

您正在undefined从插件中隐式返回。当您没有 return 语句时，函数返回undefined.

$.fn.jqTranslate = function (pkg, options) {
    var self = this;
    Translate.initialize(pkg, options).done(function () {
        return self.each(Translate.translate);
    });
    return this; //add return statement
};