随着Web技术的发展，JavaScript已经成为前端开发不可或缺的一部分。它允许开发者通过Document Object Model（DOM）来访问和修改网页内容。然而，原生JavaScript在处理大型项目时存在一些挑战，例如变量声明问题和函数命名冲突。为了解决这些问题，JavaScript社区引入了多种设计模式。
在JavaScript中，可以通过将全局函数和变量封装到一个单一的函数作用域中来模拟类的概念。这种方法将属性和功能绑定在一起，创建了一个逻辑上的类。
var anchorChange = {
config: {
colors: ["#F12", "#999"]
},
alterColor: function(link, newColor) {
link.style.backgroundColor = newColor;
},
init: function() {
var self = this;
var anchors = document.getElementsByTagName("a");
var size = anchors.length;
for (var i = 0; i < size; i++) {
anchors[i].color = self.config.colors[i];
anchors[i].onclick = function() {
self.alterColor(this, this.color);
return false;
};
}
}
};
上述代码中，创建了一个名为anchorChange的对象，它模拟了一个类。这个对象有一个配置属性和一个初始化方法。初始化方法遍历所有的链接，并为它们设置颜色和点击事件处理程序。
模块模式通过区分公共和私有项来解决函数和变量命名冲突的问题。在模块模式中，直接访问的是私有的，而在return块中定义的是公共的。
var anchorChangeMod = function() {
var config = {
colors: ["#F12", "#999"]
};
function alterColor(link, newColor) {
link.style.backgroundColor = newColor;
}
return {
changeColor: function(link, newColor) {
alterColor(link, newColor);
},
init: function() {
var self = this;
var anchors = document.getElementsByTagName("a");
var size = anchors.length;
for (var i = 0; i < size; i++) {
anchors[i].color = config.colors[i];
anchors[i].onclick = function() {
anchorChangeMod.changeColor(this, this.color);
return false;
};
}
}
};
}();
在这个模式中，定义了一个私有属性config和一个私有方法alterColor。然后，通过return块暴露了两个公共方法：changeColor和init。
揭示模块模式在类块内声明整个结构，然后在类的末尾有一个return块，其中添加了要公开暴露的函数。
function anchorChangeRev() {
var config = {
colors: ["#F12", "#999"]
};
function alterColor(link, newColor) {
link.style.backgroundColor = newColor;
}
var changeColor = function(link, newColor) {
alterColor(link, newColor);
};
var init = function() {
var self = this;
var anchors = document.getElementsByTagName("a");
var size = anchors.length;
for (var i = 0; i < size; i++) {
anchors[i].color = config.colors[i];
anchors[i].onclick = function() {
anchorChangeRev().cc(this, this.color);
return false;
};
}
};
return {
cc: changeColor,
init: init
};
}
在这个模式中，首先定义了一个私有属性config和一个私有方法alterColor。然后，创建了一个公共方法changeColor，它调用私有方法。最后，定义了一个初始化方法init，并在return块中返回了两个公共方法：cc和init。
懒加载函数模式用于初始化代码只需要运行一次，而其他代码需要多次运行的情况。创建一个类，并在其中声明只需要执行一次的代码。然后，在同一个作用域内重新定义同一个类，声明需要多次运行的函数。
var anchorChangeLazy = function() {
var config = {
colors: ["#F12", "#999"]
};
var anchors = document.getElementsByTagName("a");
var size = anchors.length;
for (var i = 0; i < size; i++) {
anchors[i].color = config.colors[i];
anchors[i].onclick = function() {
anchorChangeLazy().changeColor(this, this.color);
return false;
};
}
anchorChangeLazy = function() {
return {
changeColor: function(link, newColor) {
link.style.backgroundColor = newColor;
}
};
};
}();
在这个模式中，首先定义了一个私有属性config，并为所有的链接设置了颜色和点击事件处理程序。然后，重新定义了anchorChangeLazy函数，使其只包含一个changeColor方法。这样，初始化代码只执行一次，而changeColor处理程序可以无限次使用。
可以通过将函数添加到任何对象的prototype属性来向已声明的对象注入定义。这样，可以将初始化函数包装在构造函数中，并将其他函数添加到原型绑定中。
var anchorChangeCusCon = function() {
this.init();
};
anchorChangeCusCon.prototype.config = {
colors: ["#F12", "#999"]
};
anchorChangeCusCon.prototype.changeColor = function(link, newColor) {
link.style.backgroundColor = newColor;
};
anchorChangeCusCon.prototype.init = function() {
var self = this;
var anchors = document.getElementsByTagName("a");
var size = anchors.length;
for (var i = 0; i < size; i++) {
anchors[i].color = self.config.colors[i];
anchors[i].onclick = function() {
self.changeColor(this, this.color);
return false;
};
}
};
var anchor = new anchorChangeCusCon();