JavaScript设计模式是一种工程化思想，通过常见的设计方案来解决项目开发过程中的重复问题，优化代码结构和可维护性。当今Web前端开发工程越来越复杂，设计模式越来越成为提高项目质量和效率的必需品。从基础到高级应用，本文将深入解析JavaScript设计模式。

一、基础设计模式

1、单例模式

单例模式是一种最常见的设计模式之一，目的是确保只创建一个实例，并提供全局访问该实例的方法。JavaScript中单例模式的实现主要依靠闭包和立即执行函数表达式（IIFE）。以下代码为单例模式的实现代码：

var Singleton = (function(){

var _instance = null;

function init() {

// 单例代码

}

return {

getInstance: function() {

if (!_instance) {

_instance = init();

}

return _instance;

}

}

})();

2、策略模式

策略模式是一种将不同行为分离出来的设计模式，优点在于便于添加和修改不同的策略，同时降低了代码的耦合性，提高了代码的可维护性和可读性。以下代码为策略模式的实现代码：

var strategies = {

'A': function(salary) {

return salary * 2;

},

'B': function(salary) {

return salary * 3;

},

'C': function(salary) {

return salary * 4;

}

};

var calculateBonus = function(level, salary) {

return strategies[level](salary);

}

3、代理模式

代理模式是一种通过代理对象来控制原对象的访问的设计模式，常用于网络请求、图片懒加载等场景。以下代码为代理模式的实现代码：

var proxyImage = (function(){

var img = new Image();

img.onload = function(){

console.log('image loaded');

}

return {

setSrc: function(src) {

console.log('setting image src');

img.src = src;

}

}

})();

proxyImage.setSrc('https://picsum.photos/200');

二、高级设计模式

1、观察者模式

观察者模式是一种通过事件/消息的触发和监听来实现对象之间解耦的设计模式，可用于实现MVC、MVVM模式。以下代码为观察者模式的实现代码：

function ObserverList() {

this.observerList = [];

}

ObserverList.prototype.add = function(obj) {

this.observerList.push(obj);

}

ObserverList.prototype.count = function() {

return this.observerList.length;

}

ObserverList.prototype.get = function(index) {

if(index > -1 && index < this.observerList.length){

return this.observerList[index];

}

}

ObserverList.prototype.removeAt = function(index) {

this.observerList.splice(index, 1);

}

ObserverList.prototype.indexOf = function(obj, startIndex) {

var i = startIndex;

while(i < this.observerList.length){

if(this.observerList[i] === obj){

return i;

}

i++;

}

return -1;

}

function Subject() {

this.observers = new ObserverList();

}

Subject.prototype.addObserver = function(observer) {

this.observers.add(observer);

}

Subject.prototype.removeObserver = function(observer) {

this.observers.removeAt(this.observers.indexOf(observer, 0));

}

Subject.prototype.notify = function(context) {

var observerCount = this.observers.count();

for(var i=0; i < observerCount; i++){

this.observers.get(i).update(context);

}

}

function Observer() {

this.update = function() {

// 观察者更新操作

}

}

2、命令模式

命令模式是一种独立于具体对象的行为，将请求封装成对象，以便在不同的上下文传递和操作，常用于实现撤销、重做等操作。以下代码为命令模式的实现代码：

var Command = function(receiver) {

this.receiver = receiver;

this.execute = function() {

// 命令的执行操作

}

};

var Invoker = function(command) {

this.command = command;

this.execute = function() {

this.command.execute();

}

};

3、原型模式

原型模式是根据实例的原型来克隆对象，可以大大提高对象的创建效率，并且保证对象的稳定性和可靠性。以下代码为原型模式的实现代码：

var Prototype = function() {

this.clone = function() {

var proto = Object.getPrototypeOf(this);

var clone = Object.create(proto);

Object.assign(clone, this);

return clone;

}

}

var instance = new Prototype();

var clone = instance.clone();

三、结语

JavaScript设计模式是项目开发中的重要组成部分，通过使用设计模式来解决常见的逻辑问题，可以极大地提高代码的效率、可读性和可维护性，同时提高代码的可扩展性。从本文介绍的基础设计模式到高级设计模式，都是前端开发中常见的实践，掌握这些模式对于提高自己的编码能力和项目的开发质量都是非常有帮助的。