成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

踩坑vue國(guó)際化（V18n）+ jquery國(guó)際化（jquert.i18n.properties.j

Jeff / 2150人閱讀

摘要：首先新建一個(gè)存放語(yǔ)言的文件目錄把提取后的中文英文放在對(duì)應(yīng)的文件中如下圖通過(guò)調(diào)用內(nèi)部方法，最后別忘了在中引入，綁定在實(shí)例上。注意這里養(yǎng)成良好的編程習(xí)慣，在寫(xiě)邏輯判斷的時(shí)候，不要根據(jù)中文去判斷，不然做國(guó)際化要改起來(lái)很麻煩。

目前公司在搞國(guó)際化，雖然剛開(kāi)始接觸，但還是遇到了一些問(wèn)題，如對(duì)你有幫助，煩請(qǐng)點(diǎn)個(gè)贊，謝謝。

先分享一下vue的國(guó)際化，目前vue的國(guó)際化采用的是vue-i18n。
首先新建一個(gè)存放語(yǔ)言的文件目錄,把提取后的中文、英文放在對(duì)應(yīng)的文件中如下圖：

通過(guò)Vue.use調(diào)用內(nèi)部install方法，最后別忘了在main.js中引入，綁定在vue實(shí)例上。
在組件的html中語(yǔ)法:

在js中語(yǔ)法:

在js中調(diào)用 this.$i18n.locale = language（例：en_US，跟語(yǔ)言文件export出的對(duì)象名稱保持一致）實(shí)現(xiàn)修改語(yǔ)言。

注意這里：
1、養(yǎng)成良好的編程習(xí)慣，在寫(xiě)邏輯判斷的時(shí)候，不要根據(jù)中文去判斷，不然做國(guó)際化要改起來(lái)很麻煩。比如使用if (xxx === "中文")、xxx.indexof(‘中文’)、switch(xxx) { case ’中文‘: }等；
2、在組件created之后mounted之前V18n才會(huì)執(zhí)行替換對(duì)應(yīng)的語(yǔ)言，就意味著有些人在data（）里面用中文初始化了一些屬性，但是此時(shí)V18n還沒(méi)有執(zhí)行，于是一些屬性被賦值成了$t("xxxxx")，即鍵值。

如圖，我在data中初始化了title屬性，然后在created時(shí)候打印該屬性，發(fā)現(xiàn)控制臺(tái)報(bào)了2個(gè)警告，然后該屬性被賦值成了鍵值。解決方案就是：在data中初始化時(shí)不指定默認(rèn)值，在mounted的時(shí)候進(jìn)行賦值就ok了

  mounted() {
    setTimeout(() => {
      console.log("mounted():"執(zhí)行);
      let ckText = {
        title: this.$t("pro_container.test"),
        hoverText: this.$t("pro_container.94"),
        AvgArr: []
      };
      this.ckText = ckText;
    }, 20);
  }

之后就可以手動(dòng)調(diào)用this.$i18n.locale = en_US方法實(shí)現(xiàn)中英文切換了，也可以根據(jù)cookie去賦值.

分享一個(gè)kiwi插件，kiwi是一款提取替換中文的插件，喜歡的也可以試試，十分好用，大家可以看一下鏈接中的文檔。

最后簡(jiǎn)單說(shuō)一下jq的國(guó)際化吧，引入jquery.i18n.properties.js文件,配置項(xiàng)如下：

    function loadI18nProperties(lang) {
        $.i18n.properties({
            name: "strings", // 對(duì)應(yīng)國(guó)際化文件名稱
            path: "/static/js/i18n/", // 對(duì)應(yīng)國(guó)際化文件目錄
            mode : "map", //用Map的方式使用資源文件中的值
            language: lang, // 調(diào)用國(guó)際化語(yǔ)言
            callback: function() { // 回調(diào)函數(shù)
            }
    });
    $(document).ready(function() {
        loadI18nProperties("zh_CN");
    });

name屬性指的是國(guó)際化的文件名，jq的存放語(yǔ)言的文件是.properties為后綴的，以上面的例子，語(yǔ)言文件名為strings_en_US、strings_zh_CN。如果path寫(xiě)的不對(duì)的話，會(huì)報(bào)一個(gè)跨域的錯(cuò)誤，提示讓你去修改服務(wù)器配置文件去支持.properties文件，這里注意一下就好了。其他的在html中使用自定義屬性方式賦值，js中就是簡(jiǎn)單的變量的方式。修改語(yǔ)言，就是將loadI18nProperties（lang）傳遞參數(shù)就去就可以了。

// html


// js中
var Title = $.i18n.prop("js.UserName");

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/109020.html

相關(guān)文章

  • 前端通用國(guó)際化解決方案

    摘要：前端通用國(guó)際化解決方案背景前端技術(shù)日新月異，技術(shù)棧繁多。接下來(lái)針對(duì)這幾塊內(nèi)容并結(jié)合日常的開(kāi)發(fā)流程說(shuō)明國(guó)際化的通用解決方案。 文章首發(fā)于個(gè)人blog，歡迎大家關(guān)注。 DI18n 前端通用國(guó)際化解決方案 背景 前端技術(shù)日新月異，技術(shù)棧繁多。以前端框架來(lái)說(shuō)有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等構(gòu)建工具去滿足日常的開(kāi)...

    lingdududu 評(píng)論0 收藏0

  • 前端常用插件、工具類庫(kù)匯總（下）

    摘要：上一篇前端常用插件工具類庫(kù)匯總上內(nèi)容摘要?jiǎng)赢?huà)庫(kù)滾動(dòng)庫(kù)輪播圖滾屏彈出框消息通知下拉框級(jí)聯(lián)選擇器顏色選擇器時(shí)間日期處理表單驗(yàn)證分頁(yè)插件本篇延續(xù)上一篇的內(nèi)容繼續(xù)給大家?guī)?lái)一系列關(guān)于前端插件工具類的內(nèi)容。 showImg(https://segmentfault.com/img/bVbjsMh?w=900&h=383); 前言 對(duì)本文感興趣可以先加個(gè)收藏，也可以轉(zhuǎn)發(fā)分享給身邊的小伙伴，以后遇到...

    ideaa 評(píng)論0 收藏0

  • 前端國(guó)際化的另類方式

    摘要：前不久做了一個(gè)國(guó)際化的項(xiàng)目，基于和，里面用到了國(guó)際化，使用方式也很簡(jiǎn)單然后，頁(yè)面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語(yǔ)言顯示在頁(yè)面，比如在中文環(huán)境下顯示中文，英文環(huán)境下顯示英文，用戶看得到才算數(shù)。 關(guān)于國(guó)際化 一個(gè)項(xiàng)目發(fā)展到一定的環(huán)境或者一開(kāi)始就是為多國(guó)打造的，就需要考慮國(guó)際化了。簡(jiǎn)單來(lái)說(shuō)，就是一套頁(yè)面，多套語(yǔ)言。 前不久做了一個(gè)國(guó)際化的項(xiàng)目，基于...

    FullStackDeveloper 評(píng)論0 收藏0

  • 前端國(guó)際化的另類方式

    摘要：前不久做了一個(gè)國(guó)際化的項(xiàng)目，基于和，里面用到了國(guó)際化，使用方式也很簡(jiǎn)單然后，頁(yè)面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語(yǔ)言顯示在頁(yè)面，比如在中文環(huán)境下顯示中文，英文環(huán)境下顯示英文，用戶看得到才算數(shù)。 關(guān)于國(guó)際化 一個(gè)項(xiàng)目發(fā)展到一定的環(huán)境或者一開(kāi)始就是為多國(guó)打造的，就需要考慮國(guó)際化了。簡(jiǎn)單來(lái)說(shuō)，就是一套頁(yè)面，多套語(yǔ)言。 前不久做了一個(gè)國(guó)際化的項(xiàng)目，基于...

    everfight 評(píng)論0 收藏0

  • 前端國(guó)際化的另類方式

    摘要：前不久做了一個(gè)國(guó)際化的項(xiàng)目，基于和，里面用到了國(guó)際化，使用方式也很簡(jiǎn)單然后，頁(yè)面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語(yǔ)言顯示在頁(yè)面，比如在中文環(huán)境下顯示中文，英文環(huán)境下顯示英文，用戶看得到才算數(shù)。 關(guān)于國(guó)際化 一個(gè)項(xiàng)目發(fā)展到一定的環(huán)境或者一開(kāi)始就是為多國(guó)打造的，就需要考慮國(guó)際化了。簡(jiǎn)單來(lái)說(shuō)，就是一套頁(yè)面，多套語(yǔ)言。 前不久做了一個(gè)國(guó)際化的項(xiàng)目，基于...

    blastz 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<