使用decj简化Web前端开发（三）声明式国际化

引言

本期将介绍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>

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索css
，文件
，模块
，清单
，加载资源
，资源
， css文件
，一个
，资源动态加载
， AJAX实现按需加载
，加载运行CSS文件
， yii2加载css
， CSS加载
加载css
前端国际化、web前端国际化、前端国际化插件、angularjs前端国际化、前端页面实现国际化，以便于您获取更多的相关知识。

时间： 2024-09-17 04:27:37

使用decj简化Web前端开发（三）声明式国际化

引言

声明式CSS文件按需加载

清单 21. 在外部CSS文件URL后添加“提示”

声明式多语言支持