javascript设计模式之单体模式学习笔记

JavaScript设计模式中的单体模式是一种重要的编程手段，它通过组织代码为一个逻辑单元，并通过单一变量进行访问，实现了代码的清晰组织与高效执行。

单体模式的核心在于其命名空间的划分与实例化的唯一性。它通过创建一个对象，将相关的属性和方法组织在一起，形成一个逻辑单元。这个对象只能被实例化一次，从而确保了其内部状态的唯一性。

对于开发者而言，单体模式具有以下优点：

1. 划分命名空间：单体模式可以有效地避免全局变量的使用，通过划分命名空间，减少命名冲突，使代码更易于阅读和维护。

2. 代码组织一致：单体模式使得相关的方法和属性被组织在一起，提高了代码的可读性和可维护性。

3. 实例化的唯一性：由于单体模式只能被实例化一次，因此可以确保某些资源的唯一性，避免重复创建和浪费。

在JavaScript中，实现单体模式的一种常见方式是通过对象字面量。仅仅通过对象字面量并不能完全实现单体模式的特点。为了实现单例（即单体的实例化），我们需要在对象中添加逻辑来检查是否已经存在实例，如果不存在则进行实例化，否则直接返回已实例化的对象。这样的设计确保了单体的唯一实例化。

举例来说，假设我们有一个名为“狼蚁网站SEO优化”的单体对象，我们可以创建一个变量来保存这个单体的实例。在需要访问这个单体时，我们首先检查这个变量是否已经指向一个实例化的对象。如果是，我们直接返回这个实例；如果不是，我们创建一个新的实例并将其赋值给这个变量。这样，无论我们何时访问这个单体，都会得到同一个实例。

单体模式是一种强大的设计模式，它可以帮助我们更好地组织和管理代码。通过学习和理解单体模式，我们可以更有效地编写出结构清晰、易于维护的JavaScript代码。理解单体模式及其在代码中的应用

单体模式的通用实现

让我们看一个更通用的单体模式实现方式，这将为我们后续的例子打下基础。

```javascript

// 通用单体模式实现

function Singleton(constructor) {

let instance = null;

return function (...args) {

if (!instance) {

instance = new constructor(...args);

}

return instance;

};

}

```

这里我们创建了一个名为 Singleton 的函数，它接受一个构造函数作为参数。当调用 Singleton 函数时，它会返回一个新函数，这个新函数负责创建并返回实例。如果实例已经存在，它将返回已存在的实例，否则它将创建一个新实例。这是一种非常通用的实现方式，可以用于任何需要单体模式的场景。

应用单体模式到弹窗和iframe创建

接下来，我们可以使用上述的单体模式函数来实现弹窗和iframe的创建。这样，无论我们需要创建多少弹窗或iframe，都只会实例化一次。

弹窗示例

```javascript

// 使用单体模式创建弹窗

const createAlertDialog = Singleton((htmlContent) => {

const div = document.createElement("div");

divnerHTML = htmlContent;

div.style.display = 'none';

document.body.appendChild(div);

return div;

});

document.getElementById("alertButton").onclick = function() {

const dialog = createAlertDialog("我是弹窗内容");

dialog.style.display = "block";

};

```

iframe示例

假设我们需要创建一个始终存在的iframe，并且只实例化一次。我们可以这样做：

```javascript

// 使用单体模式创建iframe

const createIframe = Singleton((src) => {

const iframe = document.createElement("iframe");

iframe.src = src; // 设置iframe的源地址

document.body.appendChild(iframe); // 将iframe添加到body中

return iframe; // 返回创建的iframe实例供后续操作使用（如果需要的话）

});

```

总结和优点

我们是否真的需要重新编写创建iframe的代码呢？让我们看一下如何创建iframe。

原先的代码是这样的：

```javascript

var createIframe = (function(){

var iframe;

return function(){

if(!iframe) {

iframe = document.createElement("iframe");

iframe.style.display = 'none';

document.body.appendChild(iframe);

}

return iframe;

};

})();

```

我们可以看到，创建div的代码和创建iframe的代码有着相似的结构。为了更加抽象和通用，我们可以考虑编写一个更通用的代码，将创建元素的逻辑封装在一个函数中。以下是一个可能的实现：

```javascript

function createElementInstance(tagName) {

var element = document.createElement(tagName);

element.style.display = 'none'; // 默认隐藏元素

document.body.appendChild(element); // 将元素添加到body中

return element; // 返回创建的元素实例

}

```

对于特定的元素创建，如div或iframe，我们可以使用这个函数并传递相应的标签名作为参数。这样，我们就可以通过统一的接口来创建和管理各种元素。接下来，我们可以使用工厂函数模式来创建一个获取元素实例的函数，如下：

```javascript

var getInstance = function(creatorFn) {

var instance; // 保存创建的实例对象

return function() { // 返回获取实例的函数

return instance || (instance = creatorFn()); // 如果没有实例则创建新的实例并返回

};

};

``` 接下来是测试代码： 创建一个div和iframe的实例： 创建一个div的实例函数并将其命名为 `createSingleDiv`： 创建一个iframe的实例函数并将其命名为 `createSingleIframe`： 通过点击某个元素（例如id为"Id"的元素）来显示div或iframe，并设置iframe的src属性： ```javascript var createWindow = getInstance(function() { return createElementInstance('div'); }); var createIframe = getInstance(function() { return createElementInstance('iframe'); }); document.getElementById("Id").onclick = function(){ var win = createWindow(); win.style.display = "block"; }; var iframeInstance = createIframe(); iframeInstance.src = " }; ``` 这就是本文的全部内容，希望对学习有所帮助，也感谢大家支持狼蚁SEO。 ``` 以上代码在保持原有功能的基础上进行了优化和简化，使其更加易于理解和维护。通过工厂函数模式和抽象工厂模式的应用，增强了代码的灵活性和可复用性。希望对你有所帮助！