js 设计模式

作者: zy懒人漫游 | 来源:发表于2018-06-07 21:56 被阅读0次

    构造函数模式 constructor

    //构造函数模式  通过new来实现
    function People(name, age) {
      this.name = name;
      this.age = age;
    }
    People.prototype = {
      say: function() {
      console.log(this.name + this.age + "周岁")
      }
    }
    var p1 = new People("饥人谷", "3")
    p1.say();
    

    混合模式 mixin (继承)

    //混合模式
    var Father = function(name, age){
      this.name = name;
      this.age = age;
    }
    Father.prototype.sayName = function () {
      console.log(this.name);
    } 
    var Son = function (name, age, sex) {
      Father.call(this, name, age);
      this.sex = sex;
    };
    
    Son.prototype = create(Father.prototype);
      function create(parentObj) {
        function F() { }
        F.prototype = parentObj;
        return new F();
    };
    Son.prototype.saySex = function () {
      console.log(this.sex);
    }
    
    var son = new Student("小明", 24, "男");
    console.log(son);
    

    混合模式的要点就是
    创建2个或多个构造函数,如Father和Son,Son的原型链上挂一个父类的原型链,
    这样Son就完成了Father的继承

    模块模式 module

    //模块模式  通过闭包来实现一个模块
    var Person = (function(){
      var name = 'zhouyi';
      function sayName() {
        console.log(name);
      }
      return {
        name: name,
        sayName: sayName
      }
    })()
    

    工厂模式 factory

    function createPerson(name){
      var person = {
        name: name,
        sayName:function(){
          console.log(this.name)
        }     
      };
     return person;
    };
    

    this指向有4种形式

    对象方法调用形式:函数还可以作为某个对象的方法调用,这时this就指这个上级对象

    函数调用形式:这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。

    apply/call调用形式:apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调 用这个函数的对象。因此,this指的就是这第一个参数。

    构造函数的调用形式:所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。

    单例模式

     var  Car = (function(){
        var instance;
        function init() {
            //私有的变量和函数
            var speed = 0;
            return {
                //定义公共的属性和方法
                getSpeed: function(){
                    return speed;
                },
                setSpeed: function( s ){
                   speed = s;
                }
            };
        }
        return {
            getInstance: function() {
                if (!instance) {
                    instance = init();
                }
                return instance;
            }
        };
    }());
    var car = Car.getInstance();
    var car2 = Car.getInstance();
    car === car2; //true
    

    闭包小结:js里的作用域都是通过函数来体现的,var是内部的变量,不在外界的作用域里,不能被外界访问到,被隐藏了。

    发布订阅模式

    var EventCenter = (function(){
      var events = {};
      function on(evt, handler){
        events[evt] = events[evt] || [];
        events[evt].push({
          handler: handler
        });
      }
      function fire(evt, args){
        if(!events[evt]){
          return;
        }
        for (var i = 0; i < events[evt].length; i++){
          events[evt][i].handler(args);
        }
      }
      function off(evt){
        delete events[evt];
      }
      return {
        on: on,
        fire: fire,
        off: off
      };
    })();
    EventCenter.on("hello",function(){console.log("hello");});
    EventCenter.fire("hello");
    EventCenter.off("hello");
    

    发布订阅模式有2个要点:

    • 对外导出的API有三种形式:订阅on,发布fire, 解除off;
    • 整个函数里创建一个空对象来储存所有的key,value

    相关文章

      网友评论

        本文标题:js 设计模式

        本文链接:https://www.haomeiwen.com/subject/gvyzjftx.html