js接口 抽象类 在web开发当中的应用

经典js类继承方法

    /*     * @param subClass Function 子类     * @param superClass Function 父类     */    utility.inherits = function (subClass, superClass) {        var F = function () {        };        F.prototype = superClass.prototype;        subClass.prototype = new F();        subClass.prototype.constructor = subClass;        subClass.superclass = superClass.prototype;        if (superClass.prototype.constructor == Object.prototype.constructor) {            superClass.prototype.constructor = superClass;        }    }

</pre><pre name="code" class="javascript">来自于JavaScript设计模式的Interface类    // 接口类    /*     * @param name String 接口的名字     * @param methods Array 接口里面定义的方法     */    utility.Interface = function (name, methods) {        //如果购造函数的参数不等于2个，那么抛出异常        if (arguments.length != 2) {            throw new Error("Interface constructor called with " + arguments.length +                " arguments,but expected exactyl 2.")        }        this.name = name;        this.methods = [];        //方法数组，保证传进来的methods数组中，每一个元素都是字符串类型        for (var i = 0, len = methods.length; i < len; i++) {            if (typeof methods[i] !== "string") {                throw new Error("Interface constructor expects methods names to bo " +                    " passed in asastring.");            }            this.methods.push(methods[i]);        }    }    //接口实现方法    utility.Interface.ensureImplements = function (object) {        //如果参数少于2个，抛出异常，object是待判断实现接口的对象        if (arguments.length < 2) {            throw new Error("Function Interface.ensureImplements 被调用，传入 " + arguments.length +                " 个参数,至少需要2个参数。");        }        for (var i = 1, len = arguments.length; i < len; i++) {            //inter_face为接口，一定要实现Interface类            //书中使用interface，因是JavaScript中保留字，所以暂替换为inter_face            var inter_face = arguments[i];            if (inter_face.constructor !== utility.Interface) {                throw new Error("Function Interface.ensureImplements:第二个以及之后的参数必须是Interface的实例。");            }            for (var j = 0, methodsLen = inter_face.methods.length; j < methodsLen; j++) {                //对象中是否含有接口中定义的方法                var method = inter_face.methods[j];                if (!object[method] || typeof object[method] !== 'function') {                    throw new Error("Function Interface.ensureImplements: 对象 " +                        " 没有实现接口 " +                        inter_face.name +                        " 的方法 " +                        method);                }            }        }    }    //接口属性检测    utility.Interface.ensureProperty = function (object, properties) {        for (var j = 0, len = properties.length; j < len; j++) {            if (!object[properties[j]]) {                throw new Error("Function Interface.ensureProperty: 对象中不存在 " +                    properties[j] +                    " 属性 ");            }        }    }父类，定义并实现一个接口

    /**     *  PageAbstract类构造函数。     */    _common.PageAbstract = function () {        //定义Page的接口和需要实现的方法        var PageInterface = new utility.Interface('Page', ['initialize', 'render', 'initializeDOM', 'destroyDOM']);        utility.Interface.ensureImplements(this, PageInterface);        utility.Interface.ensureProperty(this, ['action', 'handler', 'ajaxCallBack']);        this.initEvents(this.handler);        var that = this;        //窗口unload时候释放资源        $(window).on('unload', function () {            that.dispose();        });        //如果实现了initializeDOM方法就执行        if (this.initializeDOM && (typeof this.initializeDOM == 'function')) {            this.initializeDOM();        }        //如果实现了initialize方法就执行        if (this.initialize && (typeof this.initialize == 'function')) {            this.initialize();        }        //如果实现了render方法就执行        if (this.render && (typeof this.render == 'function')) {            this.render();        }    }//类似angularJS的命令式绑定事件方法    _common.PageAbstract.prototype.initEvents = function (handlers) {        var that = this;        var eventsCommon = ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mousemove", "mouseout", "mouseenter", "mouseleave", "keypress", "keydown", "keyup"];        var eventsBody = ["abort", "beforeunload", "error", "load", "move", "resize", "scroll", "stop", "unload"];        var eventsForm = ["blur", "change", "focus", "reset", "submit"];        var eventsMarquee = ["bounce", "finish", "start"];        var eventsEdit = ["beforecopy", "beforecut", "beforeeditfocus", "beforepaste", "beforeupdate", "contextmenu", "copy", "cut", "drag", "dragdrop", "dragend", "dragenter", "dragleave", "dragover", "dragstart", "drop", "losecapture", "paste", "select", "selectstart"];        var eventsData = ["afterupdate", "cellchange", "dataavailable", "datasetchanged", "datasetcomplete", "errorupdate", "rowenter", "rowexit", "rowsdelete", "rowsinserted"];        var eventsOutside = ["afterprint", "beforeprint", "filterchange", "help", "propertychange", "readystatechange"];        var events = eventsCommon.concat(eventsBody, eventsForm, eventsMarquee, eventsEdit, eventsData, eventsOutside);        for (var type = 0; type < events.length; type++) {            if ($('[el-' + events[type] + ']').length > 0) {                $(document).on(events[type], '[el-' + events[type] + ']', function (evt) {                    var $target = $(evt.target);                    var $currentTarget = $(evt.currentTarget);                    var directiveStr = $currentTarget.attr('el-' + evt.type);                    var directiveArray= directiveStr.split('&');                    for(var dirIndex=0;dirIndex<directiveArray.length;dirIndex++)                    {                        var directive=directiveArray[dirIndex];                        if (directive) {                            var handler = '';                            var args = [];                            args.push(evt);                            if ((directive.indexOf('(') !== -1) && (directive.indexOf(')') !== -1)) {                                var directiveFun = directive.substring(0, directive.indexOf('('));                                var directiveArgs = directive.substring(directive.indexOf('('));                                var directiveNew = 'that._argsFactory' + directiveArgs;                                handler = directiveFun;                                var directiveArgs = eval('(' + directiveNew + ')');                                if(handlers[handler])                                {                                    handlers[handler].apply(evt.currentTarget, args.concat(directiveArgs));                                }                            }                            else {                                handler = directive;                                if(handlers[handler])                                {                                    handlers[handler].apply(evt.currentTarget, args);                                }                            }                        }                    }                });            }        }    }    _common.PageAbstract.prototype._argsFactory = function () {        var args = [];        for (var i = 0; i < arguments.length; i++) {            args.push(arguments[i]);        }        return args;    }    _common.PageAbstract.prototype.dispose = function () {        //如果实现了destroyDOM方法就执行        if (this.destroyDOM && (typeof this.destroyDOM == 'function')) {            this.destroyDOM();        }    }

//继承父类，父类中实现接口。(具体业务代码，接口的使用)

<script src="../resources/js/public/requirejs/require.js" data-main="../resources/js/controller/page/替换业务脚本"></script>//使用requireJS定义js依赖require.config({    paths: {        "jquery": "http://e.elong.com/resources/js/public/jquery/jquery-1.9.1",        "etiming": "../../../../../resources/js/elong/etiming",        "jqueryui": "http://e.elong.com/resources/js/public/jqueryui/jquery-ui-1.9.2",        "jquery.validate": "http://e.elong.com/resources/js/public/validate/jquery.validate",        "datetimepicker": "http://e.elong.com/resources/js/public/datetimepicker/jquery.datetimepicker",        "qtip2": "http://e.elong.com/resources/js/public/qtip2/qtip2",        "utility": "http://e.elong.com/resources/js/elong/utility",        "plugins": "http://e.elong.com/resources/js/elong/plugins",        "common": "http://e.elong.com/resources/js/elong/common",        "timingStatistics": "http://e.elong.com/resources/js/elong/timingStatistics",        "countlySDK": "http://e.elong.com/resources/js/elong/countlySDK",        "s_code": "http://www.elongstatic.com/common/js/noexpire/s_code.js?t=201401071938"    },    shim: {        "jqueryui": {            "deps": ["jquery"]        },        "jquery.validate": {            "deps": ["jquery"]        },        "datetimepicker": {            "deps": ["jquery"]        },        "qtip2": {            "deps": ["jquery"]        },        "utility": {            exports: "utility"        },        "plugins": {            "deps": ["jquery"]        },        "common": {            "deps": ["jquery"],            exports: "common"        },        "countlySDK": {            "deps": ["utility"],            exports: "countly"        },        "timingStatistics":{            "deps": ["jquery"],            "exports": "timingStatistics"        },        "s_code": {        }    }});//requireJS异步加载模块require(["jquery",    "utility",    "countlySDK",    "common",    "timingStatistics",    "layout",    "jqueryui",    "jquery.validate",    "qtip2",    "plugins"], function ($, utility, countly, common,timingStatistics){    //ElementAdd构造函数。    var ElementAdd = function () {        //this指向ElementAdd实例，that方便在this指针改变指向的回调和内部方法中引用当前实例。        var that = this;        //ajax的url和href跳转地址依存的属性        this.action = {            test: '/bms-web-admin/admin/test?id=1'        };        //事件处理函数依存的属性        this.handler = {            nimei: function (evt) {                console.log(this);                console.log(arguments);            },            submitElement: function (evt) {                countly.recordEvent('createElement');                var $this = $(this);                evt.preventDefault();                if (BMSAdmin.config.frontend.isValidate) {                    if (that.$form_elementAdd.valid()) {                        that.$form_elementAdd.submit();                    }                }                else {                    that.$form_elementAdd[0].submit();                }            },            getTest: function (evt) {                countly.recordEvent('eventTest1');                var $this = $(this);                evt.preventDefault();                common.ajax({                    url: that.action.test,                    data: {'id': 12},                    success: that.ajaxCallBack.renderCity,                    error: that.ajaxCallBack.error                });            }        };        //ajax回调函数依存的属性。        this.ajaxCallBack = {            renderCity: function (data) {                           },            error: function (err) {            }        };//调用父类构造函数        ElementAdd.superclass.constructor.call(this);    };    //继承PageAbstract抽象类。必须定义action，handler，ajaxCallBack的公有属性。子类中必须实现initialize,initializeDOM,destroyDOM,render方法。    utility.inherits(ElementAdd, common.PageAbstract);    /**     *  初始化DOM函数，当前DOM中需要使用节点作为属性存储在实例中。     */    ElementAdd.prototype.initializeDOM = function () {        this.$form_elementAdd = $('#form_elementAdd');    };    /**     *  初始化函数。     */    ElementAdd.prototype.initialize = function () {        BMSAdmin.showBackendValidate(this.$form_elementAdd);        if (BMSAdmin.config.frontend.isValidate) {            this.$form_elementAdd.validate({                rules: {                    name: {                        required: true                    },                    element_key: {                        isVariables: true,                        minlength: 2,                        maxlength: 25,                        required: true                    }                },                messages: {                    name: {                        required: '必填'                    },                    element_key: {                        minlength: '最小长度2',                        maxlength: '最大长度25',                        required: 'element_key必填'                    }                },                showErrors: function () {                    var successList = this.successList;                    var errorList = this.errorList;                    for (var i = 0; errorList[i]; i++) {                        var error = errorList[i];                        common.showTips("#form_elementAdd", error.element, error.message);                    }                    for (var j = 0; successList[j]; j++) {                        var success = successList[j];                        common.showTips("#form_elementAdd", success, "");                    }                },                success: $.noop            });        }    };    /**     *  渲染页面。     */    ElementAdd.prototype.render = function () {    };    /**     *  销毁DOM。     */    ElementAdd.prototype.destroyDOM = function () {        this.$form_elementAdd = null;    };    //公有方法    ElementAdd.prototype.myFunction1 = function () {    };    ElementAdd.prototype.myFunction2 = function () {    };