Appweb程序开发架构分析-行健天下ing-ChinaUnix博客

整体框架：

总体分为三步：
界面部分：采用“不唐突”原则，即将内容、行为和样式独立开来，在body里面尽量不存在js与css代码，这些代码放在head里面去进行，并收集用户信息；
控制部分：也就是服务器端运行的脚本，暂定选择ejs；分开之后界面部分不再关心服务器端采用的是什么语言进行开发，通过jquery控制ajax的方法这样向浏览器传送的就不需要是整个网页，取而代之的仅是数据。
模块部分：也就是定制自己的appweb模块，这些模块调用api接口，并绑定成ejs所能调用本地api，应为ejs本身不能直接调用c接口。

eg：该程序实现做应用界面最简单的一个例子，类似“hello world”；一个加法计算器（采用js这种计算完全可以再浏览器端完成，这里为了调用module接口上传到服务器进行运算）及选择获取ip和mac；

界面如下：

界面部分代码：$.ajax发起异步数据请求，由于没有任何界面渲染没有涉及到css内容；

行为js代码：

$(document).ready(function(){
$("#c_eq").click(function(){
var c_add3 = $("#c_add1").val();
var c_add4 = $("#c_add2").val();
var c_sum = parseInt(c_add3) + parseInt(c_add4);
$("#c_sum").val(c_sum);
});
$("#s_eq").click(function(){
var s_add3 = $("#s_add1").val();
var s_add4 = $("#s_add2").val();
var dataString = 's_add3='+ s_add3 + '&s_add4=' + s_add4;
$.ajax({
type:"POST",
url:"add.ejs",
data:dataString,
success:function(msg){
$("#s_sum").val(msg);
}
});
});
$("input[name='get_addr']").bind("click", function () {
var checkedValue = $(this).val();
var value = 'addr='+checkedValue;
$.ajax({
type:"POST",
url:"add.ejs",
data:value,
success:function(msg){
$("#display").html("");
$("#display").html(msg);
}
});
});
});

内容html代码：

点击(此处)折叠或打开

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Add</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div>
<p>Client implementation:</p>
<input type="text" id="c_add1" />
+
<input type="text" id="c_add2" />
<button type="button" id="c_eq">=</button>
<input type="text" id="c_sum" />
</div>
<div id="s">
<p>Server implementation:</p>
<input name="s_addr1" type="text" id="s_add1" />
+
<input type="text" name="s_addr2" id="s_add2" />
<button type="button" id="s_eq">=</button>
<input type="text" id="s_sum" />
</div>
<div>
<p>
<input type="radio" name="get_addr" value="1" />Ip
<input type="radio" name="get_addr" value="2"/>Mac
</div>
<div id="display">your choice will display here!</div>
</body>
</html>

控制端ejs代码：

<%
if( params.s_add3 != null && params.s_add4 !=null){
var add1 = Number(params.s_add3);
var add2 = Number(params.s_add4);
get_add(add1,add2);
}
if( params.addr != null){
var value = Number(params.addr);
if(value == 1)get_ip();
else if(value == 2) get_mac();
}
%>