Titanium TiMVC之功能擴展Redux
Redux的官方下載地址為：https://github.com/dawsontoth/Appcelerator-Titanium-Redux
關(guān)于如何將第三方類庫整合到TiMVC里，大家可看我之前發(fā)的文章：《TitaniumTiMVC之功能擴展––添加第三方類庫的使用》。OK，當(dāng)一切設(shè)置好后，就先讓我們看看到底Redux類庫有什么好處吧。根據(jù)官方的文檔和使用說明，我們可以知道其主要有以下功能：
1.簡化UI的創(chuàng)建語法。如創(chuàng)建一個VieworWindow時候，不需要用到Ti.UI.createVieworTi.UI.createWindow這樣的長語法了，而可以直接使用簡單的語法進(jìn)行創(chuàng)建，如：
- var view = View({className:'view'});
這種創(chuàng)建方式適合現(xiàn)有所有UI使用，而且就算有新的UI出來，你甚至也可以方便地自己添加進(jìn)去，這也是此類庫的一個特性，可自定義所有類庫的動態(tài)創(chuàng)建語法。
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，則可以定義一次就不斷重復(fù)使用：
- $.fn.addEventBinder('myCustomEvent'); // 只需定義一次，就可以不斷重復(fù)使用了
- $(button).myCustomEvent(function() { });
而使用Redux，則可以定義一次就不斷重復(fù)使用：
- Label.setDefault({ font: {fontWeight: 'bold' } });
- var label = new Label();
- alert(label.font.fontWeight == 'bold');
3.動態(tài)設(shè)置UI控件的樣式。這個在Ti里本身是不支持的，使用Redux可以動態(tài)為控件設(shè)置不同的樣式，如：
- Label.setDefault({font:{fontWeight:'bold'}});
- varlabel=newLabel();
- alert(label.font.fontWeight=='bold');
而且還可以按選擇器來設(shè)置控制的默認(rèn)樣式哦：
- $.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還支持直接使用控制名稱的樣式設(shè)置，如要為所有vieworwindow設(shè)置統(tǒng)一的樣式，只需直接寫：
- View
- {
- width:200
- }
- Window
- {
- backgroundColor:'#fff'
- }
這樣對全局樣式的控制也方便很多啦
。哦，最后差點忘了說如何調(diào)用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，請按以下步驟創(chuàng)建：1.在mvc目錄里創(chuàng)建一個style目錄，然后可以按需要創(chuàng)建不同平臺的目錄名稱，如android,iphone,ipad等幾個目錄2.在style目錄里創(chuàng)建一個global.rjss文件，這個就是全局的樣式文件3.在不同平臺目錄下，根據(jù)你的view名稱創(chuàng)建同名的rjss文件，這樣做是可以獨立為某個view設(shè)置其樣式，如你一個view名稱為home的，那么就可以在iphone目錄下創(chuàng)建名為home.rjss的樣式文件，當(dāng)然其他平臺目錄下也可創(chuàng)建一個同名文件以應(yīng)用到不同平臺的樣式效果。4.在config里創(chuàng)建stylePath和customStyle（不根據(jù)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里調(diào)用loadGlobalStyle：
- <pre>this._init = function() {
- self.includeBaseComponents();
- self.loadGlobalStyle();//一定要在includeBaseComponents下面哦
- ...
- }
5.在components/controller.js文件里添加各平臺下的rjss文件的引用，因為要根據(jù)不同view動態(tài)添加，所以代碼可寫到this.renderWithLayout方法里，如下：
- this.render = function(view,data){
- //引用不同平臺的
- self.App.loadStyle(view);
- ...
- }
這樣就可以自動加載不同view下的樣式文件了，同時你還可以自添加定義樣式文件，這個自定義樣式文件不需與view同名，也就是說可為不同平臺添加一個全局樣式文件
