本篇，我们主要实现页面控制器，简单说就是用于控制当前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控件开发之布局控件
分享到：
相关推荐
内容概要：本文提供了详细的MongoDB分片集群的搭建指导，涵盖了从环境准备、配置文件编写、副本集的建立、主节点的选择、配置服务器和数据分片服务器的配置到最后的路由节点的搭建与操作整个流程，以及对数据库的哈希与范围两种分片策略的应用介绍和具体命令执行。 适合人群：熟悉NoSQL数据库概念并对MongoDB有一定了解的技术人员，尤其是在大型数据管理和分布式数据库架构设计中有需求的开发者。 使用场景及目标：帮助技术人员掌握构建高效能、高可用性的MongoDB分片集群的方法，适用于处理大规模、实时性强的数据存储与读取场景。 其他说明：文中通过实例演示了每个步骤的具体操作方法，便于跟随文档实操，同时也介绍了可能遇到的问题及其解决方案，如在没有正确配置的情况下试图写入数据时出现错误等情况的处理。
CPPC++_嵌入式硬件的物联网解决方案blinker库与Arduino ESP8266 ESP32一起工作
CPPC++_逆向调用QQ Mojo IPC与WeChat XPlugin
CPPC++_现代活动指标
CPPC++_Xournal是一款手写笔记软件，支持PDF注释，使用C语言编写，支持GTK3，支持Linux，如Ubu
资源概述： 本资源提供了一套完整的学生实习管理系统解决方案，涵盖了前台小程序页面与后台管理系统两大模块。前台小程序页面设计简洁直观，用户可根据不同身份（学生或企业）进行登录。学生用户能够方便地浏览并投递感兴趣的实习岗位，而企业用户则能轻松发布实习信息，吸引优秀人才。后台管理系统功能全面，包括个人中心、首页、学生管理、教师管理、企业管理、招聘管理、评分管理以及实习管理等多个方面，为管理员提供了强大的数据管理和操作工具。 技术栈亮点： SSM框架：系统后台采用Spring、Spring MVC和MyBatis Plus（简称SSM）作为核心开发框架，确保了系统的稳定性、可扩展性和可维护性。Spring作为控制反转（IoC）和面向切面编程（AOP）的容器，为系统提供了强大的业务逻辑处理能力；Spring MVC则负责处理Web请求和响应，实现了前后端的分离；MyBatis Plus作为持久层框架，简化了数据库操作，提高了开发效率。 MySQL数据库：系统采用MySQL作为数据库存储解决方案，支持大数据量的存储和高效查询。 如有侵权请联系我删除，谢谢
微服务闪聚支付项目
博客链接 https://blog.csdn.net/weixin_47560078/article/details/143714557 文章从原理介绍出发，实现了 Rust 与 Java 的互调。利用 JNI 技术，可以充分发挥 Rust 的性能优势，同时保持 Java 的跨平台特性。这种技术组合适用于对性能要求较高的应用场景，如图像处理、数据分析和系统级编程等。
cppc++
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
分布式事务lcn
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
cppc++
安卓手机与电脑的socket通信源码
Anaconda：JupyterNotebook使用教程.docx
Amazon S3：S3静态网站托管教程.docx
Python商品销售数据分析可视化项目源码（期末大作业）.zip，个人经导师指导并认可通过的98分大作业设计项目。主要针对计算机相关专业的正在做期末大作业设计的学生和需要项目实战练习的学习者，可作为课程设计、期末大作业，代码资料完整下载可用。 Python商品销售数据分析可视化项目源码（期末大作业）.zip，个人经导师指导并认可通过的98分大作业设计项目。主要针对计算机相关专业的正在做期末大作业设计的学生和需要项目实战练习的学习者，可作为课程设计、期末大作业，代码资料完整下载可用。Python商品销售数据分析可视化项目源码（期末大作业）.zip，个人经导师指导并认可通过的98分大作业设计项目。主要针对计算机相关专业的正在做期末大作业设计的学生和需要项目实战练习的学习者，可作为课程设计、期末大作业，代码资料完整下载可用。Python商品销售数据分析可视化项目源码（期末大作业）.zip，个人经导师指导并认可通过的98分大作业设计项目。主要针对计算机相关专业的正在做期末大作业设计的学生和需要项目实战练习的学习者，可作为课程设计、期末大作业，代码资料完整下载可用。Python商品销售数据分析
CPPC++_wechathookWeChatApi微信Api微信hook微信接口python微信接口java微信Ap