我的第一篇博客 Javascript继承

前几天搜索JS继承的时候无意中搜到了..司徒正美的博客..里面的文章太有用了.. 我也是第一次使用博客园

地址 http://www.cnblogs.com/rubylouvre/ 然后看了她的继承一些文章.

现在公司要弄一个社区...我觉得可以使用一个继承框架来管理类.当然也要实现继承.于是乎就开始动工了...

 

框架简称 Ljs 是学习Js的意思  Learning Javascript google翻译的

继承的主要思路是参考 正美的 还有一些命名是摘用ExtJs的, 刚完成没多久..肯定很多Bug..还没调试

主要功能有:

 classname 是类名.包括命名空间 config是类的配置函数
 Ljs.define(classname,config) 
init是构造函数 , inherit是要继承的类,可以是字符串,也可以是类. $static是静态属性和方法(不会被继承),其余的都会被当作对象的属性或方
 实现了 $super语法 实列  $super必须放在第一个参数s
extends:function($super,params1...paramsN){
  框架会自动判断子类是否有$super参数
 $super() //即父类的方法
 do something
}

 Ljs.using(classname[,alias]) 主要是引入类到全局中,alias讲类更换的别名 示列

Ljs.define("n.myTestClass",{...}); //创建了一个类 默认是创建到 Ljs.classes空间下..所以要使用类的时候需

var m = new Ljs.classes.n.myTestClass()

但是使用 Ljs.using("n.myTestClass") 后即可 var m = new myTestClass()

使用 alias 参数 Ljs.using("n.myTestClass","cls"); 后 var m = new cls();s

继承部分大致就这些

 

/*
Learning Javascript
Ljs by 黑子
*/



(function () {
    //#region 常用方法
    if (typeof Ljs === "undefined") {
        window.Ljs = {};
    } else { return; }
    Ljs.copy = function (obj, config, deft, hasOwn) {
        if (deft) { Ljs.copy(obj, deft, hasOwn) }
        if (obj && config) {
            for (var k in config) {
                if (!hasOwn || config.hasOwnProperty(k)) {
                    obj[k] = config[k];
                }
            }
        }
    };
    Ljs.copy(Ljs, {
        copyIf: function (obj, config) {
            for (var k in config) {
                if (obj[k] === undefined) {
                    obj[k] == config[k];
                }
            }
        },
        classes: {},
        $: function (s) {
            return document.getElementById(s);
        }
    });
    Ljs.Function = {
        alias: function (Met, Obj) {
            return function () {
                Met.apply(Obj, arguments);
            }
        }
    }
    Ljs.alias = Ljs.Function.alias;
    Ljs.Array = function (arg) {
        return Array.prototype.slice.call(arg);
    }
    Ljs.copy(Ljs.Array, {});

    Ljs.namespaces = {
        ns: function (name, obj) {
            name = name.split(".");
            var cDom = Ljs.classes;
            for (var i = 0; i < name.length; i++) {
                var cName = name[i];
                if (obj && i == name.length - 1) {
                    if (cDom[cName]) {
                        Ljs.copy(obj, cDom[cName], true)
                    }
                    cDom[cName] = obj;
                } else if (!cDom[cName]) {
                    cDom[cName] = {};
                }
                cDom = cDom[cName];
            }
            return cDom;
        },
        using: function (name, al) {
            name = name.split(".");
            var cDom = Ljs.classes;
            for (var i = 0; i < name.length; i++) {
                var cName = name[i];
                if (!cDom[cName]) { alert("引入的类不存在"); return; }
                cDom = cDom[cName];
            }
            cName = al || cName;
            if (window[cName] === cDom) return;
            if (window[cName]) {
                alert("当前已被引用,请换别名");
                return;
            }
            window[cName] = cDom;

        },
        getClass: function (name) {
            name = name.split(".");
            var cDom = Ljs.classes;
            for (var i = 0; i < name.length; i++) {
                var cName = name[i];
                if (!cDom[cName]) { alert("继承的类不存在"); return; }
                cDom = cDom[cName];
            }
            return cDom;

        }
    }
    Ljs.using = Ljs.namespaces.using;
    Ljs.ns = Ljs.namespaces.ns;
    Ljs.browser = function () {
        var ua = navigator.userAgent.toLowerCase();
        var check = function (regex) {
            return regex.test(ua);
        },
        docMode = document.documentMode,
        isOpera = check(/opera/),
        isOpera10_5 = isOpera && check(/version\/10\.5/),
        isChrome = check(/\bchrome\b/),
        isWebKit = check(/webkit/),
        isSafari = !isChrome && check(/safari/),
        isSafari2 = isSafari && check(/applewebkit\/4/),
        isSafari3 = isSafari && check(/version\/3/),
        isSafari4 = isSafari && check(/version\/4/),
        isIE = !isOpera && check(/msie/),
        isIE7 = isIE && (check(/msie 7/) || docMode == 7),
        isIE8 = isIE && (check(/msie 8/) && docMode != 7 && docMode != 9 || docMode == 8),
        isIE9 = isIE && (check(/msie 9/) && docMode != 7 && docMode != 8 || docMode == 9),
        isIE6 = isIE && check(/msie 6/),
        isGecko = !isWebKit && check(/gecko/),
        isGecko3 = isGecko && check(/rv:1\.9/),
        isGecko4 = isGecko && check(/rv:2\.0/),
        isFF3_0 = isGecko3 && check(/rv:1\.9\.0/),
        isFF3_5 = isGecko3 && check(/rv:1\.9\.1/),
        isFF3_6 = isGecko3 && check(/rv:1\.9\.2/),
        isWindows = check(/windows|win32/),
        isMac = check(/macintosh|mac os x/),
        isLinux = check(/linux/),
        scrollWidth = null;
        return {
            docMode: docMode,
            isOpera: isOpera,
            isOpera10_5: isOpera10_5,
            isWebKit: isWebKit,
            isChrome: isChrome,
            isSafari: isSafari,
            isSafari3: isSafari3,
            isSafari4: isSafari4,
            isSafari2: isSafari2,
            isIE: isIE,
            isIE6: isIE6,
            isIE7: isIE7,
            isIE8: isIE8,
            isIE9: isIE9,
            isGecko: isGecko,
            isGecko3: isGecko3,
            isGecko4: isGecko4,
            isFF3_0: isFF3_0,
            isFF3_5: isFF3_5,
            isFF3_6: isFF3_6,
            isLinux: isLinux,
            isWindows: isWindows,
            isMac: isMac
        }
    } ();
    //#endregion

    //#region 继承机制 
    var Class = Ljs.Class = function (config) {
        config = config || {};
        var init = config.init || function () { };
        var superclass = config.inherit || Object;
        var $static = config.$static || {};
        delete config.init;
        delete config.inherit;
        delete config.$static;
        var $class = Class.bridge(superclass, init); //封装原始构造函数
        Class.superSyntax($class.prototype, config); //添加方法|属性并实现$super语法
        Ljs.copy($class, $static); //给类添加静态方法 || 属性
        return $class;
    }
    Ljs.copy(Ljs.Class, {
        reSuper: /function(?:\s+)?\(.*(\$super)+.*?\)/g,
        bridge: function (superclass, initialize) {
            var cls = function () {
                superclass.apply(this, arguments);
                initialize.apply(this, arguments);
            }
            var f = function () { }
            f.prototype = superclass.prototype;
            cls.prototype = new f();
            cls.prototype.superclass = superclass;
            cls.prototype.constructor = cls;
            cls.superclass = superclass;
            cls.constructor = initialize;
            return cls;
        },
        superSyntax: function (obj, options) {
            for (var k in options) {
                if (options.hasOwnProperty(k)) {
                    if ((obj[k] != undefined) && (typeof (options[k]) === "function") && (Class.reSuper.test(options[k].toString()))) {
                        var kk = k;
                        obj[kk] = function () {
                             var $super = Ljs.alias(this.superclass.prototype[kk], this);
                            return options[kk].apply(this, Array($super).concat(Ljs.Array(arguments)));
                        }
                    } else {
                        obj[k] = options[k];
                    }
                }
            }
        }
    });

    var Manager = Ljs.ClassManager = {
        define: function (classname, config) {
            ///	<summary>
            ///		Ljs.define(classname,config) 创建自定义类并放入Ljs命名空间下 
            ///	</summary>
            ///	<param name="classname" type="String">
            ///	     classname 类名 包括命名空间 namespace.youclass
            ///	</param>
            ///	<param name="config" type="Object">
            ///	     config 配置文件 init 类的构造函数 , inherit 继承的父类 $static 类的静态方法和属性 其余都为类的方法
            ///	</param>
            if (classname == undefined) throw ("缺少类名");
            config.classname = classname;
            if (typeof config.inherit === "string") {
                config.inherit = Manager.getClass(config.inherit)
            }
            var newClass = Ljs.Class(config);
            Ljs.namespaces.ns(classname, newClass);
            return newClass;
        },
        getClass: Ljs.namespaces.getClass
    }
    Ljs.define = Ljs.ClassManager.define;
    //#endregion

})();