常见设计模式

写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。
//单例模式
var Singleton = (function () {

    function Singleton(args) {        
        var args = args || {};
        this.name = 'Singleton';
        this.pointX = args.pointX || 1; 
        this.pointY = args.pointY || 2;

    }
    //实例容器
    var instance;
    var _static = {
        name: '用来玩的默认属性',

        /*
         * 获取实例的方法
         * 返回Singleton的实例
         */
        getInstance: function (args) {
            if (instance === undefined) {
                instance = new Singleton(args)
            }
            return instance
        }
    }
    return _static
})();
var singletonTest = Singleton.getInstance({ pointX: 5 });
var singletonTest2 = Singleton.getInstance({ pointX: 100000 });
console.log(singletonTest.pointX); // 输出 5
console.log(singletonTest.name); // 输出 "用来玩的默认属性"
console.log(singletonTest2.pointX); // 输出 5

显然单例模式是不适合重复使用的😁

//发布订阅的写法精髓
var EventCenter = (function () {
//这个events会在页面一开始的时候,就注入EventCenter.on所产生的对象
    var events = {};
    function fire(evt, args) {
        if (!events[evt]) {
            return;
        }
        for (var i = 0; i < events[evt].length; i++) {
            events[evt][i].handler(args);
            //优化的写法,可以调用多个参数
            events[evt][i].handler([].slice.call(arguments,1));
        }

    }
    function on(evt, handler2) {
        events[evt] = events[evt] || [];
        events[evt].push({
            handler: handler2
        });
    }
    return {
        on: on,
        fire: fire
    }
})();

EventCenter.fire('roll');

EventCenter.on('roll', function (data) {
    console.log(data);
    console.log("got you ROLL!!!")
})

模块化写的时候,用于互相呼叫模块可以哦

//工厂模式
   function createPerson(opts){
     var person = {
       name: opts.name||'hunger'
     };
     person.sayName: function(){
       console.log(this.name);
     }
     return person;
   }
   var p1 = createPerson({name:'ruoyu'});
   var p2 = createPerson({name: '谷'});

工厂模式就是撸一个工具箱,然后大家都可以用这个工具箱做东西

//构造函数模式
function Person(name, age){
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function(){
  return this.name;
};
var student = new Person("若愚", 30);
console.log(student);

构造函数就是制造一个又一个的函数对象,每一个对象都有同样指针指向的prototype方法

//模块模式
var Person = (function(){
  var name = "hunger";
  return {
      changeName: function(newName){
          name = newName;
      },
      sayName: function(){
          console.log(name);
      }
  };
})();

Person.sayName();
Person.changeName("ruoyu");
Person.sayName();

模块模式和构造函数模式相似,只不过模块模式生成的对象的方法都是每家自有的,不互相污染

//混合模式
var Person = function(name, age) {
    this.name = name;
    this.age = age;
};
Person.prototype.sayName = function(){
  console.log(this.name);
}

var Student = function(name, age,  score) {
    Person.call(this, name, age);
    this.score = score;
};
//Student.prototype = Object.create(Person.prototype);
Student.prototype = create(Person.prototype);
function create (parentObj){
    function F(){}
    F.prototype = parentObj;
    return new F();
};

Student.prototype.sayScore = function(){
  console.log(this.score);
}
var student = new Student("谷", 28, 99);
console.log(student);

混合模式可以把几个构造函数模式用.call()连接起来,大家越来越庞大

以上代码如果有不明白的读者同学,欢迎丢入Chrome打断点运行,浏览器给出的解释比啥子注释好用多了。

var events = {};
EventManager = (function () {

    function on(evt, handle) {
        events[evt] = events[evt] || [];
        events[evt].push(handle);  //{事件1:[函数1,函数2]}
    }

    function fire(evt) {
        if (!events[evt]) {
            console.log("未绑定此事件");
            return
        }
        for (var i = 0; i < events[evt].length; i++) {
            events[evt][i]([].slice.call(arguments, 1))
        }
    }

    function off(evt) {
        delete events[evt];
    }

    return {
        on: on,
        fire: fire,
        off: off
    }
}());

EventManager.on('text:change', function (val) {
    console.log('text:change...  now val is ' + val);
});
EventManager.fire('text:change', 'jirengu');//text:change...  now val is jirengu
EventManager.off('text:change');
EventManager.fire('text:change', 'jirengu');//未绑定此事件

上面的events要放在上一级作用域下,最后一个.fire才可以打出“未绑定此事件”

代码题

写一个函数createTimer,用于创建计时器,创建的计时器可分别进行计时「新增」。

function createTimer(t) {
    var startTime,
        endTime,
        difference;
    function start() {
        startTime=Date.now();
        return startTime;
    }
    function end() {
        endTime=Date.now();
        return endTime
    }
    function get() {
        difference=endTime-startTime;
        return difference
    }
    var timer={
        start:start,
        end:end,
        get:get
    };

    return timer
}

var timer1 = createTimer();
var timer2 = createTimer();

timer1.start();
for (var i = 0; i < 9999; i++) {
    console.error(i);
}
timer2.start();
for (var i = 0; i < 9999; i++) {
    console.error(i);
}
timer1.end();
timer2.end();
console.log("一号差距",timer1.get()); //一号差距 527
console.log("二号差距",timer2.get()); //二号差距 232
//封装一个曝光加载组件,能实现如下方式调用
var Expouse = (function () {
    function bind($el, fn) {
        $(window).on('scroll', function () {
            if (!isShow($el)) {
                return
            }
            if (isShow($el)) {
                fn.call($el);
            }
        })
    }

    function one($el, fn) {
        var flag = true;
        $(window).on('scroll', function () {
            if (flag === false) {
                return
            }
            if (!isShow($el)) {
                return
            }
            if (isShow($el)) {
                fn.call($el);
                flag = false;
            }
        })

    }

    function isShow($el) {
        var scrollTop = $(window).scrollTop(),
            winH = $(window).height(),
            top = $el.offset().top;
        if ((scrollTop + winH) > top) {
            return true
        } else {
            return false
        }
    }

    return {
        bind: bind,
        one: one
    }
})()

var $target = $('.target');

Expouse.one($target, function () {
    console.log($(this));    // $target
})

封装一个曝光组件

封装的曝光
封装的轮播

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348

推荐阅读更多精彩内容

  • 写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 使用发布订阅模式写一个事件管理器...
    coolheadedY阅读 343评论 0 0
  • 问答 1.写出构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 工厂模式,想造什么造什么...
    GarenWang阅读 366评论 0 0
  • 一、问答 (一)、写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 1、工厂模式:...
    该帐号已被查封_才怪阅读 497评论 0 0
  • 1.构造函数模式 2.混合模式 3.模块模式 4.工厂模式 5.单例模式 6.发布订阅模式 使用发布订阅模式写一个...
    candy252324阅读 213评论 0 0
  • 劝君莫惜金缕衣, 劝君惜取少年时。 花开堪折直须折, 莫待无花空折枝。 昔有孙敬头悬梁,苏秦锥刺股,三国有吕蒙有...
    十年一井阅读 99评论 0 0