阿里前端规范-阿里前端开发规范.pdf

阿⾥前端规范_ 阿⾥前端开发规范 前前端端代代码码规规范范 Front Standard Guide 前前端端 JS 项项 ⽬⽬开开发发规规范范 规范的⽬的是为了编写 质量的代码，让你的团队成员每天得⼼情都是愉悦的，⼤家在⼀起是快乐的。 引⾃ 《阿⾥规约》的开头⽚段 ： 现代软件架构的复杂性需要协同开发完成，如何 效地协同呢？⽆规矩不成⽅圆，⽆规范难以协同，⽐如，制订交通法规表⾯上是要限 制⾏车权，实际上是保障公众的⼈⾝安全，试想如果没有限速，没有红绿灯，谁还敢上路⾏驶。对软件来说，适当的规范和标准绝不是消灭 代码内容的创造性、优雅性，⽽是限制过度个性化，以⼀种普遍认可的统 ⼀⽅式⼀起做事，提升协作效率，降低沟通成本。代码的字⾥⾏间 流淌的是软件系统的⾎液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。 ⼀⼀、、编编程程规规约约 (⼀⼀)命命 名名规规范范 1.1.1 项项 ⽬⽬命命 名名 全部采⽤⼩写⽅式， 以中划线分隔。 正例 ：mall-management-system 反例 ：mall_ management-system / mallManagementSystem 1.1.2 ⽬⽬录录命命 名名 全部采⽤⼩写⽅式， 以中划线分隔，有复数结构时，要采⽤复数命名法， 缩写不⽤复数 正例 ： scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc 反例 ： script / style / demo_scripts / demoStyles / imgs / docs 【特殊】VUE 的项 ⽬中的 components 中的组件 ⽬录，使⽤ kebab-case 命名 正例 ： head-search / loading / authorized / notice-icon 反例 ： HeadSearch / PageLoading 【特殊】VUE 的项 ⽬中的除 components 组件 ⽬录外的所有 ⽬录也使⽤ kebab-case 命名 正例 ： one / shopping-car / user-management 反例 ： ShoppingCar / UserManagement 1.1.3 JS、、CSS、、SCSS、、HTML、、 PNG ⽂⽂件件命命 名名 全部采⽤⼩写⽅式， 以中划线分隔 正例 ： render-dom.js / signup.css / inde .html / company-logo.png 反例 ： renderDom.js / UserManagement.html 1.1.4 命命 名名严严谨谨性性 代码中的命名严禁使⽤拼⾳与英⽂混合的⽅式，更不允许直接使⽤中⽂的⽅式。 说明：正确的英⽂拼写和语法可以让阅读者易于理解，避 免歧义。注意，即使纯拼⾳命名⽅式也要避免采⽤ 正例 ：henan / luoyang / rmb 等国际通⽤的名称，可视同英⽂。 反例 ：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3 杜杜绝绝完完全全不不规规范范的的缩缩写写，，避避免免望望⽂⽂不不知知义义 ：： 反例 ：AbstractClass “缩写”命名成 AbsClass ；condition “缩写”命名成 condi，此类随意缩写严重降低了代码的可阅读性。 (⼆⼆)HTML 规规范范 （（Vue Template 同同样样适适⽤⽤）） 1.2.1 HTML 类类型型 推荐使⽤ HTML5 的⽂档类型申明： . （建议使⽤ text/html 格式的 HTML。避免使⽤ XHTML。XHTML 以及它的属性，⽐如 application/xhtml+xml 在浏览器中的应⽤⽀持 与优化空间都⼗分有限）。 规定字符编码 IE 兼容模式 规定字符编码 doctype ⼤写 正例 ： !DOCTYPE html html head meta http-equiv=X-UA-Compatible content=IE=Edge / meta charset=UT F-8 / titlePage title/title /head