• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
javascript的分层概念 --- 阿当
 

javascript的分层概念 --- 阿当

on

  • 13,162 views

webrebuild.org北京第一届交流会-悟道WEB标准

webrebuild.org北京第一届交流会-悟道WEB标准

Statistics

Views

Total Views
13,162
Views on SlideShare
12,127
Embed Views
1,035

Actions

Likes
8
Downloads
160
Comments
1

11 Embeds 1,035

http://www.cnblogs.com 968
http://weilaixu.cn 34
http://www.slideshare.net 16
file:// 7
http://www.weilaixu.cn 3
http://www.byywee.com 2
http://localhost:4952 1
http://static.slidesharecdn.com 1
http://www.cnthub.com 1
http://archive.cnblogs.com 1
http://xianguo.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    javascript的分层概念 --- 阿当 javascript的分层概念 --- 阿当 Presentation Transcript

    • Javascript 的分层概念 曹刘阳 (阿当)
    • 原生 javascript 目录 底层、组件层和应用层 YUI2 JQuery YUI3
    • 原生 javascript
    • 变量冲突: <input type=&quot;button&quot; value=&quot;click me&quot; id=&quot;btn&quot; /> <script type=&quot;text/javascript&quot;> // 功能 A var a = 1,btn = document.getElementById(&quot;btn&quot;); btn.onclick = function(){ a++; alert(a); // 101 、 102 、 103… } </script> ... <script type=&quot;text/javascript&quot;> // 功能 B var a = 100; // 在此处被重新赋值 </script>
    • 变量暴露在 window 作用域下,多人合作 多个功能间互相干扰。
    • <ul id=&quot;list&quot;> <li id=&quot;firstItem&quot;>111</li> <li>222</li> <li>333</li> </ul> <script type=&quot;text/javascript&quot;> var list = document.getElementById(&quot;list&quot;) , firstItem = document.getElementById(&quot;firstItem&quot;); 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=&quot;test&quot;></div> <script type=&quot;text/javascript&quot;> var test = document.getElementById(&quot;test&quot;); if(document.all){ test.style.filter = ‘alpha(opacity=20)’; // IE }else{ test.style.opacity = 0.2; // firefox } </script> DOM 相关 -2 :
    • 不同浏览器,对 DOM 的解析不同
    • <input type=&quot;button&quot; value=&quot;click me&quot; id=&quot;btn&quot; /> <span id=&quot;span&quot;>hello world</span> <script type=&quot;text/javascript&quot;> document.getElementById(&quot;btn&quot;).onclick = function(e){ e = window.event || e; var el = e.srcElement || e.target; alert(el.tagName); } document.getElementById(&quot;span&quot;).onclick = function(e){ e = window.event || e; var el = e.srcElement || e.target; alert(el.tagName); } </script> Event 相关 -1 :
    • <input type=&quot;button&quot; value=&quot;click me&quot; id=&quot;btn&quot; /> <script type=&quot;text/javascript&quot;> var btn = document.getElementById(&quot;btn&quot;); if(document.all){ // IE btn.attachEvent(&quot;onclick&quot;,function(){ alert(&quot;hello world&quot;); }); } else { // firefox btn.addEventListener(&quot;click&quot;,function(){ alert(&quot;hello world&quot;); },false); } </script> Event 相关 -2 :
    • 不同浏览器,对 Event 的解析不同
    • // 设置 cookie document.cookie = &quot;name=adang; expires= Mon, 04 Oct 2010 02:40:14 GMT; path=/&quot;; document.cookie = &quot;sex=male; expires= Mon, 04 Oct 2010 02:40:14 GMT; path=/&quot;; document.cookie = &quot;blog=http://www.adanghome.com; expires= Mon, 04 Oct 2010 02:40:14 GMT; path=/&quot;; /* 读取 cookie ** 此时 cookie 里的值为 &quot;name=adang; sex=male; blog=http://www.adanghome.com&quot; */ var cookieStr = document.cookie; // 对字符进行操作,取出 name 对应的值 var name = cookieStr.split(&quot;name&quot;)[1].split(&quot;;&quot;)[0].split(&quot;=&quot;)[1]; alert(name); 其它操作:
    • 原生 javascript 接口太笨拙
    • 原生 javascript 写程序就像汽车行驶在一条凹凸不平的小路上。
    • 底层、组件层和应用层
    • 控制全局作用域的变量数量: <input type=&quot;button&quot; value=&quot;click me&quot; id=&quot;btn&quot; /> <script type=&quot;text/javascript&quot;> (function(){ var a = 1,btn = document.getElementById(&quot;btn&quot;); btn.onclick = function(){ a++; alert(a); } })(); </script> ... <script type=&quot;text/javascript&quot;> (function(){ var a = 100; })(); </script>
    • 问题一:匿名函数间无法通信 问题二:如果匿名函数内容很长 ,函数内部还是有冲突隐患
    • 命名空间 <script type=&quot;text/javascript&quot;> var GLOBAL = {}; GLOBAL.namespace = function(str){ var arr = str.split(&quot;.&quot;),o = GLOBAL; for (i=(arr[0] == &quot;GLOBAL&quot;) ? 1 : 0; i<arr.length; i++) { o[arr[i]]=o[arr[i]] || {}; o=o[arr[i]]; } } </script>
    • <script type=&quot;text/javascript&quot;> (function(){ GLOBAL.namespace(&quot;A&quot;); GLOBAL.A.a=1; var btn = document.getElementById(&quot;btn&quot;); btn.onclick = function(){ GLOBAL.A.a++; alert(GLOBAL.A.a); } GLOBAL.namespace(&quot;B&quot;); GLOBAL.B.a = 100; })(); </script> ... <script type=&quot;text/javascript&quot;> (function(){ var a = 100; alert(a); alert(GLOBAL.A.a); })(); </script>
    • 封装 DOM 的接口 <script type=&quot;text/javascript&quot;> function getNextNode(node){ if(ie){ … } else { … } }; function setOpacity (node,opacityValue){ if(ie){ … } else { … } } </script>
    • 封装 Event 的接口 <script type=&quot;text/javascript&quot;> function getEventTarget(e){ if(ie){ … } else { … } }; function on (node,eventType,handler){ if(ie){ … } else { … } } </script>
    • 将函数归到相应的命名空间下: <script type=&quot;text/javascript&quot;> var GLOBAL = {}; GLOBAL.namespace = function(str){ … }; … // GLOBAL.extend 、 GLOBAL.merge GLOBAL.namespace(“Dom”); GLOBAL.Dom.getNextSibling = function(){ … } GLOBAL.Dom.setOpacity = function(){ … } … // GLOBAL.Dom.getPrevSibling 、 GLOBAL.Dom.getStyle GLOBAL.namespace(“Event”); GLOBAL.Event.getEventTarget = function(){ … } GLOBAL.Event.on = function(){ … } … // GLOBAL.Event. stopPropagation 、 GLOBAL.Event.getXY </script>
    • 将 DOM 、 Event 相关的操作进行封装,另外扩展一些原生 javascript 语言层面不提供的接口,组成新的底层。
    • 底层替我们铲平了路面的凸起(浏览器差异),填补了路面的凹 陷(补充 javascript 语言的底层方法)
    • 封装 cookie 的接口 <script type=&quot;text/javascript&quot;> var cookie = { set : function(){ … }, read : function(){ … }, del : function(){ } }; </script>
    • 将函数归到相应的命名空间下: <script type=&quot;text/javascript&quot;> GLOBAL.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() 。
    • 典型的引用方法: <html> <head> <title> 阿当制作 </title> </head> <body> <script type = “ text/javascript ” src = “ base.js ”></script> <!-- 底层 --> <script type = “ text/javascript ” src = “ ajax.js ”></script> <!– 组件层 --> <script type = “ text/javascript ” src = “ tab.js ”></script> <!-- 组件层 --> <script type = “ text/javascript ”> <!-- 应用层 --> (function(){ // your code here })(); </script> </body> </html>
    • 应用层 : 1) 避免多人合作的冲突 ; 2) 组件间的依赖关系处理 ; 组件层 : 1) 尽可能丰富的组件 ; 2) 易用性 ; 3) 可重用性。 底层 : 1) 跨浏览器兼容 , 屏蔽尽可能多的浏览器差异 ; 2) 补充完善 javascript 语言本身的不足 ; 3) 精简。
    • 底层 + 组件层 = 框架
    • 框架可以帮助我们将精力集中在应用层的逻辑处理上,例如设计类、接口、设计模式,而不是将精力放在频繁的底层操作上。 例: http://www.adanghome.com/js_demo/1/
    • 开发框架的难点:代码品质、组件的丰富程度、兼容性、易用性、可复用性…
    • 我们有大量开源框架可以选择: jQuery 、 YUI 、 Dojo 、 Prototype 、 mootool…
    • YUI2
    • 官方网址: http://developer.yahoo.com/yui/2/
    • jQuery
    • 官方网址: http://www.jquery.com
    • “ 小”与“强”的平衡: YUI2 将文件分成粒度非常小,靠 loader 机制按需加载,达到“小”和“强”的平衡,扩展性好 ; jQuery 靠作者强大的个人能力,将 js 编程发挥到极致,达到“小”和“强”的平衡,扩展性差。
    • 处理依赖关系: YUI2 通过 loader 动态加载样式和脚本,智能地完成依赖关系的处理,调用简单,不易出错 ; jQuery 使用传统方式,手动添加样式和脚本,易出错。
    • 第三方组件: YUI2 所有组件都是官方提供,第三方组件少,但代码品质高。 jQuery 有大量第三方组件,但代码品质参差不齐。
    • 实际工作情况: 应用层 : 调用下面三层 自定义组件层 : 我们提供,定制型 框架组件层 : 框架提供,通用型 底层 : 框架提供,通用型
    • 存在的问题: 1 )如何处理多人合作的问题 ; 2 )自定义类的格式。
    • 类库?框架? 类库提供预编写好的类,隐藏底层操作,简化开发。帮助工程师将精力集中在应用层。 框架提供整套解决方案,除类库之外,还包括应用层的格式和自定义组件的格式。进一步帮助工程师将精力从“格式”中解放出来,专注于“逻辑”处理。
    • YUI3
    • 官方网址: http://developer.yahoo.com/yui/3
    • widget init() destroy() render(){ renderUI(); bindUI(); syncUI(); } MyWidget.HTML_PARSER = { } 例: http://www.adanghome.com/js_demo/2/
    • YUI3 带来的分层: 应用层 : 如有自定义类,继承抽象类 自定义组件层 : 我们提供,继承自抽象类 框架组件层 : 框架提供,继承自抽象类 抽象类层 : 框架提供 , 统一自定义类的格式 底层 : 框架提供
    •