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();

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

时间: 2024-10-07 18:35:15

javascript 继承、命名空间实现分享的相关文章

重温Javascript继承机制

原文:http://mozilla.com.cn/post/21667/ =========================== 上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Javascript原名Mocha,当时还叫做LiveScript,创造者是Brendan Eich,现任Mozilla公司首席技术官. 1994年,历史上第一个比较成熟的网

【JavaScript】重温Javascript继承机制

上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Javascript原名Mocha,当时还叫做LiveScript,创造者是Brendan Eich,现任Mozilla公司首席技术官. 1994年,历史上第一个比较成熟的网络浏览器——Navigator0.9版诞生在网景公司(Netscape),极为轰动.但是,Navigator0.9只能用来浏览,不

闲聊javascript继承和原型

javascript继承已经是被说烂的话题了,我就随便聊一点~ 一.javascript的复制继承 javascript的继承有复制继承和原型继承,基于复制继承用的不太多,而且无法通过instanceof的验证 //拷贝继承,prototype.js的extend=> function extend(destination,source){ for(var property in source) destination[property]=source[properyt]; return des

javascript继承的三种方法

javascript并不是纯粹的面向对象的语言,因此也没有明确的继承方式,但可以通过一些方式来模拟继承.本文总结常见的javascript继承模拟方式 1,对象继承 //父类 function Person(name,age){ this.name = name; this.age = age; }; Person.prototype.height = "170cm"; //子类 function Boy(){ this.speak = function(){ alert("

javascript继承

原型链继承 1 <script> 2 function Parent(){ 3 this.name = 'mike'; 4 } 5 6 function Child(){ 7 this.age = 12; 8 } 9 Child.prototype = new Parent();//Child继承Parent,通过原型,形成链条 10 11 var test = new Child(); 12 alert(test.age); 13 alert(test.name);//得到被继承的属性 14

JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即“子类型.prototype = new 父类型();”,实现方法如下

javascript继承—prototype属性介绍(2)

js里每一个function都有一个prototype属性,而每一个实例都有constructor属性,并且每一个function的prototype都有一个constructor属性,这个属性会指向自身.这会形成一个非常有意思的链式结构.举例如下: function Person(){ this.name =12; } console.log(Person.prototype); console.log(Person.prototype.constructor);//输出Person,指向自身

一种基于ES5的JavaScript继承

关于JavaScript继承,方式很多,包括compile-to-javascript的语言TypeScript, CoffeeScript以及网站MDN, GitHub, Modernizr各种polyfill都给出了稳妥的实现方案. 从ES5的角度看,这其中一些方案在功能上OK,但在语义上却不尽如人意. 本人从这些方案中采取一些比较潮的思路,整理出一份方案,可实现与原生DOM类继承的风格一致,达到功能和语义兼得的效果(当然,就别再老想着99后ES3了). 如果你的WebApp是基于ES5运行

面向面试编程——javascript继承的6种方法

javascript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script type="text/javascript"> function Person(name,sex) { this.name=name; this.sex=sex; this.friends=['李四']; this.getName=function(){ alert(this.name