javascript 继承、命名空间实现分享

时间:2023-12-26 19:09:37

命名空间是用来组织和重用代码的编译单元,在大型项目开发中javascript使用的越来越多时,我们就应该将项目里的js类库管理起来,如何将自己进行归类管理,防止命名冲突,但是Javascript默认不提供这样的功能,看了这篇文章你就能解决这些问题了。

先说一下javascript命名空间的实现吧,直接上代码:

var Company = window.Company  || {};
Company.namespace = function (ns) {
if (!ns || !ns.length) {
return null;
}
var levels = ns.split(".");
var nsobj = Company ;
//如果申请的命名空间是在Company下的,则必须忽略它,否则就成了Company.Company 了
for (var i = (levels[0] == "Company") ? 1 : 0; i < levels.length; ++i) {
//如果当前命名空间下不存在,则新建一个关联数组。
nsobj[levels[i]] = nsobj[levels[i]] || {};
nsobj = nsobj[levels[i]];
}
//返回所申请命名空间的一个引用;
return nsobj;
};

使用方法:

Company.namespace("Company.AbcClass");

/// <summary>
/// XXXXX
/// </summary>
Company.AbcClass = function () { };
/// <summary>
/// XXXXX
/// </summary>
HySoft.FormDesign.prototype = {
abc:"",
abcFunction: function(){
}
};

Javascript继承实现

(function () {
// 当前是否处于创建类的阶段
var initializing = false;
jsClass = function () { };
jsClass.extend = function (prop) {
// 如果调用当前函数的对象(这里是函数)不是Class,则是父类
var baseClass = null;
if (this !== jsClass) {
baseClass = this;
}
// 本次调用所创建的类(构造函数)
function F() {
// 如果当前处于实例化类的阶段,则调用init原型函数
if (!initializing) {
// 如果父类存在,则实例对象的baseprototype指向父类的原型
// 这就提供了在实例对象中调用父类方法的途径
if (baseClass) {
this._superprototype = baseClass.prototype;
}
this.Init.apply(this, arguments);
}
}
// 如果此类需要从其它类扩展
if (baseClass) {
initializing = true;
F.prototype = new baseClass();
F.prototype.constructor = F;
initializing = false;
}
// 新创建的类自动附加extend函数
F.extend = arguments.callee; // 覆盖父类的同名函数
for (var name in prop) {
if (prop.hasOwnProperty(name)) {
// 如果此类继承自父类baseClass并且父类原型中存在同名函数name
if (baseClass &&
typeof (prop[name]) === "function" &&
typeof (F.prototype[name]) === "function" &&
/\b_super\b/.test(prop[name])) {
// 重定义函数name -
// 首先在函数上下文设置this._super指向父类原型中的同名函数
// 然后调用函数prop[name],返回函数结果
// 注意:这里的自执行函数创建了一个上下文,这个上下文返回另一个函数,
// 此函数中可以应用此上下文中的变量,这就是闭包(Closure)。
// 这是JavaScript框架开发中常用的技巧。
F.prototype[name] = (function (name, fn) {
return function () {
this._super = baseClass.prototype[name];
return fn.apply(this, arguments);
};
})(name, prop[name]);
} else {
F.prototype[name] = prop[name];
}
}
}
return F;
};
})();

使用方法:

var jsBasePage = jsClass.extend({
Init: function() {
debugger;
},
Load: function() {
debugger;
},
PreRender: function() { },
Ajax: function() {
debugger;
}
}); var ABC = jsBasePage.extend({
Load: function() {
debugger;
this._super();
}
}); var abc = new ABC(); abc.Load();

代码比较简单,就不做解释了,实现原理和部分代码也是从网上借鉴的(原始地址已经找不到了)。