这里主要引用《JavaScript语言精粹》里面有关函数的理解,结合《JavaScript高级程序设计-第2版》对块级作用域的理解,联想到自己所做的项目,对模块模式作以汇总并评价。
1 /** 2 * 首先需要知道块级作用域的概念—— 3 * 1>JavaScript当中没有真正意义上的块级作用域,我们使用匿名函数进行模拟实现。 4 * 2>在块级作用域中定义的任何变量,都会在执行结束时被销毁(闭包另当别论),源于没有指向该匿名函数的引用。 5 * 3>当里面应用了闭包时,该块级作用域里的代码执行结束时,销毁的是它的作用域链,但是其活动对象仍然保存在内存中。 6 * 3>作用: 7 * a>提高性能(相对而言):对于临时需要的变量,用完立即销毁 8 * b>防止向全局作用域中添加变量和函数。 9 * c>减少闭包占用的内存问题 10 * 4>引入模块模式... 11 */ 12 (function($){ 13 /** 14 * 模块模式 15 * 1>组成 16 * a>外层是一个立即执行的函数表达式 17 * b>模块中定义私有变量(当然也有私有函数) 18 * c>利用闭包创建可以访问私有变量和函数的特权函数。 19 * d>返回这个特权函数 20 * 2>作用 21 * a>摒弃全局变量 22 * b>封装功能或者程序,毫无疑问,更具维护性,更具重用性 23 * 3>优势:只暴露了公有方法,隐藏里面的私有属性 24 */ 25 //举个例子 26 //输入区域键盘处理 27 dom.find('div.ldj-chat-in input, div.ldj-chat-input textarea').bind('keydown keyup change',function(dom){ 28 //这3个变量是专属于这个模块的私有变量 29 var curr = 0; 30 /** 31 * 这里的history是一个数组,用于保存历史记录,很显然,这里的history需要静态的保存历史数据,而不是每一次触发事件的时候,再重新赋值所有历史记录值, 32 * 可能如果是新手的话,可能会把这里的history保存为一个全局变量,以便于操作,保存记录。但是,由于全局变量是共享的,所以如果无意中改变了它的值, 33 * 后果将是很严重的。这也就是我们通常说的,"全局变量是魔鬼"。我们利用了模块模式(一个立即执行的函数表达式),摒弃了全局变量的应用。 34 * 当然我们可以利用传入的参数值来保存对应变量的状态。接着我们要实现我们的功能就是,让history具有全局变量的效果。当然也就想到应用闭包了。 35 * 当这个函数调用完成后,由于这个函数里面存在一个匿名函数,并且里面的匿名函数调用了这里的history变量, 36 * 而且,这个匿名函数赋值给了一个jQuery对象的一个事件,导致这里的history变量一直存在于内存当中。 37 * 当然,这里的curr和now变量也都被引用了,那么这两个变量也将在内存里面。(这里,哪些变量需要放置在这儿,需要依照应用来定)。 38 */ 39 var history; 40 41 var now; 42 43 /** 44 * 返回的是一个函数(闭包),这个函数能够访问到以上3个私有属性变量,拿《JavaScript语言精粹》的话来讲,就是特权函数了, 45 * 因为只有它才能访问当这个模块里的私有变量,走出了这个模块,谁也访问不到了。 46 */ 47 return function(e){ 48 /** 49 * 以下声明的这3个变量,是属于这个匿名函数的动态作用域里面的变量,也就是说,每触发一次事件,这里的值都会重新赋值, 50 * 当然这里的变量赋值也需要依应用而定。就像这里的text变量取的是每进行一次键盘的敲击, 51 * 都需要重新记录文本框里面所有敲击的内容,当然就应该是动态变量的赋值了。 52 */ 53 var l = $(this).data('len') || 0; 54 var text = $(this).val(); 55 var n = text.length; 56 history = history || dom.data('history'); 57 58 if ($.browser.opera || (e.type === 'keyup')) { 59 //回车 60 if (e.keyCode === 13) { 61 curr = 0; 62 //如果消息为空,则不发送 63 if (text.trim() === '') { 64 $(this).val('').focus(); 65 return; 66 } 67 $(this).trigger('send'); 68 return false; 69 } 70 //上 71 if (e.which === 38 && curr < history.length) { 72 now === undefined && (now = $(this).val()); 73 var prev = history[curr]; 74 if ($(this).is('textarea')) { 75 $(this).val(/^#c[0-9a-fA-F]{6}/.test(prev) ? prev.substring(8) : prev); 76 } 77 else { 78 $(this).val(prev); 79 } 80 $(this).data('len', prev.length); 81 curr++; 82 } 83 //下... 84 } 85 } 86 }(dom)); //执行完这个函数的时候,该函数的作用域链会立即销毁,但是它的活动对象一直存在于内存当中。需要强调这里传入的参数的应用理解, 87 //它往往传入的是需要保存状态的参数。另一个在性能的优化上理解的话,就是查询该元素更加快速,很显然,减少了一层闭包的变量查询。 88 /** 89 * 虽然,history变量一直在内存里面,但是在上面的块级作用域的外面是根本访问不到的。访问不到的原因是, 90 * 上一个模块的最外层是由立即执行的函数表达式构成,导致这个匿名函数在执行完成后, 91 * 它的作用域链会被销毁,当然里面的动态局部变量也是被销毁的,如果有闭包的存在,那么它的活动对象依旧在内存中。 92 * 深入理解了这一点,才能对JavaScript代码的调优作以深入分析。 93 */ 94 95 (function(){ 96 //第二个模块 97 //... 98 })(); //当然可以在这里传入必要的全局参数 99 100 (function(){ 101 //第三个模块 102 //... 103 })(); 104 105 /** 106 * 如此这样模块化去写JavaScript代码,是不是感觉代码的封装性更好了呢?答案是肯定的。 107 * 同样的,模块模式的应用提供了一种JavaScript代码的优化思想。 108 */ 109 110 })(jQuery); //最外层同样也是模块模式,同样的,有效摒弃全局变量;起到了块级作用域的效果。 111 112 /** 113 * 1.模块模式的另外一个应用便是功能的有效独立扩展,汤姆大叔的博客解释的清晰明了 114 * http://www.cnblogs.com/TomXu/archive/2011/12/30/2288372.html 115 * 2.会发现,在最外层的代码(function($){...})(jQuery),同样也是模块模式的应用,可以知道, 116 * 模块模式的应用不仅可以应用在程序的局部,同样也能应用在程序的全局。它的好处已经解释过了,在此略过。 117 */
注意,不要仅仅用模块模式去优化我们的JavaScript代码,由于里面有闭包的存在,对于内存的的消耗还是有些大的。当然,我们需要变相的去看待这里的闭包,如果一个变量,我们持续需要检索,我们当然要选择让这种类型的变量一直置于内存中,以提高查询检索速度;不要忘了闭包的存在让这个变量实现静态存储(实现静态存储是有条件的,这里就不再解释了),什么时候需要应用这种方式,不仅要从性能上去考虑,还要从功能需求上考虑。