本篇，我们主要实现页面控制器，简单说就是用于控制当前html对应的js类,我们将在上一篇的基础上继续增加新的代码，首先，我们在common文件夹下添加pageControllor.js文件，该文件，继承com.baseObject对象,代码比较简单，主要目的是要把页面上的控件对象，移到控制器类中
/**
* 页面控制基类
* 创建：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控件开发之布局控件
分享到：
相关推荐
在“javascript控件开发之可见控件(2)”这个主题中，我们将深入探讨如何在JavaScript中构建可控制其可见性的控件，并且在上一篇的基础上，通过添加事件相关函数来增强控件的灵活性和可扩展性。 首先，我们需要理解...
JavaScript控件开发是Web开发中的重要一环，特别是在构建交互丰富的网页应用时。布局控件是其中的关键元素，它允许开发者有效地组织和管理页面上的元素，实现多控件的协调和共存。在这个主题中，我们将深入探讨...
在JavaScript控件开发中，工具栏控件是一个关键的元素，它通常被用来提供用户界面中的功能快捷方式或操作选项。工具栏控件的设计和实现是网页交互性的重要组成部分，尤其是在构建富客户端应用或者增强用户体验的网页...
开发者可以通过研究这些代码来学习如何运用JavaScript实现选项卡控件，包括如何定义事件监听器，如何操作DOM元素来显示或隐藏内容，以及如何添加和控制动画效果。这些实例通常包括HTML结构、CSS样式以及JavaScript...
JavaScript日期控件是一种常见的前端开发元素，用于在网页上提供日期选择功能，用户可以方便地选取日期，常用于表单填写、事件安排等场景。在这个案例中，我们关注的是一个名为"JavaScript日期控件01（日期选择器）...
总之，JavaScript控件在现代Web开发中扮演着重要角色，它们不仅增强了页面的交互性和用户体验，也降低了开发者的工作负担。熟练掌握和运用JavaScript控件，能让你的Web应用更加生动、高效且易于维护。
JavaScript控件是网页开发中常用的一种技术，它利用JavaScript这门客户端脚本语言来实现页面交互、增强用户体验的功能模块。JavaScript控件可以是按钮、文本框、下拉菜单等基本元素的扩展，也可以是日历插件、轮播图...
此外，数据绑定和模型视图控制器（MVC）模式也是Web2.0控件开发的重点。数据绑定允许控件与后台数据模型自动同步，减少了手动处理数据的复杂性。MVC模式则将应用程序逻辑分为模型、视图和控制器三个部分，提高了代码...
JavaScript密码输入控件是网页开发中常见的一种交互元素，它用于收集用户的安全信息，如登录密码、PIN码等。在Web应用中，正确地实现密码输入控件对于提高用户体验和保障数据安全至关重要。本文将深入探讨JavaScript...
该控件开发包仅支持 B/S 网页开发，不适用于 C/S 开发。 支持设备 Web 控件 V3.2 支持我司多种设备，包括 DVR、NVR、DVS、网络摄像机、网络球机等，设备需要支持 PSIA 或 ISAPI 协议。 运行环境 操作系统：Windows...
"ocx控件开发经典例子"可能包含一个或多个示例项目，如创建一个简单的计时器控件，一个图形绘制控件，或者一个用于文件操作的控件。这些例子会展示如何从头开始构建一个控件，包括控件的界面设计、事件处理、属性...
总的来说，海康威视CN_WEB3.0接入二次开发控件开发包为Web开发者提供了一套完整的工具集，使他们能够高效地将海康威视的监控设备功能整合到自定义的Web应用中，从而满足各种监控应用场景的需求。在使用过程中，...
在IT行业中，网页开发经常会遇到跨浏览器兼容性问题，尤其是涉及到JavaScript时。"兼容多种IE的javascript日期控件"这个主题就是针对这个问题的一个解决方案。它是一个经过改造的calendar日期控件，旨在确保在不同...
综上所述，创建带有时间日期的JavaScript控件涉及到JavaScript基础、日期对象的使用、第三方库的选择、自定义组件的开发、时间日期的校验和国际化等多个方面。理解这些知识点，并结合实际项目需求，可以帮助你构建出...
4. **事件处理**：C++端可以注册事件监听器，监听WebBrowser控件的特定事件，如`DocumentComplete`事件，当页面加载完成时触发，此时可以进行JavaScript和C++的数据交互。 5. **Invoke方法**：通过调用`...
海康摄像头Web控件开发Demo是专为海康摄像头产品设计的一个重要工具，它允许开发者在Web环境中集成海康摄像头的预览功能，使用户能够通过浏览器直接观看摄像头的实时视频流。这个开发包主要用于互联网应用程序，特别...
《Web2.0控件开发》是一本专为IT专业人士准备的电子书，它深入浅出地介绍了如何创建和开发Web2.0时代的交互式网页控件。这本书以EXE格式提供，便于阅读和学习，内容涵盖了从基础到高级的各种控件开发技巧。 Web2.0...
4. **后端处理**：在.NET中，你需要创建接收AJAX请求的API或ASP.NET MVC控制器方法，处理接收到的日期数据，并进行相应的业务逻辑。 三、自定义和扩展 大部分JavaScript日期控件都支持自定义样式、事件和功能，你...
4. **兼容性**：由于不同的浏览器可能对JavaScript的支持程度不同，所以开发日期控件时需要考虑跨浏览器兼容性。例如，一些现代浏览器支持HTML5的`<input type="date">`，但老版本的浏览器可能不支持，这时就需要...