整体框架：
总体分为三步：
界面部分：采用“不唐突”原则，即将内容、行为和样式独立开来，在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();
- }
- %>
阅读(1047) | 评论(0) | 转发(0) |
