Jquery - 创建通用语言文件以声明任何插件的默认值

Question

像大多数人一样,我在我的网站上使用了一堆jquery插件.从Twitter bootstrap到jquery ui datepicker等等.

但我需要我的网站是多语言的,所以我创建了一个名为english.js的通用语言文件,在该文件中我想声明一些插件的默认值以及其他语言变量.

问题是所有这些插件都有不同的结构来声明默认值.我已经看到了几个问题(jquery - 设置插件默认值？,全局定义jQuery插件参数,jQuery插件默认值,......).但他们并不清楚.

结构1

$.fn.ajaxStatus = function (params)
{
    var settings = $.extend(
            {
                defaultLoadingText :"Loading...",
                defaultSavingText  :"Saving...",
                defaultDoneText    :"Done",
                defaultRedirectText:"Redirecting...",
                defaultErrorText   :"Oops! Our bad, something wrong.";
            },$.fn.ajaxStatus.defaults,
            params),
});

结构2

   jQuery.fn.extend({
        shrinker:function (options) {
            var opts = $.extend({
                "moreText":"Read more", 
                "lessText":"hide",
            }, $.fn.shrinker.defaults, options);
   });

问题

如果不修改插件,是否可以为每次使用插件时使用的函数分配一些默认值？如何在外部文件中定义语言默认值？

现在,我在我的语言文件中有这个,但感觉不对,这是你怎么做的？

if ($.fn.ajaxStatus !== undefined) {
    $.fn.ajaxStatus.defaults =
    {
        defaultLoadingText :"Loading2...",
        defaultSavingText  :"Saving2...",
        defaultDoneText    :"Done2",
        defaultRedirectText:"Redirecting2...",
        defaultErrorText   :"Oops! Our bad, something wrong"
    };
}

在此先感谢您的帮助.

Answer 1

我可以看到在一个对象中执行此操作,如下所示:

var en = {
    defaultLoadingText: "Loading...",
    defaultSavingText: "Saving...",
    defaultDoneText: "Done",
    defaultRedirectText: "Redirecting...",
    defaultErrorText: "Oops! Our bad, something wrong.";
    moreText: "Read more", 
    lessText: "hide"
};

假设插件之间的选项名称没有重叠,您可以使用以下命令启动插件:

$('').ajaxStatus(en);
$('').shrinker(en);

大多数插件都会接受选项对象并忽略其他属性.如果您想要传递给特定插件的其他选项,您只需使用$.extend():

$('').ajaxStatus($.extend({}, { success: function () {} }, en));

如果您真的想将插件选项分开,只需创建另一个级别:

var en = {
    ajaxStatus: {
        defaultLoadingText: "Loading...",
        defaultSavingText: "Saving...",
        defaultDoneText: "Done",
        defaultRedirectText: "Redirecting...",
        defaultErrorText: "Oops! Our bad, something wrong.";
    },
    shrinker: {
        moreText: "Read more", 
        lessText: "hide"
    }
};

然后:

$('').ajaxStatus(en.ajaxStatus);
$('').shrinker(en.shrinker);

最后,通过将它们全部存储在一个多层对象中,您可以获得更好的想法并使其更容易获得:

var localizedOptions = {
    'en-US': {
        ajaxStatus: {
            defaultLoadingText: "Loading...",
            defaultSavingText: "Saving...",
            defaultDoneText: "Done",
            defaultRedirectText: "Redirecting...",
            defaultErrorText: "Oops! Our bad, something wrong.";
        },
        shrinker: {
            moreText: "Read more", 
            lessText: "hide"
        }
    },
    'es-ES': {
        ajaxStatus: {
            defaultLoadingText: "Cargar...",
            defaultSavingText: "Guardar...",
            defaultDoneText: "Terminado",
            defaultRedirectText: "Redirigir...",
            defaultErrorText: "¡Ay! Nuestra algo malo, malo.";
        },
        shrinker: {
            moreText: "Leer más", 
            lessText: "esconder"
        }
    } // ... etc.
};

和

$('').ajaxStatus(localizedOptions[navigator.language || navigator.userLanguage].ajaxStatus);

我必须承认我自己没有使用过类似的东西,因为我通常会以资源文件的形式获取语言文件.在这种情况下,我只需通过服务器端逻辑输出一组键/值对,并手动设置相应的插件属性.

在ASP.NET MVC中:

<script>
var Resources = {};
@foreach (var kvp in ViewBag.Resources) {
Resources['@kvp.Key'] = "@kvp.Value";
}
</script>

这将输出一个不同的集合,具体取决于我所在的页面.