Your SlideShare is downloading. ×
  • Like
javascript的分层概念 --- 阿当
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

javascript的分层概念 --- 阿当

  • 11,278 views
Published

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

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

Published in Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
11,278
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
161
Comments
1
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Javascript 的分层概念 曹刘阳 (阿当)
  • 2. 原生 javascript 目录 底层、组件层和应用层 YUI2 JQuery YUI3
  • 3. 原生 javascript
  • 4. 变量冲突: <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>
  • 5. 变量暴露在 window 作用域下,多人合作 多个功能间互相干扰。
  • 6. <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 :
  • 7. <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 :
  • 8. 不同浏览器,对 DOM 的解析不同
  • 9. <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 :
  • 10. <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 :
  • 11. 不同浏览器,对 Event 的解析不同
  • 12. // 设置 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); 其它操作:
  • 13. 原生 javascript 接口太笨拙
  • 14. 原生 javascript 写程序就像汽车行驶在一条凹凸不平的小路上。
  • 15. 底层、组件层和应用层
  • 16. 控制全局作用域的变量数量: <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>
  • 17. 问题一:匿名函数间无法通信 问题二:如果匿名函数内容很长 ,函数内部还是有冲突隐患
  • 18. 命名空间 <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>
  • 19. <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>
  • 20. 封装 DOM 的接口 <script type=&quot;text/javascript&quot;> function getNextNode(node){ if(ie){ … } else { … } }; function setOpacity (node,opacityValue){ if(ie){ … } else { … } } </script>
  • 21. 封装 Event 的接口 <script type=&quot;text/javascript&quot;> function getEventTarget(e){ if(ie){ … } else { … } }; function on (node,eventType,handler){ if(ie){ … } else { … } } </script>
  • 22. 将函数归到相应的命名空间下: <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>
  • 23. 将 DOM 、 Event 相关的操作进行封装,另外扩展一些原生 javascript 语言层面不提供的接口,组成新的底层。
  • 24. 底层替我们铲平了路面的凸起(浏览器差异),填补了路面的凹 陷(补充 javascript 语言的底层方法)
  • 25. 封装 cookie 的接口 <script type=&quot;text/javascript&quot;> var cookie = { set : function(){ … }, read : function(){ … }, del : function(){ } }; </script>
  • 26. 将函数归到相应的命名空间下: <script type=&quot;text/javascript&quot;> GLOBAL.namespace(“Cookie”); GLOBAL.Cookie = { set : function(){ …} read : function(){ … } del : function(){ … } } … // GLOBAL.Ajax 、 GLOBAL.Drag 、 GLOBAL.Resize… </script>
  • 27. 将常见功能封装成组件,组件将内部实现细节透明,提供简单易用的接口。
  • 28. 组件层替我们在路面铺上沥青,将普通小路变成高速公路。
  • 29. 应用层 : 和页面具体需求相关,调用底层的底层接口和组件层的组件,依赖底层和组件层。 组件层 : 调用底层提供的接口,封装常用组件,依赖底层。和具体功能有关,但和页面需求无关。为应用层提供组件(组件提供组件的接口)。例如 Drag 、 Cookie 、 Ajax 、 Resize 、 Tab 、 Tree 。 底层 : 封装 DOM 、 Event 在各浏览器下的区别,提供统一的接口 ; 扩展 javascript 语言,提供全局性的方法。和具体功能无关,只为组件层和应用层提供底层接口。例如 getNextSibling ()、 getEventTarget ()、 namespace ()、 trim ()、 isArray() 。
  • 30. 典型的引用方法: <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>
  • 31. 应用层 : 1) 避免多人合作的冲突 ; 2) 组件间的依赖关系处理 ; 组件层 : 1) 尽可能丰富的组件 ; 2) 易用性 ; 3) 可重用性。 底层 : 1) 跨浏览器兼容 , 屏蔽尽可能多的浏览器差异 ; 2) 补充完善 javascript 语言本身的不足 ; 3) 精简。
  • 32. 底层 + 组件层 = 框架
  • 33. 框架可以帮助我们将精力集中在应用层的逻辑处理上,例如设计类、接口、设计模式,而不是将精力放在频繁的底层操作上。 例: http://www.adanghome.com/js_demo/1/
  • 34. 开发框架的难点:代码品质、组件的丰富程度、兼容性、易用性、可复用性…
  • 35. 我们有大量开源框架可以选择: jQuery 、 YUI 、 Dojo 、 Prototype 、 mootool…
  • 36. YUI2
  • 37. 官方网址: http://developer.yahoo.com/yui/2/
  • 38. jQuery
  • 39. 官方网址: http://www.jquery.com
  • 40. “ 小”与“强”的平衡: YUI2 将文件分成粒度非常小,靠 loader 机制按需加载,达到“小”和“强”的平衡,扩展性好 ; jQuery 靠作者强大的个人能力,将 js 编程发挥到极致,达到“小”和“强”的平衡,扩展性差。
  • 41. 处理依赖关系: YUI2 通过 loader 动态加载样式和脚本,智能地完成依赖关系的处理,调用简单,不易出错 ; jQuery 使用传统方式,手动添加样式和脚本,易出错。
  • 42. 第三方组件: YUI2 所有组件都是官方提供,第三方组件少,但代码品质高。 jQuery 有大量第三方组件,但代码品质参差不齐。
  • 43. 实际工作情况: 应用层 : 调用下面三层 自定义组件层 : 我们提供,定制型 框架组件层 : 框架提供,通用型 底层 : 框架提供,通用型
  • 44. 存在的问题: 1 )如何处理多人合作的问题 ; 2 )自定义类的格式。
  • 45. 类库?框架? 类库提供预编写好的类,隐藏底层操作,简化开发。帮助工程师将精力集中在应用层。 框架提供整套解决方案,除类库之外,还包括应用层的格式和自定义组件的格式。进一步帮助工程师将精力从“格式”中解放出来,专注于“逻辑”处理。
  • 46. YUI3
  • 47. 官方网址: http://developer.yahoo.com/yui/3
  • 48. widget init() destroy() render(){ renderUI(); bindUI(); syncUI(); } MyWidget.HTML_PARSER = { } 例: http://www.adanghome.com/js_demo/2/
  • 49. YUI3 带来的分层: 应用层 : 如有自定义类,继承抽象类 自定义组件层 : 我们提供,继承自抽象类 框架组件层 : 框架提供,继承自抽象类 抽象类层 : 框架提供 , 统一自定义类的格式 底层 : 框架提供
  • 50.