Javascript的分层概念课件.ppt

底层 + 组件层 = 框架 精品文档 框架可以帮助我们将精力集中在应用层的逻辑处理上，例如设计类、接口、设计模式，而不是将精力放在频繁的底层操作上。 例：/js_demo/1/ 精品文档 开发框架的难点：代码品质、组件的丰富程度、兼容性、易用性、可复用性… 精品文档 我们有大量开源框架可以选择：jQuery、YUI、 Dojo、 Prototype、mootool… 精品文档 YUI2 精品文档 官方网址：/yui/2/ 精品文档 Javascript的分层概念 曹刘阳 （阿当） 精品文档 原生javascript 目录 底层、组件层和应用层 YUI2 JQuery YUI3 精品文档 原生javascript 精品文档 变量冲突： input type=button value=click me id=btn / script type=text/javascript // 功能A var a = 1,btn = document.getElementById(btn); btn.onclick = function(){ a++; alert(a); // 101、102、103… } /script ... script type=text/javascript // 功能B var a = 100; //在此处被重新赋值 /script 精品文档 变量暴露在window作用域下，多人合作\多个功能间互相干扰。 精品文档 ul id=list li id=firstItem111/li li222/li li333/li /ul script type=text/javascript var list = document.getElementById(list) , firstItem = document.getElementById(firstItem); alert(firstItem.nextSibling.innerHTML); // IE : 222 firefox : undefined alert(list.childNodes.length); // IE : 3 firefox : 7 /script DOM相关-1： 精品文档 style #test{width:300px;height:300px;background:blue;} /style body div id=test/div script type=text/javascript var test = document.getElementById(test); if(document.all){ test.style.filter = ‘alpha(opacity=20)’; // IE }else{ test.style.opacity = 0.2; // firefox } /script DOM相关-2： 精品文档 不同浏览器，对 DOM的解析不同 精品文档 input type=button value=click me id=btn / span id=spanhello world/span script type=text/javascript document.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.tagName); } /script Event相关-1： 精品文档 input type=button value=click me id=btn / script type=text/javascript var btn = document.getElementById(btn); if(document.all){ // IE btn.attachEvent(onclick,function(){ alert(hello world); }); } else { // firefox btn.addEventListener(click,function(){ alert(hello world); },false); }