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