js 常用设计模式

433 阅读2分钟
  1. 单例模式 高级单例模式
  2. 工厂模式
  3. 构造函数模式
  4. 原型模式

单例模式

就是一个普通对象,把要用到的方法或者属性都放到一个对象里边,这个对象称为命名空间 ,一把用来作为工具库的封装, 函数库 ; jQuery 高级单例模式,工具库函数命名:common.js utils.js tools.js

高级单例就是一个闭包,一般可以进行普通的模块化开发

//单例
var per1 = {
        name:'小明',
        age:10,
        sex:1,
        eat(){},
        play(){}
    }
    var per2 = {
        name:'小明2',
        age:102,
        sex:12,
        eat(){},
        play(){}
    }

    // 高级单例
    function fn(){
        var name = 'xxx';
        var age = 10;
        function init(){
            console.log(name,age)
        }
        return {
            init
        }
    }
    var obj = fn();
    obj.init();

工厂模式

一个函数,用于批量生产单例

  var per1 = {
        name:'hahh',
        age:19,
        sex:'男',
        eat(){}
   }
   function factory(name,age,sex){
       var obj = {
           name,age,sex,
           eat(){

           },
           play(){},

       }
       return obj;
   }
   var per11 = factory('小明',20,'男')//批量产生单例
   console.log(per11);

构造函数模式

ES5构造函数

 function Person(name,age){
        this.name = name;
        this.age = age;
        this.eat = function(){}
        this.play = function(){}
        return 123;
    }
    var f = function(){};
    console.log(typeof f ==='object');
    var p = new Person('xm',10);

new执行函数的时候,函数内部的this都指向了一个堆内存,函数执行完成之后,又把this返出去了,若写了返回值。而且返回值是一个值类型,那么返回值仍然是this,若返回值是引用数据类型,则返回值就是这个引用类型数据

ES6 用class申明一个构造函数

es6创造类是通过class创造的,只能通过new的方式执行

class FN3 {
            constructor(name,age){
                this.name=name;
                this.age = age;
            }
        }
        var f3 = new FN3(ff',10);
        console.log(f3);

es6的箭头函数不能通过new的方式执行 ,箭头函数中没有this,箭头函数把this当成普通变量对待,里边的this是向上级作用域查找的。

var FN = () => {
            this.name = 111;
        }

原型模式

  • 原型模式:在构造函数的基础上加了一个原型(prototype)的概念 特点:公用,省空间 框架常用,平时不用 把公用的提取出来放在原型里面
  • 查属性:现在自己身上查,没有再去原型上查。如果自己有就用自己的,没有再用公用的

ES5

function Person(name = 'ff',age=10,sex=0) {
            this.name=name;
            this.age=age;
            this.sex = sex;
        }
        console.log(Person.prototype);
        Person.prototype.eat = function(){
            console.log('吃')
        }
        Person.prototype.play = function(){
            console.log('玩')
        }
        Person.prototype.qqq=122;
        var p1 = new Person();
        var p2 = new Person();
        console.log(p1,p2);

ES6

//es6
        class Fn{
            //里面只能写函数,函数格式规定死的
            //constructor是指向元素本身的
            constructor(name,age,sex){
                this.name = name;
                this.age=age;
                this.sex = sex;
            }
            eat(){

            }
            play(){

            }
        }
        var f = new Fn();//class声明的只能通过new的方式执行
        console.log(f);