• 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 + "
    " + "age:" + student.age + "
    " + "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函数效果等。

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

    本文结束。

  • 相关阅读:
    Sass
    Less文件的建立
    面试问题整理
    高光谱图像分类部分名词解析
    监督学习,无监督学习和半监督学习
    git
    node.js安装及其环境配置
    浏览器从输入网址到渲染出页面的过程
    node的api
    模块与包管理工具
  • 原文地址:https://www.cnblogs.com/zhensg123/p/9023808.html
Copyright © 2020-2023  润新知