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