《Javascript的分层概念》由会员分享，可在线阅读，更多相关《Javascript的分层概念（50页珍藏版）》请在金锄头文库上搜索。
1、Javascript的分层概念,原生javascript,目录,底层、组件层和应用层,YUI2,JQuery,YUI3,原生javascript,变量冲突：,/ 功能A var a = 1,btn = document.getElementById(“btn“); btn.onclick = function()a+;alert(a); / 101、102、103 ./ 功能B var a = 100; /在此处被重新赋值 ,变量暴露在window作用域下，多人合作多个功能间互相干扰。,111222333var list = document.getElementById(“list“) ,
2、firstItem = document.getElementById(“firstItem“); alert(firstItem.nextSibling.innerHTML); / IE : 222 firefox : undefined alert(list.childNodes.length); / IE : 3 firefox : 7 ,DOM相关-1：, #testwidth:300px;height:300px;background:blue;var test = document.getElementById(“test“); if(document.all) test.styl
3、e.filter = alpha(opacity=20); / IE elsetest.style.opacity = 0.2; / firefox ,DOM相关-2：,不同浏览器，对 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 = wind
4、ow.event | e;var el = e.srcElement | e.target;alert(el.tagName); ,Event相关-1：,var btn = document.getElementById(“btn“); if(document.all) / IEbtn.attachEvent(“onclick“,function()alert(“hello world“);); else / firefoxbtn.addEventListener(“click“,function()alert(“hello world“);,false); ,Event相关-2：,不同浏览器
5、，对Event的解析不同,/ 设置cookie document.cookie = “name=adang; expires= Mon, 04 Oct 2010 02:40: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 * 此时cookie里的值为“name=adang
6、; sex=male; blog=http:/“ */ var cookieStr = document.cookie; / 对字符进行操作，取出name对应的值 var name = cookieStr.split(“name“)1.split(“;“)0.split(“=“)1; alert(name);,其它操作：,原生javascript接口太笨拙,原生javascript写程序就像汽车行驶在一条凹凸不平的小路上。,底层、组件层和应用层,控制全局作用域的变量数量：,(function() var a = 1,btn = document.getElementById(“btn“); b
7、tn.onclick = function()a+;alert(a); )();.(function() var a = 100; )(); ,问题一：匿名函数间无法通信 问题二：如果匿名函数内容很长 ，函数内部还是有冲突隐患,命名空间, var GLOBAL = ; GLOBAL.namespace = function(str)var arr = str.split(“.“),o = GLOBAL;for (i=(arr0 = “GLOBAL“) ? 1 : 0; i, (function() GLOBAL.namespace(“A“); GLOBAL.A.a=1; var btn = d
8、ocument.getElementById(“btn“); btn.onclick = 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); )(); ,封装DOM的接口, function getNextNode(node)if(ie) else ; function setOpacity (node,opacityValue)if(ie) else ,封装Even
9、t的接口, function getEventTarget(e)if(ie) else ; function on (node,eventType,handler)if(ie) else ,将函数归到相应的命名空间下：, var GLOBAL = ; GLOBAL.namespace = function(str) ; / GLOBAL.extend、GLOBAL.merge GLOBAL.namespace(“Dom”); GLOBAL.Dom.getNextSibling = function() GLOBAL.Dom.setOpacity = function() / GLOBAL.Do
10、m.getPrevSibling、GLOBAL.Dom.getStyle GLOBAL.namespace(“Event”); GLOBAL.Event.getEventTarget = function() GLOBAL.Event.on = function() / GLOBAL.Event. stopPropagation 、GLOBAL.Event.getXY ,将DOM、Event相关的操作进行封装，另外扩展一些原生javascript语言层面不提供的接口，组成新的底层。,底层替我们铲平了路面的凸起（浏览器差异），填补了路面的凹 陷（补充javascript语言的底层方法）,封装co
11、okie的接口, var cookie = set : function(),read : function(),del : function() ; ,将函数归到相应的命名空间下：, GLOBAL.namespace(“Cookie”); GLOBAL.Cookie = set : function() read : function() del : function() / GLOBAL.Ajax、GLOBAL.Drag、GLOBAL.Resize ,将常见功能封装成组件，组件将内部实现细节透明，提供简单易用的接口。,组件层替我们在路面铺上沥青，将普通小路变成高速公路。,应用层：和页面具体
12、需求相关，调用底层的底层接口和组件层的组件，依赖底层和组件层。组件层：调用底层提供的接口，封装常用组件，依赖底层。和具体功能有关，但和页面需求无关。为应用层提供组件（组件提供组件的接口）。例如Drag、Cookie、Ajax、Resize、Tab、Tree。底层 ：封装DOM、Event在各浏览器下的区别，提供统一的接口;扩展javascript语言，提供全局性的方法。和具体功能无关，只为组件层和应用层提供底层接口。例如getNextSibling（）、getEventTarget（）、namespace（）、trim（）、isArray()。,典型的引用方法：,阿当制作(function()
13、/ your code here )();,应用层：1) 避免多人合作的冲突;2) 组件间的依赖关系处理; 组件层：1) 尽可能丰富的组件; 2) 易用性;3) 可重用性。底层 ：1) 跨浏览器兼容,屏蔽尽可能多的浏览器差异;2) 补充完善javascript语言本身的不足;3) 精简。,底层 + 组件层 = 框架,框架可以帮助我们将精力集中在应用层的逻辑处理上，例如设计类、接口、设计模式，而不是将精力放在频繁的底层操作上。例：http:/ Dojo、 Prototype、mootool,YUI2,官方网址：http:/ 自定义组件层：我们提供，定制型 框架组件层：框架提供，通用型 底层 ：框架提供，通用型,存在的问题：,1）如何处理多人合作的问题; 2）自定义类的格式。,类库？框架？类库提供预编写好的类，隐藏底层操作，简化开发。帮助工程师将精力集中在应用层。框架提供整套解决方案，除类库之外，还包括应用层的格式和自定义组件的格式。进一步帮助工程师将精力从“格式”中解放出来，专注于“逻辑”处理。,YUI3,官方网址：http:/ destroy() render()renderUI();bindUI();syncUI(); MyWidget.HTML_PARSER = 例：http:/
