Download to read offline
![策划组的 2012-2013
建可 的构 维护 JAVASCRIPT
杨武林
xiaomi.com
[ 小米网 技 交流分享开发组 术 ] 于 16/05/2013](https://image.slidesharecdn.com/javascript-130520012947-phpapp02/85/Javascript-1-320.jpg)
![策划组的 2012-2013
建可 的构 维护 JAVASCRIPT
杨武林
xiaomi.com
[ 小米网 技 交流分享开发组 术 ] 于 16/05/2013](https://image.slidesharecdn.com/javascript-130520012947-phpapp02/75/Javascript-1-2048.jpg)
构建可维护的Javascript 小米网
- 1. 策划组的 2012-2013 建可 的构维护 JAVASCRIPT 杨武林 xiaomi.com [ 小米网 技 交流分享开发组 术 ] 于 16/05/2013
- 2.
- 3. 前言 客 存在的事观实：（ 我 ）为 们辩护 • BUG 修改 • 目有新的功能或需求项 • 目需要在新的客 端 境 行（如项 户 环 运 IE10+/IPAD/RETINA 屏…） • 代码逻辑变换 • 正在修改不知道是在 的基 上 修改 的谁 础 谁 过
- 4. 前言 o 全局量 染变 污 o 格不 一编码风 统 o 注 于随意释过 o 没有文档 o UI 耦合度高层 o 代 没有码 经过 JSLINT 或 JSHINT 检查 o 。。。
- 5. 前言 可 的目：维护 标 （我 在 践）们 实 • 性良好阅读 • 具有一致性 • 性好预见 • 看起来如同一个人 写编 • 有文档
- 6. 前言 一个好的技 方案，有术3000 人听 ，其中说过 1000 人研究 ，只有过 100 人。。。 而最终 只有 3 人在 目中 。项 尝试 不缺乏好技 ，术 需要 行力执
- 7.
- 8. 可 性维护 1.基本技巧 2. 程 践编 实 3. 自 化 建动 构
- 9. 可 性维护- 基本技巧 无 是 在改 修改 的代 ， 少代 的 ；论 谁 谁 过谁 码 减 码 阅读时间 方便快捷的找到代 的码 BUG ， 懂代 ，事半功倍；读 码逻辑 保 了代 在证 码 JSLINT 、 JSHINT 工具下的通 率；过 看起来就心情愉悦。
- 10. 可 性维护- 基本技巧 • 代 格式化码 • 添加注释 • 句语 && 表 式达 • 量、函数、 算符变 运
- 11. 可 性维护- 基本技巧 - 代 格式化码 ：缩进 使用 4 个空格 一个 （ 置 器为 缩进层级 设 编辑 TAB ）
- 12. 可 性维护- 基本技巧 - 代 格式化码 句 尾语 结 ： JAVASCRIPT 句 以分号 尾，语 须 结 大多数 合并工具会自 添加分号压缩 动
- 13. 可 性维护- 基本技巧 - 代 格式化码 空行： •在方法之间 •方法中局部 量与第一条 句之变 语 间 •行注 之前释 • 片段之前逻辑
- 14. 可 性维护- 基本技巧 - 代 格式化码 命名： • 量变 - 峰大小写驼 •常量 - 大写以下 接划线连 •函数 - 峰首 （驼 单词为动词 can,has,is,get,set… ） • 造函数构 - 峰首字母大写驼
- 15. 可 性维护- 基本技巧 - 添加注释 目的：自己或其他人能快速 懂代读 码 ， 文档生成工具友好（对 YUI DOC ） •注 遵循代 格式化释 码 •所有函数、方法、 造函数 使用文构 须 档注释 器编辑 sublime text 安装 DocBlockr 插件 , 在 function 上一行 入输 /** ，然后按 Tab 就自 全注动补 释
- 16. 可 性维护- 基本技巧 - 句语 && 表 式达 • 句 使用大括号（块语 须 if,for,while,try catch…. ） • 第一个大括号在 句第一句末尾块语 • 句 隔块语 间 - 在左小括号之前和右小括号之后 添加一个空格 • for 循环 - 建 避免使用议 break 停止迭代 continue 跳出本次迭代，可使用条件判断控制 迭代，不容易出 且错 对 JSHINT 友好 • for in 循环 -hasOwnProperty() 来 出 例属过滤 实 性； TIPS: hasOwnProperty 是用来判断一个 象是否有你 出名称的属性或 象。对 给 对 但却无法 象的原型 中是否具有 属性检查该对 链 该
- 17. 可 性维护- 基本技巧 - 量、函数、 算符变 运 • 量声明变 • 函数 用在函数声明之后调 • 使用 格模式 “严 use strict” • 使用 === !== 避免使用 == !=
- 18.
- 19. 可 性维护- 程 践编 实 • 前端代 低耦合码 (handlebars http://handlebarsjs.com/ mustache https://github.com/janl/mustache.js/ ) • 少使用全局 量，使用命名空 模式减 变 间 • 分离配置数据（可以使用 Props2js 工具 取本地配置文件）读
- 20. 可 性维护- 程 践编 实 在 Javascript 中，所有的 象都可以 是一个 数 。对 认为 关联 组 数 中的 象可以使用点关联 组 对 (.) 行引用， 我 可以利用 数 相地 命名空 。进 这样 们 关联 组变 实现 间
- 21. 可 性维护- 程 践编 实 - 象的 理对 处 不修改不属于自己的 象（原生 象、对 对 DOM 象、宿主 象、引入类 的 象）对 对 库 对
- 22. 可 性维护- 程 践编 实 - 器浏览 检测 • 尽量避免使用 use-agent 来检测 • 特性检测 • 避免特性推断 • 避免 器推断浏览
- 23. 我需要 建自 化？构 动 吗
- 24. 点：优 •本地分析工具可自动发现 BUG •文件的合并与压缩 •通 自化 可以容易过 动 测试 发现问题 •可以有 的文档详细 缺点： •没有使用 会 到一些过 碰 问题 •会改 既定的工作流程变 •生 境出产环 现 BUG 后，不能快速定位问题
- 25. 建自 化构动 Ant || Grunt Grunt 是一个基于任 的务 JavaScript 目命令行 建工具， 行于项 构 运 Node.js 平台。 Grunt 能够 从模板快速 建 目，合并、 和校创 项 压缩 验 CSS & JS 文件， 行 元 以及 静 服 器运 单 测试 启动 态 务 Ant 是一个将 件 、 、部署等步 系在一起加以自 化的一个工具，大软 编译 测试 骤联 动 多用于 Java 境中的 件 。环 软 开发
- 26. 建自 化构动 Ant 如果 是你 MAC OS 用 ，很 ，户 赞 Ant 已 安装好了经 ； 附上 Ubuntu 的安装笔记 https://www.evernote.com/shard/s104/sh/b2e243d6-ead4-46f6-8057-c5708087bbcb/7609eef4f841f0ed04a70c955115d46a
- 27. 建自 化构动 -Ant Buildr 是一个 找和收集前端相 且 法 的寻 关 语 简单 Ant 任 的 源 目务 开 项 1.在 目中新建项 bulid.properties 文件用来 存配置参数（源代 目 、 建后的文件地址储 码 录 构 、依 文件路径、版本等等）；赖 新建一个 Ant 必 的配置文件须 build.xml ； <loadproperties srcfile=“bulid.properties” /> 来 取配置参数文件读 2.https://github.com/nzakas/buildr 下 到本地载 3.<import file=“/buildr’s path/buildr.xml” /> 4.修改 buildr.xml 建目 任 集合构 标 务 Buildr
- 28. 建自 化构动 -Ant 本机演示 》》》
- 29. 如果你想了解更多… 《 JAVASCRIPT 模式》设计 《写可编 维护 JAVASCRIPT 》 《 JAVASCRIPT 模式》 http://yui.github.io/yuidoc/ http://www.jshint.com/ http://ant.apache.org/ https://github.com/nzakas/buildr https://github.com/janl/mustache.js/ http://handlebarsjs.com/
- 30. THANKS 注专 web 前端用 体户 验 - 路漫漫其修 兮 吾将上下而求索远 •WEIBO : weibo.com/yangwulin •QQ : 303683080 •TEL : 13521190136