Web 前端本地化（一）

有时候，我们需要设计和制作全球化的站点，这些站点有一个特点，那就是要适应许多地区和文化，其中包括，站点中的一些内容要根据实际使用情况进行本地化。许多情况下，后端会输出本地化之后的内容，甚至有时候，不同地区和语言的网站都是不同的。然而，如果在某一场景内，需要通过 Web 前端来进行已知内容的本地化控制，例如一些文本的设置，这时便需要通过 Web 前端本地化技术来实现。熟悉 C# 开发的工程师可能都非常了解资源文件在本地化方面起到的作用；然而，当进入 JavaScript 的世界后，似乎至少当前版本本身并没有内置支持这类自动化的本地化功能，因此，需要通过一些方式，来实现这一切。为此，我们需要设计一套通用方案，来提供这类服务，同时支持以下这些功能。

模块化，做到各资源组互不干扰。
能够设置默认语言。
可以注册语言包。
可以获取指定本地化文本。
可以设置或获取某一特定语言的文本。
符合 ISO 639 规范。

为此，我们需要通过一个类来实现，这个类会被用于任何需要用到资源组的地方，不同模块可以初始化不同的实例，从而做到相互隔离。为了统一，以下均用 ECMA Script 5 来描述。

var Local = function () {this.defaultLang = null; // 默认语言。this._strings = {}; // 语言包。
};
Local.prototype.regStrings = function (lang, value) {// ToDo: Implement it. 注册语言包。
};
Local.prototype.getString = function (key, lang) {// ToDo: Implement it. 获取某一本地文本。
};
Local.prototype.specificString = function (lang, key, value) {// ToDo: Implement it. 获取或设置某一特定语言的某一文本。
};

不过在此上面的这些 To-Do 之前，我们还需要先行搞定一件事情：获取当前的语言。当前的语言指的是相对于当前页面的一个全局变量，用于标识当前使用哪个语言，我们需要用到一个变量来存储当前的语言，然后使用一个方法将其暴露出来，这个方法也提供设置功能。为了防止这个变量的引用暴露，我们在外面用一个匿名函数将其包起来，然后立即执行。

(function () {var _lang;Local.lang = function (value) {if (arguments.length > 0 && !!value) {_lang = value.toString().toLowerCase();}return _lang;}
})();

然而，这样太不够自动化了。至少，我们还是有办法获取到当前用户的语言使用情况的。

_lang = navigator.language|| navigator.userLanguage|| navigator.browserLanguage|| navigator.systemLanguage;

但是这段代码加在哪里最合适呢？事实上，我们可以对 Local.lang 函数进行改写，使其支持自动和手动两种模式。

如果传入参数为字符串，那么此即语言代号，记录之。
如果传入的参数为 true，则启用自动模式来设置值，设置值的方式如前面所述。如果实在获取不到，那么使用预设的一个默认值。
如果传入的参数为 false，那么意味着取消之前的设置，切换回默认值。
当没有传入参数，或传入参数为空时，返回当前值。如果当前没有值，采用自动模式自行先设置一个值，然后再取出来。

于是，该函数即被调整如下，同时多加入了一个属性，即默认语言。

Local.defaultLang = "en";/*** 获取或设置当前的语言标识符，使用 ISO 639 里的代码表示。* @param value  可选。设置值。*/
Local.lang = function (value) {if (arguments.length > 0 && !!value) {if (typeof value === "string") {_lang = value;} else if (typeof value === "boolean") {_lang = value ? navigator.language|| navigator.userLanguage|| navigator.browserLanguage|| navigator.systemLanguage: defaultLang;}if (!!_lang) _lang = _lang.toString().toLowerCase();} else {if (_lang == null) lang(true);}return _lang;
}

因此，我们现在可以非常方便地获取或设置当前语言环境了。

// 假设当前处于简体中文环境 "zh-Hans"。
console.debug(Local.lang()); // zh-Hans
console.debug(Local.lang("en")); // en
console.debug(Local.lang()); // en
console.debug(Local.lang(true)); // zh-Hans

有了语言的获取和设置，我们要开始实现那个类了。

【未完待续】

文章类型及复杂度：Web 前端开发进阶。

节选翻译自 MSDN 博文 Localization in web page，内容有所调整。

http://blogs.msdn.com/b/kingcean/archive/2016/03/30/web-localization.aspx

Web 前端本地化（一）相关推荐

web前端干货：详细了解JS前端开发框架都有哪些
1. Foundation框架 Foundation框架总体来看要比Bootstrap略显高大上一点,但他们俩的设计理念都是非常清楚的,Bootstrap有引导的意思,尝试处理你项目中的一切所需.Fo ...
8条关于Web前端性能的优化建议
转载自 8条关于Web前端性能的优化建议一般网站优化都是优化后台,如接口的响应时间.SQL优化.后台代码性能优化.服务器优化等.高并发情况下,对前端web优化也是非常重要的. 下面说说几种常见的优化 ...
小猿圈web前端之网站性能优化方案
现在前端不仅要能做出一个网站页面,还要把这个页面做的炫酷,那需要很大程度的优化,那么怎么优化才更好呢?小猿圈总结了一下自己优化的方案,感兴趣的朋友可以看一下. 一般网站优化都是优化后台,如接口的响应时 ...
美团点评金融平台Web前端技术体系
背景随着美团点评金融业务的高速发展,前端研发数量从 2015 年的 1 个人,扩张到了现在横跨北上两地 8 个事业部的将近 150 人.业务新,团队新,前端领域框架技术又层出不穷,各个业务的研发团队 ...
web前端工程师必须掌握的24条宝贵经验！
开发者一般不是令人惊艳的设计师,设计师也通常不是出色的开发者.虽然有很多例外,但这两行的门道对对方而言都是难以言说的谜,然而双方却要在这种情况下合作完成项目.作为在两个领域都工作过的人,达内web前端 ...
好用的Web前端开发框架有哪些呢？推荐这9款
对于一个程序员来学选择一款好用的开发工具可以大大提高工作效率,底层前端框架领域中早先jquery称霸.近年MVVM类型的框架成为主流,Vue.React和Angular三大框架较为常见.今天小千就介绍 ...
唯众本科Web前端专业解决方案
一.专业背景随着网络普及和发展,网站作为一种很强大的工具和平台愈来愈融入了人们的生活,而与用户关系最密切的前端技术也逐渐获得应有的重视.咱们能够看到前端重构的行业发展潜力巨大,各大知名的网络公司对前 ...
转载《美团点评金融平台Web前端技术体系》
复制代码作者:禹霖原文地址: tech.meituan.com/2018/03/16/- 背景随着美团点评金融业务的高速发展,前端研发数量从 2015 年的 1 个人,扩张到了现在横跨北上两地 ...
北风网web前端开发培训课程 web前端开发实例视频教程下载
web前端开发视频教程 Web前端开发工程师培训零基础Web前端开发工程师高端培训配项目开发(月薪过万的最佳选择) 课程讲师:叮咚课程分类:套餐推荐适合人群:初级课时数量:305课时用到技术 ...
唯众中职Web前端专业解决方案
一.专业背景随着网络普及和发展,网站作为一种很强大的工具和平台愈来愈融入了人们的生活,而与用户关系最密切的前端技术也逐渐获得应有的重视.咱们能够看到前端重构的行业发展潜力巨大,各大知名的网络公司对前 ...

Web 前端本地化（一）

Web 前端本地化（一）相关推荐

最新文章

热门文章