js设计模式之单例模式

Posted 2020-11-04 造轮子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js设计模式之单例模式相关的知识，希望对你有一定的参考价值。

关于设计模式，我的理解是它是业务代码的提前解决方案。意思就是说在没有真正的业务之前，设计模式就存在了，这个是显然的。设计模式是人长期从事业务总结的具有普通适用性的解决方案。

就个人来讲，写了太多的命令式编程代码，所谓命令式代码就是业务需要怎样就写怎么样的功能，比如添加一个点击事件，比如进行一个验证等扥。写就写了很少站在设计模式的角度或者前人的角度去改善代码。

不给自己找客观原因，最近开始关注设计模式，尝试从设计模式的角度改善开发。

在开始单例设计模式之前首先要搞清楚js之中的apply和call的作用。

apply和call的直接作用首先是运行函数，其次是根据对象是否发生改变，产生借方法和用方法的情况。apply和call的区别是前者接收数组作为第二个参数，而call接手的是参数列表。这个区别不具体说，说他们的作用

1）运行函数栗子

1    //运行函数
2         function test(){
3             alert(1);
4         }
5         test.apply();

函数即便没有apply一样可以运行，但是在有些场合用到apply会显得高大上。

2）apply(this,arguments)中的this不发生改变，也就是直接利用对象方法，不存在借的概念

1         var arr=[1,2,3];
2         var max=Math.max.apply(null,arr);
3         alert(max);

3）this发生改变，这个时候是借助this这个对象借助其他对象的方法

 1         /*定义一个人类*/
 2         function Person(name, age) {
 3             this.name = name;
 4             this.age = age;
 5         }
 6         /*定义一个学生类*/
 7         function Student(name, age, grade) {
 8             Person.apply(this, arguments);
 9             this.grade = grade;
10         }
11         //创建一个学生类   
12         var student = new Student("qian", 21, "一年级");
13         //测试   
14         alert("name:" + student.name + "\n" + "age:" + student.age + "\n" + "grade:" + student.grade);
15         //测试结果name:qian age:21 grade:一年级   
16         //因为在执行过程中this的对象发生改变，所以是this借助了Persion对象的方法。

介绍完apply和this下面是单例设计模式解释。

单例设计模式，核心是创造并且只返回一个对象。因为只有一个对象所以有缓存的概念。本文采用的是别人的案例，能够说清楚问题就是好案例；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title> 单利模式应用</title>
 7 </head>
 8 
 9 <body>
10     <div>
11         <button id="openbtn">
12             创建按钮
13         </button>
14         <script type="text/javascript">
15         //设计模式核心嗲吗
16         var getSingle = function(fn) {
17             var result;
18             return function() {
19                
20                 return (result || (result = fn.apply(this,arguments)));
21             }
22         }
23 
24         //业务代码之创建div代码
25         var createDiv = function() {
26             var div = document.createElement("div");
27             div.innerHTML = "我是创建对象";
28             console.warn(‘11‘);//多次点击只输出一次
29             return div;
30         }
31        
32         var createSingleDiv = getSingle(createDiv);
33         //业务代码之触发事件
34         document.getElementById("openbtn").onclick = function() {
35             var div = createSingleDiv();
36             document.getElementsByTagName("body")[0].appendChild(div);
37         }
38         </script>
39         
40     </div>
41 </body>
42 
43 </html>

上面的 || 有个小技巧，就是就近计算，如果result有值了后面就不会计算了。还有上面的apply只是起到运行作用。

单例模式据说用处很多，目前我知道的创建弹窗，创建遮罩层，实现jquery的one函数效果等。

最后这里设计模式核心代码运用的是闭包，闭包可以保存作用域链，因此产生了静态变量的改变。因此产生了缓存的效果。

本文结束。

以上是关于js设计模式之单例模式的主要内容，如果未能解决你的问题，请参考以下文章