码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript知识点记录(三)设计模式

时间:2016-08-09 18:51:07      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:

Javascript设计模式记录,这个方面确实是没写过,工作中也没有用到js设计模式的地方。

单例模式

保证一个类仅有一个实例,并提供一个访问它的全局访问点。例如:线程池,全局缓存,登录浮窗。

首先我们需要把单例的逻辑代码单独提取,然后使用惰性单例的方式,也就是返回方法。只有在点击的时候,才会进行执行。

javascript的单例,跟类不一样。无需创建多余的构造函数这些,直接创建全局变量即可。

!(function () {
    //管理单例的逻辑代码,如果没有数据则创建,有数据则返回
   var getSingle = function(fn){ //参数为创建对象的方法
       var result;
       return function(){ //判断是Null或赋值
           return result || (result = fn.apply(this,arguments));
       };
   };
    //创建登录窗口方法
    var createLoginLayer = function(){
        var div = document.createElement(‘div‘);
        div.innerHTML = ‘我是登录浮窗‘;
        div.style.display = ‘none‘;
        document.body.appendChild(div);
        return div;
    };
    //单例方法
    var createSingleLoginLayer = getSingle(createLoginLayer);

    //使用惰性单例,进行创建
    document.getElementById(‘loginBtn‘).onclick = function(){
        var loginLayer = createSingleLoginLayer();
        loginLayer.style.display = ‘block‘;
    };
})()

策略模式

定义一系列的算法,把它们一个一个封装起来。将算法的使用与算法的实现分离开来。

javascript的策略模式很简单,把算法直接定义成函数即可。

!(function () {
    //定义算法方法
    var strategies = {
        "S":function(salary){
          return salary * 4;
        },
        "A":function(salary){
            return salary * 3;
        },
        "B":function(salary){
            return salary * 2;
        }
    };
    //执行算法
    var calculateBouns = function(level,salary){
      return strategies[level](salary);
    };
    console.log(calculateBouns(‘S‘,2000));
})()

 

缓动算法 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

占位符

Javascript知识点记录(三)设计模式

标签:

原文地址:http://www.cnblogs.com/chenxygx/p/5754101.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!