Redux的官方下载地址为：https://github.com/dawsontoth/Appcelerator-Titanium-Redux
关于如何将第三方类库整合到TiMVC里，大家可看我之前发的文章：《TitaniumTiMVC之功能扩展––添加第三方类库的使用》。OK，当一切设置好后，就先让我们看看到底Redux类库有什么好处吧。根据官方的文档和使用说明，我们可以知道其主要有以下功能：
1.简化UI的创建语法。如创建一个VieworWindow时候，不需要用到Ti.UI.createVieworTi.UI.createWindow这样的长语法了，而可以直接使用简单的语法进行创建，如：
- var view = View({className:'view'});
这种创建方式适合现有所有UI使用，而且就算有新的UI出来，你甚至也可以方便地自己添加进去，这也是此类库的一个特性，可自定义所有类库的动态创建语法。
2.简化的事件绑定。在Ti官方语法中，要为一个按钮添加事件，需要以下写法：
- button.addEventListener('click', function() { alert('clicked!'); });
- button.fireEvent('click');
- button.fireEvent('click', {src: 'me'});
而使用了Redux后，只需像jQuery的语法来绑定即可：
- $(button).click(function() { alert('clicked!'); }) .click() .click({src: 'me'});
对于自定义事件的绑定，一般 Ti 里写法是：
- button.addEventListener('myCustomEvent', function() { });
而使用Redux，则可以定义一次就不断重复使用：
- $.fn.addEventBinder('myCustomEvent'); // 只需定义一次，就可以不断重复使用了
- $(button).myCustomEvent(function() { });
而使用Redux，则可以定义一次就不断重复使用：
- Label.setDefault({ font: {fontWeight: 'bold' } });
- var label = new Label();
- alert(label.font.fontWeight == 'bold');
3.动态设置UI控件的样式。这个在Ti里本身是不支持的，使用Redux可以动态为控件设置不同的样式，如：
- Label.setDefault({font:{fontWeight:'bold'}});
- varlabel=newLabel();
- alert(label.font.fontWeight=='bold');
而且还可以按选择器来设置控制的默认样式哦：
- $.fn.setDefault('#myID',{text:'Hello,World!',color:'red'});
- $.fn.setDefault('.myClassName',{font:{fontSize:12},color:'green'});
- varlabel=newLabel({id:'myID',className:'myClass',color:'blue'});
- alert(label.text=='Hello,World!');alert(label.color=='blue');
怎样？挺酷吧？呵呵，除此之外，还有更酷的，就是接下来要说到的RJSS格式的支持。
4.Redux特有的样式格式－－RJSS。这个格式语法基本上和JSS一样，不过其使用起来可比JSS要方便多了！首先使用RJSS的话，所作的任何修改都不需要再重新clean一次项目就可以生效，这个是我最喜欢的，呵呵。其次你还可以直接在RJSS里填写JS或者Ti的条件语句！
一般的语法就不用说了，和JSS一样，支持直接使用Ti里原对象与方法等，比较特别的用法是可以添加条件属性到每个选择器里，如要为不同的平台使用同一个选择器，可以这样写：
- [Ti.Platform.osname="android"]
- {
- .mainWin{
- top:'20dp',
- bottom:'30dp',
- right:'10dp',
- left:'30dp',
- width:'200dp',
- height:'400dp'
- }
- }
- [Ti.Platform.osname!="android"]
- {
- .mainWin
- {
- top:'10',
- bottom:'10',
- right:'5',
- left:'10',
- width:'300',
- height:'500'
- }
- }
这样写的好处是显而易见的，就是同一个className只需在代码里指定一次，判断的逻辑就直接在rjss文件里完成了，让前台代码更灵活，代码也简洁些了。另外就是rjss还支持直接使用控制名称的样式设置，如要为所有vieworwindow设置统一的样式，只需直接写：
- View
- {
- width:200
- }
- Window
- {
- backgroundColor:'#fff'
- }
这样对全局样式的控制也方便很多啦
。哦，最后差点忘了说如何调用rjss文件了，Redux提供专门的方法引用rjss文件，而且还可以定义全局和局部的rjss文件，只需如下引用即可：
includeRJSS('common.rjss');
includeRJSSGlobal('common.rjss');
是不是很方便呢？哈哈～！
最后要说一下的，如何能让Redux更好地在TiMVC里使用，只是添加到了config里还不够的，为了将Redux运用到全局框架中，还必须在core/timvc.js文件里的this.includeBaseComponents方法里添加引用：
- this.includeBaseComponents=function()
- {
- //这里添加引用到全局
- Titanium.include
- (self.config.resDir+self.config.vendorPath+"redux.js");
- ...
- ｝
如果要使用rjss，请按以下步骤创建：1.在mvc目录里创建一个style目录，然后可以按需要创建不同平台的目录名称，如android,iphone,ipad等几个目录2.在style目录里创建一个global.rjss文件，这个就是全局的样式文件3.在不同平台目录下，根据你的view名称创建同名的rjss文件，这样做是可以独立为某个view设置其样式，如你一个view名称为home的，那么就可以在iphone目录下创建名为home.rjss的样式文件，当然其他平台目录下也可创建一个同名文件以应用到不同平台的样式效果。4.在config里创建stylePath和customStyle（不根据view名称的自定义样式文件）的配置：
- /**
- * Style folder path
- * @type String
- */
- stylePath : "mvc/style/",
- /**
- * Custom style in the device folder, another style file will same with the view's name
- * @type array
- */
- customStyle : [{
- name : "main"
- }],
4.在core/timvc.js里添加以下代码以引用rjss文件：
- /**
- * Load style
- * @param {String} name vendor name based on vendor path in config (usally /mvc/style)
- * @returns boolean with load status
- */
- this.loadStyle = function(name) {
- var path = self.config.resDir + self.config.stylePath + Ti.Platform.osname + "/" + name + ".rjss";
- try {
- if(Titanium.Filesystem.getFile(path).exists()) {
- includeRJSS(path);
- return true;
- }
- return false;
- } catch(e) {
- self.notice('Cannot Include Style File: ' + path);
- self.debug(path);
- return false;
- }
- }
- /**
- * Load global and coustom style
- * @param {String} name vendor name based on vendor path in config (usally /mvc/style)
- * @returns boolean with load status
- */
- this.loadGlobalStyle = function() {
- var path = self.config.resDir + self.config.stylePath + "global.rjss";
- try {
- includeRJSSGlobal(path);
- for(var i = 0, v = self.config.customStyle.length; i < v; i++) {
- self.loadStyle(self.config.customStyle[i].name);
- }
- return true;
- } catch(e) {
- self.sysDebug(path + '\r\n' + e);
- self.notice('Cannot Include Style File: ' + path);
- return false;
- }
- }
然后在初始化方法this._init里调用loadGlobalStyle：
- <pre>this._init = function() {
- self.includeBaseComponents();
- self.loadGlobalStyle();//一定要在includeBaseComponents下面哦
- ...
- }
5.在components/controller.js文件里添加各平台下的rjss文件的引用，因为要根据不同view动态添加，所以代码可写到this.renderWithLayout方法里，如下：
- this.render = function(view,data){
- //引用不同平台的
- self.App.loadStyle(view);
- ...
- }
这样就可以自动加载不同view下的样式文件了，同时你还可以自添加定义样式文件，这个自定义样式文件不需与view同名，也就是说可为不同平台添加一个全局样式文件
