标签：
现在页面的内容大都是分块的，常见的如下结构：
<html> <head></head> <body> <header> </header> <main> <left> </left> <content> </content> <right> </right> <footer> </footer> </main> </body> </html>
其中 left ,right,content,footer 是使用（或部分使用）异步加载的方式来加载远程页面的。
如果left是菜单， content是一个带有选项卡的多页面结构，很多情况下，content下的每个页面需要一个 iframe 来隔离每个页面，避免 A 页面 和 B 页面控件ID和 Js 方法名重复。
加载iframe 1会造成一些性能的浪费，2会增加客户端浏览器的压力，因为Dom结构很庞大，3给各个选项卡页面通信、页面间带来麻烦。
我需要解决的就是不使用 iframe 而加载很多页面，又不会产生冲突。
给Dom元素添加作用域，作用域可以看作是页面的Dom大容器，它也是一棵树，根节点是 html。作用域结构是下面的结构：
html
left
content
right
footer
jv.page(dom) 方法返回 dom元素所在的作用域。为了简化操作，可以在 click 等带有event，可以找到事件触发源的方法里，使用 jv.page() 得到当前作用域。
$(selector, jv.page(dom)) 方法对DOM元素进行选择。
普通方法我们这样定义：
function test(){}
这种定义方法是公开到 window 下的。类似于：
window.test = function(){}
如果A页面和B页面都使用同一个 test 方法，则 B页面的 test 方法会覆盖 A页面的 test方法。
我们要改造的效果是：把方法定义到各个作用域上去。
新的定义方法：
this.test = function(){}
this 不是常量，它不一定是 window，它表示该Dom容器做为作用域的 MyPageObject 对象，它和作用域DOM容器是一一对应的，但不是作用域DOM容器。它同样是一棵树。这棵树的根是 window ，子数据在 window.SubPages 中存储
我们在加载远程异步加载页面的时候，需要手动指定 this 对象 。核心代码：
$.extend.LoadView = function (p) { //清空当前节点的内容。 //Ajax获取远程内容。在回调中处理HTML //1. 使用过滤器过滤出要显示的部分。 //2. 把 Js 分为两部分： 最先执行的JS，和 最后执行的JS ，中间填充 DOM对象（包含Css） //3. 运行最先执行的JS，（如果 script 标签有 data-init 属性，则认为它是需要最先加载执行的JS ） 使用 call 或 apply 改变 Js 的 this当前上下文。 //4. 填充DOM //5. 运行最后执行的JS，使用 call 或 apply 改变 Js 的 this 当前上下文。 }
这样定义的页面，这个页面可以独立运行，也可以被LoadView多次加载运行。
如果在页面上使用 this.test = function(){} 定义了方法，如何使用呢。如下：
<script> this.test = function(){ var doer = jv.getDoer(); alert(doer.innerHTML); //显示确定 } </script> <body> <button onclick="jv.me(event).test(event)">确定</button> </body>
其中 jv.me(event) 方法找出 作用域的 MyPageObject 对象，即方法中定义的 this 对象。 传入 event 对于浏览器兼容性来说，是有必要的。
jv.getDoer(event) 方法会递归查找方法参数中的 event 对象，找出触发事件的源。所以在调用方法时，参数最后要传递 event
作用域的 MyPageObject 对象 简称 me 对象，因为它是通过 jv.me() 得到的。
每个页面的最后，都会调用一个Js方法：jv.myOnInit(); 来实现页面的自动化和执行页面生命周期的各个方法。
jv.myOnInit 会依次执行以下方法
1. 执行 me.Page_PreInit
2. 执行 jv.MyInitOn_PreFith ，系统脚本给最初的容器计算高度
3. 执行 jv.MyInitOn 字典里的 value 部分。这是系统脚本注册的自动化部分。
4. 执行 me.Page_Init
5. 执行 me.Page_Render 字典里的 value 部分，这是页面脚本自己的自动化部分。
6. 执行 jv.MyInitOn_Fithed，系统脚本在脚本最后，计算容器高度。
7. 执行 me.Page_Inited
其中2，3，6 是系统自动执行的脚本。除去2，3，6，其余的部分，就是页面能控制的生命周期。
1. Page_PreInit
2. Page_Init， 最常用
3. Page_Render 这是字典结构。
4. Page_Inited
1. 自动化初始化时间选择控件。
引用的第三方时间选择控件的Api，一般是显式进行定义，像这样： $("#id").时间控件方法(格式)；如 My97:
$("#date").click(function () { WdatePicker({ $dpPath: jv.Root + "R/My97/", dateFmt: "yyyy-MM-dd" }); });
利用页面最后会执行 jv.myOnInit 中的 jv.MyInitOn 字典的数据，进行自动化初始化。
jv.MyInitOn["MyDate"] = function (container) { jv.loadJsCss("js", jv.Root + "R/My97/wdatepicker.js"); container = container || jv.page(); $(".MyDate", container).each(function () { var $self = $(this); var format = $self.attr("dtFormat") || ‘yyyy-MM-dd‘; $self.click(function () { WdatePicker({ $dpPath: jv.Root + "R/My97/", dateFmt: format }); }); if (!$self.val()) return; $self.val($self.val().getDate().toString(format)); }) });
这样，所有包含 MyDate 的类元素，都会自动注册 click 事件，显示时间控件。只需要这样：
<input class="MyDate"/>
2. 改造默认的Ajax，在请求出错时，自动弹出信息框。
jv.MyInitOn["InitJQueryAjax"] = function () { $.ajaxSetup({ //请求成功后触发 success: function (data) { }, //请求失败遇到异常触发 error: function (xhr, status, e) { //弹框报错。 }, //完成请求后触发。即在success或error触发后触发 complete: function (xhr, status) { $(document.body).css("cursor", "default"); }, //发送请求前触发 beforeSend: function (xhr, opt) { $(document.body).css("cursor", "wait"); } }); };
项目部署教程：
http://www.cnblogs.com/newsea/p/4530864.html
标签：
原文地址：http://www.cnblogs.com/newsea/p/4679080.html
