javascript控件开发之页面控制器
本篇，我们主要实现页面控制器，简单说就是用于控制当前html对应的js类,我们将在上一篇的基础上继续增加新的代码，首先，我们在common文件夹下添加pageControllor.js文件，该文件，继承com.baseObject对象,代码比较简单，主要目的是要把页面上的控件对象，移到控制器类中
把该文件也添加到加载列表中，如下
接着我们把页面的控制器类放到body的code属性上，
因此，对init.js加载函数startup做调整，把body.code属性读出，并且加载到页面中，
接着在web目录下添加controllor目录，添加test.js文件并编写testControllor类继承pageControllor对象,
在该文件中，会执行一个 thisWindow.onShow事件，该事件是页面加载后的回调事件，在该事件中创建控制器对象，并执行初始化方法initPage
同时，给页面test.html添加控制器code属性
这样，用浏览器打开test.html页面后，点击上面的按钮，就会弹出控制器上绑定的事件中弹出的内容。
到此，也许大家会觉得实现这些功能，直接给dom元素绑定事件就能做到，不用这么麻烦，这个想法没错，不过后续会有更复杂的控件实现，到时就会发现这个框架的优势，第一，页面的元素编写，会大大的简化，第二，控制用的js，可以更专注于业务上的开发，网上这么多框架， 对于开发来说框架有什么样的意义相信大家都懂的。
可下载附件代码
请关注下一编， javascript控件开发之布局控件
/**
* 页面控制基类
* 创建：qzz
* 日期: 2014-05-01
*/
(function(undefined) {
pageControllor = Extend(com.baseObject, {
/**
* 初始化函数
*/
create:function(option) {
this.base(option);
this.className = "pageControllor";
this.logInfo("create");
//在render时，把控件都收集在thisWindow.com对象中，
if(this.isNotEmpty(thisWindow)
&& this.isNotEmpty(thisWindow.com)) {
for(var key in thisWindow.com) {
this[key] = thisWindow.com[key];
}
}
}
});
})();
把该文件也添加到加载列表中，如下
staticScript = [
"../css/com.comStyle.css",
"extend.js",
"nameSpace.js",
"../component/com.baseObject.js",
"../component/ui/com.ui.window.js",
"../component/ui/com.ui.button.js",
"pageControllor.js",
"render.js"
]
接着我们把页面的控制器类放到body的code属性上，
因此，对init.js加载函数startup做调整，把body.code属性读出，并且加载到页面中，
function startUp() {
//获取相对路径
var initsrc = thisWindow.getPath();
//加载script列表
thisWindow.Import(["staticScript.js"], function(state) {
if (state && typeof staticScript != "undefined") {
var len = staticScript.length;
//加载列表中的js
thisWindow.Import(staticScript, function(state) {
//读取页面控制器
var bdy = document.getElementsByTagName("body")[0];
if(state && typeof bdy !== "undefined"
&& typeof bdy.attributes.code !== "undefined"){
//加载页面控制器
thisWindow.Import(bdy.attributes.code.nodeValue,
function(state) {
//回调加载后事件
if (typeof thisWindow.onShow == "function") {
thisWindow.onShow();
}
});
} else {
//回调加载后事件
if (typeof thisWindow.onShow == "function") {
thisWindow.onShow();
}
}
}, initsrc);
}
}, initsrc);
};
接着在web目录下添加controllor目录，添加test.js文件并编写testControllor类继承pageControllor对象,
在该文件中，会执行一个 thisWindow.onShow事件，该事件是页面加载后的回调事件，在该事件中创建控制器对象，并执行初始化方法initPage
/**
* test.html页面控制类
* 创建：qzz
* 日期: 2014-05-01
*/
(function(undefined) {
/**
* 控制类
*/
testControllor = Extend(pageControllor, {
//初始化页面
initPage:function() {
//修改页面上的控件属性，绑定事件
this.test2.onClick = function() {
alert("确定");
}
this.test2.setCaption("确定");
this.test2.setWidth(50);
this.test3.onClick = function() {
alert("取消");
}
this.test3.setCaption("取消");
}
});
})();
/**
* 页面对象创建，且启动
*/
thisWindow.onShow = function() {
var tc = new testControllor();
tc.initPage();
}
同时，给页面test.html添加控制器code属性
<!DOCTYPE html>
<head><title>test</title>
<script src="../script/common/init.js" type="text/javascript"></script>
</head>
<body code="controllor/test.js">
<div id='test1' code='com.ui.window' option='{"height":"100","width":"100","border":0}'></div>
<div id='test2' code='com.ui.button' option='{"height":"25","width":"100","top":"200","left":"100"}'></div>
<div id='test3' code='com.ui.button' option='{"height":"25","width":"100","top":"100","left":"200"}'></div>
</body>
</html>
这样，用浏览器打开test.html页面后，点击上面的按钮，就会弹出控制器上绑定的事件中弹出的内容。
到此，也许大家会觉得实现这些功能，直接给dom元素绑定事件就能做到，不用这么麻烦，这个想法没错，不过后续会有更复杂的控件实现，到时就会发现这个框架的优势，第一，页面的元素编写，会大大的简化，第二，控制用的js，可以更专注于业务上的开发，网上这么多框架， 对于开发来说框架有什么样的意义相信大家都懂的。
可下载附件代码
请关注下一编， javascript控件开发之布局控件