Vue插件开发-纯数据模式

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

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

我要实现的i18n需求如下：

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

可以看出来，其实就是要模拟vue-i18n做个组件~

再来看下开发文档

首先翻一下资料，看看百度里的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的源码实现，还能解锁更多姿势哦~