WEB开发规范文档_第1页
WEB开发规范文档_第2页
WEB开发规范文档_第3页
WEB开发规范文档_第4页
WEB开发规范文档_第5页
已阅读5页，还剩45页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

WEB前端开发规范文档飞机稿原生javascript目录底层、组件层和应用层YUI2JQueryYUI3原生javascript变量冲突：<inputtype="button"value="clickme"id="btn"/><scripttype="text/javascript">//功能Avara=1,btn=document.getElementById("btn");btn.onclick=function(){ a++; alert(a); //101、102、103…}</script>...<scripttype="text/javascript">//功能Bvara=100; //在此处被重新赋值</script>变量暴露在window作用域下，多人合作\多个功能间互相干扰。<ulid="list"> <liid="firstItem">111</li> <li>222</li> <li>333</li></ul><scripttype="text/javascript">varlist=document.getElementById("list"),firstItem=document.getElementById("firstItem");alert(firstItem.nextSibling.innerHTML);//IE:222firefox:undefinedalert(list.childNodes.length); //IE:3firefox:7</script>DOM相关-1：<style>#test{width:300px;height:300px;background:blue;}</style><body><divid="test"></div><scripttype="text/javascript">vartest=document.getElementById("test");if(document.all){ test.style.filter=‘alpha(opacity=20)’;

//IE}else{ test.style.opacity=0.2;

//firefox}</script>DOM相关-2：不同浏览器，对DOM的解析不同<inputtype="button"value="clickme"id="btn"/><spanid="span">helloworld</span><scripttype="text/javascript">document.getElementById("btn").onclick=function(e){ e=window.event||e; varel=e.srcElement||e.target; alert(el.tagName);}document.getElementById("span").onclick=function(e){ e=window.event||e; varel=e.srcElement||e.target; alert(el.tagName);}</script>Event相关-1：<inputtype="button"value="clickme"id="btn"/><scripttype="text/javascript">varbtn=document.getElementById("btn");if(document.all){ //IE btn.attachEvent("onclick",function(){ alert("helloworld"); });}else{ //firefox btn.addEventListener("click",function(){ alert("helloworld"); },false);}</script>Event相关-2：不同浏览器，对Event的解析不同//设置cookiedocument.cookie="name=adang;expires=Mon,04Oct201002:40:14GMT;path=/";document.cookie="sex=male;expires=Mon,04Oct201002:40:14GMT;path=/";document.cookie="blog=;expires=Mon,04Oct201002:40:14GMT;path=/";/*读取cookie**此时cookie里的值为"name=adang;sex=male;blog="*/varcookieStr=document.cookie; //对字符进行操作，取出name对应的值varname=cookieStr.split("name")[1].split(";")[0].split("=")[1];alert(name);其它操作：原生javascript接口太笨拙原生javascript写程序就像汽车行驶在一条凹凸不平的小路上。底层、组件层和应用层控制全局作用域的变量数量：<inputtype="button"value="clickme"id="btn"/><scripttype="text/javascript">(function(){vara=1,btn=document.getElementById("btn");btn.onclick=function(){ a++; alert(a);}})();</script>...<scripttype="text/javascript">(function(){vara=100;})();</script>问题一：匿名函数间无法通信问题二：如果匿名函数内容很长，函数内部还是有冲突隐患命名空间<scripttype="text/javascript"> varGLOBAL={};GLOBAL.namespace=function(str){ vararr=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><scripttype="text/javascript">(function(){GLOBAL.namespace("A"); GLOBAL.A.a=1;varbtn=document.getElementById("btn");btn.onclick=function(){ GLOBAL.A.a++; alert(GLOBAL.A.a);}GLOBAL.namespace("B"); GLOBAL.B.a=100;})();</script>...<scripttype="text/javascript">(function(){vara=100;alert(a);alert(GLOBAL.A.a);})();</script>封装DOM的接口<scripttype="text/javascript"> functiongetNextNode(node){

if(ie){ … }else{ … }};

functionsetOpacity(node,opacityValue){ if(ie){ … }else{ … }}</script>封装Event的接口<scripttype="text/javascript"> functiongetEventTarget(e){

if(ie){ … }else{ … }};

functionon(node,eventType,handler){ if(ie){ … }else{ … }}</script>将函数归到相应的命名空间下：<scripttype="text/javascript"> varGLOBAL={};GLOBAL.namespace=function(str){…};… //GLOBAL.extend、GLOBAL.mergeGLOBAL.namespace(“Dom”);GLOBAL.Dom.getNextSibling=function(){…}GLOBAL.Dom.setOpacity=function(){…}… //GLOBAL.Dom.getPrevSibling、GLOBAL.Dom.getStyleGLOBAL.namespace(“Event”);GLOBAL.Event.getEventTarget=function(){…}GLOBAL.Event.on=function(){…}… //GLOBAL.Event.stopPropagation、GLOBAL.Event.getXY</script>将DOM、Event相关的操作进行封装，另外扩展一些原生javascript语言层面不提供的接口，组成新的底层。底层替我们铲平了路面的凸起（浏览器差异），填补了路面的凹陷（补充javascript语言的底层方法）封装cookie的接口<scripttype="text/javascript"> varcookie={ set:function(){ … }, read:function(){ … }, del:function(){ }};</script>将函数归到相应的命名空间下：<scripttype="text/javascript"> 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><scripttype=“text/javascript”src=“base.js”></script><!--底层--><scripttype=“text/javascript”src=“ajax.js”></script><!–组件层--><scripttype=“text/javascript”src=“tab.js”></script><!--组件层--><scripttype=“text/javascript”> <!--应用层-->(function(){ //yourcodehere })();</script></body></html>应用层：1)避免多人合作的冲突; 2)组件间的依赖关系处理;组件层：1)尽可能丰富的组件; 2)易用性; 3)可重用性。底层：1)跨浏览器兼容,屏蔽尽可能多的浏览器差异;2)补充完善javascript语言本身的不足; 3)精简。底层+组件层=框架框架可以帮助我们将精力集中在应用层的逻辑处理上，例如设计类、接口、设计模式，而不是将精力放在频繁的底层操作上。例：/js_demo/1/开发框架的难点：代码品质、组件的丰富程度、兼容性、易用性、可复用性…我们有大量开源框架可以选择：jQuery、YUI、Dojo、Prototype、mootool…YUI2官方网址：/yui/2/jQuery官方网址：“小”与“强”的平衡：YUI2将文件分成粒度非常小，靠loader机制按需加载，达到“小”和“强”的平衡，扩展

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论