前端系统开发说明书.docVIP

. .. . .可修编. 前端系统开发说明书 一般规那么 应用在 HTML, JavaScript 和 CSS上的通用规那么。 文件、资源命名 ? 以可读性而言，中划线用来分隔文件名 ? 确保文件命名总是以字母开头而不是数字 ? 特殊含义的文件，需要对文件增加前后缀或特定的扩展名〔比方 .min.js, .min.css〕，抑或一串前缀〔比方 all.main.min.css〕。使用点分隔符来区分这些在文件名中带有清晰意义的元数据。 文本缩进 一次缩进4个空格。 代码检查 对于前端JavaScript这种比拟宽松自由的编程语言来说，严格遵循编码规和格式化风格指南极为重要。前端开发人员需严格遵循开发规，并且使用自动代码检查工具〔如JSHint〕降低语法错误，确保代码正确执行。JSHint是一款检查JS代码规与否的工具，用来检查JS代码的规性。它提供了配置的方法，来检查不符合开发规的错误。 黄金定律 永远遵循同一套编码规 -- 可以是这里列出的，也可以是你自己总结的。不管有多少人共同参与同一工程，一定要确保每一行代码都像是同一个人编写的。 HTML 规 文档类型 HTML5 docType 使用 HTML5的文档类型申明： !DOCTYPE html html5不基于SGML,因此不需要对DTD进展引用，但是需要doctype来规浏览器的行为〔让浏览器按照他们应该的方式来运行〕而HTML4.01基于SGML，所以需要对DTD进展引用，才能告知浏览器文档所使用的文档类型。 media 标签 meta name=viewport content=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no meta name=format-detection content=telephone=no / // 制止数字识自动别为 大局部 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大局部 5.5 寸安卓机器〔比方说三星 Note〕的 viewport 宽为 400，iPhone 6 plus 上是 414px。 语言属性〔Language attribute〕 强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规那么等等。更多关于 lang 属性的知识可以从此规中了解。 HTML 语言代码参考手册上的文章可以获得更多有用的信息。 字符编码 通过明确声明字符编码，能够确保浏览器快速并容易的判断页面容的渲染方式。这样做的好处是，可以防止在 HTML 中使用字符实体标记〔character entity〕，从而全部与文档编码一致〔一般采用 UTF-8 编码〕。 IE兼容模式 IE 支持通过特定的?标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否那么最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。 meta -equiv=“X-UA-patible〞 content=“IE=edge〞 IE=edge IE=11 IE=EmulateIE11 IE=10 IE=EmulateIE10 IE=9 IE=EmulateIE9 IE=8 IE=EmulateIE8 注释 !-- header -- 引入CSS和JAVASCRIPT 根据 HTML5 规，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。 语法 属性顺序 【参考】HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。 class id, name data-* src, for, type, href title, alt aria-*, role class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当慎重使用〔例如，页面的书签〕，因此排在第二位。 语义化标签 根据元素〔有时称作“标签〞〕其被创造出来时的初始意义来使用它,有根据有目的地使用 HTML 元素，对于可访问性、代码重用、代码效率来说意义重大。 多媒体回溯: 对页面上的媒体而言，像图片、视频、canvas 动画等，要确保其有可替代的接入接口 关注点别离: web 中的关注点包括信息