j2ee之前端分享_补充后几页.ppt

J2EE之前端分享,开发和调试插件利用性能易错点,开发和调试,查看元素绑定事件,开发和调试,Ajax时中断在Scripts面板右侧有个XHRBreakpoints,点右侧的+会添加一个xhr断点,断点是根据xhr的url匹配中断的,如果不写匹配规则会在所有ajax,这个匹配只是简单的字符串查找,发送前中断,在中断后再在CallStack中查看时那个地方发起的ajax请求,开发和调试,页面事件中断除了给设定常规断点外,还可以在某一特定事件发生时中断(不针对元素),在Scripts面板右侧,有个EventListenerBreakpoints,这里列出了支持的所有事件,不仅click,keyup等事件,还支持Timer(在setTimeoutsetInterval处理函数开始执行时中断),onload,scroll等事件.,开发和调试,Javascript异常时中断Prettyprint左侧的按钮是开启js抛异常时中断的开关,有两种模式：在所有异常处中断,在未捕获的异常处中断.在异常处中断后就可以查看为什么抛出异常了,插件,HostAdmin,插件,FirebugFireQuery,插件,HttpRequester,插件,UserAgentSwitcher(切换useragent方便调试手机页面),插件,Fiddler2替换文件在线调试模拟慢网速,性能,保持从一个#ID来继承TrafficLightRedYellowGreen单个vartraffic_button=$(#traffic_button);多个元素vartraffic_lights=$(#traffic_lightinput);,性能,缓存jquery对象/不推荐这样使用$(#traffic_lightinput.on).bind(click,function().);$(#traffic_lightinput.on).css(border,3pxdashedyellow);$(#traffic_lightinput.on).css(background-color,orange);$(#traffic_lightinput.on).fadeIn(slow);/先保存对象到一个本地的变量中，再进行操作，如下：var$active_light=$(#traffic_lightinput.on);$active_light.bind(click,function().);$active_light.css(border,3pxdashedyellow);$active_light.css(background-color,orange);$active_light.fadeIn(slow);,性能,减少直接的DOM操作vartop_100_list=.,/assumethishas100uniquestrings$mylist=$(#mylist);/jQueryselectsourelementfor(vari=0,l=top_100_list.length;i+top_100_listi+);应该这样vartop_100_list=.,/assumethishas100uniquestrings$mylist=$(#mylist),/jQueryselectsourelementtop_100_li=;/Thiswillstoreourlistitemsfor(vari=0,l=top_100_list.length;i+top_100_listi+;$mylist.html(top_100_li);,性能,利用强大的链接var$active_light=$(#traffic_lightinput.on);$active_light.bind(click,function().).css(border,3pxdashedyellow).css(background-color,orange).fadeIn(slow);,易错,JavaScript是弱类型语言，这就意味着，等于操作符会为了比较两个值而进行强制类型转换。=0/false0=/true0=0/truefalse=false/falsefalse=0/truefalse=undefined/falsefalse=null/falsenull=undefined/truetrn=0/true,易错,严格等于操作符=0/false0=/false0=0/falsefalse=false/falsefalse=0/falsefalse=undefined/falsefalse=null/falsenull=undefined/falsetrn=0/false,易错,等于操作符比较的不是值是否相等，而是是否属于同一个身份；也就是说，只有对象的同一个实例才被认为是相等的。这有点像Python中的is和C中的指针比较。=;/falsenewString(foo)=foo;/falsenewNumber(10)=10;/falsevarfoo=;foo=foo;/true,易错,作用域varscope=global;functionf()alert(scope);varscope=local;alert(scope);f();,易错,作用域varscope=global;functioncheckScope()scope=local;alert(scop