`
qinzhenzhou
  • 浏览: 10527 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

javascript控件开发之渲染对象

阅读更多
    前面我们写了文件加载,类继承,都比较基础,有了前面的框架, 后边我们还需要一个可见控件的渲染对象,也是我们本章讲的重点,
主要目的是跟据我们在dom元素上的配置,渲染出我们想要的效果,例如我们在div上配置一个code="com.ui.Botton"属性,就跟据指定的com.ui.Botton.js类来绘制我们的按钮,
实现思路是先读取所有的dom元素,查看是否有指定code的元素在,并执dom对应的控件代码。
我们在common下面增加文件render.js
/**
 * ui控件渲染
 * 参数:dom 占位符
 *       callBack 回调函数
 */
function render(dom, callBack){
	if(typeof dom == "undefined") return;
	//读取传入的dom参数的所有子元素
	var len = dom.childNodes.length;
	for(var i = 0; i < len; i++) {
	    //循环对各个dom子元素处理
		var curDom = dom.childNodes[i];
		//获取子元素的子元素数组
		var childDom = curDom.childNodes;
		//获取当前元素的id或name用于作控件的变量名,
		var comName = curDom.id || curDom.name;
		//如果重复就不渲染
		if(comName !== "" && typeof comName != "undefined" && comName != null) {
			if(typeof thisWindow.com[comName] === "undefined") {
			    //读取元素的code属性
				var code = curDom.attributes.code;
				if(typeof code != "undefined") {
					var code = code.nodeValue;
					//把code属性转换成类对象
					var comClass = eval(code);
					if(typeof comClass != "undefined") {
					    //如果有对应的类对象,则再读取option属性
						var option = curDom.attributes.option;
						if(typeof option != "undefined") {
							option = eval("(" + option.nodeValue + ")");
						}
						try {
						    //跟据code对应的ui控件对象,
							var ui = new comClass(option, curDom, true);
							//加入到com列表中,
							thisWindow.com[curDom.id || curDom.name] = ui;
							//返回当前容器,用于继续渲染子元素控件
							curDom = ui.getRectDom();
						} catch(e) {
						    //控件渲染错误时日志输出。
							thisWindow.LogInfo("create class " + code 
							+ " error:" + e.message);
						}
					} else {
					    //控件不存在时输出日志
						thisWindow.LogInfo("class " + code + " can not found.");
					}
				}
			} else {
			    //如果id重复,提示,输出日志
				thisWindow.LogInfo(comName + " is exist");
			}
		}
		if(childDom.length > 0 && curDom != null && typeof curDom != "undefined") {
		    //如果还有子元素,则继续渲染
			render(curDom);
		}
	}
	if(typeof callBack == "function") {
		callBack();
	}
};
//第一次默认渲染body对象下的控件
render(document.body, function(){
	if(typeof thisWindow.onAfterRender == "function") {
	    //渲染后事件
		thisWindow.onAfterRender();
	}
});

我们把这个文件也加入到staticScript.js的文件列表中,
staticScript = [
    "../css/com.comStyle.css",
    "extend.js",
    "render.js"
]

首先,为了后续定义的控件命名不至于混乱, 我们先定义一个命名空间函数nameSpace(nameSpace.js),
function nameSpace(){
    var arg = arguments, obj = null, i, j, arr, ns;
		// 保存当前的nameSpace
		for (i = 0; i < arg.length; i++){
			// 以"."分割字符串
			arr = arg[i].split(".");
			// 取出第一节点对象
			ns = arr[0];
			// 判断是否存在ns字符串对应的对象,若不存在则进行初始化成原始对象{}
			if(window[ns] === undefined){
				window[ns] = {};
			}
			obj = window[ns];
			// 循环判读对象已存在,如果未存在,则初始化成原始对象{}
			for (j = 1; j < arr.length; j++){
				if(obj[arr[j]] === undefined){
					obj[arr[j]] = {};
				}
				obj = obj[arr[j]];
			}
		}
		return obj;
}

把该文件放入common文件夹中,并添加到staticScript.js列表中,如下
staticScript = [
    "../css/com.comStyle.css",
    "extend.js",
    "nameSpace.js",
    "render.js"
]

到此,我们的控件框架已经形成,如下
+--demo
     +--script
          +--common
               +--init.js
               +--staticScript.js
               +--extend.js
               +--render.js
               +--nameSpace.js
          +--css
               +--com.comStyle.css
     +--web
          +--test.html
后续我们要写的控件将变得很容易,
可下载附件
请关注下一篇 javascript控件开发之控件初体验
  • 3.rar (5.2 KB)
  • 下载次数: 6
分享到:
评论

相关推荐

    javascript控件开发之继承关系

    在这个主题中,“javascript控件开发之继承关系”主要探讨的是如何利用JavaScript的面向对象特性来构建和组织控件的层次结构,以及如何通过继承来实现代码的复用和模块化。 在JavaScript中,继承是基于原型...

    javascript控件开发之可见控件 1

    在JavaScript控件开发中,"可见控件"是构建用户界面UI的重要组成部分。这些控件是用户与应用程序交互的桥梁,比如按钮、文本框、下拉列表等。本篇文章将聚焦于可见控件的渲染基类,这是创建自定义、高级控件的基础。...

    javascript控件开发之动态加载

    JavaScript控件开发是一种常见的Web应用开发技术,它允许开发者创建交互性强、功能丰富的用户界面元素。动态加载作为JavaScript控件开发中的一个重要概念,是提升网页性能和用户体验的关键手段。动态加载意味着控件...

    javascript时间控件

    在时间控件的上下文中,JSP可能用来渲染包含JavaScript控件的页面,并且可能处理与时间相关的服务器端逻辑。 压缩包子文件的文件名称"javascript日期"可能包含了实现JavaScript时间控件的具体代码或者资源文件。...

    javascript控件

    JavaScript控件是网页开发中常用的一种技术,它利用JavaScript这门客户端脚本语言来实现页面交互、增强用户体验的功能模块。JavaScript控件可以是按钮、文本框、下拉菜单等基本元素的扩展,也可以是日历插件、轮播图...

    ASP.Net控件开发基础资料

    ASP.NET控件开发是构建动态Web应用程序的关键技术之一。这些资料涵盖了从基础知识到高级技巧,帮助开发者深入理解ASP.NET控件的工作原理以及如何自定义它们。以下是对这些资源的详细解读: 1. **ASP.NET控件开发...

    6种JavaScript日历控件

    JavaScript日历控件是网页开发中常用的一种交互元素,它为用户提供了一个直观的方式来选择日期,常见于表单、事件管理或在线预订系统等场景。在本文中,我们将深入探讨六种不同的JavaScript日历控件,了解它们的特点...

    javascript 日期时间控件

    在实际的日期时间控件开发中,除了基本的`Date`对象操作,我们还需要考虑用户体验,如: - **日历展示**:可以创建一个二维数组来表示日历格子,并根据月份和年份动态填充。 - **事件处理**:添加点击事件监听器到...

    flash和javascript统计图控件

    通过ASP.NET,开发者可以轻松地将动态数据流与前端的Flash或JavaScript控件集成,实现数据驱动的图表。ASP.NET提供了多种方法来与前端交互,如AJAX(异步JavaScript和XML)和Web服务,这使得图表可以实时更新,响应...

    日期控件 javascript日期控件

    JavaScript日期控件因其轻量级、灵活性和易于集成的特点,在Web开发中被广泛使用。本篇将深入探讨JavaScript日期控件,包括其基本原理、使用方法以及如何与jQuery库结合,同时也将提及压缩包中的相关资源。 一、...

    带有时间日期的javascript控件

    综上所述,创建带有时间日期的JavaScript控件涉及到JavaScript基础、日期对象的使用、第三方库的选择、自定义组件的开发、时间日期的校验和国际化等多个方面。理解这些知识点,并结合实际项目需求,可以帮助你构建出...

    extjs网页控件开发

    在"extjs网页控件开发"中,我们主要关注的是使用ExtJS来创建高效的网页组件,如图表和多级联动下拉列表框。这些控件能够显著提升用户界面的交互性和用户体验。 首先,让我们深入探讨ExtJS中的图表控件。ExtJS提供了...

    单据控件开发使用手册

    4. **开发技术**:单据控件的开发可以基于多种技术,如HTML5、JavaScript(配合库如jQuery或React)、WPF、WinForms、JavaFX等。开发者需要熟悉相应技术栈,理解其事件处理机制和数据绑定原理。 5. **数据绑定**:...

    javascript 树形控件

    JavaScript树形控件是一种在网页中用于展示层次结构数据的交互式组件,它通常以节点的形式呈现,每个节点可以展开或折叠,展示其子节点。这种控件在各种应用场景中非常常见,例如文件目录浏览、组织结构展示、菜单...

    阿赖实用javascript控件程序及教程

    在学习《阿赖实用javascript控件程序及教程》时,除了掌握这些控件的实现方法,还要理解如何优化代码性能,避免阻塞页面渲染。同时,要关注兼容性问题,确保在不同的浏览器和设备上都能正常工作。另外,学习使用调试...

    Javascript DataTables 表格控件

    JavaScript DataTables 是一款高度可定制、功能强大的前端表格插件,尤其适用于需要处理大量数据的网页应用。这个表格控件支持在PHP、Java和DotNet等后端框架中使用,可以方便地对数据进行排序、搜索、分页和格式化...

    javascript树形控件

    总结,JavaScript树形控件是网页开发中的重要工具,通过掌握其原理、实现方法和优化策略,开发者可以创建出符合需求、高性能的树形界面,提升用户体验。同时,不断学习和实践新的库和框架,可以更高效地开发这类组件...

    JavaScript 树型控件源码

    JavaScript树型控件是一种在网页上展示层次结构数据的交互组件,它通常用于文件系统、组织结构图或者导航菜单等场景。在这个“JavaScript 树型控件源码”中,我们可以期待找到一个实现这种功能的代码库。接下来,...

    js(javascript) 日期控件

    总的来说,JS日期控件涉及了JavaScript的基础知识,如对象、事件、DOM操作,以及一些高级特性,如国际化和性能优化。理解并掌握这些知识点,能帮助开发者构建出功能完备、用户体验优秀的日期选择功能。

Global site tag (gtag.js) - Google Analytics