前端杂乱分享

1,514 views
1,466 views

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,514
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
36
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

前端杂乱分享

  1. 1.
  2. 2. Javscript相关tips和物流系统页面初步优化<br />晋元<br />
  3. 3. 分享的目标<br /><ul><li>让部门的每个新人了解js库YUI的常用编写。
  4. 4. 让部门的大部份人会使用前端调试工具来快速定位线上页面出现BUG的原因</li></ul>以及如何调色并尝试解决。<br /><ul><li>让所有人了解WEB前面页面性能的几个重要优化准则,让他们意识到一个系统的优化不仅仅是后端性能指数如Load,CPU,内存,TPS的优化,让他们对系统性能提高的关注点视野更广阔。</li></li></ul><li>我们后端开发人员工作中最先想掌握的前端技能是哪些?<br />我的答案如下<br /><ul><li> Javascript 对Html document的处理(Dom操作,Event 处理)
  5. 5. Ajax与后端数据的异步交互</li></li></ul><li>准备好了吗?让我们对这二点开始之旅,希望大家旅途愉快!<br />
  6. 6. Dom操作和Event处理<br />
  7. 7.
  8. 8.
  9. 9. 事件绑定的兼容性<br />好处:<br />1:封装各浏览器差异性<br />2:内存泄漏管理<br />YAHOO.util.Event.on is an alias for addListener<br />
  10. 10. 想进一步了解事件模型研究吗?<br />请点击浩行天下的博客<br />之所以推荐这个博客,有个原因那同学从初中就开始写博文,值得我们学习。<br />
  11. 11. 了解了Dom操作和Event处理,那看个日常在回顾下<br />店铺优惠券<br />跟着晋元看源代码一句句解说@_@,让你进一步的找到感觉<br />
  12. 12. AJAX数据异步交互<br />
  13. 13.
  14. 14. 原生的AJAX写法 -----有助于大家理解原理<br />难记不?<br />基于这个实现的Demo<br />
  15. 15. 别担心,用YUI库封装的一种Ajax请求写法<br />简单好记不?<br />
  16. 16. 看一下YUI Ajax实现的日常<br />权限管理的用户管理<br />跟着晋元看源代码一句句解说@_@,让你进一步的找到感觉<br />
  17. 17. 接下来让我们了解前端的一些规范约定,以<br />便更好的跟专业前端开发工程师沟通协调!<br />
  18. 18. Summary<br /><ul><li>HTML
  19. 19. JavaScript
  20. 20. JSON
  21. 21. Ajax</li></li></ul><li>一、HTML<br />
  22. 22. HTML<br /><ul><li>JS Hook 约定
  23. 23. JS 数据约定
  24. 24. 外联 JS
  25. 25. 内联 JS
  26. 26. JS 时间戳</li></li></ul><li>JS Hook 约定:<br /><ul><li>Hook 仅出现在 id 和 class 属性中, 命名规则为 J_UpperCamelCase,给JS操作</li></ul>例如:<br />旺旺点灯的Hook J_WangWang<br />
  27. 27. JS 数据源约定:<br /><ul><li>使用 HTML 元素的自定义属性:data-xxxx( HTML5 中新增的属性)</li></li></ul><li>外联 JS:<br /><ul><li>合并多个 JS 文件
  28. 28. 将 JS 文件移至页面的底部</li></li></ul><li>外联 JS:<br /><ul><li>影响的主要方面:
  29. 29. 阻塞其后面组件的(并行)下载
  30. 30. 阻塞其后面内容的呈现
  31. 31. 影响的主要原因:
  32. 32. 保持执行顺序
  33. 33. 对 document.write的依赖关系</li></li></ul><li>内联JS:<br /><ul><li>建议不使用
  34. 34. 如果的确要使用,移至页面的尾部</li></ul><script type="text/javascript"><br /> //……<br /></script><br />
  35. 35. 内联JS:Demo<br />
  36. 36. 内联JS :案例<br />观察到的现象:<br />脚本执行结束,第二张图才开始下载。<br />页面加载后浏览器重新渲染(render)时,至少5秒页面无任何内容显示。<br />
  37. 37. 内联JS:<br /><ul><li>影响的主要方面:
  38. 38. 阻塞其后面组件的下载
  39. 39. 阻塞整个页面的逐步渲染
  40. 40. 影响的主要原因:
  41. 41. 保持执行顺序
  42. 42. 对 document.write的依赖关系</li></li></ul><li>JS时间戳:<br /><ul><li>在文件名之后添加“?t=yyyymmdd.js”,</li></ul>yyyymmdd为当天日期。例:<br />test.js?t=20101213.js<br />
  43. 43. 二、JavaScript<br />
  44. 44. JavaScript<br /><ul><li>框架选择
  45. 45. 模式约定
  46. 46. 性能优化(简单)
  47. 47. 文件压缩</li></li></ul><li>类库选择:<br /><ul><li>Taobao目前系统主要使用 YUI(2.8),新项目开始逐渐使用Kissy(1.5)</li></li></ul><li>全局变量是魔鬼!!!<br />
  48. 48. 模式约定:<br /><ul><li>匿名函数模式(变量声明一定要记得使用 var)</li></li></ul><li>模式约定<br /><ul><li>模块模式(Module Pattern)</li></ul>这编文章有详细的解释<br />
  49. 49. 性能优化:<br /><ul><li>任何字面量值、全局变量或者属性名被使用超过 2 次(包括2次),都应该用局部变量存储代替
  50. 50. 一个函数尽量只出现一次 var和 return 关键字</li></li></ul><li>性能优化:<br /><ul><li>使用数组和对象的字面量</li></ul>var a = new Array; --->var a = [];<br />var o = new Object; ---> var o = {};<br /><ul><li>使用局部变量(读写最快的标识符)</li></li></ul><li>性能优化:<br /><ul><li>减少对DOM的操作(DOM最耗时)</li></li></ul><li>文件压缩:<br />工具:<br /><ul><li>(以前) YuiCompressor 2.4.2
  51. 51. (现在推荐) Closure-compiler</li></ul>下载地址:<br /> http://code.google.com/p/ourtools/downloads/list<br />更多的工具 git这个地址<br /> https://github.com/kissyteam/kissy-tools.git<br />常见方式:<br />test.source.js ---> test.js (以前)<br /> test.js ---> test-min.js(现在推荐)<br />
  52. 52. 三、JSON<br />
  53. 53. JSON<br /><ul><li>JSON 语法
  54. 54. JSON 转化</li></li></ul><li>JSON 语法:<br /><ul><li>JSON 的“名”规定为任何字符串
  55. 55. JSON 字符串必须使用双引号包围
  56. 56. JSON 数字整数的首位不允许为 0</li></li></ul><li>JSON 语法:<br />
  57. 57. JSON 转化:<br /><ul><li>使用 eval() 方法转化(最便捷):</li></ul>varmyData = eval('(' + JSON + ')');<br /><ul><li>使用 YUI 2.8 中的 YAHOO.lang.JSON.parse方法转化(最安全):</li></ul>varmyData = <br />YAHOO.lang.JSON.parse(JSON);<br />
  58. 58. 四、Ajax<br />
  59. 59. Ajax<br /><ul><li>编码问题</li></li></ul><li>编码问题:<br /><ul><li>无论是POST还是GET方式,均直接在URL后添加参数:url?_input_charset=utf-8</li></ul>(仅在淘宝的后台框架webx下有效!)<br />
  60. 60. 休息下 ,来看点工具使用<br />现场显示哦@_@<br /><ul><li>Firebug
  61. 61. Yslow
  62. 62. Fiddler
  63. 63. ucool(http://code.google.com/p/ucool/)</li></ul>http://wiki.ued.taobao.net/doku.php?id=user:zhangting:tools:assets-tool-java<br />特殊情况下结合使用<br />
  64. 64. 在走进下YUI<br />
  65. 65. 内 容<br /><ul><li> YUI是什么,能干什么
  66. 66. YUI Global Object
  67. 67. DOM
  68. 68. EVENT</li></ul>50<br />
  69. 69. Yahoo! User Interface Library(简称yui) 是一个使用Javascript编写的工具和控件库。<br />我们知道写JS的时候最讨厌的就是需要兼容不同的浏览器,尤其是IE自己支持一些特殊的方法和属性,而使用YUI封装好的方法能屏蔽不同浏览器之间的差别,并能使开发更有效率,用户体验更好。<br />51<br />
  70. 70. 2010/12/16<br />We Choose YUI !<br />稳定可靠及可持续性的维护。 <br />HTML结构/CSS/JavaScript 层次最为分明,易于多人协作开发。 <br />丰富的组件支持 。<br />完善的文档/范例。<br />贴近Java开发人员的代码命名习惯/编码规范/文档规范/面向对象模型。 <br />近亲出品,友情支持 。<br />
  71. 71. 2010/12/16<br />YUI Introduce <br />
  72. 72. YUI Library<br />54<br />
  73. 73. YAHOO Global Object<br />YAHOO Global Object搭建了全局的YUI命名空间以及未其他的工具和控件库提供一些核心的服务。<br />常用方法列举如下:<br />避免js全局变量污染的好办法 :YAHOO.namespace(e.g.)<br />提供相当多的简单易用的小方法:YAHOO.lang(e.g.)<br />55<br />
  74. 74. DOM Manipulation<br />56<br />
  75. 75. 2010/12/16<br />YUI Howto – DOM (1)<br />getElementById(id)<br />YAHOO.util.Dom.get( id )<br />
  76. 76. 2010/12/16<br />YUI Howto – DOM (2)<br />偏爱 $() ? <br />var $D = YAHOO.util.Dom;<br />Var $ = $D.get;<br />var obj = $(id);<br />
  77. 77. 2010/12/16<br />YUI Howto – DOM (3)<br /><ul><li>getElementByClassName
  78. 78. addClass / removeClass / replaceClass / hasClass
  79. 79. getStyle / setStyle
  80. 80. getXY / setXY
  81. 81. getViewportWidth / getViewportHeight
  82. 82. getRegion</li></li></ul><li>2010/12/16<br />YUI Howto – DOM (4)<br />varels = document.getElementByTagName(‘li’);<br />for (vari = 0 ; i < els.length; i++) {<br />els[i].style.display = ‘none’;<br />}<br />W3C <br />Style<br />Prototype<br />Style<br />varels = document.getElementByTagName(‘li’);<br />$A(els).each(function(el) {<br />el.style.display = ‘none’;<br />});<br />YUI<br />Style<br />varels = document.getElementByTagName(‘li’);<br />YAHOO.util.Dom.setStyle(els, ‘display’, ‘none’); <br />
  83. 83. 2010/12/16<br />YUI Howto – DOM (5)<br />YAHOO.util.Dom.batch(el, method,<br /> scope,<br /> override);<br />
  84. 84. Event listener<br />Toooooooooooold(e.g.)<br /><a href="someurl" onclick="someFunction(); return false"><br />缺点:js嵌入html中,最好html和js分别管理<br />old,W3C标准:<br />document.getElementById('someElement').onclick = someFunction;<br />缺点:需要两步,单个元素操作,函数名太长<br />now,更加灵活,更加方便<br />YAHOO.util.Event.addListener(someElement, "someEvent", someHandler); (alias .on) <br />62<br />
  85. 85. Event listener<br />static Boolean addListener ( el , sType , fn , obj , overrideContext )<br />static Boolean on ( el , sType , fn , obj , overrideContext )<br />添加一个事件监听函数(e.g.)<br />Parameters:<br />el <String|HTMLElement|Array|NodeList> 需要添加事件监听函数的元素 ID, 元素引用,ID 或 元素引用的数组。<br />sType <String> 要添加监听函数的事件类型<br />fn <Function> 事件触发时执行的回调函数<br />obj <Object> 传递给监听函数的一个自定义对象<br />overrideContext <boolean|object> 如果为 true,fn 的执行上下文会 被替换为 obj参数,如果是一个对 象,则这个对象会成为回调函数的 执行上下文<br />Returns: Boolean<br />如果动作成功完成或延迟执行则返回 true, 如果有一个或多个元素未添加监听函数或操作 抛出了一个异常则返回 false。<br />63<br />
  86. 86. 2010/12/16<br />YUI Howto – Event (1)<br />// DOM 0<br />el.onclick = doSomething;<br />// IE<br />el.attachEvent(‘onclick’, doSomething); <br />// Mozilla<br />el.addEventListener(‘click’, doSomething, false); <br />YAHOO.util.Event.on(el, ‘click’, doSomething);<br />
  87. 87. 2010/12/16<br />YUI Howto – Event (2)<br />window.onload = function() {<br /> doSomething();<br />}<br />YAHOO.util.Event.on(window, ‘load’, doSomething);<br />更多的选择<br />onAvailable(element, function);<br />onContentReady(element, function);<br />onDOMReady(element, function);<br />
  88. 88. 2010/12/16<br />YUI Howto – Event (3)<br />window.onload = function() {<br />doSomething();<br />}<br />YAHOO.util.Event.on(window, ‘load’, doSomething);<br />onAvailable(element, function);<br />onContentReady(element, function);<br />onDOMReady(element, function);<br />
  89. 89. 在适当的时候反应<br />我们以前常常利用 window.onload事件在 HTML 内容加载完成(浏览器状态栏上的加载进度条消失)之后执行某个操作。但是 window.onload有一个弊端,即:window.onload一定要等到页面中包括图片/多媒体等内容都全部加载完成后才执行。如果页面中存在数量或体积巨大的图片/多媒体内容,那么就需要等待很长的时间方才触发,甚至可能导致无法触发。<br />Event utility 提供三种方法在避免这个问题: (e.g.)<br /><ul><li>.onDOMReady()是在所有Dom加载完后触发回调函数。
  90. 90. .onAvailable()和.onContentReady()都是在指定元素加载完毕后触发回调函数。
  91. 91. onAvailable()和onContentReady()两者本质的区别是onContentReady方法直到目标元素的兄弟节点可以通过getElementById方法检测到时激活。这可以保证目标元素的内容已经完全加载。</li></ul>67<br />
  92. 92. 注销元素上绑定的事件<br />YAHOO.util.Event.removeListener(el, sType, fn)<br />YAHOO.util.Event.purgeElement(el, recurse, sType)<br /><ul><li>removeListener 意在注销事件处理器(fn),通常用在 fn 已知的情况。如果没有传递 fn 参数,那么它将注销所有指定事件类型的所有事件处理器。
  93. 93. purgeElement 意在注销指定类型的所有事件。查看源码可知,它会取得注册在指定元素上的所有事件,然后循环通过removeListener 移除。</li></ul>第二个参数 recurse 指定是否递归的注销注册在该元素的所有子节点上的同类事件,如果值为false,将只处理第一个参数中指定的元素,如果值为true,则递归处理所有子节点。<br />一般来说不会经常使用到该方法。但一些交互较为复杂的场合,比如一些注册了事件的元素在其后的交互中可能会被从DOM树中移除,那么在移除之前调用 purgeElement() 是一个好习惯,因为它会防止浏览器内存泄露的问题。<br />68<br />
  94. 94. 2010/12/16<br />YUI Howto – Connectoin (1)<br />Asynchronous Request Use GET<br />YAHOO.util.Connect.asyncRequest('GET', url, {<br />success: function(o) {<br /> indicator.style.display = 'none';<br /> container.innerHTML = o.responseText;<br /> //auto fit image width<br /> autoFitImageWidth(container, container.offsetWidth);<br /> SpaceManager.showArticleComments(threadId, 0, uid, scrollToComment);<br /> },<br />failure: function(o) {<br /> alert("系统错误:" + o.status);<br /> }<br />}); <br />Example from<br />Taobao Space<br />
  95. 95. 2010/12/16<br />YUI Howto – Connectoin (2)<br />Asynchronous Request Use POST<br />YAHOO.util.Connect.asyncRequest('POST', url, {<br />success: function(o) {<br /> //doSomething<br /> },<br />failure: function(o) {<br /> //doSomething<br /> }<br />}, 'key1=value1&key2=value2'); <br />
  96. 96. 2010/12/16<br />YUI Howto – Connectoin (3)<br />Asynchronous Request Use POST + SetForm<br />YAHOO.uitl.Connect.setForm(frm);<br />YAHOO.util.Connect.asyncRequest('POST', url, {<br />success: function(o) {<br /> indicator.style.display = 'none';<br /> container.innerHTML = o.responseText;<br /> YAHOO.util.Dom.get('CommentBody').value = '';<br /> // 更新评论数(文章可能已被删除)<br /> try {<br /> var c = Y.Dom.get('CommentCount').innerHTML;<br /> YAHOO.util.Dom.get('CommentCountTop').innerHTML = c;<br /> } catch (e) {}<br /> },<br />failure: function(o) {<br /> alert("系统错误:" + o.status);<br /> }<br />}); <br />Example from<br />Taobao Space<br />
  97. 97. 2010/12/16<br />TBra<br />什么是Tbra ?<br />2007年下半年开始,淘宝的前端工程师发现,页面上的不少通用功能,都不能直接套用YUI的现有组件来完成。比如图片轮播、弹出层等,如果直接用 YUI的组件,会导致要加载的文件很大,修改成本还不低。于是淘宝开始基于YUI的核心功能,实现了一套常用组件,加上一些实用的辅助工具类,形成了淘宝 的第一代前端类库:TBra.<br />TBra由 YUI Core 和 SimpleSlide等实用组件组成<br />http://a.tbcdn.cn/tbra/1.0/tbra-aio.js?t=20090604.js<br />
  98. 98. 2010/12/16<br />TBra Overview<br />CheckboxGroup<br />SimpleTab<br />SimpleScroll<br />Pagination<br />SimpleSlide<br />SimplePopup<br />……<br />SimpleListing<br />……<br />Widget<br />Control<br />.........................................................<br />Common<br />BOM<br />JSON<br />Core<br />Array extras<br />?<br />.........................................................<br />YUI<br />
  99. 99. 2010/12/16<br />TBra Introduce (1)<br />Array extras<br />Array.prototype.indexOf<br />Array.prototype.lastIndexOf<br />Array.prototype.forEach<br />Array.prototype.filter<br />Array.prototype.map<br />Array.prototype.some<br />Array.prototype.every<br />
  100. 100. 2010/12/16<br />TBra Introduce (2)<br />TB.common<br /> |—— trim()<br /> |——escapeHTML()<br /> |——unescapeHTML()<br /> |—— toArray()<br /> |—— applyConfig()<br />
  101. 101. 2010/12/16<br />TBra Introduce (3)<br />TB.bom<br /> |—— isGecko<br /> |——isOpera<br /> |——isSafari<br /> |—— isIE<br /> |—— isIE6<br /> |—— getCookie()<br /> |—— setCookie()<br /> |—— removeCookie()<br /> |——pickDocumentDomain()<br />
  102. 102. Tbra的组件库和工具集地址<br />TBra 1.0 Examples<br />
  103. 103. 娱乐下(看看页面如何加载和render的)<br />http://video.google.com/videoplay?docid=-1471976166301235697&ei=&hl=en#<br />http://video.google.com/videoplay?docid=1020647662203348823&ei=&hl=en#<br />
  104. 104. 最后看下物流consign系统的前端web性能初步优化<br />很遗憾没现场去挺steve和蒋博士的专场PPT分享,不过去过的人都知道他们2位用数字告诉大家网站优化是多么的重要性<br />详细见word文档<br />
  105. 105.
  106. 106. Yahoo提倡的优化准则<br />更详细的见:http://developer.yahoo.com/performance/rules.html#num_http<br />
  107. 107. 下期要做的事情<br />1 去掉组件的原来左侧动态2个JS依赖(跟玉楼那边需要沟通),因头部已经加载<br />2 改掉那个长域名的flash,需要元超,达志确认下这个哪里的依赖,如确实有依赖改成短域名<br />3 consign系统的html结构空格和空行太多(尝试把高PV的3个界面去掉空格,在压测)<br />4 异步化(向达志学习了解下那块物流发货业务等,配合UED新人同学完成那些需要异步化的点)…..<br />
  108. 108.
  109. 109. 下期要做的分享<br />前端新库kissy的一些简介和跟web性能相关的优化技术和相关的apache模块(如mod_expire,mod_deflate等)<br />
  110. 110. 推荐的我正在看的学习书籍<br /><ul><li>High.Performance.Web.Sites
  111. 111. Even.Faster.Websites</li></li></ul><li>OVER<br />

×