javascript控件开发之页面控制器

最新推荐文章于 2021-05-29 16:33:39 发布

iteye_20428

最新推荐文章于 2021-05-29 16:33:39 发布

阅读量192

点赞数

分类专栏：控件开发文章标签： javascript 控件开发框架 web前端 ViewUI

本文链接：https://blog.csdn.net/iteye_20428/article/details/82578379

版权

控件开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本篇，我们主要实现页面控制器，简单说就是用于控制当前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控件开发之布局控件

iteye_20428

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript控件开发之页面控制器

本篇，我们主要实现页面控制器，简单说就是用于控制当前html对应的js类,我们将在上一篇的基础上继续增加新的代码，首先，我们在common文件夹下添加pageControllor.js文件，该文件，继承com.baseObject对象,代码比较简单，主要目的是要把页面上的控件对象，移到控制器类中[code="javascript"]/** * 页面控制基类 * 创建：qzz...
复制链接

扫一扫