10 实现简单的插件 - i18n #12

xwjie · 2018-01-13T13:38:23Z

在之前的基础上，简单的实现一个i18n的小插件，一共只有10几行代码。

测试代码

<!DOCTYPE html>
<html>
<head>
	<title>Xiao框架之helloworld</title>
	<script src="../dist/xiao.js"></script>
</head>
<body>
<h1>简单的国际化插件i18n测试</h1>
<div id="demo1">

<h1>1层的信息：{{ $t("msg1") }}</h1>
<h1>2层的信息：{{ $t("message.hello") }}</h1>

</div>
<a href="#" onclick="i18n.locale='en';app.$forceUpdate()">英语</a>
<a href="#" onclick="i18n.locale='cn';app.$forceUpdate()">中文</a>

<script>

var messages = {
  en: {
    msg1: 'message 1',
    message: {
      hello: 'hello world'
    }
  },
  cn: {
    msg1:'信息1',
    message: {
      hello: '你好世界'
    }
  }
}

var i18n = {
  locale: 'cn', // set locale
  messages, // set locale messages
}

var app = new Xiao(	{
	i18n: i18n
});

app.$mount("#demo1");
</script>

</body>
</html>

增加强制刷新方法

强制重新渲染一次，把render对应的watch update一下即可。

class Xiao{


  /**
   * 强制刷新
   */
  $forceUpdate(){
    this._renderWatcher.update()
  }

}

实现i18n插件代码

/**
 * 简单的i18n国际化插件
 * @param {*} Xiao 
 */
export default function (Xiao: Xiao) {

  // 扩展一个实例方法
  Xiao.prototype.$t = function (key) {
    const instance = this.$options.i18n

    console.log('i18n', instance)

    if (instance) {
      const keys = key.split('.')

      let msg = instance.messages[instance.locale]

      for (let i = 0; i < keys.length; i++) {
        msg = msg[keys[i]]
      }

      return msg
    }
    else {
      return key
    }
  }

  console.log('i18n组件注册完毕')
}

注册插件

import i18n from './plugins/i18n'

// 注册默认插件
Xiao.use(i18n)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

10 实现简单的插件 - i18n #12

10 实现简单的插件 - i18n #12

xwjie commented Jan 13, 2018 •

edited

10 实现简单的插件 - i18n #12

10 实现简单的插件 - i18n #12

Comments

xwjie commented Jan 13, 2018 • edited

测试代码

增加强制刷新方法

实现i18n插件代码

注册插件

xwjie commented Jan 13, 2018 •

edited