前面我们写了文件加载,类继承,都比较基础,有了前面的框架, 后边我们还需要一个可见控件的渲染对象,也是我们本章讲的重点,
主要目的是跟据我们在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控件开发之控件初体验
分享到:
相关推荐
在这个主题中,“javascript控件开发之继承关系”主要探讨的是如何利用JavaScript的面向对象特性来构建和组织控件的层次结构,以及如何通过继承来实现代码的复用和模块化。 在JavaScript中,继承是基于原型...
在JavaScript控件开发中,"可见控件"是构建用户界面UI的重要组成部分。这些控件是用户与应用程序交互的桥梁,比如按钮、文本框、下拉列表等。本篇文章将聚焦于可见控件的渲染基类,这是创建自定义、高级控件的基础。...
JavaScript控件开发是一种常见的Web应用开发技术,它允许开发者创建交互性强、功能丰富的用户界面元素。动态加载作为JavaScript控件开发中的一个重要概念,是提升网页性能和用户体验的关键手段。动态加载意味着控件...
在时间控件的上下文中,JSP可能用来渲染包含JavaScript控件的页面,并且可能处理与时间相关的服务器端逻辑。 压缩包子文件的文件名称"javascript日期"可能包含了实现JavaScript时间控件的具体代码或者资源文件。...
JavaScript控件是网页开发中常用的一种技术,它利用JavaScript这门客户端脚本语言来实现页面交互、增强用户体验的功能模块。JavaScript控件可以是按钮、文本框、下拉菜单等基本元素的扩展,也可以是日历插件、轮播图...
ASP.NET控件开发是构建动态Web应用程序的关键技术之一。这些资料涵盖了从基础知识到高级技巧,帮助开发者深入理解ASP.NET控件的工作原理以及如何自定义它们。以下是对这些资源的详细解读: 1. **ASP.NET控件开发...
JavaScript日历控件是网页开发中常用的一种交互元素,它为用户提供了一个直观的方式来选择日期,常见于表单、事件管理或在线预订系统等场景。在本文中,我们将深入探讨六种不同的JavaScript日历控件,了解它们的特点...
在实际的日期时间控件开发中,除了基本的`Date`对象操作,我们还需要考虑用户体验,如: - **日历展示**:可以创建一个二维数组来表示日历格子,并根据月份和年份动态填充。 - **事件处理**:添加点击事件监听器到...
通过ASP.NET,开发者可以轻松地将动态数据流与前端的Flash或JavaScript控件集成,实现数据驱动的图表。ASP.NET提供了多种方法来与前端交互,如AJAX(异步JavaScript和XML)和Web服务,这使得图表可以实时更新,响应...
JavaScript日期控件因其轻量级、灵活性和易于集成的特点,在Web开发中被广泛使用。本篇将深入探讨JavaScript日期控件,包括其基本原理、使用方法以及如何与jQuery库结合,同时也将提及压缩包中的相关资源。 一、...
综上所述,创建带有时间日期的JavaScript控件涉及到JavaScript基础、日期对象的使用、第三方库的选择、自定义组件的开发、时间日期的校验和国际化等多个方面。理解这些知识点,并结合实际项目需求,可以帮助你构建出...
在"extjs网页控件开发"中,我们主要关注的是使用ExtJS来创建高效的网页组件,如图表和多级联动下拉列表框。这些控件能够显著提升用户界面的交互性和用户体验。 首先,让我们深入探讨ExtJS中的图表控件。ExtJS提供了...
4. **开发技术**:单据控件的开发可以基于多种技术,如HTML5、JavaScript(配合库如jQuery或React)、WPF、WinForms、JavaFX等。开发者需要熟悉相应技术栈,理解其事件处理机制和数据绑定原理。 5. **数据绑定**:...
JavaScript树形控件是一种在网页中用于展示层次结构数据的交互式组件,它通常以节点的形式呈现,每个节点可以展开或折叠,展示其子节点。这种控件在各种应用场景中非常常见,例如文件目录浏览、组织结构展示、菜单...
在学习《阿赖实用javascript控件程序及教程》时,除了掌握这些控件的实现方法,还要理解如何优化代码性能,避免阻塞页面渲染。同时,要关注兼容性问题,确保在不同的浏览器和设备上都能正常工作。另外,学习使用调试...
JavaScript DataTables 是一款高度可定制、功能强大的前端表格插件,尤其适用于需要处理大量数据的网页应用。这个表格控件支持在PHP、Java和DotNet等后端框架中使用,可以方便地对数据进行排序、搜索、分页和格式化...
总结,JavaScript树形控件是网页开发中的重要工具,通过掌握其原理、实现方法和优化策略,开发者可以创建出符合需求、高性能的树形界面,提升用户体验。同时,不断学习和实践新的库和框架,可以更高效地开发这类组件...
JavaScript树型控件是一种在网页上展示层次结构数据的交互组件,它通常用于文件系统、组织结构图或者导航菜单等场景。在这个“JavaScript 树型控件源码”中,我们可以期待找到一个实现这种功能的代码库。接下来,...
总的来说,JS日期控件涉及了JavaScript的基础知识,如对象、事件、DOM操作,以及一些高级特性,如国际化和性能优化。理解并掌握这些知识点,能帮助开发者构建出功能完备、用户体验优秀的日期选择功能。