H5国际化的实现[基于i18n]

分类：MUI

要过年啦，客户的项目还没开始动工，客户就喊着要客户端支持国际化，要中英文双语的。
....度娘....，果然还是有解决方案的。依然是基于 jquery 的，学名：i18n
首先呢，还是加引用，可以是这样的。

<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>  
        <script type="text/javascript" src="js/jquery.i18n.properties-min-1.0.9.js"></script>

其次呢，Dom结构咯；这里我就简单的放了俩按钮，第一个是表现的，第二个用来点击触发改变用的；

<div class="mui-content">  
            <button id='btn'></button>  

            <button id='changelanguage'></button>  
        </div>  
最后呢，就是js代码了
``````javascript  
<script>  
            var lang = '';  
            $(function() {  
                lang = (jQuery.i18n.browserLang().substring(0, 2)); //默认从浏览器语言读取  
                jQuery.i18n.properties({  
                    name: 'strings',  
                    path: 'i18n/', //资源文件路径  
                    mode: 'map', //用Map的方式使用资源文件中的值  
                    language: lang,  
                    callback: function() { //加载成功后设置显示内容  
                        $('#btn').html($.i18n.prop('btn'));  
                        $('#changelanguage').html($.i18n.prop('changelanguage'));  
                    }  
                });  
            })  
            document.getElementById("changelanguage").addEventListener('tap', function() {  
                if ('zh' == lang) {  
                    lang = 'en';  
                } else {  
                    lang = 'zh';  
                }  
                jQuery.i18n.properties({  
                    name: 'strings',  
                    path: 'i18n/', //资源文件路径  
                    mode: 'map', //用Map的方式使用资源文件中的值  
                    language: lang,  
                    callback: function() { //加载成功后设置显示内容  
                        $('#btn').html($.i18n.prop('btn'));  
                        $('#changelanguage').html($.i18n.prop('changelanguage'));  
                    }  
                });  
            });  
        </script>

好了，上面都是页面上代码了，最最后就是对应的配置文件了，你不配置，代码怎么知道你的英文要先显示成什么中文呢？？
只要指定要配置的id就行。比如上面的按钮的id是 btn，所以这里配置文件里写btn;
没了。就这么多了，最后附上包