原生js/Angular/Vue等不同框架下的中英文切换———多语言支持

本文总结了Angular、Vue和React等主流框架下的多语言支持方案,包括ngx-translate、vue-i18n和react-intl插件的使用方法,以及如何在项目中实现中英文切换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

近期研究了下不同框架下的中英文切换,本文主要用于总结。希望本文能对你项目多语言支持的技术选型有所帮助。

简介

框架i18n插件github地址描述证书
Angular@ngx-translate* https://github.com/ngx-translate/core * https://github.com/ngx-translate/http-loader * https://github.com/biesbjerg/ngx-translate-extractAngular 多语言支持插件MIT Licensed
Vuevue-i18nhttps://github.com/kazupon/vue-i18nVue多语言支持插件MIT Licensed
原生JSjquery-i18n-propertieshttps://github.com/jquery-i18n-properties/jquery-i18n-propertiesjquery.i18n.properties是一款轻量级的国际化插件,采用.properties文件来对javascript文件进行国际化,即根据用户指定的语言和国家编码来解析对应的以".properties"为后缀的文件。MIT Licensed
reactreact-intl

一、 jquery-i18n-properties

1. 依赖
2. 语言文件
  • Language.properties => Base properties
  • Language_zh.properties
  • Language_en.properties
3. 集成 jQuery-i18n-properties
  • 引入jQuery-i18n-properties
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="./js/jquery.i18n.properties.js"></script>
    <script src="./js/language.js"></script>
  • 准备 Language files
    在这里插入图片描述
  • 配置 language.js
    1. getNavLanguage
    2. config jQuery.i18n.properties()
let getNavLanguage = function () {
  if (navigator.appName == "Netscape") {
    let navLanguage = navigator.language;
    return navLanguage.substr(0, 2);
  }
  return false;
}


let execI18n = function () {
  let defaultLanguage = "zh";
  let locale = getNavLanguage();

  jQuery.i18n.properties({
    name: 'Messages',
    path: 'properties/',
    mode: 'both',
    language: locale || defaultLanguage,
    callback: function () {
      // init html by translated resources
      let insertEle = $(".i18n");
      insertEle.each(function () {
        $(this).html($.i18n.prop($(this).attr('name')));
      });

      // Accessing a simple value through a JS letiable
      alert(msg_hello + ' ' + msg_world);
      // Accessing a value with placeholders through a JS function
      alert(msg_complex('John', 'Monday'));
    }
  });
}

$(function () {
  execI18n();
});
4. 在html中使用相关的properties
 <div class="i18n" name="在language_files中定义的变量名"></div>
注意:需要使用Server加载语言文件,否则会出现跨域问题
5. 相关API
jQuery.i18n.properties()加载* .properties 资源文件
jQuery.i18n.prop()使用是资源文件中的值
jQuery.i18n.browserLang()获取浏览器语言
6. jQuery.i18n.properties()相关参数
选项描述类型可选
name资源文件的名称string [string]
language指定语言编码: (en: 英文, zh: 中文),或者同时指定语言编码和国家编码(例如: zh_CN, en_US)等string
path资源文件所在的路径string
mode加载模式: “vars”表示以javascript变量和函数的形式使用文件中的key,“map”表示以Map的方式使用文件中的key,“both”表示可以同时使用两种方式。如果资源文件中的key包含javascript中的关键字,只能使用map。默认值是vars。string
cache指定浏览器是否缓存资源文件,默认falseboolean
encoding指定加载资源文件时的编码格式,默认utf-8string
debug控制台是否记录记录logboolean
async指定调用callback(回调)函数的方式,false: 所有的资源文件加载请求发送完毕后就调用回调函数, true:所有的资源加载并解析完成后才调用回调函数。默认falseboolean
namespace指定资源文件的keys被存放在namespace下,即$.i18n.properties[namespace][key], 使用namespace可以最大限度的减少冲突和重写的概率; 默认为null不使用namespacestring
callback方法执行完的回调函数function

二、 vue-i18n

Vue I18n是Vue.js的国际化插件。它简单、强大且面向组件。
在这里插入图片描述

1. 引入vue-i18n
  • 对于没有使用@vue/cli的简单项目,可以在index.html中直接引入vue-i18n的CDN资源
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
  • 对于使用@vue/cli的项目
npm install vue-i18n
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 Vue.use(VueI18n)
2. 准备翻译文件

在这里插入图片描述

3. 创建VueI18n 实例

在这里插入图片描述

4. 在html文件中使用正确的vue-i18n注入方法

在这里插入图片描述

参考示例代码:
https://github.com/kazupon/vue-i18n/tree/dev/examples>
vue-i18n 教程:
http://kazupon.github.io/vue-i18n/guide/started.html
vue-i18n api
http://kazupon.github.io/vue-i18n/api/


三、 @ngx-translate

1. 安装@ngx-translate/core , @ngx-translate/http-loader
npm install @ngx-translate/core 
npm install @ngx-translate/http-loader
注意:一定要根据当前使用Angular的版本选择正确的@ngx-translate/core版本
Angular@ngx-translate/core@ngx-translate/http-loader
2 to 4.2.x7.x or less0.x
4.37.x or less1.x to 2.x
58.x to 9.x1.x to 2.x
610.x+3.x+
2. 在app.module.ts 中引入TranslateModule / TranslateLoader / TranslateHttpLoader
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export const TranslateLoaderFactory = (http: HttpClient) => {
	return new TranslateHttpLoader(http, './assets/i18n/','.json')
}
...
    imports: [
...
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: TranslateLoaderFactory,
                deps: [HttpClient]
            }
        }),
...
    ],
3. 定义翻译

en.json

{
    "HELLO": "hello"
}

zh.json

{
    "HELLO": "你好"
}
4. 初始化TranslateService
import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'app',
    template: `
        <div>{{ 'HELLO' | translate }}</div>
    `
})
export class AppComponent {
    constructor(translate: TranslateService) {
        // this language will be used as a fallback when a translation isn't found in the current language
        const browserLang = translate.getBrowserLang();
        translate.setDefaultLang(browserLang);

         // the lang to use, if the lang isn't available, it will use the current loader to get them
        translate.use('en');
    }
}

参考教程
https://github.com/ngx-translate/core
参考示例
https://github.com/cassilup/angular-i18n-ngx-translate

<think>嗯,用户想了解B/S架构中的前端技术有哪些。首先,我需要回忆一下B/S架构的基本概念,Browser/Server模式,前端主要负责用户界面和交互,后端处理业务逻辑和数据存储。接下来,前端技术应该包括哪些方面呢?可能包括基础的HTML、CSS、JavaScript,以及各种框架和工具。 用户可能希望知道当前主流的技术,所以得考虑现代前端开发常用的框架,比如React、VueAngular这些。还有可能涉及到构建工具,比如Webpack、Vite,以及CSS预处理器如Sass、Less。另外,响应式设计、前端路由、状态管理这些概念也可能需要提到。 然后要考虑分类是否清晰,可能将技术分为核心基础、UI框架、工程化工具、跨平台方案、可视化、新特性等。需要确保覆盖全面,但不过于冗杂。比如,核心基础包括HTML5、CSS3、ES6+;UI框架除了三大框架,可能还有UI库如Ant Design、Element UI。工程化方面有打包工具、模块化、代码检查等。 跨平台移动端开发也是前端的一部分,比如React Native、Flutter,还有小程序框架如Taro、Uni-app。数据可视化可能需要提到ECharts、D3.js。Web新特性如PWA、WebAssembly也应该包含进去。 要注意用户可能分不清前后端技术,所以需要明确区分,只讨论前端部分。同时,用户可能对某些技术不熟悉,需要简要说明每个技术的作用和例子,但不用太深入。结构上最好分点列出,每个大类下有小项,帮助用户理解层次。 最后检查是否有遗漏的重要技术,比如TypeScript、AJAX、Axios,或者测试框架如Jest。确保信息准确,不包含过时的技术,比如可能不再提jQuery,除非用户特别询问。另外,要使用中文,避免专业术语翻译问题,必要时保留英文原名。保持回答结构清晰,逐步展开,让用户能逐步理解B/S前端技术的全貌。</think>B/S(Browser/Server)框架中的前端技术主要负责用户界面展示、交互逻辑以及与后端通信。以下是主要前端技术分类及代表性工具: --- ### 一、核心基础技术 1. **HTML5** - 定义页面结构和内容,支持多媒体、本地存储(LocalStorage)等新特性。 2. **CSS3** - 控制页面样式和布局,支持动画、弹性盒子(Flexbox)、网格布局(Grid)等。 3. **JavaScript (ES6+)** - 实现动态交互和业务逻辑,核心特性包括模块化、Promise、异步函数等。 --- ### 二、主流前端框架/库 1. **React** - 基于组件化开发,配合虚拟DOM提升性能,生态丰富(如Redux、React Router)。 - 示例代码: ```jsx function App() { return <h1>Hello World</h1>; } ``` 2. **Vue.js** - 渐进式框架,易于集成,提供响应式数据绑定和组合式API(Vue 3)。 3. **Angular** - 全功能MVC框架,依赖注入、TypeScript原生支持,适合大型项目。 --- ### 三、工程化工具链 1. **打包工具** - Webpack:模块打包和代码优化。 - Vite:基于ESM的快速构建工具。 2. **包管理** - npm / Yarn / pnpm:依赖管理和版本控制。 3. **CSS预处理器** - Sass / Less:支持变量、嵌套、混合等特性。 4. **代码规范** - ESLint(代码检查)、Prettier(代码格式化)。 --- ### 四、跨平台方案 1. **移动端开发** - React Native(用JavaScript开发原生应用) - Flutter(Dart语言,高性能跨平台UI)。 2. **小程序开发** - Taro(多端统一开发框架) - Uni-app(基于Vue的跨平台方案)。 --- ### 五、数据可视化 1. **ECharts** - 百度开源的图表库,支持丰富的数据展示类型。 2. **D3.js** - 基于数据驱动文档的动态可视化库。 --- ### 六、现代Web新特性 1. **PWA(Progressive Web App)** - 支持离线访问、推送通知等原生应用特性。 2. **WebAssembly** - 高性能二进制格式,可运行C/C++/Rust编译的代码。 --- ### 七、通信技术 1. **AJAX / Fetch API** - 实现异步数据请求。 2. **WebSocket** - 全双工实时通信协议。 3. **RESTful API / GraphQL** - 前后端数据交互规范。 --- ### 八、辅助工具 1. **TypeScript** - JavaScript的超集,提供静态类型检查。 2. **测试框架** - Jest(单元测试)、Cypress(端到端测试)。 --- ### 总结 B/S框架的前端技术围绕**高效开发**、**性能优化**和**跨平台兼容**演进。开发者需根据项目需求选择合适的技术栈,例如: - 快速原型:Vue + Vite - 企业级应用:React + TypeScript + Webpack - 数据密集型:React + D3.js + WebSocket。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值