我的前端架构之一--页面作用域
2015-07-27 00:27
459 查看
我的前端架构汇总
初学者推荐文章：JavaScript秘密花园
其中 left ,right,content,footer 是使用（或部分使用）异步加载的方式来加载远程页面的。
如果left是菜单， content是一个带有选项卡的多页面结构，很多情况下，content下的每个页面需要一个 iframe 来隔离每个页面，避免 A 页面 和 B 页面控件ID和 Js 方法名重复。
加载iframe 1会造成一些性能的浪费，2会增加客户端浏览器的压力，因为Dom结构很庞大，3给各个选项卡页面通信、页面间带来麻烦。
我需要解决的就是不使用 iframe 而加载很多页面，又不会产生冲突。
jv.page(dom) 方法返回 dom元素所在的作用域。为了简化操作，可以在 click 等带有event，可以找到事件触发源的方法里，使用 jv.page() 得到当前作用域。
$(selector, jv.page(dom)) 方法对DOM元素进行选择。
这种定义方法是公开到 window 下的。类似于：
如果A页面和B页面都使用同一个 test 方法，则 B页面的 test 方法会覆盖 A页面的 test方法。
我们要改造的效果是：把方法定义到各个作用域上去。核心是作用域！
新的定义方法：
this 不是常量，它不一定是 window，它表示该Dom容器做为作用域的 MyPageObject 对象，它和作用域DOM容器是一一对应的，但不是作用域DOM容器。它同样是一棵树。这棵树的根是 window ，子数据在 window.SubPages 中存储
我们在加载远程异步加载页面的时候，需要手动指定 this 对象 。核心代码：
这样定义的页面，这个页面可以独立运行，也可以被LoadView多次加载运行。
this 是当前加载页面部分的作用域对象。由于this易变，我们引入了 me 对象。me是在后台自动加入的。上面定义方法的方式也可以这样：
其中 jv.me(event) 方法找出 作用域的 MyPageObject 对象，即方法中定义的 this 对象。 传入 event 对于浏览器兼容性来说，是有必要的。
jv.getDoer(event) 方法会递归查找方法参数中的 event 对象，找出触发事件的源。所以在调用方法时，参数最后要传递 event
jv.getDoer按以下优先级进行确认：
如果对父元素绑定了事件，使用子元素触发了click，则：
currentTarget 表示父元素; target表示子元素。
每个页面的最后，都会调用一个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
引用的第三方时间选择控件的Api，一般是显式进行定义，像这样： $("#id").时间控件方法(格式)；如 My97:
利用页面最后会执行 jv.myOnInit 中的 jv.MyInitOn 字典的数据，进行自动化初始化。
这样，所有包含 MyDate 的类元素，都会自动注册 click 事件，显示时间控件。只需要这样：
2. 改造默认的Ajax，在请求出错时，自动弹出信息框。
1. script标签移到最后。
2. 去除重复引用
3. 解析 ~/ 符号
4. 把Mvc服务器定义的变量输出到前端： me.变量=值;
5. 在最前面生成： jv.Root=""~/"";var me=new MyPageObject();jv.addRequest(me);me.SYSTEMPOWERBUTTON=[];
其中：
jv.addRequest用于分隔页面作用域
me.SYSTEMPOWERBUTTON 用于定义该页面的按钮权限。
6. 给 script 标签的最前头，添加： var me=this;
项目部署教程：
/article/4836929.html
初学者推荐文章：JavaScript秘密花园
场景
现在页面的内容大都是分块的，常见的如下结构：<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 标签有 init 属性，则认为它是需要最先加载执行的JS ） 使用 call 或 apply 改变 Js 的 this当前上下文。
//4. 填充DOM
//5. 运行最后执行的JS，使用 call 或 apply 改变 Js 的 this 当前上下文。
}这样定义的页面，这个页面可以独立运行，也可以被LoadView多次加载运行。
this 是当前加载页面部分的作用域对象。由于this易变，我们引入了 me 对象。me是在后台自动加入的。上面定义方法的方式也可以这样：
me.test=function(){}页面中调用方法
如果在页面上使用 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
jv.getDoer按以下优先级进行确认：
var ret = null;
if (evt.srcElement) {
ret = evt.srcElement;
}
else if (evt.target) {
ret = evt.target;
}
else if (evt.originalEvent === true) {
ret = evt.target;
}
else if (evt.originalEvent == "me") {
ret = evt.target;
}
else if (evt.originalEvent == "func") {
ret = evt.target();
}
else if (evt.originalEvent == "jquery") {
ret = $(evt.target)[0];
}
else if (evt.fromElement) {
ret = evt.fromElement;
}
else if (evt.currentTarget) {
ret = evt.currentTarget;
}如果对父元素绑定了事件，使用子元素触发了click，则：
currentTarget 表示父元素; target表示子元素。
自定义页面的生命周期
作用域的 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");
}
});
};服务器额外管的闲事
仅当是GET请求页面HTML时，为方便页面实现以上机制，服务器会对页面输出进行以下干涉：1. script标签移到最后。
2. 去除重复引用
3. 解析 ~/ 符号
4. 把Mvc服务器定义的变量输出到前端： me.变量=值;
5. 在最前面生成： jv.Root=""~/"";var me=new MyPageObject();jv.addRequest(me);me.SYSTEMPOWERBUTTON=[];
其中：
jv.addRequest用于分隔页面作用域
me.SYSTEMPOWERBUTTON 用于定义该页面的按钮权限。
6. 给 script 标签的最前头，添加： var me=this;
项目部署教程：
/article/4836929.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 