2024年前端不使用 i18n，如何优雅的实现多语言？_前端多语言方案，2024年最新京东web前端面试题

2401_84619530

于 2024-05-12 11:00:10 发布

阅读量298

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84619530/article/details/138749241

版权

程序员专栏收录该内容

95 篇文章 0 订阅

订阅专栏

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

二叉树层序遍历
B 树的特性，B 树和 B+树的区别
尾递归
如何写一个大数阶乘？递归的方法会出现什么问题？
把多维数组变成一维数组的方法
知道的排序算法说一下冒泡快排的原理
Heap 排序方法的原理？复杂度？
几种常见的排序算法，手写
数组的去重，尽可能写出多个方法
如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
知道数据结构里面的常见的数据结构
找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
合并两个有序数组
给一个数，去一个已经排好序的数组中寻找这个数的位置（通过快速查找，二分查找）

 "text": "狀態"

}
]
}

关于ERP 查询时的数据结构这里就不一一列举了，和上面类似！

2. ERP | H5 | 微信小程序用时查询的数据结构：

// ERP | H5 | 微信小程序 用时的查询
// language_texts 是我们再 SQL Table 中存储的所有多语言集合

language_texts : {
    key : 当前语言的value, // 如何知道当前语言，我们稍后再说
    key : value,
    key : value,
    ... : ...
    ... : ...
}

3. 前端如何使用已经保存好的数据结构呢？

其实有了上面查询我们就可以用到 language_texts[ key ] 的方式去取出来我们想要的语言数据；使用的话也比较简单，js html 中的不同使用方法下面给大家一一讲解；

值得我们思考的问题是我们该何时把当前语言集全部查询出来？

我这里采用的方案是在 new Vue 之前去调用我们当前的 VFrame方法，这样我们可以确保我们的多语言所有的 [ key ] [ value ] 可以成功加载，具体步骤请看下方！

二、实现步骤

1. 新建 VFrame.js 文件

我这里的 VFrame.js 是直接建在Src 目录下的

import axiso from 'axios'
import { getAll } from '@/api/uxretail/application.js'
const format = require('string-format')


export default class VFrame {

    static host;
    static wsUrl;

    /**
     * 在vue实例化之前调用异步start方法
     */
    static start() {
        return new Promise((resolve, reject) => {
            axiso.request({
                url: "/static/appconfig.json",
                method: "get",
            }).then(result => {
                VFrame.host = (result.host || window.location.host);
                VFrame.wsUrl = "ws://" + VFrame.host + ":" + result.wsPort + "/ws/notify/";
                VFrame.getAll(resolve);
            }).catch(error => {
                reject(error);
            });
        });
    }

    static getAll(resolve) {
        getAll().then(res => {
            VFrame.applicationResource = res
            resolve()
        });
    }


    static l(key, ...args) {
        if (localStorage.getItem("ux_debug_language")) {
            return `[${key}]`
        }

        if (!VFrame.applicationResource) {
            return key
        }
        if (VFrame.applicationResource.language_texts) {
            let res = VFrame.applicationResource.language_texts[key];
            if (res) {
                return format(res, args);
            } else {
                return `[${key}]`
            }
        }
        return key;
    }
}

2. main.js 中使用我们新建的 VFrame.js

上面我们说到 VFrame 的执行时机，我们可以看下面代码！

import Vue from "vue";
import App from "./App";
import store from "./store";
import router from "./router";
import VFrame from "./framework/VFrame";


Vue.prototype.l = VFrame.l;


// 这个为了方便用 VFrame ，并没有其他用途
Vue.prototype.$ux = {
  v: VFrame
}


// 重要的就是这一步，VFrame 的执行时机
VFrame.start().then(() => {
  //set layout to store
  store.commit("dragLayout/initLayout")
  new Vue({
    el: "#app",
    router,
    store,
    render: h => h(App)
  });
});

3. html js 中使用我们配置好的多语言

Html 中使用: 【 l(“Key”) 】

<div> {{ l('ManyLanguage') }} </div>

<el-form :model="item" :rules="tableRules">
    <el-form-item :label="l("ManyLanguage")" prop="language">
        <el-input v-model="item.language"></el-input>
    </el-form-item>

</el-form>

js 中使用: 【 this.l(“Key”) 】

export default{

  data(){
    return {
        language:this.l("ManyLanguage")
    }
  },

  created(){
  
    console.log(this.l("MyLanguage"))
  },
}

经过上面一番操作我们已经可以在管理系统中成功的调用当前多语言了；

那么我们 VFrame 中的 getAll() API 调用时如何返回我们刚好我们想要的语言呢？

我们就要处理【 request.js 】中的封装，在请求拦截中去携带我们自定义的请求头信息，后端大佬去对应的处理即可！

import Cookies from "js-cookie";
import axios from "axios";


axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 120000
});


service.interceptors.request.use(
  config => {

    var cultureName = Cookies.get(CONSTANT.UX_LANGUAGE);
    if (cultureName) {
      config.headers[CONSTANT.UX_LANGUAGE] = cultureName; // 让每个请求携带自定义token 请根据实际情况自行修改
    }

})

三、微信小程序中使用

实现步骤就像上面写的步骤一样，那么注意点是什么呢( 本文用的是uniapp去开发的微信小程序，也是基于 vue 的语法 )？

在 uniapp 里面我们不能写的像我们上面那样，因为 uniapp 是不支持的，那么这个时候我们如何去确保页面加载完成时，多语言可以全部返回呢？

答：做一个预加载页，当我们多语言成功返回以后跳转至业务页面

1. 完成上方基础 VFrame 创建，main.js 中挂载，但是不要在用 new vue 勿动(不然会报错)！

因为小程序有 Tabbar 所以我们的 VFrame.js 需要多一个方法；

import {
	request
} from "util/request.js";
export default class VFrame {
	static applicationResource;

	/**
	 * 在vue实例化之前调用异步start方法
	 */
	static start() {
		return new Promise((resolve, reject) => {
			request({
				url: '/application/getAppAll', //activityType=0 查询全部
				method: 'GET',
				hideLoading: true,
				data: {
					orgId: uni.getStorageSync('companyOrgId')
				}
			}).then(res => {
				VFrame.applicationResource = res.data.result
				resolve(res)
			});
		});
	}

	static l(key, args) {
		if (VFrame.applicationResource && VFrame.applicationResource.language_texts) {
			let res = VFrame.applicationResource.language_texts[key];
			if (res) {
				return res;
			} else {
				return `[${key}]`
			}
		}
		return key;
	}

	static tabbarLanguage(tabbarList) {
		let language = uni.getStorageSync('language') || 'zh-CN'
		if (language) {
			switch (language) {
				case 'en-GB':
					tabbarList[0].text = "Coupons"
					tabbarList[1].text = "Stamp"
					tabbarList[2].text = "Account"
					tabbarList[3].text = "Discount"
					tabbarList[4].text = "Favourite"
					break


## 最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

				break


## 最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

2401_84619530

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
2024年前端不使用 i18n，如何优雅的实现多语言？_前端多语言方案，2024年最新京东web前端面试题

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。我这里采用的方案是在 new Vue 之前去调用我们当前的 VFrame方法，这样我们可以确保我们的多语言所有的 [ key ] [ value ] 可以成功加载，具体步骤请看下方！我这里的 VFrame.js 是直接建在Src 目录下的。
复制链接

扫一扫