JS设计模式

*工厂模式factory

DEMO                                         使用场景:创建一个简单的对象
   function Person(name) {                  
     var temp={                           
       temp.name=name;
       temp.sayName=function () {
         console.log(this.name);
       }
     };
     return temp;
   }
   createPerson("Lucy");                     生成实例 = 创建一个新的引用方式
   createPerson("Eall");                                 开辟新的内存空间

   与构造函数同为 引用类型 ; 但无法知道实例是由哪个构造函数创建的

*构造函数模式constructor

DEMO                                          使用场景:创建一个复杂的对象,可以添加方法
   function People(name,age){                  
       this.name = name;                      写一个函数
       this.age = age;                         绑定this
   }
   People.prototype.sayName = function(){      将方法挂在函数原型上
        console.log(this.name)
   }
   var singer = new People('Jay','33');        使用new生成实例 开辟内存空间
   singer.sayName();

*单例模式single

DEMO                                 使用场景:只需出现一次,独一无二的组件
    var Person=(function () {                 一个立即执行函数
      var temp;
      function init(name,age) {                
        return {
            name:name,
            age:age,
            sayName:function () {
                console.log(this.name);       return出来的值是 闭包里的变量
             }
          }
       }
       return {
          createPerson:function (name,age) {
            if(!temp){                        // 如果没有temp就初始化
                temp=init(name,age);       
            }                             // 所以第一次调用就初始化,之后不再执行这段代码
            return temp;                      
          }                                  单例就是只开辟了一个内存空间
       }                                     第一次传入的值被储存下来
    }());                                    之后生成的实例全都指向同样的地方 
    Person.createPerson("lucy",23); // lucy
    Person.createPerson("lily",24);// lucy

*混合模式mixin

DEMO                                            使用场景:可继承的公用方法
   function Person(name,age) {                           构造函数 1
       this.name=name;
       this.age=age;
   }
   Person.prototype.sayName=function () {                 
       console.log(this.name);
   }

   function Student(name,age,score) {                    构造函数 2
       Person.call(this,name,age);
       this.score=score;
   } 
   Student.prototype.sayScore=function () {     
       console.log(this.score);
   }

inherit 1:
   function inherit(parent,sun) {                        
       sun.prototype=Object.create(parent.prototype);    差异化继承
       sun.prototype.constructor=sun;
   }
   inherit(Person,Student);                              2就继承了 1
inherit 2:
   student.prototype=create(parent.prototype); 
   function creat(parentObj){
       function F(){}//新建一个空对象
       F.prototype=parentObj;//原型指向参数
       return new F;//实例化一个原型指向参数的空对象
   }

   var student1=new Student("lucy",24,100);
   student1.sayScore();
   student1.sayName();

*模块模式moudle

DEMO                                       使用场景:需要封装的组件
   var person=(function () {
        var name="lucy",            一个模块 = 一个私有作用域 = 一个匿名函数
        age=23;
      function sayName() {
        console.log(name);
      }// 词法作用域:一个函数可以访问到的上下文环境由它所定义的位置决定。
      return{                                     
        name:name,                      留出接口
        age:age,
        sayName:sayName
      }
   })();
   person.sayName();

*发布订阅模式subscribe publish

DEMO
    var EventCenter=(function () {  // 新建订阅中心

      var events={};                // 新建缓存列表,存储订阅者的回调函数

      function on(evt,handler) {    // 添加消息:绑定事件
        events[evt]=events[evt]||[];// 检查事件列表events{}里是否有这个key 
                                       *如果有,那就是这个事件了;
                                       *如果没有,就初始化这个数组,加入事件
        events[evt].push({          // 在[]里增加一个函数
            handler:handler         // 即 events={evt:[handler:handler]}
        })                               events={事件:[订阅者1:function(args){...}; 
       }                                               订阅者2:function(args){...};
                                                                                  ] }
      function off(evt) {           // 解除订阅:移除事件
        delete events[evt];
      }
      function fire(evt,args) {     // 发布订阅:触发事件
        if(!events[evt]){           // 如果evt不存在,就返回
            return;
        }                           // 如果存在,遍历列表events,依次执行处理程序
        for(var i=0;i<events[evt].length;i++){
            events[evt][i].handler(args);
        }
      }
      return {
        on:on,                       // 导出接口
        off:off,
        fire:fire
      }
    })();
    EventCenter.on('change', function(val){
      console.log('change...  now val is ' + val);
    });
    EventCenter.fire('change', '饥人谷'); //change...  now val is 饥人谷
    EventCenter.off('change');

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

推荐阅读更多精彩内容

  • 1、写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 1、设计模式分类: 构造函数...
    抚年华轻过阅读 486评论 0 1
  • 1.什么叫做设计模式(基本概念) 在面向对象软件设计过程中,针对问题进行简洁而优雅的一种解决方案 设计模式是在某种...
    Jianshu9527阅读 337评论 0 3
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,056评论 1 10
  • 单例模式: 目的是创建全局唯一可用的对象 订阅-发布者模式 (观察者模式) 观察者模式又叫发布订阅模式(Publi...
    wuliJJ阅读 318评论 0 0
  • 写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。构造函数模式var Person ...
    htkz_117f阅读 157评论 0 0