isobar前端代码规范及最佳实践.pdf

目 录 概述 总体指导原则 标记 CSS JavaScript 易用性 性能 浏览器测试和支持 搜索引擎优化 （SEO ） 代码审查 附录 附录 A 校验器 附录 B 工具 附录 C 资源 作者 修改历史 本文档使用 看云 构建 - 2 - 概述 概述 本文档包含了Isobar公司的创意技术部 （前端工程 ）开发web应用的规范。现在我们把它开放给任何希望 了解我们迭代过程最佳实践的人。 编写本文档的主要驱动力是两方面 ： 1) 代码一致性 以及 2) 最佳实践。 通过保持代码风格和传统的一致 性 ，我们可以减少遗留系统维护的负担 ，并降低未来系统崩溃的风险。而通过遵照最佳实践 ，我们能确保 优化的页面加载、性能以及可维护的代码。 原文出处 ：http//coderlmn.github.io/code-standards 本文档使用 看云 构建 - 3 - 总体指导原则 总体指导原则 前端开发核心思想 1. 表现、内容和行为的分离 2. 标记应该是结构良好、语义正确 以及 普遍合法 。 3. Javascript应该起到渐进式增强用户体验的作用 。 总体原则 缩进 对于所有编程语言 ，我们要求缩进必须是软tab （用空格字符 ）。在你的文本编辑器里敲 Tab 应该等于 4 个空格 。 可读性 vs 压缩 对于维护现有文件 ，我们认为可读性比节省文件大小更重要。大量空白和适当的ASCII艺术都是受鼓励 的。任何开发者都不必故意去压缩HTML或CSS ，也不必把Javascript代码最小化得面目全非。 我们会在服务器端或build过程中自动最小化并gzip压缩所有的静态客户端文件 ，例如CSS和JS。 本文档使用 看云 构建 - 4 - 标记 标记 HTML5 模板 Doctype 字符编码 标记的总体原则 属性加引号 任何网页的首要组件就是基于标签的HTML标记语言。超文本标记语言 (HTML) 曾有一段不堪回首的历 史 ，但最近几年已经是皇 上 回 宫了。经过对它基于XML的XHTML变种的漫长试验之后 ，整个行业终于 接受了HTML代表web的未来这一事实。 标记定义了文档的结构和纲要 ，并提供结构化的内容。除了最基本的概念 （例如标题、段落和列表 ）之 外 ，标记并不是用来定义页面上内容的外观和体验的。HTML的表现属性都已经被废弃了 ，有关样式的定 义应该被包含在 样式表 中。 HTML5 HTML5 是HTML 和 XHTML 的新版本。 在 HTML5 草案 的规范中定义了可以用 HTML 和 XML编写的单 一的语言 ，意在解决在之前HTML的迭代中发现的一些问题并满足web应用的需求 ，这是以前HTML没有 充分覆盖到的领域 （来源 ） 。 在合适的时候 ，我们会使用HTML5 Doctype 和 HTML5 特性。 我们会对照 W3C 校验器 测试我们的标记 ，以确保标记是结构良好的。我们的目标并不是100%的合法代 码 ，但是校验肯定对于编写可维护的站点以及调试代码都大有帮助。 Isobar公司不保证代码都是100%合 法 ，而是确信跨浏览器体验会相当一致 。 模板 对HTML5文件 ，我们使用 H5BP 针对我们自己项目需求修改的一个分支。 你也可以从这里Fork H5BP。 Doctype 标记中必须总是使用合适的Doctype来指示浏览器触发标准模式. 永远要避免Quirks模式。 HTML5特别好的一个方面就是它简化了Doctype需要的代码。无意义的属性被弃用了 ，DOCTYPE 声明 也被显著地简化了。另外 ，也无需再用 CDATA 对内联JavaScript代码进行转义 ，而这在此之前为了让 XHTML符合XML的严密性是必需的。 HTML5 Doctype 本文档使用 看云 构建