从0到1教你写一个JS的多语言库

最新推荐文章于 2024-05-15 13:09:23 发布
最新推荐文章于 2024-05-15 13:09:23 发布
阅读量684 收藏
点赞数
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ezshine/article/details/124311206
版权
本文介绍了如何从零开始编写一个JavaScript的多语言库，选择了易于理解和编辑的文本格式代替JSON，强调代码可读性和配置易用性。通过读取文件、拆分数据、处理变量等步骤实现库的功能，同时提供了支持携带多个动态变量的多语言文本处理。
摘要由CSDN通过智能技术生成

前言

造这个轮子源于之前做的那个彩虹屁老婆插件，里面需要用到多语言切换。借这个由头，自己来实现一下。做之前其实对JS的多语言库没什么了解，做完之后倒是去比较了下vue-i18n。

选择多语言文本配置

vue-i18n的配置(图片来自百度)图片

vue-i18n的配置(图片来自百度)图片

大部分js的多语言库似乎都采用了json格式，可以很方便的转为对象解析，还可以分多级结构来组织配置内容。但是我个人感觉json格式对非技术人员（比如正经请个翻译的话）并不太友好。加上联想起过去做iOS开发多语言时的体验，我还是倾向于选择普通的文本格式，基本上完全照搬iOS里的.strings文件来做多语言配置。

图片

  • 这样的好处是，我们在代码里使用的时候就用常用语言写字符串即可。无论是代码的可读性，多语言配置文件编辑者的易用性都很高
//vue-i18n
最低0.47元/天 解锁文章
大帅老猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Javascript实现多语言切换(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-05 589
Javascript实现多语言切换(附完整源码)
JavaScript多语言实现
09-01
词典形式demo，试用过，有一定的局限性 $(document).ready(function() { dictionary = dic; var selectors = "a,span,td,font,h1,h2,li,div,legend,option,input"; lazyLocalize.init({ lang : 'en',//navigator.language || navigator.userLanguage, dictionary : dictionary, selectors : selectors }); // 默认显示英文 //lazyLocalize.localize('en'); });
原生js实现多语言切换
weixin_40119542的博客
05-12 3606
1.select实现语言选择 中文 language Язык Тіл 2.value发生改变调用方法，通过值的不同调用不同html页面 function changelanguage(){ var myselect=document.getElementById(“test”); var index=myselect.selectedIndex; var value=myselect.options[index].value; //判断语言的类型 if (value == ‘Chinese’) { w
JS实现支持同一网站支持多种语言（即不同地区用户）
qq_34777858的博客
12-29 1759
背景：如果台湾（中文繁体），大陆（中文简体），英国（英语）三个地区的用户用到同一个网站。 解决方案： 3个war包部署到三个服务器上 同一个war包部署，在一套系统里支持多语言（一个HTML/JSP页面支持多语言） 方案2更节约服务器成本 。具体措施： ...
如何使用JavaScript实现多语言处理
xiaoweids的博客
09-13 1051
最直接的一种就是将需要翻译的语言做成参数，每个参数组成的集合做成一个文件，然后再程序里面调用这个文件中的参数即可。直观的是把每个需要翻译的处理成变量，变量值组成的集合统一为一个文件，比如zh-cn.js / en.js等。很多时候需要用到多语言技术，Javascript里面也是非常普遍的，比如日历插件的中文版本、英文版本。这个有很多的好处，目前绝大多数的Javascript语言包都是利用这种方式进行处理的。在以上思路指导下，可以利用下面的办法实现。var lang_b="复制"
JS文件实现多语
lr200012的博客
10-24 390
js文件实现多语
JavaScript语言教程从小白到入门
03-23
7. **jQuery库**：jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理和动画效果。学习jQuery可以快速上手，提高开发效率。 8. **Web API**：浏览器提供了一系列API，如定时器、地理位置API、WebSocket...
python爬虫教程系列、从0到1学习python爬虫.zip
04-11
Python爬虫是编程领域中的一个重要分支，主要用于自动化地从互联网上获取数据。本教程系列将带你从零开始，逐步掌握Python爬虫的核心技术。在这个过程中，我们将深入理解Python语言的基础，学习如何使用requests库...
python爬虫教程，带你从零到一，以及scrapy框架
05-09
Python爬虫教程是一个全面的学习资源，旨在帮助初学者掌握网络数据抓取的技能，逐步从零基础提升到能够独立编写高效、稳定的爬虫程序。在这个过程中，教程涵盖了多个关键知识点，包括JavaScript逆向工程、Selenium...
tokitoki-js:一个小小的 toki pona 解析器 javascript 库
05-30
而 tokitoki-js，正如其名，是一个专为解析 Toki Pona 语言设计的小巧 JavaScript 库，致力于帮助开发者在 Web 应用程序中处理和理解这种语言。 Tokitoki-js 的核心功能在于它的解析能力。作为一个 JavaScript 库，...
multi-language:一个JS库，可轻松向您的网站添加多种语言
03-11
多语言.js 一个JS库，可轻松向您的网站添加多种语言。 零依赖！ 如何安装 要将multi-language.js应用于您的网站/应用，您可以： 使用CDN服务（推荐） 复制下面的代码，并将其粘贴到您的<head>元素内。 [removed][removed] 或者 自己服务 下载multi-language.js并从您的来源提供它。 查看此存储库的发行版以下载源代码。 完成后将其解压缩。 转到根文件夹中的目录dist ，将文件mu
JavaScript_一个高级浏览器自动化库.zip
最新发布
05-20
在这个“JavaScript_一个高级浏览器自动化库.zip”文件中，我们可以推测其内容可能与使用JavaScript进行浏览器自动化测试或任务自动化有关。 “nightmare_master.zip”这个子文件名暗示了一个名为Nightmare的...
h5+js传统项目多语言实现i18n
weixin_44340123的博客
03-15 639
大体思路是给每个文字标签设置一个自定义属性data-，再通过foreach 循环querySelectorAll获取的有这个属性的标签，标签，通过自定义属性的属性值去语言包中寻找对应的字段，最后通过textContent或者innerText来更新文字内容。
js网站国际化，多国语言切换【详解】
逍遥的博客
12-08 5709
JS网站国际化,多国语言切换【详解】 作者：Anmbition 在web开发过程中通常会碰到需要多国语言支持的需求，我也看过一些文档，但写的都不尽人意，最终我整理了一套通过js代码完成解决方案，并对代码进行了很大程度的优化，在使用过程中只需极少的代码即可完成。 第一步：核心JS 拷贝生成一个js文件 【switch_language.js】 /*************************...
Next.js多语言接入方案
油墨香^-^的博客
03-14 1170
是什么，不然多语言的页面就没法渲染具体内容（除了构建的时候静态化），因此需要从客户端的请求信息中获取。服务端渲染的过程基本上都会有一个渲染上下文的概念，因此我们在使用合适的方式获取需要渲染的。在 Next.js 这类型的框架，我们需要考虑服务端的初始化和客户端的初始化的问题。，我们有两个地方进行选择，选择之前我们来看一下 Next.js 渲染执行的代码顺序。中可以进行初始化，但没有太多必要，实现起来会麻烦不少。初始化之前，我们需要知道需要知道客户端需要渲染的。后，我们需要在渲染上下文的上方进行尽早初始化。
2024年最新前端不使用 i18n，如何优雅的实现多语言？_前端多语言方案(1)，32岁的程序员被裁
2401_84925760的博客
05-15 584
我这里的 VFrame.js 是直接建在Src 目录下的。
Java/JSP界面实现多国语言支持，支持插入变量，还要考虑名词单复数
ZLK1214的专栏
03-26 615
在Java/JSP中，通常使用.properties文件定义各语言的文本，里面可以用{0},{1},{2}表示待插入的变量值（之所以用数字，不用%s、%d等占位符，是因为不同语言的语序不同）。用java.util.ResourceBundle类的ResourceBundle.getBundle方法读取.properties文件。用java.text.MessageFormat类替换{0},{1},{2}等占位符。
2024年前端不使用 i18n，如何优雅的实现多语言？_前端多语言方案，2024年最新京东web前端面试题
2401_84619530的博客
05-12 343
排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。我这里采用的方案是在 new Vue 之前去调用我们当前的 VFrame方法，这样我们可以确保 我们的多语言所有的 [ key ] [ value ] 可以成功加载，具体步骤请看下方！我这里的 VFrame.js 是直接建在Src 目录下的。
JavaScript教程：从入门到精通-理解数组实例与语言特性
1. 首先，你需要定义一个数组。这通常通过使用`Array`构造函数完成，例如： ```javascript var Myarray = new Array(); ``` 或者指定数组的长度，如： ```javascript var Myarray = new Array(n); // 其中n是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大帅老猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值