快速模版的本地化改进

在快速模版中，使用了一个本地化类来实现本地化，但效果不算太好，因为生成操作需要切换不同的本地化包再进行打包。造成这个问题的主要原因是Ext JS自身需要通过重写来实现本地化。研究了一下kitchensink示例（Ext JS 包的examples\kitchensink文件夹）实现本地化的方式，感觉比较恐怖，应用程序的每一个需要使用本地化信息的类都要使用重写方式写一个本地化重写类，太麻烦了。

最理想的状态就是实现本地化不依赖于框架，将这部分独立出来，自动切换到不同的本地化语言文件就可实现本地化。要实现这个，难点在于对组件的本地化，应该如何实现。

刚开始想这个问题的时候，打算借鉴习惯的L函数的方式将组件的本地化工作切换到L函数来转换，而不依赖于特定的重写类。使用这种方式实现就是有点麻烦，因为要添加好多个重写类到公共包，不过这不是太大问题，只是一次性工作，最大的问题是需要修改.sencha\app\Boot.js文件，在里面添加L函数，不然在生成的时候会提示找不到L函数而生成失败。

这方法虽然暂时解决了问题，但还是不够完美，于是继续改进。在使用L函数实现的时候，需要在app.js文件中添加一段代码，调用I18N.init方法来实现单例模式的类的本地化，既然能调用init方法来本地化单例模式的类，为什么不将重写也放在这里呢？经过一番修改，终于比较完美的实现了本地化脱离框架。

要使用这种方式实现本地化，首先要做的是在resources\locale文件夹下定义本地化文件，具体的文件名可根据自己喜欢的方式来命名，笔者使用的是国家代码来命名的，如简体中文的文件名是zh-cn.js。本地化文件的内容如下：

I18N={
    //定义应用程序的本地化信息
    Message: '信息',

    //init方法用于实现Ext JS组件的本地化
    init: function(){

        //具体的重写代码请参考文件内容

    }
}

I18N就是一个简单的对象，本地化信息直接定义为属性就行了，init方法用于实现组件的本地，具体代码可访问快速模版查看。

为了能在框架初始化完成后，应用程序执行之前完成组件的本地化，需要在app.js的顶部添加以下代码：
var I18N= I18N || {};

Ext.onReady(function(){
I18N.init();
});

代码的第一句只是保证生成时候不提示错误的占位符，没具体意义。

最后的步骤就是修改`index.html`文件，通过访问参数判断要加载的语言包了，代码如下：
```html
    <script type="text/javascript">
        var locale  =location.href.match(/lang=([\w-]+)/),
            lang = (locale && locale[1]) || 'zh_cn';
        document.write('<script src="resources/locale/'+ lang+'.js" type="text/javascript"><\/script>');
    </script>

以上代码须放在加载bootstrap.js文件之前。如果不想使用lang作为url参数，可自行修改。

至此，不依赖于框架打包的本地化就已经实现了，具体的示例可查看快速模版。