# i18n

**Repository Path**: amswait/i18n

## Basic Information

- **Project Name**: i18n
- **Description**: i18n插件，零依赖，类vue模板语法实现，无门槛上手。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-01
- **Last Updated**: 2023-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# i18n.js

#### 介绍
针对问卷项目多语种需求做的一个多语种解决方案，将文案剥离，让前端能更专注于JS与CSS。

无门槛，配置简便，使用灵活，轻量化，渲染快，语言源自由度高。

#### 项目地址

项目地址（包含demo）：[i18nForCyou: 问卷i18n插件 (gitee.com)](https://gitee.com/amswait/i18n-for-cyou)

单页面显示多语种方式demo：

1. demo.html?lang=en

2. demo.html?lang=zh-tw

多页面分别显示单一语种demo：

1. demo2韩语.html

2. demo2日语.html

#### 示例

![demo](img/demo.png)

#### 使用说明

1. 引入`i8n.js`;

2. 初始化插件；

   ``` javascript
   i18n.init({
       resource: XXX
   })
   ```

3. 插值语法；

   方式一：`<p>{{i18n.Q1.title}}</p>`

   方式二：`<li i18n-show>{{a ? a : b}}</li>` 支持运行JS语言

4. 指令语法;

    `<li i18n-show></li>`，

   暂时只支持`i18n-show`指令：根据是否有相应的文案来控制元素是否显示(例如英语选项多一个这种需求，其他语言不需要特殊处理，该元素自动隐藏)；

   对有子元素的节点不生效。

#### init参数说明
| 参数名          | 值       | 是否必传 |
| --------------- | -------- | -------- |
| lang            | String   | 否       |
| resource        | Object   | 是       |
| callback        | Function | 否       |
| autoGetLangType | Boolean  | 否       |
1. lang：需要渲染的语种

   例如en(即英语)。语种英文简写参考附录：语种英文简写对照表

   支持四种方式，按优先级排序：

   - init传入
   - 地址栏传参`?lang=en`
   - 自动获取浏览器环境语种
   - 默认语言(en)

2. resource：语言源

   不关心读取方式，格式只要一级key是语种即可。本插件只是将对应的语种下的内容挂载到`i18n`这个对象上。

   基础格式示例：

   ```json
   // data.json
   {
       "en": {},
       "zh-tw": {},
       "ko": {}
   }
   ```

   注：支持\n换行保留到页面，方便排版。

3. callback：回调函数

   只有一个回参，内容是当前的语种；

   ```javascript
   i18n.init({
       resource: langJson,
       callback: function (langType) {
           switch (langType) {
               case 'zh-tw':
                   // 在此可以处理下css之类的
                   break;
               case 'ja':
                   // doSomething...
                   break;
           }
       }
   })
   ```

4. autoGetLangType：自动推断语言类型

   默认开启



#### 附录

##### 语种英文简写对照表

此处仅作参考，用于语种命名，主要参考[BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt)这个标准(html的lang属性也是来源于这个标准)。

| 语种     | 简写值         |
| -------- | -------------- |
| 简体中文 | zh-CN          |
| 繁体中文 | zh-TW 或 zh-HK |
| 英文     | en             |
| 美式英文 | en-us          |
| 日文     | ja             |
| 韩文     | ko             |
| 法文     | fr             |
| 德文     | da             |
| 意大利文 | it             |
| 波兰文   | pl             |
| 俄文     | ru             |
| 西班牙文 | es             |