Javascript的分层概念

Javascript的分层概念曹刘阳（阿当）原生javascript目录底层、组件层和应用层YUI2JQueryYUI3原生javascript变量冲突：inputtype=buttonvalue=clickmeid=btn/scripttype=text/javascript//功能Avara=1,btn=document.getElementById(btn);btn.onclick=function(){a++;alert(a);//101、102、103…}/script...scripttype=text/javascript//功能Bvara=100;//在此处被重新赋值/script变量暴露在window作用域下，多人合作\多个功能间互相干扰。ulid=listliid=firstItem111/lili222/lili333/li/ulscripttype=text/javascriptvarlist=document.getElementById(list),firstItem=document.getElementById(firstItem);alert(firstItem.nextSibling.innerHTML);//IE:222firefox:undefinedalert(list.childNodes.length);//IE:3firefox:7/scriptDOM相关-1：style#test{width:300px;height:300px;background:blue;}/stylebodydivid=test/divscripttype=text/javascriptvartest=document.getElementById(test);if(document.all){test.style.filter=‘alpha(opacity=20)’;//IE}else{test.style.opacity=0.2;//firefox}/scriptDOM相关-2：不同浏览器，对DOM的解析不同inputtype=buttonvalue=clickmeid=btn/spanid=spanhelloworld/spanscripttype=text/javascriptdocument.getElementById(btn).onclick=function(e){e=window.event||e;varel=e.srcElement||e.target;alert(el.tagName);}document.getElementById(span).onclick=function(e){e=window.event||e;varel=e.srcElement||e.target;alert(el.tagName);}/scriptEvent相关-1：inputtype=buttonvalue=clickmeid=btn/scripttype=text/javascriptvarbtn=document.getElementById(btn);if(document.all){//IEbtn.attachEvent(onclick,function(){alert(helloworld);});}else{//firefoxbtn.addEventListener(click,function(){alert(helloworld);},false);}/scriptEvent相关-2：不同浏览器，对Event的解析不同//设置cookiedocument.cookie=name=adang;expires=Mon,04Oct201002:40:14GMT;path=/;document.cookie=sex=male;expires=Mon,04Oct201002:40:14GMT;path=/;document.cookie=blog==Mon,04Oct201002:40:14GMT;path=/;/*读取cookie**此时cookie里的值为name=adang;sex=male;blog=*/varcookieStr=document.cookie;//对字符进行操作，取出name对应的值varname=cookieStr.split(name)[1].split(;)[0].split(=)[1];alert(name);其它操作：原生javascript接口太笨拙原生javascript写程序就像汽车行驶在一条凹凸不平的小路上。底层、组件层和应用层控制全局作用域的变量数量：inputtype=buttonvalue=clickmeid=btn/scripttype=text/javascript(function(){vara=1,btn=document.getElementById(btn);btn.onclick=function(){a++;alert(a);}})();/script...scripttype=text/javascript(function(){vara=100;})();/script问题一：匿名函数间无法通信问题二：如果匿名函数内容很长，函数内部还是有冲突隐患命名空间scripttype=text/javascriptvarGLOBAL={};GLOBAL.namespace=function(str){vararr=str.split(.),o=GLOBAL;for(i=(arr[0]==GLOBAL)?1:0;iarr.length;i++){o[arr[i]]=o[arr[i]]||{};o=o[arr[i]];}}/scriptscripttype=text/javascript(function(){GLOBAL.namespace(A);GLOBAL.A.a=1;varbtn=document.getElementById(btn);btn.onclick=function(){GLOBAL.A.a++;alert(GLOBAL.A.a);}GLOBAL.namespace(B);GLOBAL.B.a=100;})();/script...scripttype=text/javascript(function(){vara=100;alert(a);alert(GLOBAL.A.a);})();/script封装DOM的接口scripttype=text/javascriptfunctiongetNextNode(node){if(ie){…}else{…}};functionsetOpacity(node,opacityValue){if(ie){…}else{…}}/script封装Event的接口scripttype=text/javascriptfunctiongetEventTarget(e){if(ie){…}else{…}};functionon(node,eventType,handler){if(ie){…}else{…}}/script将函数归到相应的命名空间下：scripttype=text/javascriptvarGLOBAL={};GLOBAL.namespace=function(str){…};…//GLOBAL.extend、GLOBAL.mergeGLOBAL.namespace(“Dom”);GLOBAL.Dom.getNextSibling=function(){…}GLOBAL.Dom.setOpacity=function(){…}…//GLOBAL.Dom.getPrevSibling、GLOBAL.Dom.getStyleGLOBAL.namespace(“Event”);GLOBAL.Event.getEventTarget=function(){…}GLOBAL.Event.on=function(){…}…//GLOBAL.Event.stopPropagation、GLOBAL.Event.getXY/script将DOM、Event相关的操作进行封装，另外扩展一些原生javascript语言层面不提供的接口，组成新的底层。底层替我们铲平了路面的凸起（浏览器差异），填补了路面的凹陷（补充javascript语言的底层方法）封装cookie的接口scripttype=text/javascriptvarcookie={set:function(){…},read:function(){…},del:function(){}};/script将函数归到相应的命名空间下：scripttype=text/javascriptGLOBAL.namespace(“Cookie”);GLOBAL.Cookie={set:function(){…}read:function(){…}del:function(){…}}…//GLOBAL.Ajax、GLOBAL.Drag、GLOBAL.Resize…/script将常见功能封装成组件，组件将内部实现细节透明，提供简单易用的接口。组件层替我们在路面铺上沥青，将普通小路变成高速公路。应用层：和页面具体需求相关，调用底层的底层接口和组件层的组件，依赖底层和组件层。组件层：调用底层提供的接口，封装常用组件，依赖底层。和具体功能有关，但和页面需求无关。为应用层提供组件（组件提供组件的接口）。例如Drag、Cookie、Ajax、Resize、Tab、Tree。底层：封装DOM、Event在各浏览器下的区别，提供统一的接口;扩展javascript语言，提供全局性的方法。和具体功能无关，只为组件层和应用层提供底层接口。例如getNextSibling（）、getEventTarget（）、namespace（）、trim（）、isArray()。典型的引用方法：htmlheadtitle阿当制作/title/headbodyscripttype=“text/javascript”src=“base.js”/script!--底层--scripttype=“text/javascript”src=“ajax.js”/script!–组件层--scripttype=“text/javascript”src=“tab.js”/script!--组件层--scripttype=“text/javascript”!--应用层--(function(){//yourcodehere})();/script/body/html应用层：1)避免多人合作的冲突;2)组件间的依赖关系处理;组件层：1)尽可能丰富的组件;2)易用性;3)可重用性。底层：1)跨浏览器兼容,屏蔽尽可能多的浏览器差异;2)补充完善javascript语言本身的不足;3)精简。底层+组件层=框架框架可以帮助我们将精力集中在应用层的逻辑处理上，例如设计类、接口、设计模式，而不是将精力放在频繁的底层操作上。例：开发框架的难点：代码品质、组件的丰富程度、兼容性、易用性、可复用性…我们有大量开源框架可以选择：jQuery、YUI、Dojo、Prototype、mootool…YUI2官方网址：官方网址：“小”