插件写法(基于继承)

/**
 * @author: xiangliang.zeng
 * @description:
 * @Date: 2016/12/12 16:57
 * @Last Modified by:   xiangliang.zeng
 * @Last Modified time: 2016/12/12 16:57
 */

(function(factory) {
    var root = (typeof self == "object" && self.self == self && self) || (typeof global == "object" && global.global == global && global);
    if (typeof define == "function" && define.amd) {
        define([‘exports‘], function(exports) {
            root.Example == factory(root, exports);
        });
    } else if (typeof exports !== ‘undefined‘) {
        factory(root, exports);
    } else {
        root.Example = factory(root, {});
    }
})(function(root, Example) {
    //initializing用于控制类的初始化,非常巧妙,请留意下文中使用技巧
    //fnTest返回一个正则比表达式,用于检测函数中是否含有_super,这样就可以按需重写,提高效率。当然浏览器如果不支持的话就返回一个通用正则表达式
    var initializing = false, fnTest = /xyz/.test(function() {xyz;}) ? /\b_super\b/ : /.*/;
    //所有类的基类Class,这里的this一般是window对象
    Example.Class = function() {};
    //对基类添加extend方法,用于从基类继承
    Example.Class.extend = function(prop) {
        //保存当前类的原型
        var _super = this.prototype;
        //创建当前类的对象,用于赋值给子类的prototype,这里非常巧妙的使用父类实例作为子类的原型,而且避免了父类的初始化(通过闭包作用域的initializing控制)
        initializing = true;
        var prototype = new this();
        initializing = false;
        //将参数prop中赋值到prototype中,这里的prop中一般是包括init函数和其他函数的对象
        for (var name in prop) {
            //对应重名函数,需要特殊处理,处理后可以在子函数中使用this._super()调用父类同名构造函数, 这里的fnTest很巧妙:只有子类中含有_super字样时才处理从写以提高效率
            prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ?
                (function(name, fn) {
                    return function() {
                        //_super在这里是我们的关键字,需要暂时存储一下
                        var tmp = this._super;
                        //这里就可以通过this._super调用父类的构造函数了
                        this._super = _super[name];
                        //调用子类函数
                        fn.apply(this, arguments);
                        //复原_super,如果tmp为空就不需要复原了
                        tmp && (this._super = tmp);
                    }
                })(name, prop[name]) : prop[name];
        }
        //当new一个对象时,实际上是调用该类原型上的init方法,注意通过new调用时传递的参数必须和init函数的参数一一对应
        function Class() {
            if (!initializing && this.init) {
                this.init.apply(this, arguments);
            }
        }

        //给子类设置原型
        Class.prototype = prototype;
        //给子类设置构造函数
        Class.prototype.constructor = Class;
        //设置子类的extend方法,使得子类也可以通过extend方法被继承
        Class.extend = arguments.callee;
        return Class;
    }

    Example.Test1 = Example.Class.extend({
        init: function() {
            this.name = ‘lily‘;
            this.age = 19;
        },
        sayName: function() {
            console.log(‘name======‘ + this.name);
        },
        sayAge: function() {
            console.log(‘age=====‘ + this.age);
        }
    });

    Example.Test2 = Example.Test1.extend({
        init: function() {
            this.same = ‘face‘;
            this._super();   // 继承了Test1的属性
        },
        saySame: function() {
            console.log(‘saySame====‘ + this.same);
        }
    })
    return Example;
});

var test1 = new Example.Test1();
test1.sayName();

var test2 = new Example.Test2();
test2.sayAge();
console.log(test1);
console.log(test2);
时间: 2024-10-14 11:39:45

插件写法(基于继承)的相关文章

jquery插件写法

下面的文章是我复制粘贴的,是学习jquery插件写法时搜到的好的教程.谢谢这些人写的博客,为表示尊重,我将博客的地址也粘贴出来,希望可以帮到其他人. -----------------------------------------------------分割线--------------------------------------------------------------------------------------------------- JQuery插件写法的总结 最近Web

Spring整合JDBC模板方法设计模式之基于继承的实现

Spring整合JDBC模板方法设计模式之基于继承的实现: 模板设计模式简单描述: 把相同的部分提取出来,当我们运行的时候自动往里面设置值,在JdbcTemplate 的源代码中得execute(). 他把公共的部分拎出来写到一个特别的函数中,当我们使用的时候把会发生变化的内容在特定的部分调用,在不同的类里面处理相同的操作,这种方式就做模板设计模式. 例如,JdbcTemplate类中的方法: // ------------------------------------------------

移动端城市选择JavaScript插件(基于WG的城市选择插件的修改版本)

周末的时候趁着一次机会,拿WG(博客)开发的城市选择插件改了一个移动端可以直接用的城市选择插件. 原版插件是基于原声JavaScript写的,在此先感谢作者. 我做的只是依照肯德基注册会员的页面的交互效果改了一下界面,同时将各个触发效果改成了跟肯德基注册页面类似的交互效果,源程序不依赖jQuery但是我自己做简单的交互的时候偷懒使用了jQuery所以,如果您要使用这个插件完全可以换掉我写的那一些事件注册. 详细的因为我并没有大改,所以也就不po细节了,具体的项目代码我贴在这里. https://

jQuery插件写法总结以及面向对象方式写法总结

[转自]jQuery插件写法总结以及面向对象方式写法总结:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented-manner.html

jQuery插件写法总结

jQuery插件写法总结:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented-manner.html

jqueryTAB插件写法

下面是本人写的一个小的tab切换的插件,欢迎提出意见交流讨论,不懂或不明白可与我联系 HTML代码: <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Tab切换--jQuery版</title> <link rel="stylesheet" href="css/tab.cs

常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 本系列文章导航: 一.基于 Gulp 的前端集成解决方案 —— 在windows下安装gulp 二.基于 G

wg_pagenation 1.0 自己写的一个分页插件_基于Jquery

前言: 现在这个分页插件也不少,感觉缺点什么,所以自己就写了一个,喜欢的人就拿去用......有bug和建议可以回复,我有空就修改和答复..... 感谢我的基友,刘总...他主要给本插件写配套主题css; 特点: 整合ajax可以异步和后台交互数据,定制化选项多.和Jquery的pagenation比较类似,但是功能更多,选择性更多. 当前版本:1.0 完成日期:20150815 效果图: White.css的效果图: default.css效果图: 上图上向下的箭头表示的是每一个可选择和更改的

Mybatis分页-利用Mybatis Generator插件生成基于数据库方言的分页语句,统计记录总数 (转)

众所周知,Mybatis本身没有提供基于数据库方言的分页功能,而是基于JDBC的游标分页,很容易出现性能问题.网上有很多分页的解决方案,不外乎是基于Mybatis本机的插件机制,通过拦截Sql做分页.但是在像Oracle这样的数据库上,拦截器生成的Sql语句没有变量绑定,而且每次语句的都要去拦截,感觉有点浪费性能. Mybatis Generator是Mybatis的代码生成工具,可以生成大部分的查询语句. 本文提供的分页解决方案是新增Mybatis Generator插件,在用Mybatis