JS 高级 07

作者: _MARPTS | 来源:发表于2018-05-25 11:29 被阅读0次

单粒(例)模式: 一个类创建出来的对象都是同一个对象

类:类似于构造函数

JS单例: JS没有类的概念,限定一个讨论的范围
- 1.字面量
- 2.内置构造函数
- 3.工厂函数
- 4.自定义构造函数(针对这种情况实现单粒)
JS是一门什么语言?
- 弱类型, 脚本, 解释性 , 函数式 , 基于原型对象
- 是支持面向对象的语言, 基于原型对象的语言
实现单粒模式效果:
- function Person(){}
- var p1 = new Person();
- var p2 = new Person();
- p1 == p2 --->true;

单粒实现方式01(全局变量)

步骤
- 1. 提供一个全局变量(instance)
- 2.提供一个构造函数
- 3.判断instance是否有值,有值就直接返回
- 4.没有就把this赋值给instance
- 5.设置属性和方法

// 1.提供一个全局变量
var instance;
// 2.提供一个构造函数
function Person(){
    // 3.判断全局变量是否有值,如果有值就直接返回
    if(instance){ //第二次以上
        return instance;
    }
    // 第一个创建对象
    // 4,如果没有值,就把this赋值给instance
    instance = this;
    // 5.设置属性和方法
    this.name = '默认';
}

var p1 = new Person();
var p2 = new Person();
instance = 'demo'
var p3 = new Person();

console.log(p1 == p2); // true
console.log(p3); // Person{}  新创建的对象

注意: return 的值如果不是引用类型的数据,那么return返回的是默认创建的对象
缺点:
- 全局变量在整一个作用域都可以被访问或者修改,一旦被修改,创建出来的对象就不再是之前的单粒对象

单粒实现方式02(静态属性)

// 1.提供一个构造函数
function Person(){
    // 2.判断构造函数静态属性instance是否有值,如果有值就直接返回
    if(Person.instance){ //第二次以上
        return Person.instance;
    }
    // 第一个创建对象
    // 3,如果没有值,就把this赋值给instance
    Person.instance = this;
    // 4.设置属性和方法
    this.name = '默认';
}

var p1 = new Person();
var p2 = new Person();
console.log(p1 == p2);// true

Person.instance = 'demo';
var p4 = new Person();
console.log(p4); // person{}

好处: instance 不是全局变量,不容易被修改
弊端: 静态属性仍然能被修改

单粒实现方式03(惰性函数)

步骤:
- 1.提供一个构造函数
- 2.提供一个封闭作用域的私有变量
- 3.利用惰性函数定义更新函数
- 4.把this赋值给instance
- 5.设置属性和方法

// 1.提供一个构造函数
function Person(){
    // 2.提供一个封闭作用域的私有变量
    var  instance;
    // 3.利用惰性函数定义更新函数
    Person = function (){
        return instance;
    }
    // 第一个创建对象
    // 4.把this赋值给instance
    instance = this;
    // 5.设置属性和方法
    this.name = '默认';
}

//var p1 = new Person();
//var p2 = new Person();
//console.log(p1 == p2);// true

Person.prototype.des = 'des';
var p3 = new Person();
Person.prototype.hi = 'hi';
var p4 = new Person();

console.log(p3.des); // des
console.log(p4.des); // des
console.log(p3.hi); // undefined
console.log(p4.hi); // undefined

console.log(p3.constructor == Person);// false

问题:
- 1.创建对象之后设置的原型对象和单粒对象的原型对象,不是同一个对象
- (广义理解: 第一个对象创建出后,其后的原型对象是新创建的Person,不是旧的)
- 2.单粒对象的构造器属性执行指向旧的构造函数

惰性函数实现单粒改进 04

步骤
- 1.提供一个构造函数
- 2.在构造函数内部声明一个私有变量instance
- 3.利用惰性函数更新构造函数
- 4.设置新构造函数的原型对象是旧构造函数的原型对象
- 4*.设置新构造函数的原型对象是旧构造函数的实例对象
- 5.利用新构造函数创建对象并赋值给instance
- 6.修正构造器属性
- 7.通过instance设置属性或方法
- 8.返回instance

// 1.提供一个构造函数
function Person(){
    // this = obj1
    // 2.在构造函数内部声明一个私有变量instance
    var instance;
    // 3.利用惰性函数更新构造函数
    Person = function(){
        this = obj2
        return instance;
    }
    // 4.设置新构造函数的原型对象是旧构造函数的原型对象(原型式继承)
    Person.prototype = this.__proto__;
    
    // *4.更优原型链继承
    Person.prototype = this;
    
    // 5.利用新构造函数创建对象并赋值给instance
    instance = new Person();   //instance = obj2  这里的instance是undefined 返回的是默认obj2
    // 6.修正构造器属性
    instance.constructor = Person ;   //obj2
    // 7.通过instance设置属性或方法
    instance.name = '默认';
    // 8.返回instance
    return instance;
}
//var p1 = new Person();
//var p2 = new Person();
//console.log(p1==p2); // true


Person.prototype.des = 'des';
var p3 = new Person();
Person.prototype.hi = 'hi';
var p4 = new Person();

console.log(p3.des); // des
console.log(p4.des); // des
console.log(p3.hi); // hi
console.log(p4.hi); // hi

console.log(p3.constructor == Person);// true

单粒实现方式(全局变量- 即时函数) 05

var Person;
(function(){
    var instance ;
    person = function (){
        if(instance){
            return instance;
        }
        instance = this;
        this.name = '默认';
    }
} ();

var p1 = new Person();
var p2 = new Person();
console.log(p1 == p2);

Person = 'dd';
var p3 = new Person();
// 区别全局变量是能从控制台知道问题所在

观察者模式简单介绍

观察者模式:
- 发布者: 信息的发布者
- 观察者: 被观察者状态发生改变或者发布了信息,需要采取行动的对象
观察者模式的优点:

观察者模式实现(基础版本) 01

步骤
- 1.提供一个发布者
- 2.提供一个观察者
- 3.注册观察者(建立发布者和观察者之间的联系)
- 4.发布者发布信息
目前: 1个发布者 2个观察者 1个信息
思考:2个发布者

// 1. 提供一个发布者
    var rose = {
        user: [],
        addUser: function (fn){
            if(typeof fn != 'function') throw '非法操作';
            this.user.push(fn);
        },
        removeUser: function(fn){
            if(typeof fn != 'function') throw '非法操作';
            var index = this.user.indexof(fn);
            this.user.splice(index,1)
        },
        // 发布信息
        eat: function (){
            for(var i = 0 ; i< this.user.length; i++){
               this.user[i](); 
            }
        }
    };
    
// 2.提供一个观察者
    var jack = {
        jack_eat: function(){
            console.log('邀请女神吃大餐!--jack');
        }
    }
    
    var tom = {
        tom_eat : function(){
            console.log('邀请女神吃麻辣烫--tom');
        }
    }
    
// 3.注册观察者(建立发布者和观察者之间的联系)
    rose.addUser(jack.jack_eat);
    rose.addUser(tom.tom_eat);
    
// 4. 发布者发布信息
    rose.eat();
    
// 5.移除观察者
    rose.removeUser(jack.jack_eat);
    
    rose.eat()

观察者模式实现(多个发布者) 02

提供一个发布者模板
利用模板提供一个方法快速创建发布者
目前: 2个发布者提供一个发布者模板
思考: 发布多个信息

// 1. 提供一个发布者模板
    var publisher = {
        user: {
            eat:[],
            sleep:[]
        },
        addUser: function (fn,type){
            var type = type || 'eat';
            if(typeof fn != 'function') throw '非法操作';
            this.user[type].push(fn);
        },
        removeUser: function(fn,type){
            if(typeof fn != 'function') throw '非法操作';
            var index = this.user[type].indexof(fn);
            this.user[type].splice(index,1)
        },
        // 发布信息
        eat: function (){
            for(var i = 0 ; i< this.user['eat'].length; i++){
               this.user['eat'][i](); 
            }
        },
        sleep: function (){
            for(var i = 0 ; i< this.user['sleep'].length; i++){
               this.user['sleep'][i](); 
            }
        }
    };
    
    var rose = {};
    var wml = {};
    
// 2.封装一个函数快速创建发布者
    function makePulisher(obj){
        for(var key in pushlisher){
            // 只需要拷贝实例方法
            if(pushlisher.hasOwnProperty(key) && (typeof publisher[key] == 'function')){ 
            obj[key] = pushlisher[key];
            }
        }
        // 手动添加
        obj.user = {
            eat : [],
            sleep : []
        };
    }
    
// 让rose成为发布者
    makePulisher(rose);
    makePulisher(wml);
    
    // 2.提供一个观察者
    var jack = {
        jack_eat: function(){
            console.log('邀请女神吃大餐!--jack');
        },
        jack_sleep : function(){
             console.log('wanan!--jack');
        }
    }
    
    var tom = {
        tom_eat : function(){
            console.log('邀请女神吃麻辣烫--tom');
        },
        tom_sleep : function(){
            console.log('kanxingxing--tom');
        }
    }
    
// 3.注册观察者(建立发布者和观察者之间的联系)
    rose.addUser(jack.jack_eat,'eat');
    rose.addUser(jack.jack_sleep,'sleep');
    rose.addUser(tom.tom_sleep,'sleep');
    
// 4. 发布者发布信息
    ///rose.eat(); 
    rose.sleep();
    
// 5.移除观察者
    rose.removeUser(jack.jack_sleep.'sleep');
    rose.sleep()

观察者模式实现(多个状态) 03

把数组改为对象保存多个状态

// 1. 提供一个发布者模板
    var publisher = {
        user: {
            eat:[],
            sleep:[]
        },
        addUser: function (fn,type){
            var type = type || 'eat';
            if(typeof fn != 'function') throw '非法操作';
            this.user[type].push(fn);
        },
        removeUser: function(fn,type){
            if(typeof fn != 'function') throw '非法操作';
            var index = this.user[type].indexof(fn);
            this.user[type].splice(index,1)
        },
        // 发布信息
        eat: function (){
            for(var i = 0 ; i< this.user['eat'].length; i++){
               this.user['eat'][i](); 
            }
        },
        sleep: function (){
            for(var i = 0 ; i< this.user['sleep'].length; i++){
               this.user['sleep'][i](); 
            }
        }
    };
    
    var rose = {};
    var wml = {};
    
// 2.封装一个函数快速创建发布者
    function makePulisher(obj){
        for(var key in pushlisher){
            // 只需要拷贝实例方法
            if(pushlisher.hasOwnProperty(key) && (typeof publisher[key] == 'function')){ 
            obj[key] = pushlisher[key];
            }
        }
        // 手动添加
        obj.user = {
            eat : [],
            sleep : []
        };
    }
    
// 让rose成为发布者
    makePulisher(rose);
    makePulisher(wml);
    
    // 2.提供一个观察者
    var jack = {
        jack_eat: function(){
            console.log('邀请女神吃大餐!--jack');
        },
        jack_sleep : function(){
             console.log('wanan!--jack');
        }
    }
    
    var tom = {
        tom_eat : function(){
            console.log('邀请女神吃麻辣烫--tom');
        },
        tom_sleep : function(){
            console.log('kanxingxing--tom');
        }
    }
    
// 3.注册观察者(建立发布者和观察者之间的联系)
    rose.addUser(jack.jack_eat,'eat');
    rose.addUser(jack.jack_sleep,'sleep');
    rose.addUser(tom.tom_sleep,'sleep');
    
// 4. 发布者发布信息
    ///rose.eat(); 
    rose.sleep();
    
// 5.移除观察者
    rose.removeUser(jack.jack_sleep.'sleep');
    rose.sleep()

观察者模式实现(优化) 04

动态添加对象user

// 1. 提供一个发布者模板
    var publisher = {
        addUser: function (fn,type){
            var type = type || 'eat';
            if(typeof fn != 'function') throw '非法操作';
            if(this.user[type] == undefined){
                this.user[type] = [];
            }
            this.user[type].push(fn);
        },
        removeUser: function(fn,type){
            if(typeof fn != 'function') throw '非法操作';
            var index = this.user[type].indexof(fn);
            this.user[type].splice(index,1)
        },
        // 发布信息
        publish : function (type){
            var type = type || 'eat'
            for(var i = 0 ; i< this.user[type].length; i++){
               this.user[type][i](); 
            }
        }
    };
    
    var rose = {
        eat: function(){
            this.publish('eat');
        },
        sleep: function(){
            this.publish('sleep')
        },
        run: function(){
            this.publish('run')
        }
    };
    var wml = {};
    
// 2.封装一个函数快速创建发布者
    function makePulisher(obj){
        for(var key in pushlisher){
            // 只需要拷贝实例方法
            if(pushlisher.hasOwnProperty(key) && (typeof publisher[key] == 'function')){ 
            obj[key] = pushlisher[key];
            }
        }
        // 手动添加
        obj.user = {};
    }
    
// 让rose成为发布者
    makePulisher(rose);
    
    // 2.提供一个观察者
    var jack = {
        jack_eat: function(){
            console.log('邀请女神吃大餐!--jack');
        },
        jack_sleep : function(){
             console.log('wanan!--jack');
        }
    }
    
    var tom = {
        tom_eat : function(){
            console.log('邀请女神吃麻辣烫--tom');
        },
        tom_sleep : function(){
            console.log('kanxingxing--tom');
        },
        tom_run : function(){
            console.log('run')
        }
    }
    
// 3.注册观察者(建立发布者和观察者之间的联系)
    rose.addUser(jack.jack_eat,'eat');
    rose.addUser(jack.jack_sleep,'sleep');
    rose.addUser(tom.tom_sleep,'sleep');
    rose.addUser(tom.tom_run,'run')
// 4. 发布者发布信息
    rose.eat();
    rose.sleep();
    rose.run();
// 5.移除观察者
    rose.removeUser(jack.jack_sleep.'sleep');
    rose.sleep();

观察者模式实现(发布者变为观察者) 05

设计模式的目的是为了降低耦合度, 解耦
特点: 两者可以互换,只要建立联系,创建发布者,就能让观察者称为发布者

// 1. 提供一个发布者模板
    var publisher = {
        addUser: function (fn,type){
            var type = type || 'eat';
            if(typeof fn != 'function') throw '非法操作';
            if(this.user[type] == undefined){
                this.user[type] = [];
            }
            this.user[type].push(fn);
        },
        removeUser: function(fn,type){
            if(typeof fn != 'function') throw '非法操作';
            var index = this.user[type].indexof(fn);
            this.user[type].splice(index,1)
        },
        // 发布信息
        publish : function (type){
            var type = type || 'eat'
            for(var i = 0 ; i< this.user[type].length; i++){
               this.user[type][i](); 
            }
        }
    };
    
    var rose = {
        eat: function(){
            this.publish('eat');
        },
        sleep: function(){
            this.publish('sleep')
        },
        run: function(){
            this.publish('run')
        },
        rose_lol : function(){
            console.log('nonono')
        }
    };
    var wml = {};
    
// 2.封装一个函数快速创建发布者
    function makePulisher(obj){
        for(var key in pushlisher){
            // 只需要拷贝实例方法
            if(publisher.hasOwnProperty(key) && (typeof publisher[key] == 'function')){ 
            obj[key] = publisher[key];
            }
        }
        // 手动添加
        obj.user = {};
    }
    
// 让rose成为发布者
    makePublisher(rose);
    
    // 2.提供一个观察者
    var jack = {
        jack_eat: function(){
            console.log('邀请女神吃大餐!--jack');
        },
        jack_sleep : function(){
             console.log('wanan!--jack');
        },
        lol : function (){
            this.publish('lol')
        }
    }
    
    var tom = {
        tom_eat : function(){
            console.log('邀请女神吃麻辣烫--tom');
        },
        tom_sleep : function(){
            console.log('kanxingxing--tom');
        },
        tom_run : function(){
            console.log('run')
        },
        tom_lol : function(){
            console.log('good')
        }
    }
    
    makePublish(jack);

    
// 3.注册观察者(建立发布者和观察者之间的联系)
    jack.addUser(rose.rose_lol,'lol');
    jack.addUser(tom.tom_lol,'lol');
    
    
// 4. 发布者发布信息
    jack.lol();

备忘模式(函数结构缓存)

fn(100) ---> 结果耗时1s
fn(100) ---> 结果获取上一次的结果
思路
- 1.提供一个缓存对象 cache{key: value};
- 2.当传入参数进行计算(逻辑处理)的时候,首先去缓存对象中看有没有对应的结果
- 3.如果有就直接使用(性能优化)
- 4.如果没有,再进行计算,并且把计算的结果保存在缓存对象中
怎么保存?
- 1.key : 参数
- 2.value : 这个参数对应的结果

    // 1.提供一个缓存对象
    var cache = {};
    
    function fun(str){
        // 2.判断缓存对象中有没有对应的结果
        if(cache[str] != undefined){
            console.log('已经执行过一遍了')
            return cache[str];
        }
        console.log('第一次执行')
        // 3.没有结果,执行计算的操作,并且保存在缓存对象中
        var res = str + 'qwer';
        cache[str] = res;
        
        return res;
    }
    
    fun('demo');
    
    fun('demo');

命名空间模式

用于写框架,避免同名覆盖
命名空间的名字一般是大写,项目的缩写
定义一个对象,把所有东西都写在这个对象中

    var a = 10;
    
    var obj = {
        name: 'zs'
    }
    
    function fun(){
        
    }
    
    var demo = function (){
        
    }
    
    function Person(){
        
    }
    // 命名空间    
    var MOMO = {};
    var MOMO = MOMO || {};
    MOMO.a = 10;
    MOMO.a = MOMO.a || 10;
    MOMO.obj = {
        
    }
    MOMO.demo = function(){
        
    }
    
    MOMO.Person = function(){
        
    }
    
    var p1 = new MOMO.Person();

通用的命名空间函数

var MOMO = MOMO || {};
MOMO.nameSpace = function (str){
    // 1.接收传入的参数
    var string = str;
    // 2.分割字符串,返回一个数组
    var strArray = str.split('.');
    
    // 3.删除MOMO
    if(strArray[0] == 'MOMO'){
        strArray = strArray.slice(1);// 截取数组中索引1到最后一个元素
    }
    var par = MOMO;
    for(var i = 0; i< strArray.length ; i++){
        if(par[strArray[i]] == undeifined){
            par[strArray[i]] = {};
        }
        // 更新父节点
        par = par[strArray[i]];
    }
}

MOMO.nameSpace('MOMO.name.des.hi.a');

MOMO.nameSpace('name.des.hi.a');
console.log(MOMO)

数组 splice和slice的区别

splice(x,y)
- x是起始索引, y是删除数量,
- 返回新数组,内容为被删除的元素,
- 影响原数组
slice(x,y)
- x是起始索引,y是结束索引(不包括结束索引)
- 返回新数组,内容为截取的元素
- 不会影响原数组

var arr1 = [1,2,3,4,5,6];
var arr2 = arr1.slice(1,4);//截取数组中索引1到4的元素,不包括索引4
var arr3 = arr1.slice(2);// 值传一个参数,从索引2开始到最后
var arr4 = arr1.slice(-1) // -1 表示数组中倒数第一个元素
console.log(arr1);
console.log(arr2); //[2,3,4]
console.log(arr3);//[3,4,5,6];
console.log(arr4);//[6];

JS 高级 07

单粒(例)模式: 一个类创建出来的对象都是同一个对象

单粒实现方式01(全局变量)

单粒实现方式02(静态属性)

单粒实现方式03(惰性函数)

惰性函数实现单粒改进 04

单粒实现方式(全局变量- 即时函数) 05

观察者模式简单介绍

观察者模式实现(基础版本) 01

观察者模式实现(多个发布者) 02

观察者模式实现(多个状态) 03

观察者模式实现(优化) 04

观察者模式实现(发布者变为观察者) 05

备忘模式(函数结构缓存)

命名空间模式

通用的命名空间函数

数组 splice和slice的区别

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程