单粒(例)模式: 一个类创建出来的对象都是同一个对象
类:类似于构造函数
-
JS单例: JS没有类的概念,限定一个讨论的范围
- 1.字面量
- 2.内置构造函数
- 3.工厂函数
- 4.自定义构造函数(针对这种情况实现单粒)
-
JS是一门什么语言?
- 弱类型, 脚本, 解释性 , 函数式 , 基于原型对象
- 是支持面向对象的语言, 基于原型对象的语言
-
实现单粒模式效果:
- function Person(){}
- var p1 = new Person();
- var p2 = new Person();
- p1 == p2 --->true;
单粒实现方式01(全局变量)
- 步骤
- 提供一个全局变量(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];
