js 常用的设计模式

174 阅读2分钟

单例模式

在当前作用域中,实例只初始化一次(例如:在工作项目中下订单跳转到收银台页面,通过创建form表单提交) form 只创建一次, 多次使用就够了
function createForm(){
    return document.createElement('form');
};
var formDom = (function(){
    var obj;
    return function(){
        if(!obj){
            obj = createForm();
        }
        return obj;
    }
})();
var a =formDom();
var b =formDom();
var c =formDom();

策略模式

用过配置的方法可以让实现不同的方法, 方法与方法之间耦合度比低, 可以用来解决代码中多个 if else if,等问题(例如: 在项目用时间问题, 后台返回一个时间戳, 但是我们在页面中显示的可能是yyyy-mm-dd hh:mm:ss, 也可以能是 MM月DD日, 也可能是hh:mm)
function analysisTimeStamp(timeStamp){
  var date = new Date(timeStamp);
  var Y = date.getFullYear();
  var M = date.getMonth() + 1;
  var D = date.getDate();
  var H = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();
  return {Y:Y,M:M,D:D,H:H,m:m,s:s};  
};
var timeObj = {
    'yyyy-mm-dd hh:mm:ss': function(date){
        return date.Y + '-' + date.M + '-' + date.D + ' ' + date.H + ':' + date.m + ':' + date.s;
       },
    'MMDD': function(date){
        return date.M + '月' + date.D + '日';
       },
    'hh:mm': function(date){
        return date.H + ':' + date.m;
       },
};
function formatTime(timeStamp, format){
    return timeObj[format](analysisTimeStamp(timeStamp));
}
var time = formatTime(new Date().getTime(), 'yyyy-mm-dd hh:mm:ss')

代理模式

当函数不适合直接访问另外一个函数可以用代理模式(在项目中,广告推荐位的数据一般都比较固定, 如果每次访问这个页面,每次都请求的话, 性能太低了, 考虑请求一次, 数据本地保存(设置一个缓存机制, 比如30分钟清本地缓存一次),再次请求时,先判断本地有没有,本地有用本地数据, 本地没有请求服务器)
function ajax(){ return {a:1} };  //模式请求服务器数据
function  proxyAjax(){
    var dataString =localStorage.getItem('data');
    var data = JSON.parse(dataString);
    if(!data){
        data =ajax();
        localStorage.setItem('data', JSON.stringify(data));
    }
    return data;
};
proxyAjax();
proxyAjax();
proxyAjax();
常用的还有享元模式, 职责链模式, 适配器模式, 发布订阅模式,
下次更新
用的比较少: 状态模式, 中介者模式, 装饰者模式, 命令模式, 组合模式, 模板方法模式,