《JavaScript设计模式与开发实践》一篇文章带你读懂

《JavaScript设计模式与开发实践》是由曾探所著的一本经典技术书籍。

        该书详细介绍了JavaScript中常用的设计模式,并结合实际项目开发经验给出了实践示例和最佳实践建议。这本书首先介绍了设计模式的基本概念和作用,以及为什么要在JavaScript中使用设计模式。接着,书中详细介绍了23种常见的设计模式,如单例模式、工厂模式、适配器模式、观察者模式等。每种设计模式都详细解释了其定义、结构、应用场景和优缺点,并给出了实际的代码示例和案例分析。除了介绍设计模式的理论知识,该书还提供了大量的实践经验和开发技巧。其中包括如何组织和管理JavaScript代码、如何优化性能、如何进行模块化开发、如何进行异步编程等方面的内容。这些实践经验有助于读者更好地理解和应用设计模式,提高JavaScript项目的质量和可维护性。

        《JavaScript设计模式与开发实践》这本书语言简洁明了,通俗易懂,适合初学者入门和有一定经验的开发者进阶学习。通过学习这本书,读者可以深入理解JavaScript设计模式的原理和思想,并能够灵活运用到实际项目中,提高自己的编程水平和软件开发能力。

一、前言:

⭕前置问题:

  1. 什么是模式?
  2. 设计模式的适用性是什么?

从一个故事开始

  1. 足球运动包含很多的策略,有一个叫做“下底传中”——用一个名词来去描述一种“战术”,这就是一种“模式”。
  2. 模式:通过一个特有的名词,来描述一类问题对应的解决方案

✍设计模式的适用性 

  1. 不要有了锤子,看什么都像钉子
  2. 模式只有放到具体的环境下才有意义


二、 基础知识

1.面向对象的 JavaScript

(1)程序语言设计风格

  • 命令式语言(过程化语言)
  • 结构化语言
  • 面向对象语言 (OOP)
  • 函数式语言
  • 脚本语言

Java 就是典型的面向对象编程语言。它具备以下三个特点:

  • 封装
  • 继承
  • 多态

(2)JavaScript 的语言特性

通过(脚本)原型来实现面向对象的开发(不是标准的面向对象的编程语言)
动态类型语言 

概念:变量类型由值确定

let t = 'str' // string 类型
t = 007 // number 类型

鸭子类型:

“从前在JavaScript王国里,有一个国王,他觉得世界上最美妙的声音就是鸭子的叫声,于是国王召集大臣,要组建一个1000只鸭子组成的合唱团。大臣们找遍了全国,终于找到999只鸭子,但是始终还差一只,最后大臣发现有一只非常特别的鸡,它的叫声跟鸭子一模一样,于是这只鸡就成为了合唱团的最后一员。”《JavaScript设计模式与开发实践》一篇文章带你读懂_第1张图片

var duck = {
    duckSinging: function(){
        console.log('嘎嘎嘎');
    }
};
var chicken = {
    duckSinging: function(){
        console.log('嘎嘎嘎')
    }
var choir =[];   //合唱团

var joinChoir = function(animal ){
    if ( animal && typeof animal.duckSinging === 'function' ){
        choir.push( animal );
        console.log('恭喜加入合唱团' );
        console.1og('合唱团已有成员数量:' + choir.length );
    }
};

joinChoir( duck );// 恭喜加入合唱团
joinChoir( chicken );// 恭喜加入合唱团

如果有一个动物,走起路来像鸭子,叫起来也像鸭子,那么它就是鸭子。

(3)JavaScript 的多态性

⭕动态类型语言天生具备多态性。

多态:同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果。

代码:

var makeSound =function( animal ){
    if ( animal instanceof Duck ){
        console.log('嘎嘎嘎');
    }else if ( animal instanceof Chicken ){
        console.log('咯咯咯');
    }
};
var Ducka = function(){};
var Chicken = function()[};

makeSound(new Duck() );  //嘎嘎嘎
makeSound(new Chicken() );//咯咯咯

多态背后的思想是将“做什么”和“谁去做以及怎样去做”分离开来,也就是将“不变的事物”与“可能改变的事物”分离开来


2.this、call 和 apply

(1)this 指向问题

  • 构造函数:指向实例对象
  • 普通函数:指向函数调用方
  • 箭头函数:不修改 this 指向,沿用上层作用域的 this
  • call、apply、bind:仅作用于普通函数,this 指向第一个参数

 (2)this“丢失”

var obj = {
    myName: 'sven',
     getName: function(){
        return this.myName;
     }
};

console.log( obj.getName() ); // 输出: sven  
//getName是obj下面的方法,this 会指向obj 本身

var getName2 = obj.getName;
//vr声明了一个新的变量的时候 被绑定到windows下面的
console.log( getName2() );   //相对应 window.getName2
//输出:undefined

普通函数调用方式,this 是指向全局window 的


3.闭包和高阶函数

(1)闭包 

定义:能够访问其他函数作用域中变量的函数

变量的生存周期:var 声明的变量在非函数作用域下是全局变量



    
1
2
3
4
5

闭包解决生存周期问题:

for( var i = 0,len = nodes.length; i < len; i++ ){
    (function( i ){
        nodes[ i ].onclick = function(){
            console.log(i);
        }
    })( i )
};

⭕注意:ES6之后 let 也可以解决这个问题 (块级作用域)

(2)高阶函数 

满足两个条件:

  • 函数可以作为参数被传递
  • 函数可以作为返回值输出 


三、设计模式

1.单例模式

(1)定义:

保证一个类仅有一个实例

(2)基于场景的单例模式:

 1️⃣场景:《JavaScript设计模式与开发实践》一篇文章带你读懂_第2张图片

 2️⃣常见代码:


    
        
    

 ❌多次点击会生成多个登录框

 3️⃣单例模式:

// 单例生成器
var getSingle = function (fn) {
    var result;
    // 闭包
    return function () {
    // 逻辑中断,利用 apply 改变 fn 下的 this 指向
        return result || (result = fn.apply(this, arguments));
    }
};
// 处理登录窗口的业务逻辑
var createLoginLayer = function () {
    var div = document.createElement('div');
    div.innerHTML ='我是登录浮窗';
    div.style.display = 'none';
    document.body.appendChild(div);
    return div;
};
// 利用单例生成器,得到一个闭包函数,触发该闭包函数可以得到 div
var createSingleLoginLayer = getSingle(createLoginLayer);
// 监听按钮点击行为
document.getElementById( 'loginBtn').onclick = function () (
    // 得到 div 实例 (单例的)
    var loginLayer = createSingleLoginLayer();
    // 展示
    loginLayer.style.display = 'block';
};

2.策略模式

(1)定义:

定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。

(2)基于场景的策略模式:

1️⃣场景:奖金计算

  • 绩效为 S 的人年终奖有4 倍工资
  • 绩效为 A 的人年终奖有了倍工资
  • 而绩效为 B 的人年终奖是 2 倍工资

2️⃣常见代码:

	var calculateBonus = function( performanceLevel, salary ){
		if ( performanceLevel === 'S' ){
			return salary * 4;
		}
		if ( performanceLevel === 'A' ){
			return salary * 3;
		}
		if ( performanceLevel === 'B' ){
			return salary * 2;
		}
	};

	calculateBonus( 'B', 20000 ); // 输出:40000
	calculateBonus( 'S', 6000 ); // 输出:24000

3️⃣策略模式:

	//策略对象
	var strategies = {
		"S": function( salary ){
			return salary * 4;
		},
		"A": function( salary ){
			return salary * 3;
		},
		"B": function( salary ){
			return salary * 2;
		}
	};
	//计算方法
	var calculateBonus = function( level, salary ){
		return strategies[ level ]( salary );
	};
	//执行
	console.log( calculateBonus( 'S', 20000 ) ); // 输出:80000
	console.log( calculateBonus( 'A', 10000 ) ); // 输出:30000

3. 代理模式

(1)定义:

为其他对象提供一种代理以控制对这个对象的访问

(2)基于场景的代理模式:

场景:图片预加载 —— 创建img 标签,在图片加载之前给 img 一个占位图

常见代码:

var MyImage = (function(){
    var imgNode = document.createElement('img');
    document.body.appendchild( imgNode );
    var img = new Image;

    img.onload = function(){
        imgNode.src = img.src;
    };

    return{
        setSrc: function( src ){
          imgNode.src =''
          imq.src = src;
        }
    }
})();

MyImage.setSrc('');

代理模式:

// 自执行函数,创建 img 标签。
// myImage 为返回的闭包函数,可以用来设置 src
var myImage = (function () {
    var imgNode = document.createElement( ' img' );
    document.body.appendChild( imgNode);
    return function (src) {
        imgNode.src = src;
    }
})();

// 代理,自执行函数,创建 Image 图片加载实例
// proxyImage 为闭包函数,可以为 img 标签设置 src 和进行图片预加载
var proxyImage = (function () {
    var img = new Image;
    img.onload = function () {
        myImage(this.src);
    }
    return function (src) {
        myImage( ' ' ) ;
        img.src = src;
    }
})();

proxyImage('');

单一职责原则: 就一个类 (通常也包括对象和函数等)而言,应该仅有一个引起它变化的原因。 

4.迭代器模式

(1)定义:

提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示

(2)基于场景的迭代器模式: 

场景:根据数据创建 div,并添加到 body 中
常见代码:

var appendDiv = function( data ){
    for ( var i = 0,l = data.length; i < l; i++ ){
        var div = document.createElement('div')_;
        div.innerHTMI = data[ i ];
        document.body.appendchild( div );
    }
};

appendDiv( [ 1,2,3,4,5,6 ] );

迭代器模式:

var each = function( obj,callback ){
    var value,
    i=0.length = obj.length,
    isArray = isArraylike( obj );// isArraylike函数未实现,可以翻阅jQuery源代码
    if(isArray ){ // 迭代类数组 
                for (; i < length; i++ ) {
                    callback.call( obj[ i ], i, obj[ i ] );
                } 
    }else (
        for(i in obj ){ // 迭代object对象 
            value = callback.call( obj[ i ],i,obj[ i ] );
        }
    }
        return obj;
};

var appendDiv = function( data ){
    each( data, function( i,n ){
        var div = document.createElement( 'div' );
        div.innerHTML = n;
        document.body.appendchild( div );
    });
};
appendDiv([ 1,2,3,4,5,6] );
appendDiv({a:1,b:2,c:3,d:4});

JS中已经内置了迭代器:深入理解现代JavaScript


5.发布-订阅模式

(1)定义:

发布-订阅模式(观察者模式):对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。

(2)基于场景的观察者模式:

1️⃣场景:一个网站页面,包含:header、nav、消息列表、购物车等模块

2️⃣对比

①常见代码:

login.succ(function(data){
    header.setAvatar( data.avatar); //设置header模块的头像
    nav.setAvatar( data.avatar ); //设置导航模块的头像
    message.refresh(); //刷新消息列表
    cart.refresh); //刷新购物车列表
});

②观察者模式:

发布消息: 

$.ajax( 'http:// xxx.com?login',function(data){   //登录成功
    login.trigger('loginSucc', data);   // 发布登录成功的消息
});

接收消息:

var header = (function(){// header模块
    login.listen('loginSucc', function( data)(
        header.setAvatar( data.avatar );
    });
    return {
        setAvatar: funtion( data ){
            console.log( '设置header模块的头像' );
        }
    }
})();

var nav = (funtion(){  // nav模块
    login.listen( 'loginSucc', funtion( data ){
        nav.setAvatar( data.avatar );
    });
    return {
        setAvatar: funtion( avatar ){
            console.log( '设置nav模块的头像' );
    }
    
    

6.命令模式 

7.组合模式

8.模板方法模式

(1)定义:

类似于继承。公用的部分统一封装(模板),不同的部分单独处理。

(2)Coffee or Tea:

1️⃣咖啡:

  • 把水煮沸
  • 用沸水冲泡咖啡
  • 把咖啡倒进杯子

2️⃣茶:

(1) 把水煮沸
(2) 用沸水浸泡茶叶
(3) 把茶水倒进杯子

 

9.享元模式

10.职责链模式

11.中介者模式

(1)定义:

定义一个对象(中介者),该对象封装了系统中对象间的交互方式。 

(2)基于场景的中介者模式:

1️⃣场景:SKU

《JavaScript设计模式与开发实践》一篇文章带你读懂_第3张图片

 《JavaScript设计模式与开发实践》一篇文章带你读懂_第4张图片

 《JavaScript设计模式与开发实践》一篇文章带你读懂_第5张图片

⭕代码的实现需要分别监听颜色以及数量的变化。

2️⃣常见代码实现: 

①颜色切换

 ②数量切换

numberInput.oninput = function(){
    var color = colorSelect.value, // 颜色
    number = this.value, //数量
    stock = goods[ color ]; // 该颜色手机对应的当前库存

    numberInfo.innerHTML = number;

    if ( !color ){
        nextBtn.disabled = true;
        nextBtn.innerHTML = '请选择手机颜色';
        return;
    }


    if ((( number - 0) | 0)!== number - 0){ // 输入购买数量是否为正整数
        nextBtn.disabled = true;
        nextBtn.innerHTML = '请输入正确的购买数量';
        return;
    }

    if (number > stock ){//当前选择数量没有超过库存量
        nextBtn.disabled = true;
        nextBtn.innerHTML = '库存不足';
        return ;
    }
    nextBtn.disabled = false;
    nextBtn.innerHTML = '放入购物车 ;
};

3️⃣中介者模式:

var goods = {
    "red | 32G":3,
    "red  | 16G":0,
    "blue |32G":1,
    "blue | 16G":6
};
var mediator = (function(){
    var colorSelect = document.getElementById( 'colorSelect'),
    var memorySelect = document.getElementById('memorySelect'),
    numberInput = document.getElementById('numberInput'),
    colorInfo = document.getElementById('colorInfo'),
    memoryInfo = document.getElementById('memoryInfo'),
    numberInfo = document.getElementById('numberInfo'),
    nextBtn = document.getElementById('nextBtn');

    return{
        changed: function( obj ){
            var color = colorSelect.value, //颜色
            memory = memorySelect.value,// 内存
            number = numberInput.value,//数量
            stock = goods[ color + '|'+ memory ]; //颜色和内存对应的手机库存数量


        if ( obj === colorSelect ){  //如果改变的是选择颜色下拉框
            colorInfo.innerHTMI = color;
        }else if ( obj === memorySelect ){
            memoryInfo.innerHTML = memory;
        }else if ( obj === numberInput ){
            numberInfo.innerHTML = number;
        }

        
        if ( !color){
            nextBtn.disabled = true;
            nextBtn.innerHTML = '请选择手机颜色';
            return;
        }
        
        
        if(!memory){
            nextBtn.disabled = true;
            nextBtn.innerHTML = '请选择内存大小';
            return;
        }

    
        if(((number-0) |0 )!== number - 0){ // 输入购买数量是否为正整数
            nextBtn.disabled = true;
            nextBtn.innerHTML = '请输入正确的购买数量';
            return;
        }

        nextBtn.disabled = false;
        nextBtn.innerHTM = '放入购物车';
     }
    }
})();
        
//事件函数:
colorSelect.onchange = function(){
    mediator.changed( this );
};
tememorySelect.onchange = function(){
        mediator.changed( this );
}
numberInput.oninput = function(){
    mediator.changed(this );
};

12.装饰者模式

(1)定义:

 让类或者对象一开始只具有一些基础的职责,更多的职责在代码运行时被动态装饰到对象上面

(2)基于场景的装饰者模式:

  • 场景
  • 常见代码
  • 装饰者模式

13.状态模式

14.适配器模式


四、设计原则和编程技巧 

1.单一职责原则

(1)定义:

一个对象(方法)应该只做一件事情 

案例:小明买酱油

1️⃣旧实现: 

function shoping() {
    console.log('小明用钥匙打开门')
    console.log('小明去超市')
    console.log('小明买酱油')
    console.log('小明回家')
}

❌修改现有函数的实现则意味着需要重新测试整个的流程

 2️⃣单一职责原则:

function shoping() {
    open()
    goSupermarket()
    buy()
    goHome()
}

function open() {
    console.Log('小明用钥匙打开门')
}

function goSupermarket(){
    console.log('小明去超市')
}


function buy() {
    console.log('小明买酱油')
}


function goHome(){
    console.log('小明回家')
}

 修正如下:

function shoping(){
+ openPasswordDoor()
···
}

function open() {
    console.log('小明用钥匙打开门')
}
+function openPasswordDoor({
+ console.log('小明用钥匙打开门')
+}

(2)应用:

  • 单例模式
  • 代理模式
  • 迭代器模式
  • 装饰者模式 

(3)实际应用:违反原则并不奇怪 


 2.最少知识原则 (迪米特法则)

 (1)定义:

一个对象应当尽可能少地与其他对象发生相互作用

(2)应用:

  • 中介者模式
  • 外观模式

3.开放封闭原则

(1)定义:

 软件实体(类、模块、函数)等应该是可以扩展的,但是不可修改。

(2)应用:

1️⃣用多态来消除条件分支

初始代码:

《JavaScript设计模式与开发实践》一篇文章带你读懂_第6张图片

不符合开发多态原则 

多态写法:《JavaScript设计模式与开发实践》一篇文章带你读懂_第7张图片
2️⃣发布-订阅模式


3️⃣模板方法模式
4️⃣策略模式
5️⃣代理模式
6️⃣职责链模式

 


4.接口和面向接口编程

5.代码重构原则 

(1)概念:

无论你进行了再多的努力,重构都是一个会在未来发生的事情,只不过是一个早晚的问题。

(2)尽量拖慢重构发生的时间的方法:

① 提炼函数:

	var getUserInfo = function(){
		ajax( 'http:// xxx.com/userInfo', function( data ){
			console.log( 'userId: ' + data.userId );
			console.log( 'userName: ' + data.userName );
			console.log( 'nickName: ' + data.nickName );
		});
	};

 改为:

var getUserInfo = function(){
	ajax( 'http:// xxx.com/userInfo', function( data ){
		printDetails( data );
	});
};

var printDetails = function( data ){
	console.log( 'userId: ' + data.userId );
	console.log( 'userName: ' + data.userName );
	console.log( 'nickName: ' + data.nickName );
};

② 合并重复的代码片段

	var paging = function( currPage ){
		if ( currPage <= 0 ){
			currPage = 0;
			jump( currPage ); // 跳转
		}else if ( currPage >= totalPage ){
			currPage = totalPage;
			jump( currPage ); // 跳转
		}else{
			jump( currPage ); // 跳转
		}
	};

改为:

	var paging = function( currPage ){
		if ( currPage <= 0 ){
			currPage = 0;
		}else if ( currPage >= totalPage ){
			currPage = totalPage;
		}
		jump( currPage ); // 把jump 函数独立出来
	};

③ 把条件分支语句提炼成函数

	var getPrice = function( price ){
		var date = new Date();
		if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // 夏天
			return price * 0.8;
		}
		return price;
	};

 改为:

var isSummer = function(){
		var date = new Date();
		return date.getMonth() >= 6 && date.getMonth() <= 9;
	};

	var getPrice = function( price ){
		if ( isSummer() ){ // 夏天
			return price * 0.8;
		}
		return price;
	};

④ 合理使用循环

	var createXHR = function(){
		var xhr;
		try{
			xhr = new ActiveXObject( 'MSXML2.XMLHttp.6.0' );
		}catch(e){
			try{
				xhr = new ActiveXObject( 'MSXML2.XMLHttp.3.0' );
			}catch(e){
				xhr = new ActiveXObject( 'MSXML2.XMLHttp' );
			}
		}
		return xhr;
	};
	var xhr = createXHR();

 改为:

var createXHR = function(){
		var versions= [ 'MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp' ];
		for ( var i = 0, version; version = versions[ i++ ]; ){
			try{
				return new ActiveXObject( version );
			}catch(e){
			}
		}
	};
	var xhr = createXHR();

⑤ 提前让函数退出代替嵌套条件分支

	var del = function( obj ){
		var ret;
		if ( !obj.isReadOnly ){ // 不为只读的才能被删除
			if ( obj.isFolder ){ // 如果是文件夹
				ret = deleteFolder( obj );
			}else if ( obj.isFile ){ // 如果是文件
				ret = deleteFile( obj );
			}
		}
		return ret;
	};

 改为以下代码减少嵌套:

	var del = function( obj ){
		if ( obj.isReadOnly ){ // 反转if 表达式
			return;
		}
		if ( obj.isFolder ){
			return deleteFolder( obj );
		}
		if ( obj.isFile ){
			return deleteFile( obj );
		}
	};

 ⑥ 传递对象参数代替过长的参数列表


                    
                    

你可能感兴趣的:(设计模式,javascript,前端)