Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

前端杂乱分享

1,602 views

Published on

Published in: Technology
  • Be the first to comment

前端杂乱分享

  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 />

×