(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{220:function(s,a,e){"use strict";e.r(a);var t=e(0),n=Object(t.a)({},function(){var s=this,a=s.$createElement,e=s._self._c||a;return e("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[e("h1",{attrs:{id:"开发规范"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#开发规范","aria-hidden":"true"}},[s._v("#")]),s._v(" 开发规范")]),s._v(" "),e("p",[s._v("编码规范好比协议，有了 "),e("code",[s._v("Http")]),s._v("、"),e("code",[s._v("TCP")]),s._v(" 等各种协议，计算机之间才能有效地通信，同样的，有了一致的编码规范，开发人员之间才能有效地合作")]),s._v(" "),e("p",[s._v("为提高软件开发质量，降低开发周期，增强代码的可重用性和易读性，使软件便于维护及移交，开发人员间便于交流和协作，本规范适用于前端团队，以作参考。")]),s._v(" "),e("div",{staticClass:"custom-block danger"},[e("p",{staticClass:"custom-block-title"},[s._v("注意")]),s._v(" "),e("p",[s._v("开发规范执行情况将会不定期进行 "),e("strong",[s._v("Code Review")]),s._v("，不符合规范的内容必须进行整改。")])]),s._v(" "),e("h2",{attrs:{id:"文件与目录命名规范"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#文件与目录命名规范","aria-hidden":"true"}},[s._v("#")]),s._v(" 文件与目录命名规范")]),s._v(" "),e("p",[s._v("前端开发规范应用于 Web 网站、管理平台、移动端内嵌、微信小程序等范围，即使是本文档项目（"),e("code",[s._v("doc-press")]),s._v("）中的文件命名，依然建议应用本规范")]),s._v(" "),e("p",[s._v("命名规范优秀的行业范例可参考 "),e("a",{attrs:{href:"https://github.com/vuejs/vue",target:"_blank",rel:"noopener noreferrer"}},[s._v("Vuejs"),e("OutboundLink")],1),s._v(" 和 "),e("a",{attrs:{href:"https://github.com/facebook/react",target:"_blank",rel:"noopener noreferrer"}},[s._v("Reactjs"),e("OutboundLink")],1),s._v(" 的源码")]),s._v(" "),e("h3",{attrs:{id:"目录命名"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#目录命名","aria-hidden":"true"}},[s._v("#")]),s._v(" 目录命名")]),s._v(" "),e("p",[s._v("业务功能结构示例")]),s._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[s._v("├─用户管理\n  └─授权管理\n      ├─角色管理\n      └─用户角色绑定\n")])]),s._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[s._v("1")]),e("br"),e("span",{staticClass:"line-number"},[s._v("2")]),e("br"),e("span",{staticClass:"line-number"},[s._v("3")]),e("br"),e("span",{staticClass:"line-number"},[s._v("4")]),e("br")])]),e("p",[s._v("目录命名示例")]),s._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[s._v("✖\n├─userManage\n   └─userAuthManage\n      ├─RoleManage\n      └─userRoleBind\n\n✔\n├─user\n   └─auth\n      ├─role\n      └─user"),e("span",{pre:!0,attrs:{class:"token operator"}},[s._v("-")]),s._v("role\n")])]),s._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[s._v("1")]),e("br"),e("span",{staticClass:"line-number"},[s._v("2")]),e("br"),e("span",{staticClass:"line-number"},[s._v("3")]),e("br"),e("span",{staticClass:"line-number"},[s._v("4")]),e("br"),e("span",{staticClass:"line-number"},[s._v("5")]),e("br"),e("span",{staticClass:"line-number"},[s._v("6")]),e("br"),e("span",{staticClass:"line-number"},[s._v("7")]),e("br"),e("span",{staticClass:"line-number"},[s._v("8")]),e("br"),e("span",{staticClass:"line-number"},[s._v("9")]),e("br"),e("span",{staticClass:"line-number"},[s._v("10")]),e("br"),e("span",{staticClass:"line-number"},[s._v("11")]),e("br")])]),e("p",[s._v("目录的命名，应尽可能结合上下、父子结构进行上下文信息描述，目录名自身应尽可能简洁直观。文本上使用全小写字母，有词组的情况使用 “-” 符号隔开")]),s._v(" "),e("h4",{attrs:{id:"为什么要使用小写？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#为什么要使用小写？","aria-hidden":"true"}},[s._v("#")]),s._v(" 为什么要使用小写？")]),s._v(" "),e("ul",[e("li",[e("p",[s._v("易用性/可读性"),e("br"),s._v("\n小写文件名通常比大写文件名更易读，比如 "),e("code",[s._v("accessibility.txt")]),s._v(" 就比 "),e("code",[s._v("ACCESSIBILITY.TXT")]),s._v(" 易读。即使使用驼峰命名法，如 "),e("code",[s._v("UserRoleBind")]),s._v(" 或 "),e("code",[s._v("userRoleBind")]),s._v(" 不如 "),e("code",[s._v("user-role-bind")]),s._v(" 的可读性高")])]),s._v(" "),e("li",[e("p",[s._v("兼容性"),e("br"),s._v("\n不同操作系统对于大小兼容程度不一样，为了保证编译、部署后的内容在所有平台上顺利部署，目录名也应当使用小写")])]),s._v(" "),e("li",[e("p",[s._v("行业惯例"),e("br"),s._v("\n诸如 "),e("code",[s._v("Java")]),s._v("、"),e("code",[s._v(".net")]),s._v("、"),e("code",[s._v("C")]),s._v(" 等著名语言的包路径均为小写，行业巨头的良好规范也逐渐成为行业里约定俗成的规范")])])]),s._v(" "),e("h3",{attrs:{id:"文件命名"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#文件命名","aria-hidden":"true"}},[s._v("#")]),s._v(" 文件命名")]),s._v(" "),e("p",[s._v("文件名的规则在遵循目录命名的规则作为基础规则，但文件名的命名规则相比目录，略有不同")]),s._v(" "),e("h4",{attrs:{id:"插件-组件-页面"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#插件-组件-页面","aria-hidden":"true"}},[s._v("#")]),s._v(" 插件/组件/页面")]),s._v(" "),e("p",[s._v("单文件组件、插件/组件主体、页面的文件名应该始终是单词大写开头 (PascalCase)")]),s._v(" "),e("p",[s._v("单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而，混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题。")]),s._v(" "),e("p",[e("strong",[s._v("Vuejs")]),s._v(" 官方文档中，对于文件命名也有相应的 "),e("a",{attrs:{href:"https://cn.vuejs.org/v2/style-guide/#%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%E6%96%87%E4%BB%B6%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90",target:"_blank",rel:"noopener noreferrer"}},[s._v("指导规范"),e("OutboundLink")],1)]),s._v(" "),e("p",[s._v("文件命名示例")]),s._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[s._v("✖\ncomponents\n  └─grid\n    ├─grid"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("sass\n    ├─headRow"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("vue\n    ├─bodyrow"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("vue\n    ├─grid"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("vue\n    └─index"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("js\n\n✔\ncomponents\n  └─grid\n    ├─grid"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("sass\n    ├─HeadRow"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("vue\n    ├─BodyRow"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("vue\n    ├─Grid"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("vue\n    └─index"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("js\n")])]),s._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[s._v("1")]),e("br"),e("span",{staticClass:"line-number"},[s._v("2")]),e("br"),e("span",{staticClass:"line-number"},[s._v("3")]),e("br"),e("span",{staticClass:"line-number"},[s._v("4")]),e("br"),e("span",{staticClass:"line-number"},[s._v("5")]),e("br"),e("span",{staticClass:"line-number"},[s._v("6")]),e("br"),e("span",{staticClass:"line-number"},[s._v("7")]),e("br"),e("span",{staticClass:"line-number"},[s._v("8")]),e("br"),e("span",{staticClass:"line-number"},[s._v("9")]),e("br"),e("span",{staticClass:"line-number"},[s._v("10")]),e("br"),e("span",{staticClass:"line-number"},[s._v("11")]),e("br"),e("span",{staticClass:"line-number"},[s._v("12")]),e("br"),e("span",{staticClass:"line-number"},[s._v("13")]),e("br"),e("span",{staticClass:"line-number"},[s._v("14")]),e("br"),e("span",{staticClass:"line-number"},[s._v("15")]),e("br"),e("span",{staticClass:"line-number"},[s._v("16")]),e("br"),e("span",{staticClass:"line-number"},[s._v("17")]),e("br")])]),e("h2",{attrs:{id:"预处理样式"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#预处理样式","aria-hidden":"true"}},[s._v("#")]),s._v(" 预处理样式")]),s._v(" "),e("p",[s._v("对于 CSS 样式预处理方案，比较流行的有 "),e("code",[s._v("SASS/SCSS")]),s._v("、"),e("code",[s._v("LESS")]),s._v(" 和 "),e("code",[s._v("Stylus")]),s._v("，大体上的使用方式类似，区别在于功能的多少与扩展的能力。")]),s._v(" "),e("p",[s._v("综合各方面考虑，开发规范如下（微信小程序不在讨论范围）")]),s._v(" "),e("ul",[e("li",[s._v("前端项目统一使用 "),e("code",[s._v("SASS/SCSS")]),s._v(" 开发样式预处理内容")]),s._v(" "),e("li",[e("code",[s._v("web-open-platform")]),s._v(" 项目使用 "),e("code",[s._v("Stylus")])])]),s._v(" "),e("h3",{attrs:{id:"样式抽象"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#样式抽象","aria-hidden":"true"}},[s._v("#")]),s._v(" 样式抽象")]),s._v(" "),e("p",[s._v("一个工程通常会有大量的页面、组件和插件，功能虽不同，但风格必须统一。对于主题风格部分的内容，必须提取到专用样式文件中进行维护。类似的功能或结构的样式内容在多处独立维护，这是冗余和低效的，多人协同开发时须杜绝该现象发生，在进行样式定义之前应互相询问是否存在重复定义的情况。")]),s._v(" "),e("p",[e("strong",[s._v("BTW")]),e("br"),s._v("\nCSS 样式预处理，只使用最基本的结构嵌套功能是不够的，了解和使用高级特性才是提高效率和效果的最佳实践")])])},[],!1,null,null,null);a.default=n.exports}}]);