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