http://doc.wex5.com/different-with-std-web-ui/#1
X5的UI部分和传统Web页面开发的差异
WeX5是跨端移动开发框架,BeX5是基于WeX5的企业快速开发平台,它们都采用前后端分离的开发模式,和Web传统的前端页面开发(例如extjs)比较类似,和jsp存在差异。WeX5、BeX5和Web传统的前端页面开发最大的差异在于,WeX5、BeX5采用了单页模式,实现资源不重复加载:
- 由于采用单页模式,X5引入了RequireJS,实现资源异步按需加载,且只加载一次
- 作为快速开发工具,X5提供了可视化界面设计器
- 作为快速开发工具,对界面常用功能进行封装,实现界面全面组件化
这样的UI开发与传统UI开发有哪些不同呢?下面就从页面部分、页面中的数据、js部分、发布等几个方面具体说明。
1、页面部分
1.1、页面加载事件
- 传统——window.onload事件
- X5——model组件的onload事件
- 传统——window.onunload事件
- X5——model组件的onunload事件
- 传统JS——只有一种参数,就是url中?后面的参数,从location.href中截取
- JSP——使用<% String 参数值 = request.getParameter(“参数名”);%>获取
- X5—— 有三种参数,url中可以显示出来的有两种参数,一种是?后面的参数,另一种是#!后面的JSON格式的参数,还有一种是url中不显示的复杂参数。前两种显示在url上,为了实现页面分享,后一种实现传递复杂参数。
?后面的参数——使用 this.getContext().getRequestParameter(“参数名”);方法获取
#!后面的JSON格式的参数——使用this.params.参数名 的方式获取
url中不显示的——使用this.params.data.参数名 的方式获取
1.4、引用js
- 传统——在html中加入<script src=”/system/lib/justep.js”></script>
- X5——使用RequireJS,实现异步按需加载
1
2
3
4
5
6
7
8
|
//按需加载,没有加载过,则加载,否则不加载 var justep = require( "$UI/system/lib/justep" ); //异步加载(加中括号),执行到这句代码时才加载 参考/UI2/portal/sample/appVersionChecker.js require([ './appVersion_in_server' ], function (version_info){ //成功回调 }, function (){ //失败回调 }); |
在w文件中,在<window>标签下加入<script>标签,也可以引用js文件,但是不推荐使用。当多个w文件引用同一个js文件时,和多页模式一样,会导致多次加载,而使用require的方式加载js文件。只会加载一次,因此推荐使用。参考WeX5界面模块化的使用—JS引用
1.5、引用css
- 传统——<link rel=”stylesheet” type=”text/css” href=”/OA/config/pub.css”>
- X5——使用RequireJS,实现按需加载。 require(“css!$UI/OA/config/pub”).load();
引用css和引用js一样,推荐使用require方式,避免多次加载,代码中的load方法,是保证了css文件的加载顺序。参考WeX5界面模块化的使用—引用css和text
- 传统——使用id属性
- X5——采用单页模式,需要进行页面隔离,即为了使得在打开多个页面时,元素的id不重复,X5增加了xid属性,替代id属性,因此要将id属性改成xid属性,通过id属性获得element的方法,改为通过xid属性获得element的方法
例如:
1、在w文件中,元素不定义id属性,而定义xid属性
<div id=”div1″ width=”300″ height=”200″//>
<div xid=”div2″ width=”300″ height=”200″//>
2、在js文件中获取div时,不使用id获取元素,而是使用xid获取元素
var div= document.getElementById(‘div1’);