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

命名空间是用来组织和重用代码的编译单元,在大型项目开发中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();

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

posted @ 2015-04-10 13:50  e天下小熊  阅读(214)  评论(0编辑  收藏  举报