Javascript的分層概念

1、曹劉陽(yáng)曹劉陽(yáng) （阿當(dāng)）（阿當(dāng)）目錄目錄/ 功能功能Avar a = 1,btn = document.getElementById(btn);btn.onclick = function()a+;alert(a);/ 101、102、103./ 功能功能Bvar a = 100;/在此處被重新賦值在此處被重新賦值變量暴露在變量暴露在window作用域下，多人作用域下，多人合作合作多個(gè)功能間互相干擾。多個(gè)功能間互相干擾。 111222333 var list = document.getElementById(list) , firstItem = document.getElementById

2、(firstItem);alert(firstItem.nextSibling.innerHTML); / IE : 222 firefox : undefinedalert(list.childNodes.length); / IE : 3 firefox : 7 #testwidth:300px;height:300px;background:blue;var test = document.getElementById(test);if(document.all) test.style.filter = alpha(opacity=20);/ IEelsetest.style.opaci

3、ty = 0.2;/ firefox 不同瀏覽器，對(duì)不同瀏覽器，對(duì) DOM的解析不同的解析不同hello worlddocument.getElementById(btn).onclick = function(e)e = window.event | e;var el = e.srcElement | e.target;alert(el.tagName);document.getElementById(span).onclick = function(e)e = window.event | e;var el = e.srcElement | e.target;alert(el.tagNam

4、e);var btn = document.getElementById(btn);if(document.all)/ IEbtn.attachEvent(onclick,function()alert(hello world);); else / firefoxbtn.addEventListener(click,function()alert(hello world);,false); 不同瀏覽器，對(duì)不同瀏覽器，對(duì)Event的解析不同的解析不同/ 設(shè)置設(shè)置cookie document.cookie = name=adang; expires= Mon, 04 Oct 2010 02:40

5、:14 GMT; path=/;document.cookie = sex=male; expires= Mon, 04 Oct 2010 02:40:14 GMT; path=/;document.cookie = blog=http:/; expires= Mon, 04 Oct 2010 02:40:14 GMT; path=/;/* 讀取讀取cookie* 此時(shí)此時(shí)cookie里的值為里的值為name=adang; sex=male; blog=http:/*/var cookieStr = document.cookie;/ 對(duì)字符進(jìn)行操作，取出對(duì)字符進(jìn)行操作，取出name對(duì)應(yīng)的值對(duì)

6、應(yīng)的值 var name = cookieStr.split(name)1.split(;)0.split(=)1;alert(name); 原生原生javascript接口太笨拙接口太笨拙 原生原生javascript寫(xiě)程序就像汽車(chē)行駛在一條凹凸不平的小路上。寫(xiě)程序就像汽車(chē)行駛在一條凹凸不平的小路上。(function()var a = 1,btn = document.getElementById(btn);btn.onclick = function()a+;alert(a);)();.(function()var a = 100;)();問(wèn)題一：匿名函數(shù)間無(wú)法通信問(wèn)題一：匿名函數(shù)間無(wú)法

7、通信問(wèn)題二：如果匿名函數(shù)內(nèi)容很長(zhǎng)問(wèn)題二：如果匿名函數(shù)內(nèi)容很長(zhǎng) ，函數(shù)內(nèi)部還是有沖突隱患函數(shù)內(nèi)部還是有沖突隱患var GLOBAL = ;GLOBAL.namespace = function(str)var arr = str.split(.),o = GLOBAL;for (i=(arr0 = GLOBAL) ? 1 : 0; iarr.length; i+) oarri=oarri | ; o=oarri; (function()GLOBAL.namespace(A); GLOBAL.A.a=1; var btn = document.getElementById(btn);btn.onc

8、lick = function()GLOBAL.A.a+;alert(GLOBAL.A.a);GLOBAL.namespace(B);GLOBAL.B.a = 100;)();.(function() var a = 100;alert(a); alert(GLOBAL.A.a); )();function getNextNode(node)if(ie) else ; function setOpacity (node,opacityValue)if(ie) else function getEventTarget(e)if(ie) else ; function on (node,event

9、Type,handler)if(ie) else var GLOBAL = ;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

10、 = function() GLOBAL.Event.on = function() / GLOBAL.Event. stopPropagation 、GLOBAL.Event.getXY將將DOM、Event相關(guān)的操作進(jìn)行封相關(guān)的操作進(jìn)行封裝，另外擴(kuò)展一些原生裝，另外擴(kuò)展一些原生javascript語(yǔ)言層面不提供的接口，組成新的語(yǔ)言層面不提供的接口，組成新的底層。底層。底層替我們鏟平了路面的凸起（瀏覽器差異），填補(bǔ)了路面的凹底層替我們鏟平了路面的凸起（瀏覽器差異），填補(bǔ)了路面的凹陷（補(bǔ)充陷（補(bǔ)充javascript語(yǔ)言的底層方法）語(yǔ)言的底層方法）var cookie = set : function(),read : function(),del : function();GLOBAL.namespace(“Cookie”);GLOBAL.Cookie = set : function() read : function() del : function() / GLOBAL.Ajax、GLOBAL.Drag、GLOBAL.R