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

前端代码规范 阿?前端规范_阿?前端开发规范 Front Standard Guide 前端 JS 项?开发规范 规范的?的是为了编写?质量的代码，让你的团队成员每天得?情都是愉悦的，?家在?起是快乐的 。引?《阿?规约》的开头?段： 现代软件架构的复杂性需要协同开发完成，如何?效地协同呢？?规矩不成?圆，?规范难以协同，?如，制订交通法规表?上是要限制?车权，实际上是保障公众的??安全，试想如果没有限速，没有红绿灯，谁还敢上路?驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，?是限制过度个性化，以?种普遍认可的统??式?起做事，提升协作效率，降低沟通成本。代码的字??间流淌的是软件系统的?液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。 ?、编程规约 (?)命名规范 项?命名 全部采??写?式， 以中划线分隔。正例：mall-management-system 反例：mall_management-system / mallManagementSystem ?录命名 全部采??写?式， 以中划线分隔，有复数结构时，要采?复数命名法， 缩写不?复数 正例： 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 JS、CSS、SCSS、HTML、PNG ?件命名 全部采??写?式， 以中划线分隔 正例： render-dom.js / signup.css / index.html / company-logo.png 反例： renderDom.js / UserManagement.html 命名严谨性 代码中的命名严禁使?拼?与英?混合的?式，更不允许直接使?中?的?式。 说明：正确的英?拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼?命名?式也要避免采? 正例：henan / luoyang / rmb 等国际通?的名称，可视同英?。 反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3 杜绝完全不规范的缩写，避免望?不知义： 反例：AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成 condi，此类随意缩写严重降低了代码的可阅读性。 (?)HTML 规范 （ Vue Template 同样适?） HTML 类型 推荐使? HTML5 的?档类型申明： . （建议使? text/html 格式的 HTML。避免使? XHTML。XHTML 以及它的属性，?如 application/xhtml+xml 在浏览器中的应??持与优化空间都?分有限）。 规定字符编码 IE 兼容模式 规定字符编码 doctype ?写正例： !DOCTYPE html !DOCTYPE html html head meta http-equiv=X-UA-Compatible content=IE=Edge / meta charset=UTF-8 / titlePage title/title /head body img src=images/company-logo.png alt=Company / /body /html 缩进 缩进使? 2 个空格（?个 tab） 嵌套的节点应该缩进。 分块注释 在每?个块状元素，列表元素和表格元素后，加上?对 HTML 注释。注释格式 ``` 语义化标签 header/headerfooter/footerHTML5 中新增很多语义化标签，所以优先使?语义化标签，避免?个页?都是 div 或者 p 标签 header/header footer/footer 反例 div div p/p /div 引号 使?双引号( ) ?不是单引号(’ ) 。正例： `` 反