AICon上海|与字节、阿里、腾讯等企业共同探索Agent 时代的落地应用 了解详情
写点什么

使用 decj 简化 Web 前端开发(三):声明式国际化

  • 2013-10-31
  • 本文字数:3114 字

    阅读完需:约 10 分钟

引言

本期将介绍 decj 的国际化(I18N)支持,包括声明式多语言支持和声明式 CSS 文件动态按需加载。

声明式 CSS 文件按需加载

使用 decj 框架,开发人员只需要在模块定义中声明模块所需的各个 CSS 文件,即可实现这些 CSS 在该模块被加载时而被动态加载,而无需事先在页面中添加 link 标签来引用各个 CSS 文件。

模块定义的 css 属性用于声明模块所需的各个 CSS 文件。该属性值是一个字符串数组,其各个元素为所要加载的 CSS 文件的 URL。如果只需要加载一个 CSS 文件,css 属性的值也可以是一个字符串。如清单 19 所示:

清单 19. 使用 decj 的声明式 CSS 文件加载

复制代码
css:["dialog.css","menu.css"]

decj 在实际加载模块定义的 CSS 文件时,可以根据当前的 Locale 加载相应的 CSS 文件。比如,清单 19 中指定了“dialog.css”,那么当 decj 根据其算法明确了当前的 Locale 是“zh_CN”时,名为“dialog-zh_CN.css”的文件会被加载。这样,可以实现在多语言情形下,不同语言的页面显示时可以使用不同的页面风格。

decj 也支持加载托管在其它域名上的 CSS 文件,即实现跨域的 CSS 文件加载,从而支持 CDN(Content Delivery Network)。对于与页面文件处在同一个域名内的 CSS 文件,decj 会采用 AJAX 的方式去加载。而对于与页面文件处在不同域名的 CSS 文件(外部 CSS 文件),decj 会采用 link 元素的方式动态加载。

但是,由于多数浏览器都不支持用于表示 link 元素已经加载完毕其内容的事件,如 onload、onreadystatechange 等,decj 需要一些“提示”信息来帮助其确认某个外部 CSS 文件是否加载完毕。为此,每个外部 CSS 文件的尾部需要添加一个称为 LoadClue 的特殊 CSS 规则。LoadClue 规则的选择器必须是一个 ID 选择器,并且不能与当前模块要动态载入的其它 CSS 文件中的选择器相同。因此,LoadClue 规则的名称通常与其所在的 CSS 文件的短文件名(不包含表示 Locale 的字符串)加“-Clue“相同。LoadClue 规则的声明部分需要包含“display:none”。比如,有个外部 CSS 文件的 URL 为“ http://cdn.site.com/css/dialog-zh_CN.css”,那么该 CSS 文件的尾部需要添加一个选择器为“#dialog-Clue”的 LoadClue 规则,如清单 20 所示:

清单 20. 加载外部 CSS 文件所需的“提示”

复制代码
#dialog-Clue{
display:none;
}

如果 LoadClue 规则的选择器名称与其所在的 CSS 文件的短文件名不同,则在模块定义中声明 CSS 文件时,需要在相应的 URL 末尾附加选择器的名称。如清单 21 所示:

清单 21. 在外部 CSS 文件 URL 后添加“提示”
复制代码
css:["http://cdn.site.com/css/ dialog-zh_CN.css#dialog-LoadClue"]

声明式多语言支持

使用 decj 框架开发支持多语言的 Web 应用,开发人员无需编写繁琐的代码。只需要以下 3 个步骤即可实现。

第一步,创建资源文件。decj 框架中,资源文件其实也是一个 Javascript 模块。资源文件的文件名中需要包含相应的 Locale。比如,一个适用于中国大陆中文简体(对应的 Locale 为 zh_CN)的资源文件的文件名中应该包含“zh_CN”,如“userInfo-zh_CN.js”。清单 22 展示了示例资源文件 userInfo-zh_CN.js 的内容。保存资源文件的时候,注意将文件的文本编码设置为 UTF-8,以避免页面上显示相关字符串时出现乱码的问题。

清单 22. 使用 decj 定义资源文件—中文

复制代码
define({
"expertise-area":" 专长领域 ",
"firstname":" 名 ",
"lastname":" 姓 "
});

再添加一个适用于英文的名为“userInfo-en_US.js”的资源文件,该文件内容如清单 23 所示:

清单 23. 使用 decj 定义资源文件—英文

复制代码
define({
"expertise-area":"Expertise Area",
"firstname":"First name",
"lastname":"Last name"
});

第 2 步。在模块定义中声明模块需要引用的资源文件。模块定义的 resources 属性用于声明模块所需的各个资源文件。resources 属性的值是一个数组。该数组的每个元素是模块所需的资源文件的 URL。在声明资源文件的 URL 时,无需指定文件名中的 Locale 部分(如“-zh_CN”),因为 decj 会根据当前浏览器的语言设置自动加载相应 Locale 的资源文件。如清单 24 代码所示:

清单 24. 在模块定义中声明资源文件

复制代码
define(['jquery','decj'],function(jQuery,decj){
//…
return {
//…
resources:['res/userInfo','res/anotherRes']
//…
};
});

第 3 步。在模块页面中使用资源文件中定义的字符串。在页面中使用资源文件中定义的字符串只需要在相关 HTML 元素的 class 属性值中添加一个名为“res”或“res-replace”的类,并将该元素标签内容设置为资源 key。如清单 25 中的 HTML 代码所示:

清单 25. 在模块页面中使用资源字符串

复制代码
<label>
<label class="res-replace">firstname</label>
<input name="fn" type="text" value="firstname" title="firstname"/>
</label><br/>
<label>
<label class="res-replace">lastname</label>
<input name="lastname" type="text" value="lastname" title="lastname"/>
</label><br/>
<label>
<label class="res-replace">expertise-area</label><br/>
<select multiple="true" name="expertise">
<option value="java">Java</option>
<option value="cpp">C++</option>
<option value="Javascript">Javascript</option>
<option value="design-pattern">Design Pattern</option>
<option value="oracedb">Oracle Database</option>
<option value="css">CSS</option>
<option value="html">html</option>
</select>
</label>

当操作系统的语言设置为“中文(简体中文)”时,页面显示效果如图 8 所示:

图 8. decj I18N 示例效果——中文简体

如果操作系统的语言设置为“英文(美国)”,则页面显示效果如图 9 所示:

图 9. decj I18N 示例效果——英语

同时,decj 也支持以 API 调用的方式去引用资源文件中定义的字符串。假设某个资源文件包含 key 为“welcome“的资源字符串,该资源串中花括号(”{}“)括起的字符串表示资源字符串中可以替代的部分。如清单 26 所示:

清单 26. 包含可替代部分的资源字符串

复制代码
define({
"welcome":"Welcome to {destination}!"
});

decj 为 Javascript 的 String 对象的原型(prototype)添加了一个名为 val 的方法。通过该方法,开发人员可以编写类似 Linux 命令的特定字符串,并调用其 val 方法来实现特定的功能。获取资源字符串时,这个特定字符串的格式是:“res 资源字符串的 key“,如”res welcome”。示例代码如清单 27 所示:

清单 27. 以 API 调用的方式使用资源文件中定义的字符串

复制代码
var str="res welcome".val({destination:"decj"});
alert(str);

调用字符串的 val 方法时,若字符串的是以“res“开头的,则该方法接受一个普通 Javascript 对象型的参数。该参数的各个属性名表示相应资源字符串中可替代参数的名称,而属性值则用于替换资源字符串中相应的可替代参数。

总结

本文介绍了 Web 前端开发中的常规问题的传统处理方式所存在的问题与弊端,并介绍了 decj 框架如何以声明式编程的方式去解决这些常规问题。

参考资源


感谢崔康对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ )或者腾讯微博( @InfoQ )关注我们,并与我们的编辑和其他读者朋友交流。

2013-10-31 02:212331

评论

发布
暂无评论
发现更多内容

SSD可靠性指标MTTF、MTBF、AFR解析

怀瑾握瑜

SSD nvme 可靠性 固态硬盘数据恢复

物流CRM软件能帮你送快递吗?

低代码小观

企业管理 物流行业 CRM 管理系统 物流系统

别再傻傻分不清 AVSx H.26x MPEG-x 了

声网

音视频

GrowingIO Design 组件库搭建之 CI/CD

GrowingIO技术专栏

持续集成 CI/CD 持续交付 Github Actions 组件库

如何说孩子才肯听,怎么听孩子才肯说(下)

石云升

读书笔记 育儿 10月月更

【设计模式】第三篇-单例模式

Brave

设计模式 单例模式 10月月更

如何在 Web 前端做 3D 音效处理

ZEGO即构

大前端 音视频 3D音效 范围语音

红黑树

Dobbykim

SQL注入进阶篇一php代码审计

网络安全学海

网络安全 信息安全 渗透测试 WEB安全 漏洞挖掘

官方线索|鸿蒙1024程序员节

轻口味

1024我在现场

如何选择 Web 的数据存储方式?看我就够了

神策技术社区

存储数据 Web JS SDK sessionStorage

浪潮云荣登“中国数字安全能力图谱-信息计算环境”多项安全能力者领域

云计算

Java 17 与 Java 11 相比有什么变化?

码语者

Java

【得物技术】自动化生成代码几种方案的演变

得物技术

自动化 代码 生成代码 机器 自动

017云原生之一些技术概念

穿过生命散发芬芳

云原生 10月月更

官方线索|2021 长沙·中国 1024 程序员节

穿过生命散发芬芳

1024我在现场

不了解Zookeeper的童鞋看过来哦~

Regan Yue

zookeeper 10月月更

Knative Autoscaler 自定义弹性伸缩

全象云低代码

Knative Serverless Kubernetes

没想到!我在简历上写了“精通MySQL”,阿里面试官跟我死磕后就给我发了高薪offer

收到请回复

Java MySQL 数据库 面试

成本直降50%,下一代网关震撼发布

阿里巴巴云原生

云原生 网关 kurbernetes

从转移工具到移动急救室,5G救护车给行业带来了什么变化?

脑极体

织信OA考勤管理系统是如何解放企业内部考勤的?

优秀

低代码

微服务链路追踪组件Skywalking实战

Fox666

Spring Cloud Skywalking 链路追踪组件 微服务调用链

golang和java的性能对比及golang内存管理

hanaper

我与消息队列的八年情缘

勇哥java实战分享

RocketMQ 消息队列 Activemq

Telemetry标准日志接口如何提升运维效率?

怀瑾握瑜

运维 存储 SSD nvme

《原则》在解决技术问题中的应用

Changing Lin

10月月更

官方线索|【云+社区】程序员过节指南:如何玩转你的1024 ?

Regan Yue

1024 1024我在现场

官方线索|1024短信盲盒,掘友你好,见字如面

xcbeyond

1024我在现场

入职腾讯的前一天,我哭了(传统行业被裁,奋战一年成功逆袭!)

收到请回复

架构 编程语言 后端 语言 & 开发 java

官方线索|2021数智马拉松大赛,AI音乐之夜

石云升

1024我在现场

使用decj简化Web前端开发(三):声明式国际化_语言 & 开发_黄文海_InfoQ精选文章