Weitere ähnliche Inhalte
Ähnlich wie javascript的分层概念 --- 阿当 (20)
javascript的分层概念 --- 阿当
- 4. 变量冲突: <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>
- 6. <ul id="list"> <li id="firstItem">111</li> <li>222</li> <li>333</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 :
- 7. <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 :
- 9. <input type="button" value="click me" id="btn" /> <span id="span">hello 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 :
- 10. <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); } </script> Event 相关 -2 :
- 12. // 设置 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://www.adanghome.com; expires= Mon, 04 Oct 2010 02:40:14 GMT; path=/"; /* 读取 cookie ** 此时 cookie 里的值为 "name=adang; sex=male; blog=http://www.adanghome.com" */ var cookieStr = document.cookie; // 对字符进行操作,取出 name 对应的值 var name = cookieStr.split("name")[1].split(";")[0].split("=")[1]; alert(name); 其它操作:
- 16. 控制全局作用域的变量数量: <input type="button" value="click me" id="btn" /> <script type="text/javascript"> (function(){ var a = 1,btn = document.getElementById("btn"); btn.onclick = function(){ a++; alert(a); } })(); </script> ... <script type="text/javascript"> (function(){ var a = 100; })(); </script>
- 18. 命名空间 <script type="text/javascript"> var GLOBAL = {}; GLOBAL.namespace = function(str){ var arr = str.split("."),o = GLOBAL; for (i=(arr[0] == "GLOBAL") ? 1 : 0; i<arr.length; i++) { o[arr[i]]=o[arr[i]] || {}; o=o[arr[i]]; } } </script>
- 19. <script type="text/javascript"> (function(){ GLOBAL.namespace("A"); GLOBAL.A.a=1; var btn = document.getElementById("btn"); btn.onclick = function(){ GLOBAL.A.a++; alert(GLOBAL.A.a); } GLOBAL.namespace("B"); GLOBAL.B.a = 100; })(); </script> ... <script type="text/javascript"> (function(){ var a = 100; alert(a); alert(GLOBAL.A.a); })(); </script>
- 20. 封装 DOM 的接口 <script type="text/javascript"> function getNextNode(node){ if(ie){ … } else { … } }; function setOpacity (node,opacityValue){ if(ie){ … } else { … } } </script>
- 21. 封装 Event 的接口 <script type="text/javascript"> function getEventTarget(e){ if(ie){ … } else { … } }; function on (node,eventType,handler){ if(ie){ … } else { … } } </script>
- 22. 将函数归到相应的命名空间下: <script type="text/javascript"> 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 语言层面不提供的接口,组成新的底层。
- 25. 封装 cookie 的接口 <script type="text/javascript"> var cookie = { set : function(){ … }, read : function(){ … }, del : function(){ } }; </script>
- 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) 精简。
- 40. “ 小”与“强”的平衡: YUI2 将文件分成粒度非常小,靠 loader 机制按需加载,达到“小”和“强”的平衡,扩展性好 ; jQuery 靠作者强大的个人能力,将 js 编程发挥到极致,达到“小”和“强”的平衡,扩展性差。
- 41. 处理依赖关系: YUI2 通过 loader 动态加载样式和脚本,智能地完成依赖关系的处理,调用简单,不易出错 ; jQuery 使用传统方式,手动添加样式和脚本,易出错。
- 43. 实际工作情况: 应用层 : 调用下面三层 自定义组件层 : 我们提供,定制型 框架组件层 : 框架提供,通用型 底层 : 框架提供,通用型
- 48. widget init() destroy() render(){ renderUI(); bindUI(); syncUI(); } MyWidget.HTML_PARSER = { } 例: http://www.adanghome.com/js_demo/2/
- 49. YUI3 带来的分层: 应用层 : 如有自定义类,继承抽象类 自定义组件层 : 我们提供,继承自抽象类 框架组件层 : 框架提供,继承自抽象类 抽象类层 : 框架提供 , 统一自定义类的格式 底层 : 框架提供