![策划组的 2012-2013
建可 的构 维护 JAVASCRIPT
杨武林
xiaomi.com
[ 小米网 技 交流分享开发组 术 ] 于 16/05/2013](https://image.slidesharecdn.com/javascript-130520012947-phpapp02/85/Javascript-1-320.jpg)
More Related Content
What's hot (7)
Viewers also liked (20)
Similar to 构建可维护的Javascript 小米网 (20)
构建可维护的Javascript 小米网
- 1. 策划组的 2012-2013 建可 的构 维护 JAVASCRIPT 杨武林 xiaomi.com [ 小米网 技 交流分享开发组 术 ] 于 16/05/2013
- 2. Why?
- 3. ? 前言 客 存在的事观 实：（ 我 ）为 们辩护 ? BUG 修改 ? 目有新的功能或需求项 ? 目需要在新的客 端 境 行（如项 户 环 运 IE10+/IPAD/RETINA 屏…） ? 代码逻辑变换 ? 正在修改不知道是在 的基 上 修改 的谁 础 谁 过
- 4. ? 前言 o 全局 量 染变 污 o 格不 一编码风 统 o 注 于随意释过 o 没有文档 o UI 耦合度高层 o 代 没有码 经过 JSLINT 或 JSHINT 检查 o 。。。
- 5. ? 前言 可 的目 ：维护 标 （我 在 践）们 实 ? 性良好阅读 ? 具有一致性 ? 性好预见 ? 看起来如同一个人 写编 ? 有文档
- 6. ? 前言 一个好的技 方案，有术 3000 人听 ，其中说过 1000 人研究 ，只有过 100 人。。。 而最终 只有 3 人在 目中 。项 尝试 不缺乏好技 ，术 需要 行力执
- 7. What?
- 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. 不 硅步，无以至千里积 做一个有底 的线 JSER
- 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