经过上一篇,我们实现了文件的动态加载, 为了能方便编写控件,后续我们将采用类似继承的关系,编写多个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控件开发之渲染对象
分享到:
相关推荐
在上一篇基础上,添加事件相关函数,便于后续控件继承应用
这套控件实现了类的继承,适用于B/S应用开发,如果你是做Java的程序员,相信你能更快的熟悉它的,因为这套控件有很大一部分Java的思想在里面. 这套控件我还在制作,现在还并不完整,不过我想拿出来给大家点评一下,希望...
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 ...
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 ...
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 ...
本书主要介绍asp.net的控件开发,书中通过70多个例子讲解了asp.net控件开发技术的各个方面,而且剖析了很多控件中系统基类源代码,读者从这些系统源代码可以体会设计模式思想。如果扎实地掌握了asp.net控件的运行...
把一定的功能封装为控件,然后在页面中重复利用,提高开发效率,增加系统安全性已经被越来越多的开发人员所认识和使用。DTABLE就是这么一个非常实用、简单、功能强大的数据表控件。??其实,DTABLE中并没有采用什么...
1.7 JavaScript及其在Web开发中承担的角色 7 1.8 JavaScript和事件 9 1.9 标准化JavaScript和W3C 11 1.9.1 JavaScript对象 12 1.9.2 文档对象模型 12 1.10 关于浏览器 13 1.10.1 JavaScript的版本 14 ...
示例描述:介绍JavaScript与表单控件。 6.1.html JavaScript获取文本框的值。 6.2.html JavaScript控制文本框。 6.3.html 文本框的JavaScript特效。 6.4.html 获取select元素的值。 6.5....
微软推出的Web开发技术,开发者可以使用C#、VB.NET、JavaScript等. NET支持的语言进行开发。本书将使用C#作为ASP.NET开发语言。 本书将介绍C#基本语法(包括变量、数据类型、表达式、运算符等)、 面向对象C#...
InversifyJS是TypeScript和JavaScript应用程序的轻量级控件反转(IoC)容器。 IoC容器使用类构造函数来识别和注入其依赖项。 InversifyJS具有友好的API,并鼓励使用最佳的OOP和IoC做法。 动机 JavaScript现在支持...
Asp.net 2.0功能体验,细节之Web控件(一) 隐藏控件 Asp.net 2.0功能体验,总体设计思想 Asp.net 2.0 WebPart使用经验点滴 革新:.NET 2.0的自定义配置文件体系初探 关于如何在ASP.NET 2.0中定制Expression ...
8.6.2 WebView中对JavaScript的支持 8.7 Gallery (画廊) 8.8 SlidingDrawer(滑动抽屉) 8.9 Dialog(对话框) 8.9.1 AlertDialog警告框 8.9.2 ProgressDialog进度框 8.9.3 DatePickerDialog & TimePickerDialog...
第5章 JavaScript中的继承 Test4OO.htm 什么是对象 Test4OO.htm 对象分类 TestStatic.htm 作用域、静态作用域、this关键字 Test4Factory.htm 工厂方式 test4Constract.htm 构造函数 Test4Fixed.htm ...
• sample14.htm 日期之差 • sample15.htm 求圆的面积 • sample16.htm 数字对象与数字 • sample17.htm 字符串长度 • sample18.htm 创建字符串 • sample19....
境配置、表单及表单元素的应用、CSS与JavaScript脚本的应用、验证控件、构建PHP动态网页、PHP与MySQL的数据库技术、PHP与其他数据库技 术、SQL查询相关技术、MySQL高级应用技术、字符串的处理技术、PHP面向对象编程...
此次将长期的思考、感悟,多年的系统开发、设计和团队管理经验,以及深入分析众多项目实战的宝贵成果和盘托出,力求将编程思想与具体实践融为一体,提炼出适合于广大读者快速理解和彻底掌握.NET软件开发的最佳学习...
此次将长期的思考、感悟,多年的系统开发、设计和团队管理经验,以及深入分析众多项目实战的宝贵成果和盘托出,力求将编程思想与具体实践融为一体,提炼出适合于广大读者快速理解和彻底掌握.NET软件开发的最佳学习...