一个简单的i18N脚本,如果在单页面展示页面中你有切换语言的需求,那么可以尝试使用它。

如果有任何建议或者意见,欢迎反馈。

代码没几行,去掉注释的话…

(function (cfg) {
    "use strict";
    /**
     * @file:   i18N.js
     * @desc:   一个简单的i18N.js
     * @author: [soulteary](soulteary@qq.com)
     * @date:   2014.06.21
     * @useage:
     *
     *  --default HTML structure:
     *      <body>
     *        <h1 data-lang-en="英文">中文</h1>
     *        ...
     *      </body>
     *
     *
     *  --default out side config:
     *
     *      {"ver": "2014.06.21", "win": window, "doc": document, "api": "lang"}
     *
     *
     *  --default inner config:
     *
     *      var config = {
     *          "version": cfg.ver,         //版本号
     *          "key": "data-lang-",        //DOM节点保存文本的命名空间前缀
     *          "tag": "data-lang",         //保存到父节点上的当前语言标志
     *          "rule": {                   //语言规则
     *              "zh": "zh-CN",
     *              "en": "en-US"
     *          },
     *          "default": "zh"             //默认语言
     *      };
     *
     *
     *  --default open api:
     *
     *      window.lang('zh');
     *      window.lang('en');
     *
     */

    /**
     * 缓存全局对象
     */
    var win = cfg.win,
        doc = cfg.doc;

    /**
     * 要进行翻译的对象
     * @type {NodeList}
     */
    var wrap = doc.getElementsByTagName('body')[0];
    var elems = wrap.getElementsByTagName('*');

    /**
     * 声明全局配置
     * @type {{version: string, key: string}}
     */
    var config = {
        "version": cfg.ver,         //版本号
        "key": "data-lang-",       //DOM节点保存文本的命名空间前缀
        "tag": "data-lang",         //保存到父节点上的当前语言标志
        "rule": {                   //语言规则
            "zh": "zh-CN",
            "en": "en-US"
        },
        "default": "zh"             //默认语言
    };

    /**
     * 获取默认的i18N设置
     * @param short
     * @returns {string}
     */
    var getLang = function (short) {
        var sets = doc.cookie;
        if (sets) {
            return short ? (JSON.parse(sets)).lang : config.rule[(JSON.parse(sets)).lang];
        } else {
            return short ? config.default : config.rule[config.default];
        }
    };

    /**
     * 初始化页面的hash
     * 优先从cookie中获取,如果获取不到,那么使用默认配置
     */
    win.location.hash = "#!/" + getLang();

    /**
     * 切换页面语言
     * @param input
     * @returns {boolean}
     */
    var switchLang = function (input) {
        if (!input) {
            return false;
        }
        try {
            for (var lang in config.rule) {
                //如果请求切换语言存在于配置中,并且要切换的语言不是当前语言
                if (input === lang && getLang() !== config.rule[lang]) {
                    //切换翻译
                    translate(lang);
                    //更新uri hash
                    win.location.hash = "#!/" + config.rule[lang];
                    //更新cookie
                    doc.cookie = '{"lang":"' + lang + '"}';
                    break;
                }
            }
            return true;
        } catch (e) {
            return false;
        }
    };

    /**
     * 翻译所有元素
     * @returns {boolean}
     */
    var translate = function (to) {

        var toLang = config.key + to,
            curLang = config.key + (wrap.hasAttribute(config.tag) ? wrap.getAttribute(config.tag) : config.default);

        /**
         * 目标语言不相等的时候进行翻译
         */
        if (toLang === curLang) {
            return false;
        }

        /**
         * 翻译每一个元素
         * @param elem
         * @returns {boolean}
         */
        var trans = function (elem) {
            var toText;
            try {
                if (elem.hasAttribute(toLang)) {
                    toText = elem.getAttribute(toLang);
                    elem.setAttribute(curLang, elem.innerHTML);
                    elem.innerHTML = toText;
                }
                return true;
            } catch (e) {
                return false;
            }
        };

        /**
         * translate each element.
         */
        try {
            for (var i = 0, j = elems.length; i < j; i++) {
                trans(elems[i]);
            }
            //更新当前语言到wrap dom
            wrap.setAttribute(config.tag, to);
            return true;
        } catch (e) {
            return false;
        }
    };

    /**
     * 公开函数到全局
     */
    window[cfg.api] = switchLang;

    if (getLang() !== config.default) {
        translate(getLang(true))
    }

})({"ver": "2014.06.21", "win": window, "doc": document, "api": "lang"});