1. 程式人生 > >一次國際化記錄以及平鋪JSON數據

一次國際化記錄以及平鋪JSON數據

inside new 其他 tolower 總結 方便 scrip 再看 rev

? 寫這個方法的原因是因為我們需要改版國際化,因為相同的項目有其他分支做過國際化,但是主版本沒有進行過國際化,目前需要修改主版本的國際化,但是因為國際化的方式做了結構上的調整所以寫了這個工具方法方便去方便修改。

下面我做一下說明

這個是目前版本的國際化方式,是按照目錄模塊進行的國際化,每個目錄一個文件 放在對應國際化目錄中,這樣做其實為了方便翻譯的時候進行查找和翻譯,相同的變量可以更好的復用。

目錄:

技術分享圖片

內容:

技術分享圖片

再看看以前的版本

以前版本也是按照模塊去劃分的,但是區別是每個組件的文件都做了一次翻譯,這樣做的好處很明顯,扁平化查找翻譯文件很方便,因為對應翻譯的組件名稱就是當前組件的名稱。

目錄:

技術分享圖片

組件的內容:

技術分享圖片

所以可以看到他們的內容是一個是有層級結構的,另外一個是做了平鋪,目前我覺得平鋪好一些,因為去掉前面相同的也很容易找到最後的變化的key。

So我寫了一個從有層級結構的json轉換成平鋪json的函數。

const a = {
    TITLE: '基本設置',
    FIELD_TITLE: {
        BASIC_INFO: '基本信息',
        APP_IMAGE: '標題欄圖片',
        SPACE_LOGO: '空間logo'
    },
    TIP_MSG: {
        APP_IMAGE: '上傳圖片定制App中的標題欄顯示',
        APP_INSIDE_PREVIEW: 'App內效果預覽',
        PREVIEW: '預覽',
        SPACE_LOGO: '上傳圖片定制App中的空間logo顯示'
    },
    DESCRIPTION: {
        APP_IMAGE: '請選擇背景透明或白色的jpg, jpeg, 或png文件',
        SPACE_LOGO: '請選擇jpg, jpeg, 或png文件',
    }
}

function parseJSON (obj, parent) {
    if (typeof obj === 'string') {
        return obj
    }
    const keys = Object.keys(obj)
    const isKeys = keys.length
    if (!isKeys) {
        return obj
    }
    let json = {}
    keys.forEach((value) => {
        const newParent = `${parent ? `${parent}.` : ''}${value.toLowerCase()}`
        const k = typeof obj[value] === 'string' ? null : Object.keys(obj[value])
        if (k) {
            json = {
                ...json,
                ...parseJSON(obj[value], newParent)
            }
        } else {
            json[newParent] = obj[value]
        }
    })
    return json
}

console.log('-------   ', JSON.stringify(parseJSON(a, 'space')))

這裏可以看到結果,並且支持任何深的層級

{
  "space.title": "基本設置",
  "space.field_title.basic_info": "基本信息",
  "space.field_title.app_image": "標題欄圖片",
  "space.field_title.space_logo": "空間logo",
  "space.tip_msg.app_image": "上傳圖片定制App中的標題欄顯示",
  "space.tip_msg.app_inside_preview": "App內效果預覽",
  "space.tip_msg.preview": "預覽",
  "space.tip_msg.space_logo": "上傳圖片定制App中的空間logo顯示",
  "space.description.app_image": "請選擇背景透明或白色的jpg, jpeg, 或png文件",
  "space.description.space_logo": "請選擇jpg, jpeg, 或png文件"
}

在編寫程序的過程中,可以自己編寫一些小工具去方便的處理相同的事情,我覺得這是我們學編程、學做程序的意義,類似於歸類,處理相同事務,這樣我們的生活會更美好 O(∩_∩)O哈哈~

我覺得寫寫文字也挺好的,寫的寫的就可以總結一些更深刻的道理。

一次國際化記錄以及平鋪JSON數據