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

javascript控件开发之继承关系

阅读更多
    经过上一篇,我们实现了文件的动态加载, 为了能方便编写控件,后续我们将采用类似继承的关系,编写多个js文件,并动态加载到页面上,在此我们编写一个函数,用于虚拟继承,
    在目录common下添加extend.js文件, 并定义函数Extend,其中带三个参数,第一个参数,为基类,第二个参数为子类,第三个参数为绑定this状态,为了方便,我们参数做了兼容处理,即可以只有子类childClass的处理,
function Extend(baseClass, childClass, isBind) {
        // 兼容jClass({}, true)的情况
	if(typeof childClass === "boolean"){
		isBind = childClass;
	}
	// 只接受一个参数的情况 - jClass(childClass)
	if (typeof (baseClass) === "object") {
		childClass = baseClass;
		baseClass = null;
	}
}

为了方便起见,我们后续的类结构都以json结构为主,这样我们需要把json对象转换成标准的函数结构,并把基类上的方法,复制到子类,并合并同名函数,
因此,接下来,为函数添加一个,函数体curClass,及合并同名函数的方法mergeFunc,剩下的就是函数prototype的继承调整及函数和属性的复制和构建了。
function Extend(baseClass, childClass, isBind) {
        // 兼容jClass({}, true)的情况
	if(typeof childClass === "boolean"){
		isBind = childClass;
	}
	// 只接受一个参数的情况 - jClass(childClass)
	if (typeof (baseClass) === "object") {
		childClass = baseClass;
		baseClass = null;
	}
        //在继承时,不执行构造函数
    var initializing = false;	
        /**
	 * 构造新的对象,本次调用所创建的类(构造函数)
	 */
	function curClass() {
		// 如果当前处于实例化类的阶段,则调用init原型函数
		if (!initializing) {
			// 如果存在初始化方法才执行
			if(typeof this.init == "function") {
			    this.init.apply(this, arguments);
			}
		}
	}
        /** 
	 * 合并同名函数
	 * 把两个对象的同名函数,并排起来,默认调用子类函数, 
	 * 并在执行时,把基类函数赋给this.base,拱子类函数可以调用,
	 * 如此可以起到不改变结构的情况下,能灵活调用基类函数
	 */
	function mergeFunc(funcName) {
	    //定义一个新函数体
		var func = function() {
			//把原来的base先缓存起来
			var _base = this.base;
			//把当前的基类函数放到this.base对象,以便在子类的同名方法中调用。
			this.base = baseClass.prototype[funcName];
			//执行子类的方法,并把结果返回
			var result = childClass[funcName].apply(this, arguments);
			//还原基类的this.base函数
			this.base = _base;
			//返回执行结果
			return result;
		};
		//返回函数体
		return func;
	}
	
	// 如果此类需要从其它类扩展
	if (baseClass) {
		initializing = true;
		//结构指向基类,在javascript结构上会形成类似继承的关系
		curClass.prototype = new baseClass();
		curClass.prototype.constructor = curClass;
		initializing = false;
	}
		
	// 覆盖父类的同名函数 通过prototype定义的函数
	for (var name in childClass) {
		if (childClass.hasOwnProperty(name)) {
			//如果此类继承自父类baseClass并且父类原型中存在同名函数name
			if (baseClass && typeof (childClass[name]) === "function" 
			    && typeof (curClass.prototype[name]) === "function") {
				//合并函数
				curClass.prototype[name] = mergeFunc(name);
			} else {
				curClass.prototype[name] = childClass[name];
			}
		}
	}
		
	// 复制静态方法 不通过prototype定义的函数
	for(var name in baseClass){
		if(typeof baseClass[name] !== "function") continue;
		curClass[name] = baseClass[name];
	}
	
	//通过bind方法给每个方法的this绑定当前对象,避免丢失
	if(isBind){
		for(var name in curClass.prototype){
			if(typeof curClass.prototype[name] === "function"){
				curClass.prototype[name] = curClass.prototype[name].bind(this);
			}
		}
	}		
	return curClass;
}

添加好该文件后,我们的目录如下:
+--demo
     +--script
          +--common
               +--init.js
               +--staticScript.js
               +--extend.js
          +--css
               +--com.comStyle.css
     +--web
          +--test.html
并在staticScript.js文件中添加
staticScript = [
    "../css/com.comStyle.css",
    "extend.js"
]

这样我们的面向对象的继承关系就完成了,
源码如附件
请关注下一篇, javascript控件开发之渲染对象
  • 2.rar (3.6 KB)
  • 下载次数: 5
分享到:
评论

相关推荐

    javascript控件开发之控件初体验

    JavaScript控件开发是Web应用程序中不可或缺的一部分,它允许开发者创建具有特定功能和交互性的用户界面元素。本篇文章将深入探讨JavaScript控件开发的基础知识,帮助初学者了解如何创建自己的控件,并提供一个实际...

    javascript控件开发之可见控件 1

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

    javascript控件开发之可见控件(2)

    总的来说,“javascript控件开发之可见控件(2)”的主题涵盖了JavaScript控件的核心知识点,包括DOM操作、事件处理、函数的可重用性和继承,以及如何通过控制显示属性来实现控件的可见性切换。这些都是构建高效、灵活...

    ASP.Net控件开发基础资料

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

    JavaScript控件

    这套控件实现了类的继承,适用于B/S应用开发,如果你是做Java的程序员,相信你能更快的熟悉它的,因为这套控件有很大一部分Java的思想在里面. 这套控件我还在制作,现在还并不完整,不过我想拿出来给大家点评一下,希望...

    基于MFC的OCX控件开发教程及示例源代码

    **基于MFC的OCX控件开发教程及示例源代码** OCX(OLE Control Extension)控件,也称为ActiveX控件,是Microsoft在早期COM(Component Object Model)技术基础上发展出来的一种组件,用于创建可重用的、跨平台的...

    asp.net 控件开发

    ASP.NET控件开发是Web应用程序开发中的核心部分,它允许开发者构建交互性强、功能丰富的用户界面。在ASP.NET框架中,控件是构建网页的基本构建块,可以是服务器控件、HTML控件或自定义控件。下面我们将深入探讨ASP...

    庖丁解牛:纵向切入ASP.NET 3.5控件和组件开发技术

    在第1章中,作者介绍了服务器控件的基础,包括自定义服务器控件的创建、控件在软件开发中的作用,以及如何提升控件开发能力。同时,介绍了可继承的控件基类,以及如何开发和运行一个简单的控件。控件生命周期作为...

    C# ActiveX控件开发源码

    以下是对"ActiveX C#控件开发源码"这一主题的详细阐述。 首先,我们需要理解ActiveX的基础。ActiveX控件是基于COM(Component Object Model)的,它允许不同程序之间共享代码和数据。ActiveX控件通常以DLL(动态...

    asp.net控件开发实例

    在ASP.NET中,控件开发是一项关键技能,它允许开发者创建自定义的用户界面元素,以满足特定项目需求。这个“asp.net控件开发实例”很可能是为了教授开发者如何从头开始构建自己的ASP.NET控件,包括服务器端控件、...

    ASP.NET2.0服务器控件开发之实现事件

    义服务器控件事件 在ASP.NET 2.0中,自定义服务器控件的开发允许开发人员扩展和定制现有的控件功能,其中事件机制是核心部分...理解事件的声明、处理、以及与控件生命周期的关系,对于高效地开发服务器控件至关重要。

    如何使用c#开发web控件

    本教程将深入探讨如何使用C#开发Web控件,帮助你理解和掌握这一核心技能。 一、Web控件基础 Web控件是ASP.NET中的重要组成部分,它们在服务器端创建并处理,然后在客户端以HTML的形式呈现。C#开发者可以通过继承自...

    C# activeX控件开发Demo

    在本“C# activeX控件开发Demo”中,我们将深入探讨如何利用C#语言来创建和使用ActiveX控件。 ActiveX是微软推出的一种技术,主要用于构建基于Internet Explorer的Web应用和桌面应用。它基于COM(Component Object ...

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part2

    1.3 在控件开发中提升自己 2 1.4 可继承控件基类介绍 2 1.5 运行一个简单的控件 7 1.5.1 开发一个简单控件 7 1.5.2 部署和运行 11 1.6 控件生命周期 12 1.6.1 概述 12 1.6.2 用代码跟踪控件生命周期过程 14 ...

    控件开发code,不错可以看看

    在IT行业中,控件开发是构建用户界面(UI)的重要组成部分,特别是在软件开发和Web开发领域。控件是用户与应用程序交互的基本元素,如按钮、文本框、复选框等。"控件开发code"这一标签表明我们关注的是编写用于创建...

    asp控件开发基础方法及注意事项

    ASP.NET控件开发是构建动态Web应用程序的关键组成部分。在深入探讨基础方法和注意事项之前,我们需要了解ASP.NET控件的本质:它们是服务器端的对象,负责处理用户交互并生成HTML响应,以便在客户端浏览器中呈现。 ...

    C# 开发Activex控件

    虽然现代Web开发更倾向于使用JavaScript框架和Web组件,但对于某些特定场景,如老系统的维护或特定平台的需求,ActiveX控件仍然是一个有效的解决方案。了解并掌握这项技术,对于扩展.NET开发能力具有重要意义。

    ASP.NET用户控件和自定义控件

    1. 选择适当的基类,如Control、ButtonBase或TextBoxBase,根据需要的控件类型进行继承。 2. 覆盖或实现基类的方法和属性,如RenderControl、OnInit和OnLoad,以定义控件的行为和外观。 3. 可能需要重写...

    Asp.net 2.0 自定义控件开发[开发一个图表(WebChart)控件(柱状图示例)](示例代码下载)收藏

    总结一下,本示例提供的"WebChart"控件开发涵盖了ASP.NET自定义控件的多个核心方面,包括控件的创建、数据绑定、图形绘制、事件处理和客户端脚本支持。通过学习这个示例,开发者可以深入理解自定义控件的工作原理,...

Global site tag (gtag.js) - Google Analytics