javascript设计模式之单体模式
一入前端深似海,刚入前端,以为前端只是div+css布局外加jquery操作DOM树辣么简单。伴随着对前端学习的深入,发现前端也是博大精深,而且懂得越多,才发现自己越无知,所以一定不能停下脚步的学习。原来前端也有设计模式,那么开始了解吧!
今天来学最简单的单体模式,其实就是简单的Object扩展
var calcYourShengXiao={ solar : ["甲","乙","丙","丁","午","己","庚","辛","壬","癸"], moon : ["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"], animal : ["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"], output:function(year){ var sr=(year-1924)%10; var mr=(year-1924)%12; console.log("你是"+this.solar[sr]+this.moon[mr]+"出生 属"+this.animal[mr]); } } calcYourShengXiao.output(1990);
上边就是一个最基本的单体模型,把一个功能模块相关的数据和方法用一个对象表示,便于阅读和管理,同时减少了全局变量的使用。
还可以通过闭包实现一个惰性实例单体。
对于资源密集型的或配置开销甚大的单体,也许更合理的做法是将其实例化推迟到需要使用它的时候。这种技术被称为“惰性加载”(lazy loading)。
所以对于可能需要加载大量数据的单体,选择惰性加载效率会更高。如下实例
var sxCalc=(function(){ var obj={ solar : ["甲","乙","丙","丁","午","己","庚","辛","壬","癸"], moon : ["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"], animal : ["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"], calcYourShengXiao:function(year){ var sr = (year-1924)%10; var mr = (year-1924)%12; console.log("你是"+this.solar[ sr>=0 ? sr:10+sr ]+this.moon[ mr>=0 ? mr:12+mr]+"出生 属"+this.animal[ mr>=0 ? mr:12+mr]); } }; return { get:function(){ return obj; } } })() sxCalc.get().calcYourShengXiao(1990)
有这样一个常见的需求,点击某个按钮的时候需要在页面弹出一个遮罩层。比如web.qq.com点击登录的时候.可以使用如下单例模式
var createMask = function(){ var mask; return function(){ return mask || ( mask = document.body.appendChild( document.createElement('div') ) ) } }()
更通用的方法
var singleton = function( fn ){ var result; return function(){ return result || ( result = fn .apply( this, arguments ) ); } } var createMask = singleton( function(){ return document.body.appendChild( document.createElement('div') ); })
/** * ┌───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┐ * │Esc│ │ F1│ F2│ F3│ F4│ │ F5│ F6│ F7│ F8│ │ F9│F10│F11│F12│ │P/S│S L│P/B│ ┌┐ ┌┐ ┌┐ * └───┘ └───┴───┴───┴───┘ └───┴───┴───┴───┘ └───┴───┴───┴───┘ └───┴───┴───┘ └┘ └┘ └┘ * ┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───────┐ ┌───┬───┬───┐ ┌───┬───┬───┬───┐ * │~ `│! 1│@ 2│# 3│$ 4│% 5│^ 6│& 7│* 8│( 9│) 0│_ -│+ =│ BacSp │ │Ins│Hom│PUp│ │N L│ / │ * │ - │ * ├───┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─────┤ ├───┼───┼───┤ ├───┼───┼───┼───┤ * │ Tab │ Q │ W │ E │ R │ T │ Y │ U │ I │ O │ P │{ [│} ]│ | \ │ │Del│End│PDn│ │ 7 │ 8 │ 9 │ │ * ├─────┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴─────┤ └───┴───┴───┘ ├───┼───┼───┤ + │ * │ Caps │ A │ S │ D │ F │ G │ H │ J │ K │ L │: ;│" '│ Enter │ │ 4 │ 5 │ 6 │ │ * ├──────┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴────────┤ ┌───┐ ├───┼───┼───┼───┤ * │ Shift │ Z │ X │ C │ V │ B │ N │ M │< ,│> .│? /│ Shift │ │ ↑ │ │ 1 │ 2 │ 3 │ │ * ├─────┬──┴─┬─┴──┬┴───┴───┴───┴───┴───┴──┬┴───┼───┴┬────┬────┤ ┌───┼───┼───┐ ├───┴───┼───┤ E││ * │ Ctrl│ │Alt │ Space │ Alt│ │ │Ctrl│ │ ← │ ↓ │ → │ │ 0 │ . │←─┘│ * └─────┴────┴────┴───────────────────────┴────┴────┴────┴────┘ └───┴───┴───┘ └───────┴───┴───┘ */
参考:http://www.alloyteam.com/2012/10/common-javascript-design-patterns/
能工摹形,巧匠窃意。