Suche senden
Hochladen
javascript的分层概念 --- 阿当
•
Als PPT, PDF herunterladen
•
8 gefällt mir
•
1,669 views
裕波 周
Folgen
webrebuild.org北京第一届交流会-悟道WEB标准
Weniger lesen
Mehr lesen
Bildung
Technologie
Melden
Teilen
Melden
Teilen
1 von 50
Jetzt herunterladen
Empfohlen
YUI ─ 阿大
YUI ─ 阿大
taobao.com
Ajax Transportation Methods
Ajax Transportation Methods
yiditushe
Alert util
Alert util
Aedis Ju
Web安全解决方案V1.0
Web安全解决方案V1.0
xuanliang
Struts1+ hibernate3
Struts1+ hibernate3
edanwade
Js培训
Js培训
yiditushe
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
zhangsuoyong
Web base 吴志华
Web base 吴志华
FLASH开发者交流会
Empfohlen
YUI ─ 阿大
YUI ─ 阿大
taobao.com
Ajax Transportation Methods
Ajax Transportation Methods
yiditushe
Alert util
Alert util
Aedis Ju
Web安全解决方案V1.0
Web安全解决方案V1.0
xuanliang
Struts1+ hibernate3
Struts1+ hibernate3
edanwade
Js培训
Js培训
yiditushe
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
zhangsuoyong
Web base 吴志华
Web base 吴志华
FLASH开发者交流会
管窥Nodejs的事件——基于观察者模式的事件队列
管窥Nodejs的事件——基于观察者模式的事件队列
Frank Cheung
AngularJS Sharing
AngularJS Sharing
Tom Chen
TBAD F2E 2010 review
TBAD F2E 2010 review
leneli
Php More
Php More
henbo
Xsd培训资料
Xsd培训资料
彦波 叶
Ajax新手快车道
Ajax新手快车道
yiditushe
由浅到深了解Java Script类
由浅到深了解Java Script类
sosoyou
jQuery介绍@disandu.com
jQuery介绍@disandu.com
Think hy
让我们的页面跑得更快
让我们的页面跑得更快
li qiang
前端开发之Js
前端开发之Js
fangdeng
Spry框架的简单使用小结
Spry框架的简单使用小结
sunnylqm
Javascript之昨是今非
Javascript之昨是今非
Tony Deng
J Query简介及入门指南
J Query简介及入门指南
AppZ
如何实现登出按钮
如何实现登出按钮
LI Daobing
Windows Mobile Widget 開發
Windows Mobile Widget 開發
Chui-Wen Chiu
关于Js的跨域操作
关于Js的跨域操作
王 承石
Struts1+ hibernate3
Struts1+ hibernate3
edanwade
Javascript Training
Javascript Training
beijing.josh
Js dom
Js dom
lidashuang
m.taobao.com for iPhone&Android Optimization
m.taobao.com for iPhone&Android Optimization
346682530
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
amd6400
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
amd6400
Weitere ähnliche Inhalte
Was ist angesagt?
管窥Nodejs的事件——基于观察者模式的事件队列
管窥Nodejs的事件——基于观察者模式的事件队列
Frank Cheung
AngularJS Sharing
AngularJS Sharing
Tom Chen
TBAD F2E 2010 review
TBAD F2E 2010 review
leneli
Php More
Php More
henbo
Xsd培训资料
Xsd培训资料
彦波 叶
Ajax新手快车道
Ajax新手快车道
yiditushe
由浅到深了解Java Script类
由浅到深了解Java Script类
sosoyou
jQuery介绍@disandu.com
jQuery介绍@disandu.com
Think hy
让我们的页面跑得更快
让我们的页面跑得更快
li qiang
前端开发之Js
前端开发之Js
fangdeng
Spry框架的简单使用小结
Spry框架的简单使用小结
sunnylqm
Javascript之昨是今非
Javascript之昨是今非
Tony Deng
J Query简介及入门指南
J Query简介及入门指南
AppZ
如何实现登出按钮
如何实现登出按钮
LI Daobing
Windows Mobile Widget 開發
Windows Mobile Widget 開發
Chui-Wen Chiu
Was ist angesagt?
(15)
管窥Nodejs的事件——基于观察者模式的事件队列
管窥Nodejs的事件——基于观察者模式的事件队列
AngularJS Sharing
AngularJS Sharing
TBAD F2E 2010 review
TBAD F2E 2010 review
Php More
Php More
Xsd培训资料
Xsd培训资料
Ajax新手快车道
Ajax新手快车道
由浅到深了解Java Script类
由浅到深了解Java Script类
jQuery介绍@disandu.com
jQuery介绍@disandu.com
让我们的页面跑得更快
让我们的页面跑得更快
前端开发之Js
前端开发之Js
Spry框架的简单使用小结
Spry框架的简单使用小结
Javascript之昨是今非
Javascript之昨是今非
J Query简介及入门指南
J Query简介及入门指南
如何实现登出按钮
如何实现登出按钮
Windows Mobile Widget 開發
Windows Mobile Widget 開發
Ähnlich wie javascript的分层概念 --- 阿当
关于Js的跨域操作
关于Js的跨域操作
王 承石
Struts1+ hibernate3
Struts1+ hibernate3
edanwade
Javascript Training
Javascript Training
beijing.josh
Js dom
Js dom
lidashuang
m.taobao.com for iPhone&Android Optimization
m.taobao.com for iPhone&Android Optimization
346682530
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
amd6400
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
amd6400
揭秘Html5和Css3
揭秘Html5和Css3
Adam Lu
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍
裕波 周
Html5css3 go.yeefe.com
Html5css3 go.yeefe.com
tellyeefe
Asp.net mvc 培训
Asp.net mvc 培训
lotusprince
JavaScript Advanced Skill
JavaScript Advanced Skill
firestoke
HTML5移动WEB应用程序开发(PhoneGap)
HTML5移动WEB应用程序开发(PhoneGap)
amd6400
HTML5移动应用开发分享会(PhoneGap)
HTML5移动应用开发分享会(PhoneGap)
amd6400
Collaboration On Rails
Collaboration On Rails
Jesse Cai
Javascript 性能优化总结.docx
Javascript 性能优化总结.docx
baixingfa
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
ziggear
Jsp讲义
Jsp讲义
yiditushe
Introduction to Parse JavaScript SDK
Introduction to Parse JavaScript SDK
維佋 唐
JavaScript Event - 圆业
JavaScript Event - 圆业
taobao.com
Ähnlich wie javascript的分层概念 --- 阿当
(20)
关于Js的跨域操作
关于Js的跨域操作
Struts1+ hibernate3
Struts1+ hibernate3
Javascript Training
Javascript Training
Js dom
Js dom
m.taobao.com for iPhone&Android Optimization
m.taobao.com for iPhone&Android Optimization
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
Html5移动web应用开发(PhoneGap)
揭秘Html5和Css3
揭秘Html5和Css3
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍
Html5css3 go.yeefe.com
Html5css3 go.yeefe.com
Asp.net mvc 培训
Asp.net mvc 培训
JavaScript Advanced Skill
JavaScript Advanced Skill
HTML5移动WEB应用程序开发(PhoneGap)
HTML5移动WEB应用程序开发(PhoneGap)
HTML5移动应用开发分享会(PhoneGap)
HTML5移动应用开发分享会(PhoneGap)
Collaboration On Rails
Collaboration On Rails
Javascript 性能优化总结.docx
Javascript 性能优化总结.docx
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Jsp讲义
Jsp讲义
Introduction to Parse JavaScript SDK
Introduction to Parse JavaScript SDK
JavaScript Event - 圆业
JavaScript Event - 圆业
Mehr von 裕波 周
web标准化交流会上海站bobby分享
web标准化交流会上海站bobby分享
裕波 周
web标准化交流会bobby分享
web标准化交流会bobby分享
裕波 周
前端架构漫谈
前端架构漫谈
裕波 周
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
裕波 周
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
裕波 周
白玉磊 Webrebuild
白玉磊 Webrebuild
裕波 周
彪叔 [2010]webrebuild
彪叔 [2010]webrebuild
裕波 周
Scrum敏捷项目管理
Scrum敏捷项目管理
裕波 周
移动设备web重构
移动设备web重构
裕波 周
重温网站重构
重温网站重构
裕波 周
从问题开始,前端,架构、框架与库的实战
从问题开始,前端,架构、框架与库的实战
裕波 周
从问题开始,谈前端架构
从问题开始,谈前端架构
裕波 周
Ie9 overview
Ie9 overview
裕波 周
《一专多长》——Twinsen[梁璟彪]
《一专多长》——Twinsen[梁璟彪]
裕波 周
浏览器兼容性问题简介 --- 黄昊
浏览器兼容性问题简介 --- 黄昊
裕波 周
网站重构Whoami ---- 偷米饭
网站重构Whoami ---- 偷米饭
裕波 周
分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军
裕波 周
Mehr von 裕波 周
(17)
web标准化交流会上海站bobby分享
web标准化交流会上海站bobby分享
web标准化交流会bobby分享
web标准化交流会bobby分享
前端架构漫谈
前端架构漫谈
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
白玉磊 Webrebuild
白玉磊 Webrebuild
彪叔 [2010]webrebuild
彪叔 [2010]webrebuild
Scrum敏捷项目管理
Scrum敏捷项目管理
移动设备web重构
移动设备web重构
重温网站重构
重温网站重构
从问题开始,前端,架构、框架与库的实战
从问题开始,前端,架构、框架与库的实战
从问题开始,谈前端架构
从问题开始,谈前端架构
Ie9 overview
Ie9 overview
《一专多长》——Twinsen[梁璟彪]
《一专多长》——Twinsen[梁璟彪]
浏览器兼容性问题简介 --- 黄昊
浏览器兼容性问题简介 --- 黄昊
网站重构Whoami ---- 偷米饭
网站重构Whoami ---- 偷米饭
分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军
Kürzlich hochgeladen
國中會考國文國中會考國文國中會考國文國中會考國文國中會考國文國中會考國文國中會考國文
國中會考國文國中會考國文國中會考國文國中會考國文國中會考國文國中會考國文國中會考國文
中 央社
新加坡博伟教育学院 Dimensions International College怎么找黑客改成绩【微 tytyqqww 信】GPA低,要被开除怎么办...
新加坡博伟教育学院 Dimensions International College怎么找黑客改成绩【微 tytyqqww 信】GPA低,要被开除怎么办...
微信 tytyqqww业务接单
會考解答會考解答會考解答會考解答會考解答會考解答會考解答會考解答會考解答會考解答
會考解答會考解答會考解答會考解答會考解答會考解答會考解答會考解答會考解答會考解答
中 央社
1.[黑客]神秘代码破解!黑客如何修改数据? 小心,别被“数据”骗了你的眼睛和大脑。看看这个视频,揭秘黑客改数据背后的秘密! #解密 #黑客技术 #数据安...
1.[黑客]神秘代码破解!黑客如何修改数据? 小心,别被“数据”骗了你的眼睛和大脑。看看这个视频,揭秘黑客改数据背后的秘密! #解密 #黑客技术 #数据安...
微信 tytyqqww业务接单
113年國中教育會考社會科試題本 113年國中教育會考社會科試題本 113年國中教育會考社會科試題本
113年國中教育會考社會科試題本 113年國中教育會考社會科試題本 113年國中教育會考社會科試題本
中 央社
教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗
教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗
中 央社
【微 tytyqqww 信】网上找黑客改蒙纳士大学__Monash University修改成绩黑客修改成绩,黑客改高考成绩,黑客修改中考成绩1.🎉你是否...
【微 tytyqqww 信】网上找黑客改蒙纳士大学__Monash University修改成绩黑客修改成绩,黑客改高考成绩,黑客修改中考成绩1.🎉你是否...
微信 tytyqqww业务接单
假营业执照价钱 【制作+微:892719599】
假营业执照价钱 【制作+微:892719599】
jipohal318
黑客挂科改成绩科廷大学__Curtin University1.🎉GPA低了,怎么办?别担心!黑客改成绩轻松搞定~ 😎国外大学也能用哦!再也不怕被开除啦!...
黑客挂科改成绩科廷大学__Curtin University1.🎉GPA低了,怎么办?别担心!黑客改成绩轻松搞定~ 😎国外大学也能用哦!再也不怕被开除啦!...
微信 tytyqqww业务接单
墨尔本大学 The University of Melbourne代考exam代考留学生代考线下代考-跨越考试难关 【微 tytyqqww 信】
墨尔本大学 The University of Melbourne代考exam代考留学生代考线下代考-跨越考试难关 【微 tytyqqww 信】
微信 tytyqqww业务接单
113 年國中教育會考 自然科試題本113 年國中教育會考 自然科試題本113 年國中教育會考 自然科試題本
113 年國中教育會考 自然科試題本113 年國中教育會考 自然科試題本113 年國中教育會考 自然科試題本
中 央社
資訊安全宣導簡報資訊安全宣導簡報資訊安全宣導簡報資訊安全宣導簡報資訊安全宣導簡報
資訊安全宣導簡報資訊安全宣導簡報資訊安全宣導簡報資訊安全宣導簡報資訊安全宣導簡報
LinPhil
《菁英體制的陷阱》《菁英體制的陷阱》《菁英體制的陷阱》《菁英體制的陷阱》《菁英體制的陷阱》
《菁英體制的陷阱》《菁英體制的陷阱》《菁英體制的陷阱》《菁英體制的陷阱》《菁英體制的陷阱》
powerdd
黑客改分,黑客改gpa,黑客改成绩,修改国外大学成绩黑客改GPA【微 tytyqqww 信】澳大利亚天主教大学__Australian Catholic ...
黑客改分,黑客改gpa,黑客改成绩,修改国外大学成绩黑客改GPA【微 tytyqqww 信】澳大利亚天主教大学__Australian Catholic ...
微信 tytyqqww业务接单
會考數學會考數學會考數學會考數學會考數學會考數學會考數學會考數學會考數學會考數學
會考數學會考數學會考數學會考數學會考數學會考數學會考數學會考數學會考數學會考數學
中 央社
Kürzlich hochgeladen
(15)
國中會考國文國中會考國文國中會考國文國中會考國文國中會考國文國中會考國文國中會考國文
國中會考國文國中會考國文國中會考國文國中會考國文國中會考國文國中會考國文國中會考國文
新加坡博伟教育学院 Dimensions International College怎么找黑客改成绩【微 tytyqqww 信】GPA低,要被开除怎么办...
新加坡博伟教育学院 Dimensions International College怎么找黑客改成绩【微 tytyqqww 信】GPA低,要被开除怎么办...
會考解答會考解答會考解答會考解答會考解答會考解答會考解答會考解答會考解答會考解答
會考解答會考解答會考解答會考解答會考解答會考解答會考解答會考解答會考解答會考解答
1.[黑客]神秘代码破解!黑客如何修改数据? 小心,别被“数据”骗了你的眼睛和大脑。看看这个视频,揭秘黑客改数据背后的秘密! #解密 #黑客技术 #数据安...
1.[黑客]神秘代码破解!黑客如何修改数据? 小心,别被“数据”骗了你的眼睛和大脑。看看这个视频,揭秘黑客改数据背后的秘密! #解密 #黑客技术 #数据安...
113年國中教育會考社會科試題本 113年國中教育會考社會科試題本 113年國中教育會考社會科試題本
113年國中教育會考社會科試題本 113年國中教育會考社會科試題本 113年國中教育會考社會科試題本
教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗
教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗教育會考寫作測驗
【微 tytyqqww 信】网上找黑客改蒙纳士大学__Monash University修改成绩黑客修改成绩,黑客改高考成绩,黑客修改中考成绩1.🎉你是否...
【微 tytyqqww 信】网上找黑客改蒙纳士大学__Monash University修改成绩黑客修改成绩,黑客改高考成绩,黑客修改中考成绩1.🎉你是否...
假营业执照价钱 【制作+微:892719599】
假营业执照价钱 【制作+微:892719599】
黑客挂科改成绩科廷大学__Curtin University1.🎉GPA低了,怎么办?别担心!黑客改成绩轻松搞定~ 😎国外大学也能用哦!再也不怕被开除啦!...
黑客挂科改成绩科廷大学__Curtin University1.🎉GPA低了,怎么办?别担心!黑客改成绩轻松搞定~ 😎国外大学也能用哦!再也不怕被开除啦!...
墨尔本大学 The University of Melbourne代考exam代考留学生代考线下代考-跨越考试难关 【微 tytyqqww 信】
墨尔本大学 The University of Melbourne代考exam代考留学生代考线下代考-跨越考试难关 【微 tytyqqww 信】
113 年國中教育會考 自然科試題本113 年國中教育會考 自然科試題本113 年國中教育會考 自然科試題本
113 年國中教育會考 自然科試題本113 年國中教育會考 自然科試題本113 年國中教育會考 自然科試題本
資訊安全宣導簡報資訊安全宣導簡報資訊安全宣導簡報資訊安全宣導簡報資訊安全宣導簡報
資訊安全宣導簡報資訊安全宣導簡報資訊安全宣導簡報資訊安全宣導簡報資訊安全宣導簡報
《菁英體制的陷阱》《菁英體制的陷阱》《菁英體制的陷阱》《菁英體制的陷阱》《菁英體制的陷阱》
《菁英體制的陷阱》《菁英體制的陷阱》《菁英體制的陷阱》《菁英體制的陷阱》《菁英體制的陷阱》
黑客改分,黑客改gpa,黑客改成绩,修改国外大学成绩黑客改GPA【微 tytyqqww 信】澳大利亚天主教大学__Australian Catholic ...
黑客改分,黑客改gpa,黑客改成绩,修改国外大学成绩黑客改GPA【微 tytyqqww 信】澳大利亚天主教大学__Australian Catholic ...
會考數學會考數學會考數學會考數學會考數學會考數學會考數學會考數學會考數學會考數學
會考數學會考數學會考數學會考數學會考數學會考數學會考數學會考數學會考數學會考數學
javascript的分层概念 --- 阿当
1.
Javascript 的分层概念 曹刘阳
(阿当)
2.
原生 javascript 目录
底层、组件层和应用层 YUI2 JQuery YUI3
3.
原生 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>
5.
变量暴露在 window 作用域下,多人合作
多个功能间互相干扰。
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 :
8.
不同浏览器,对 DOM
的解析不同
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 :
11.
不同浏览器,对 Event 的解析不同
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); 其它操作:
13.
原生 javascript 接口太笨拙
14.
原生 javascript 写程序就像汽车行驶在一条凹凸不平的小路上。
15.
底层、组件层和应用层
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>
17.
问题一:匿名函数间无法通信 问题二:如果匿名函数内容很长 ,函数内部还是有冲突隐患
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 语言层面不提供的接口,组成新的底层。
24.
底层替我们铲平了路面的凸起(浏览器差异),填补了路面的凹 陷(补充 javascript
语言的底层方法)
25.
封装 cookie 的接口
<script type="text/javascript"> var cookie = { set : function(){ … }, read : function(){ … }, del : function(){ } }; </script>
26.
将函数归到相应的命名空间下: <script type="text/javascript">
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.
Jetzt herunterladen