Vue插件开发-纯数据模式

最近忽然心血来潮(嗯,闲的~),想捣鼓一下Vue的插件开发。刚好项目中有i18n的需求,但是不想引用vue-i18n,正好可以自己实现一个,顺便愉快的装个**【哔——】**。

首先,分析一下自身的需求。

我要实现的i18n需求如下:

  1. 游戏站点的需求,有不同国家地区的游戏,语言字段是通过ajax请求返回的
  2. i18n插件的用法是 ($t("字段名")),返回值是翻译的内容,这点比较友好,要有
  3. 由于语言是ajax的返回结果,需要有个方法能切换到适配的语言。
  4. 返回的语言字段并不标准,要转换一下。
  5. 获取到ajax的语言结果之后,要本地保存一下,下次再进入页面时,有保存记录就不再请求ajax
  6. 预留一个拓展功能,可以临时插入些翻译,至于嘛时候用,不是很清楚~

可以看出来,其实就是要模拟vue-i18n做个组件~
Vue插件开发-纯数据模式_第1张图片

再来看下开发文档

首先翻一下资料,看看百度里的vue插件开发教程,可以发现,都是用了Vue 的全局 API:(Vue.extend) 实现插件功能的。
按官网文档描述,这个API的功能是

使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

其实就是一个生成vue子类构造函数的方法,new之后,得到一个拥有独立生命周期、作用域、变量的vue实例,和我们的vue单文件组件是一样的。详细可翻阅官方文档,不多嘴误导了~

准备完毕,开始进入正片~

有需求和文档之后,动手就比较顺畅了。
先准备翻译的文件,不贴那么多,上两示例文件吧

// kr.js 韩文翻译
module.exports = { "test": "테스트" }
// zh-cn.js 中文
module.exports = { "test": "测试" }

新建个 i18n.js,引入两个翻译后开始操作

'use strict'

/*
 * @description i18n組件
 * @author momo
 * @create 2019/06/14
 */

// 语言包
import ZHCN from "./zh-cn.js"
import KRfrom "./kr.js"
const langs = {
    ZHCN,
    KR
}
    
// cookie方法,写在了utils文件里了
const { cookie } from "./utils.js"

// 语言字段去除横线和下划线,转大写
const key_format = (key) => {
    return key.replace(/[-_]+/g, '').toUpperCase()
}

const I18N = {}

I18N.install = function(Vue) {

    /* 构造器生成vue子类
     * 因为不需要dom的内容,template直接忽略不写
     * 挂载也是不需要的,我只需要一个vue的实例来承载数据
     * /
  
    const Constructor = Vue.extend({
        data() {
            return {
                lang: 'ZHCN', // 默认语言
                i18n_data: null // 语言数据
            }
        },
        methods: {
            // 查找翻译方法
            search(key) {
                //尚未完成初始化或者找不到翻译的时候,返回null
                let data = this.i18n_data
                if (!data || !data[key]) return 'null'

                return data[key]
            },
            // 设置语言,并记录
            setLang(lang) {

                // 转换语言字段
                if (lang) this.lang = key_format(lang)

                // 本地保存
                cookie.set('lang', this.lang)
                localStorage.setItem('lang', this.lang)

                // 切换语言数据
                this.i18n_data = langs[this.lang]
            },
            // 向当前语言中插入新翻译
            addLang(key, val) {
                // 完成初始化的时候,才插入新翻译
                let lang = this.i18n_data
                if (lang) lang[key] = val
            }
        },
        created() {
            // 组件实例化的时候,在created钩子函数中初始化语言数据
            let lang = cookie.get('lang') || localStorage.getItem('lang')
            this.setLang(lang)
        }
    })

    // 实例化上面的子类
    const instance = new Constructor()

    // 创建Vue全局的方法,用于调用实例的属性和方法
    Vue.prototype.$t = key => instance.search(key)
    Vue.prototype.$i18n = {
        setLang(lang) {
            instance.setLang(lang)
        },
        addLang(key, val) {
            instance.addLang(key, val)
        },
        lang: instance.lang,
        data: instance.i18n_data
    }

}

export default I18N

而调用也简单,在全局顶端引入这个组件,use之后即可使用

// 引用
import i18n from './i18n.js'
Vue.use(i18n)

// 使用
this.$i18n.setLang("kr")	// 切换语言
this.$t("test") 			// => 得到翻译:테스트

因为是vue的子类实例,它的变量是双绑的,在切换语言的时候,翻译的内容也会变化。

当然,如果你要在非vue实例中使用i18n,那更简单,上述操作直接挂在window中即可。

至此,一个简单的vue版i18n插件就完成了。是不是特别简单?
如果觉得好玩,不妨去看下Vue的源码实现,还能解锁更多姿势哦~

Vue插件开发-纯数据模式_第2张图片

你可能感兴趣的:(vue,js,vue,vue插件)