前端国际化插件

最新推荐文章于 2024-04-14 09:35:02 发布

baixue_1990

最新推荐文章于 2024-04-14 09:35:02 发布

阅读量824

点赞数

分类专栏： JavaScript 文章标签：前端国际化插件

本文链接：https://blog.csdn.net/baixue_1990/article/details/52277185

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前几天因为工作需要，写了个前端国际化的插件，现公开出来和大家分享，若有不足，请大家踊跃给出意见。

JavaScript代码：i18n.js

$(function(){
    // 去掉字符串两端的空白字符
    function trim(str){
        return str.replace(/\s+/, '');
    }

    // 翻译文档标题
    function translateTitle(){
        var title = trim(document.title);

        if(title.substr(0, 2) == '{{' && title.substr(-2) == '}}'){
            var newStr = title.substr(2).slice(0, -2);

            document.title = uc_resource[newStr];
        }
    }

    // 翻译文本
    function replaceText(node, str){
        if(str.substr(0, 2) == '{{' && str.substr(-2) == '}}'){
            var newStr = str.substr(2).slice(0, -2);

            node.nodeValue = uc_resource[newStr];
        }
    }

    // 翻译textNode
    function translateTextNode(rootPath){
        var children = rootPath.childNodes;

        for(var i = 0, len = children.length; i < len; i++){
            var currentNode = children [i];

            if(currentNode.nodeType == 3){ // Text类型
                var cnv = trim(currentNode.nodeValue);

                replaceText(currentNode, cnv);
            }else{
                translateTextNode(currentNode);
            }
        }
    }


    // 翻译
    function translate(rootPath){
        translateTitle();
        translateTextNode(rootPath);
    }

    // 应用
    var body = document.getElementByTagName("body")[0];
    translate(body);
});

资源文件：resource.js

uc_resource = {
    UserName: "张三",
    UserSex: "女"
};

HTML文件：index.html

<!DOCTYPE html>
<html>
    <head>
        <title>国际化</title>
        <script src="resource.js"></script>
        <script src="jQuery.js"></script>
        <script src="i18n.js"></script>
    </head>
    <body>
        <div>
            <div class="username">{{UserName}}</div>
            <div class="usersex">{{UserSex}}</div>
        </div>
    </body>
</html>