单页应用的三个问题

1、id冲突。

如果多个页面有相同id，通过id取dom节点时不能准确定位。

解决方式：用xid代替id，加载组件时会自动生成不同的id。

xid相关api：

this.getIDbyXID(xid);//根据xid获取id

this.comp(xid);//根据xid获取组件

document.getElementByXid(xid);//根据xid获取dom节点（性能最优）

注意事项：

xid和id不允许同时使用，否则xid相关api会失效。

 

2、css冲突

多个页面有相同名称的class属性值

解决：html5中的scoped属性可以（浏览器未广泛支持）；

        webx5:样式局部化。与.w页面同名的.css文件只作用于当前的.w页面，页面加载编译的时候会在每个css后加上唯一标识。

 

3、js冲突

多个页面定义了同名的js方法，多次调用后出现冲突。

解决：js模块化。有两种方式AMD（requirejs）（webx5使用该方式）；CMD（seajs）。

        js模块化优点：解决命名冲突，更好的进行js模块化管理，提高可维护性，提高客户端性能。

下面是一个典型的js模块化定义。

define(function(require){
　　var $ = require("jquery");
　　var justep = require("$UI/system/lib/justep");


　　var Model = function(){
　　　　this.callParent();
　　};

　　Model.prototype.methodname= function(event){

　　};

　　return Model;
});