关于设计模式,我的理解是它是业务代码的提前解决方案。意思就是说在没有真正的业务之前,设计模式就存在了,这个是显然的。设计模式是人长期从事业务总结的具有普通适用性的解决方案。
就个人来讲,写了太多的命令式编程代码,所谓命令式代码就是业务需要怎样就写怎么样的功能,比如添加一个点击事件,比如进行一个验证等扥。写就写了很少站在设计模式的角度或者前人的角度去改善代码。
不给自己找客观原因,最近开始关注设计模式,尝试从设计模式的角度改善开发。
在开始单例设计模式之前首先要搞清楚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设计模式之单例模式
原文地址:https://www.cnblogs.com/zhensg123/p/9023808.html