引用:http://www.2cto.com/kf/201111/109790.html
云应用开发我理解是以html与js对应与android里的xml与java开发模式的一套映射性质的开发模式。其中很多东西都继承了android开发的理念，比如android里的activity对应了云应用里的page，另外是整个page的生命周期的思想也基本了android的理念。下面就与android对比着来看下云app的开发模式。
1、生命周期
Js代码
_package("tuantju.page");
_import("caf.ui.Page");
_import("caf.mui.ScrollView");
_class("DetailPage", Page, function(){
this._init = function(){
_super._init.call(this);
this._scrollview = null;
};
this.create = function(parent){
var obj = this.createTplElement(parent, "detail.xml");
this.init(obj);
return obj;
};
this.reset = function(params){
//TODO
};
this.init = function(){
_super.init.apply(this, arguments);
this.initComponents();
this.initActionElements();
};
this.dispose = function(){
_super.dispose.apply(this);
this._scrollview.dispose();
this._scrollview = null;
};
});
_package("tuantju.page");
_import("caf.ui.Page");
_import("caf.mui.ScrollView");
_class("DetailPage", Page, function(){
this._init = function(){
_super._init.call(this);
this._scrollview = null;
};
this.create = function(parent){
var obj = this.createTplElement(parent, "detail.xml");
this.init(obj);
return obj;
};
this.reset = function(params){
//TODO
};
this.init = function(){
_super.init.apply(this, arguments);
this.initComponents();
this.initActionElements();
};
this.dispose = function(){
_super.dispose.apply(this);
this._scrollview.dispose();
this._scrollview = null;
};
});
我们按照android的生命周期来解析下云应用的生命周期，我们可以有差不多下面的这么一张状态映射表：
| Android | 云应用 |
| onCreate | this.create |
| onStart | this.init |
| onResume | this.reset |
| onStop | this.dispose |
当然android的只是部分的生命周期，列出来的是对应云应用的一些状态。整个生命周期是从create开始的，跟android一样云app中在create方法中通常都是进行page类与相应的html模板匹配工作，类似与android的setContentView(R.layout.main)云中也是this.createTplElement(parent, "detail.xml")，继续进入init的话则是当用户跳转page时做的，其实在
创建page的实体，所谓创建实体就是如下图：
在app容器内部插入一个关于当前pageid的div，云app的编程模式虽然与android有很大类似，但实现的方式却是完全不一样的。android是通过线程类切换的方式来组织activity的，而云app是通过类似于对singlepage的html写入模板来组织切换的。当init的时候平台会插入一个div并初始化里面的一些容器和动作监听器类似的。并将它显示到用户可视范围。这和android也有异曲同工之处，android的可视周期也是从onStart开始到onDestory进程销毁结束的，但不同的是云app并没有类似与onDestory的机制，只有类似与onStop的dispose方法类实现，当一个page离开用户视觉范围平台为调用这个方法，但不会对于容器这个div进行销毁，另外类似与android的onResume在云app中则是reset这个方法，按照android的onResume形式这个reset方法是在page第一次初始化的时候跟在init之后调用的，另外当page切换回来的时候也会调用的，所以其实这个方法是page内部方法中比较关键的方法。因为跳转时候的page的参数传递都是需要靠这个方法来接受并处理的。
2、跳转方式
下面来对比看一下跳转。
Java代码
Intent it = new Intent();
it.putExtra("accountStr", accountEtStr);
it.putExtra("passwordStr", passwordEtStr);
it.setClass(LoginActivity.this,HomeListActivity.class);
LoginActivity.this.startActivity(it);
Intent it = new Intent();
it.putExtra("accountStr", accountEtStr);
it.putExtra("passwordStr", passwordEtStr);
it.setClass(LoginActivity.this,HomeListActivity.class);
LoginActivity.this.startActivity(it);
上面是android的跳转模式，有点费劲哈~要new出一个intent，再在里面放参数，然后进行从哪儿到哪儿的intent的写入，最后按照这个intent来启动一个activity。
下面再来看一下云app是如何做跳转的：
Js代码
this._app.navPage('home', {type : 'detail'});
this._app.navPage('home', {type : 'detail'});
只有一个语句，比较的简洁，没有用到类似与android的中间对象，这里只是传了一个home这样一个字符串，由于我们已经在app的配置中已经写入了这样的配置参数，系统很简单的找到了需要跳转到的类的映射。
Js代码
this.__conf__({
"page": [
//键(pageid) 模板文件名 类名 简要说明
{"pid": "welcome", "tpl": "welcome.xml", "clazz": "WelcomePage"},
{"pid": "home", "tpl": "home.xml", "clazz": "HomePage"},
{"pid": "city", "tpl": "city.xml", "clazz": "CityPage"},
{"pid": "search", "tpl": "search.xml", "clazz": "SearchPage"},
{"pid": "detail", "tpl": "detail.xml", "clazz": "DetailPage"}
]
});
this.__conf__({
"page": [
//键(pageid) 模板文件名 类名 简要说明
{"pid": "welcome", "tpl": "welcome.xml", "clazz": "WelcomePage"},
{"pid": "home", "tpl": "home.xml", "clazz": "HomePage"},
{"pid": "city", "tpl": "city.xml", "clazz": "CityPage"},
{"pid": "search", "tpl": "search.xml", "clazz": "SearchPage"},
{"pid": "detail", "tpl": "detail.xml", "clazz": "DetailPage"}
]
});
接下来，对比一下跳转后接受参数：
Java代码
Intent it = getIntent();
String accountStr = it.getStringExtra("accountStr").toString();
String passwordStr = it.getStringExtra("passwordStr").toString();
Intent it = getIntent();
String accountStr = it.getStringExtra("accountStr").toString();
String passwordStr = it.getStringExtra("passwordStr").toString();
android还是通过中间桥梁intent来进行的。
而在云app中可以直接在this.reset方法中的arguments中取得到传值参数对象拿到一个类似于intent的中间桥梁的对象。在reset本体中进行数据处理。
Js代码
this.reset = function(params){
if(params.type === 'detail'){
//TODO
}
}
this.reset = function(params){
if(params.type === 'detail'){
//TODO
}
}
另外如果跳转每个activity要用到的数据在android中是利用ShareContext实现的（具体参照我这篇博客http://leyteris.iteye.com/blog/926031）
Java代码
ShareContext shareContext = ((ShareContext)getApplicationContext());
shareContext.setClient(client);
ShareContext shareContext = ((ShareContext)getApplicationContext());
shareContext.setClient(client);
而在云app中直接用html5中localstorage就能实现。
Js代码
window.localStorage.setItem("tuantju_now_city_name", _name);
window.localStorage.setItem("tuantju_now_city_name", _name);
同样每一个page都能得到享元变量了
3、动作监听
在android中对于事件动作的监听采用的是和经典的java一样的监听的手段：
Java代码
updateBtn.setOnClickListener(new OnClickListener(){
public void onClick(View v) {
Intent it = new Intent();
it.setClass(HomeListActivity.this,PostActivity.class);
HomeListActivity.this.startActivity(it);
}
});
updateBtn.setOnClickListener(new OnClickListener(){
public void onClick(View v) {
Intent it = new Intent();
it.setClass(HomeListActivity.this,PostActivity.class);
HomeListActivity.this.startActivity(it);
}
});
在一个控件上绑上一个实现OnClickListener接口的类，并重写里面的onClick方法
而在云app中也是可以采用经典的js的事件bind来实现事件的监听。但云app又提供了另外一种类似为节点data写入的方式来绑定action。这一种方式在本身js中是没有实现的。下面看caf框架是怎么做的。
在html中需要对于要绑定事件的节点增加_action这个data数据。
Html代码
<a class="goBack" _action="go_back">后退</a>
<a class="goBack" _action="go_back">后退</a>
而在对应的page类中增加以do_为前缀的action响应事件方法。这个_action默认只对于a和button标签有效。
Js代码
this.do_go_back = function(act, sender){
this._app.navPage('welcome');
};
this.do_go_back = function(act, sender){
this._app.navPage('welcome');
};
其中参数中sender传递的动作响应的节点，而act则是动作事件的名称，具体可以参考手册上的使用。
其实caf在init的时候做了这样一个动作：this.initActionElements();这个方法就是上面说的默认对a和button有效的动作初始化方法。
当然我们可以你想的任何标签都有效你可以这样，比如有这样的html：
Html代码
<li class="list-item clr" _action="goto_detail">
<li class="list-item clr" _action="goto_detail">
再这样声明：
Js代码
this.initActionElements(this._self, this, ['li']);
this.initActionElements(this._self, this, ['li']);
这样就对li这个标签action有效化了，另外还有如果是动态的载入DOM节点，上面的action是不起效果的，需要在动态载入后重新执行一下initActionElements这个方法。
先写到这儿，云app开发其实还是很快的，对于开发功能性的app开发时间较java的android开发时间会缩短很多。开发效率也是非常高的，这种手机端利用js来mvc式的开发应用感觉还是不错的，但是现在平台限制比较大，只是适用于阿里云平台，这点有点局限性，如果平台方面能开发出一个在普通android下运行云app的apk平台，那将是很好的应用啊~另外感觉可以将caf这个框架和phonegap这种本地应用框架api结合弄出一个新的mvc式的框架，毕竟phonegap只是提供与本地的挂接并没有将里面的东西进行mvc化模式的应用，这方面还是有的搞搞的~~写的不好，不足的还请大伙拍砖
