前端分享--Qone--2015年5月11日--v2.pptVIP

拿起装备消灭BUG by Qone 2010.05.11 文死谏 武死战 程序员死在Bug上 目录 分享网易webmail前端开发经验分享 我们的又是什么样子的呢？ Bug 无处不在 你的装备有哪些？ 打算如何做？ Javascript开发工具 浏览器选择 常用浏览器ie 6,7,8360浏览器，傲游浏览器，腾讯浏览器 非常用浏览器firefox，chrome，safari，opera webmail浏览器统计 建议开发和测试的浏览器组合IE6 + firefox 百才招聘浏览器统计 前端开发工具－调试工具 脚本调试的工具Visual studio Firebug ie8自带调试工具 首选visual studio可以在出错代码行自动中断 可以在调试中自由控制当前断点 firebug占用资源大，有比较大的bug Dom查看器firebug ie developer toolbar ie8自带dom查看器 http监测工具httpwatch firebug fiddler Webmail js发布 js发布流程 新建版本目录，包括所需资源文件和wmsvr文件 js代码合并 使用yuicompressor进行js代码压缩混淆 上传资源文件上传到cache服务器 版本测试 上传引用最新版本的js的页面到线上 使用版本发布js程序的原因 大部分资源文件使用永久cache 每次版本更新的改动一般比较大 更换资源文件url是避免本地缓存最有效方法 Dom性能优化 减少页面结构复杂度，减少创建dom节点数量由于ie的渲染效率比较低，复杂的dom结构和大量的dom节点会造成浏览器缓慢 尽量避免在循环里面过多引用dom对象例如遍历节点集合时不要使用.length属性 使用dom缓存使用dom缓存可以减少dom节点创建 如何创建dom节点innerHTML、cloneNode、createElement、appendChild Js编码规范 私有函数命名 某函数里面有内部函数，按照“_动词＋名词式定义 。如_fGetName() 类（构造函数）命名首字母大写。如：function InboxClass(){} 命名规范js变量命名前缀规范s：表示字符。例如：sName，sHtml；n：表示数字。例如：nPage，nTotal；b：表示逻辑。例如：bChecked，bNew；o：表示对象。例如：oButton，oDate；a：标识数组。例如：aList，aTmp；f：表示函数。例如：fGetHtml，fInit dom id命名前缀规范txt: 表示input的输入框。例如：txtUserNamebtn:表示按钮。例如：btnSubmitrad：表示单选框。例如radGenderchk:表示复选框。例如chkMailList 我们的装备又如何？ Bug 无处不在 PHP, Java 接口程序错误，搜索程序错误 Html 错位，代码臃肿，不规范，不好理解，程序员不懂 Html 产品(需求) 某个需求是有问题的，或者不合理的 问题纠缠不清… 沟通 到什么山唱什么歌 见什么人说什么话 从测试人员角度看问题 聚餐是最好的沟通方式 常用装备 Zend Studio Bug：少输出，多调试 DW Editplus Notepad++ SVN Bug：没更新，上传了，没看到效果 现状：Debug 工具 Zend Studio Debug 浏览器工具栏 运用插件： aptana subclipse Firebug IETester Debugbar Firebug FirePHP HttpWatch Fiddler SuperPrevie Debugbar 现状：人员与标准 人员 页面仔 Ryan Html CSS 多，JS PHP 少 瑞士军刀 Qone PHP JS 多，Html CSS 少 标准 缺 期望：真正的瑞士军刀 切得了图 做得了页面 写得了PHP 懂得 JS Web 开发工具箱： 120个 Web 开发工具 （上） Web 开发工具箱： 120个 Web 开发工具 （下） 总 结 百才招聘--by Qone QQ：452348832 博客：/tewuxq * *