【javascript编程模式】之变量声明的技巧
一,我们的习惯
?
// 普通变量var a = 1 * 2;// 对象变量var obj1 = new Object();var obj2 = {}; // 快捷方式var obj3 = {property1 : "我是属性1",property2 : "我是属性2",function1 : function() {alert("obj3的函数");},function2 : function(param) {alert("有参函数");}};// 数组变量var arr1 = new Array();var arr2 = [ 1, 2, 3, 4, 5 ];// 快捷方式var arr2 = [ 1, 2, [ 1, 2, 3, 4, 5 ], 4, 5 ];// 快捷方式// map类型var map = {title : "标题",logo : "/logos/welcome.png",age : 20,sex : "男"};// 函数变量var f = function() {alert("我是函数变量,给我一对括号吧");};// 匿名函数变量// 这里的函数名fact 是为匿名函数起的一个名字,近供自身调用,一般用于递归var f = function fact(x) {if (x <= 1)return 1;elsereturn x * fact(x - 1);};?
二,如何去改善代码
?
?这里我们要用到匿名函数,当然其他函数也可以,
?
?
1,什么是匿名函数
?
?匿名函数就是一个无名称的类函数的表达式!
?
?
?无参匿名函数,与函数的区别是:没有函数名?
?? ? ? function(){
?? ? ? ? ? alert("我是一个匿名函数,没有参数");
?? ? ?}
?
?
有参匿名函数,与函数的区别:没有函数名?? ? var fn=function(param){
?
?? ? ? ? ? alert("我是一个匿名函数,有参数"+param);
?? ? ?}
?
?? ?有名字的匿名函数,与函数的区别:注意这个名字,仅自身可用,其他地方无法引用,并且必须有一个左值?? ? ?var fn=function increase(num){
?? ? ? ? if(num>100){
?? ? ? return;
?? ? ? ? }else{
?? ? ? ? ? ??increase(++num);
?? ? ? ? }
?? ? }
?
2,原理:在函数内的变量,其作用域范围为当前函数内,函数执行完毕,变量失效。如果想设置全局变量,将其暴露出去即可
?
?
(function(window){var _common={};_common.faxbox={modified:false,_emailList:false,emailList:function(){if(this._emailList){return this._emailList;}this._emailList= zk.Widget.$(jq("$emailList"));return this._emailList;},eachFaxList:function(callback){var itemInter =this.emailList().itemIterator() ;while(itemInter.hasNext()){callback.apply(this,[itemInter.next()]);}},switchReadStatus:function(listitem,status){var statusLabel =listitem.firstChild.firstChild;var readImage =listitem.firstChild.nextSibling.firstChild.firstChild;var arr =statusLabel.getValue().split(":");if(arr[1]!=status){this.modified=true;}else{listitem.setSelected(false);return;}arr[1]=status;statusLabel.setValue(arr.join(":"));switch(status){case 0:readImage.setSrc("/icon/images/email_unread.png");break;case 1:readImage.setSrc("/icon/images/marktrans.png");break;case 2:readImage.setSrc("/icon/images/email_replied.png");break;case 3:readImage.setSrc("/icon/images/email_forward.png");break;case 4:readImage.setSrc("/icon/images/email_forwardReplied.png");break;default:break;}},switchColorStatus:function(listitem,status){var statusLabel =listitem.firstChild.firstChild;var arr =statusLabel.getValue().split(":");if(arr[3]!=status){this.modified=true;}else{listitem.setSelected(false);return;}arr[3]=status;statusLabel.setValue(arr.join(":"));var listcell =listitem.lastChild.previousSibling.previousSibling;var subjectCell = listcell.nextSibling;switch(status){case 1://红色jq(subjectCell).attr("style","color: #ff3747 !important;font-weight:;"); listcell.setImage("/icon/images/mark1.gif");break;case 2://绿色jq(subjectCell).attr("style","color: #29dd3d !important;font-weight:;"); listcell.setImage("/icon/images/mark2.gif");break;case 3://橙色jq(subjectCell).attr("style","color: #ffa127 !important;font-weight:;"); listcell.setImage("/icon/images/mark3.gif");break;case 4://蓝色jq(subjectCell).attr("style","color: #36d1ff !important;font-weight:;"); listcell.setImage("/icon/images/mark4.gif");break;case 5://粉色jq(subjectCell).attr("style","color:#ffb7d7 !important;font-weight:;"); listcell.setImage("/icon/images/mark5.gif");break;case 6://青色jq(subjectCell).attr("style","color: #85dfd2 !important;font-weight:;"); listcell.setImage("/icon/images/mark6.gif");break;case 7://黄色jq(subjectCell).attr("style","color: #e2c462 !important;font-weight:;"); listcell.setImage("/icon/images/mark7.gif");break;case 8://紫色jq(subjectCell).attr("style","color: #ed50f8 !important;font-weight:;"); listcell.setImage("/icon/images/mark8.gif");break;case 9://灰色jq(subjectCell).attr("style","color: #a1a3a4 !important;font-weight:;"); listcell.setImage("/icon/images/mark9.gif");break;default:jq(subjectCell).attr("style","color:;font-weight:;"); listcell.setImage("/icon/images/marktrans.png");break;}},selectAll:function(){//选择所有邮件this.emailList().selectAll(false,null);},endMarkStatus:function(){if(this.modified)return;//1停止处理框zk.endProcessing();//2,提示用户jq.alert("您选择的邮件已经是当前状态,无需再次标记。",{title:"选择邮件出错"});//3停止事件的传播,阻止调用后台代码jq.stop();},checkSelect:function(){if(this.emailList().getSelectedItems().length){jq.alert("请选择邮件!",{title:"选择邮件出错"});jq.stop();}},_select:function(status){this.eachFaxList(function(listitem){var rsLabel = listitem.firstChild.firstChild;if(rsLabel.getValue().split(":")[1]==status){listitem.setSelected(true);}else{listitem.setSelected(false);}});},selectUnRead:function(){this._select("0");},selectRead:function(){this._select("1");},selectReplied:function(){this._select("2");},selectForwarded:function(){this._select("3");},selectRF:function(){this._select("4");},selectInvert:function(){this.eachFaxList(function(listitem){if(listitem.isSelected()){ listitem.setSelected(false);}else{listitem.setSelected(true);}});},clearSelected:function(){this.emailList().clearSelection();},markReaded:function(){this.checkSelect();zk.startProcessing(1);this.eachFaxList(function(listitem){if(listitem.isSelected()){ this.switchReadStatus(listitem,1);}});this.endMarkStatus();},markUnReaded:function(){this.checkSelect();zk.startProcessing(1);this.eachFaxList(function(listitem){if(listitem.isSelected()){ this.switchReadStatus(listitem,0);}});this.endMarkStatus();},markColor:function(status){this.checkSelect();zk.startProcessing(1);this.eachFaxList(function(listitem){if(status==-1){this.switchColorStatus(listitem,status);}else if(listitem.isSelected()){ this.switchColorStatus(listitem,status);}});this.endMarkStatus();},markLevel:function(level){if(!(level==-1||level==0||level==1))return;this.checkSelect();zk.startProcessing(1);this.eachFaxList(function(listitem){if(!listitem.isSelected()){ return;}var statusLabel =listitem.firstChild.firstChild;var arr =statusLabel.getValue().split(":");if(arr[2]!=status){this.modified=true;}else{listitem.setSelected(false);return;}arr[2]=level;statusLabel.setValue(arr.join(":"));var levelImage =listitem.firstChild.nextSibling.firstChild.lastChild;switch(level){case -1:levelImage.setSrc("/icon/images/level3_mini.png");break;case 0:levelImage.setSrc("/icon/images/level2_mini.png");break;case 1:levelImage.setSrc("/icon/images/level1_mini.png");break;}});this.endMarkStatus();}};jq(window).blur(function(){_common.win.isFocus=false;});jq(window).focus(function(){_common.win.isFocus=true;});_common.win={isFocus:true};//暴露commonwindow.common=_common;})(window);?
三,为什么要这么做?
?
1, 首先我们来比较一下(一)和(二)中变量的作用域
?
?? (一)声明的所有变量均为全局变量,(二)中,我们仅仅暴露了一个全局变量common(当然,如果你原因可以像mootools那样基于package概念,common.util.stringUtil,comm.util.*)
?
?
2,然后我们看一下,(一)中声明带来的问题
?
(一)中变量的声明散落到任何地方,当我们团队开发项目的时候,不同的开发人员声明的变量或函数可能相同,
因为是全局的,所以会产生冲突问题,浏览器在执行js的时候,同名函数或变量,最后一个将覆盖以前所有同名的变量或函数
举个例子:
?
张三声明了一个全局变量
?
var myName="张三";
?
?
而李四呢,他也声明了全局变量
?
var myName="我是李四";
?
?
?
然后他们两个在项目中的不同模块 ?向 客户问好!
?
function sayHello()
{
?? ? ? alert("你好,我是"+myName);
}
?
张三这样说了:
?
<button onclick="sayHello()"></button>
?
李四这样说了:
?
<img onclick="sayHello()" src="/welcome.png"></img>
?
?
但是客户看到的问候来自谁的呢??
?
可能是张三,也可能是李四。
?
如果张三和李四声明了同名函数,但是函数体的具体实现不同,那么张三和李四在使用这个函数时,自以为调用了自己声明的函数,但始终未达到自己想要的效果,或者说代码做了他无法挽回的事情,那么后果就灰常严重了,
?
?
?
?
?
四,总结
?
前几天在看jQuery源码和JavaScript: The Definitive Guide, 5th Edition,学到许多js优化以及js面向对象编程的方法,语言的诞生自有它存在的价值。
?
本文主要介绍如何避免全局变量及全局函数冲突,我们使用面向对象的方法解决冲突问题,其中借鉴了jQuery和mootools的一些技巧
?
?
?
?
?
?
?
?
?
?
?
?