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&q...
变量暴露在 window 作用域下,多人合作  多个功能间互相干扰。
<ul id=&quot;list&quot;> <li id=&quot;firstItem&quot;>111</li> <li>222</li> <li>333</li> </ul> <script type=&quot;text/jav...
<style> #test{width:300px;height:300px;background:blue;} </style> <body> <div id=&quot;test&quot;></div> <script type=&quo...
不同浏览器,对  DOM 的解析不同
<input type=&quot;button&quot; value=&quot;click me&quot; id=&quot;btn&quot; /> <span id=&quot;span&quot;>hello world</spa...
<input type=&quot;button&quot; value=&quot;click me&quot; id=&quot;btn&quot; /> <script type=&quot;text/javascript&quot;> ...
不同浏览器,对 Event 的解析不同
//  设置 cookie  document.cookie = &quot;name=adang; expires= Mon, 04 Oct 2010 02:40:14 GMT; path=/&quot;; document.cookie =...
原生 javascript 接口太笨拙
原生 javascript 写程序就像汽车行驶在一条凹凸不平的小路上。
底层、组件层和应用层
控制全局作用域的变量数量: <input type=&quot;button&quot; value=&quot;click me&quot; id=&quot;btn&quot; /> <script type=&quot;text/java...
问题一:匿名函数间无法通信 问题二:如果匿名函数内容很长 ,函数内部还是有冲突隐患
命名空间 <script type=&quot;text/javascript&quot;> var GLOBAL = {}; GLOBAL.namespace = function(str){ var arr = str.split(&quo...
<script type=&quot;text/javascript&quot;> (function(){ GLOBAL.namespace(&quot;A&quot;);  GLOBAL.A.a=1;  var btn = document...
封装 DOM 的接口 <script type=&quot;text/javascript&quot;> function getNextNode(node){ if(ie){ … } else { … } };   function  set...
封装 Event 的接口 <script type=&quot;text/javascript&quot;> function getEventTarget(e){ if(ie){ … } else { … } };   function  o...
将函数归到相应的命名空间下: <script type=&quot;text/javascript&quot;> var GLOBAL = {}; GLOBAL.namespace = function(str){ … }; …  // GLO...
将 DOM 、 Event 相关的操作进行封装,另外扩展一些原生 javascript 语言层面不提供的接口,组成新的底层。
底层替我们铲平了路面的凸起(浏览器差异),填补了路面的凹 陷(补充 javascript 语言的底层方法)
封装 cookie 的接口 <script type=&quot;text/javascript&quot;> var cookie = { set : function(){ … }, read : function(){ … }, del ...
将函数归到相应的命名空间下: <script type=&quot;text/javascript&quot;> GLOBAL.namespace(“Cookie”); GLOBAL.Cookie = { set : function(){ …...
将常见功能封装成组件,组件将内部实现细节透明,提供简单易用的接口。
组件层替我们在路面铺上沥青,将普通小路变成高速公路。
应用层 : 和页面具体需求相关,调用底层的底层接口和组件层的组件,依赖底层和组件层。 组件层 : 调用底层提供的接口,封装常用组件,依赖底层。和具体功能有关,但和页面需求无关。为应用层提供组件(组件提供组件的接口)。例如 Drag 、 Cook...
典型的引用方法: <html> <head> <title> 阿当制作 </title> </head> <body> <script type = “ text/javascript ” src = “ base.js ”></script>...
应用层 : 1)  避免多人合作的冲突 ;   2)  组件间的依赖关系处理 ;  组件层 : 1)  尽可能丰富的组件 ;   2)  易用性 ;   3)  可重用性。 底层   : 1)  跨浏览器兼容 , 屏蔽尽可能多的浏览器差异 ; ...
底层  +  组件层  =  框架
框架可以帮助我们将精力集中在应用层的逻辑处理上,例如设计类、接口、设计模式,而不是将精力放在频繁的底层操作上。 例: 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.co...
YUI3 带来的分层: 应用层 : 如有自定义类,继承抽象类 自定义组件层 : 我们提供,继承自抽象类  框架组件层 : 框架提供,继承自抽象类 抽象类层 : 框架提供 ,  统一自定义类的格式 底层 : 框架提供
 
Upcoming SlideShare
Loading in...5
×

javascript的分层概念 --- 阿当

11,468

Published on

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

Published in: Education, Technology
1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,468
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
161
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

javascript的分层概念 --- 阿当

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

    Clipping is a handy way to collect important slides you want to go back to later.

×