Front-end team code unified standard best practice

Principles of high-quality code writing

Increase code readability - clear comments, semantic naming
Improve code reuse—maintenance of public components and private components
When designing public components, it is necessary to consider keeping the interface flexible and highly modular. Multiple reuse is not allowed to be easily modified, and REAME.md needs to be provided when there is a special person for maintenance. API documentation and demo demos using instructions or specifications are work that tests ability and experience.
Reduce redundancy and simplify code as much as possible
In JavaScript, put all components in one file, and move closer to "simplification" while "convenient to load and use" through the smallest possible code and excellent algorithms; The UI component library divides the components into different files according to their functions, and only loads the relevant files in the page according to the requirements. This on-demand loading loader method is user-friendly, "simplified" and closer to "easy to load and use"
Sharpening knives and cutting firewood by mistake - the early conception is very important The
main content of the conception: the formulation of specifications, the design of public components, and the technical solutions for complex functions.
Team communication
, technical sharing and codeReview

Basic Specifications

For front-end JavaScript, a relatively liberal programming language, strict adherence to coding conventions and formatting style guidelines is extremely important. Common rules for HTML, JavaScript and CSS.

file/resource naming

In terms of readability, use 小写字母命名or 小写字母与下划线组合命名file name and the folder where the file is located; it is forbidden to use unreadable and too general naming methods such as form1, form2, detail, etc. for components, and try to use semantic, business or function-related words to Named (eg document, file_upload).
Image static resource names, use 小写字母命名or 小写字母与下划线组合命名(eg imgbg.jpg, home_top_img.png).
Make sure that filenames always start with 字母开头and not numbers.
特殊含义的文件，需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css, .config.json），抑或一串前缀（比如 all.main.min.css）。使用点分隔符来区分这些在文件名中带有清晰意义的元数据。

文本缩进

一次缩进 2 个空格

标签语义化

标签语义化，即让标签有自己的含义。根据元素（有时称作“标签”）其被创造出来时的初始意义来使用它。好处：有根据有目的地使用 HTML 元素，对于可访问性、代码重用、代码效率来说意义重大，同时有利于搜索引擎优化（SEO）。打个比方，用 header 元素来定义头部标题，p 元素来定义文字段落，用 a 元素来定义链接锚点。比如，title, header, main, footer, section, aside, article,ul, li

    <title>页面标题</title>
    <main>页面主要内容</main>
    <section>定义文档中的节（section、区段）</section>
    <aside>定义侧边栏、相关链接列表等</aside>
    <p>一行文字</p>
    <span>一行文字</span>
    <hn>：h1~h6，分级标题
      <header>定义头部包含logo,导航等</header>
      <footer>页脚</footer>
    </hn>
复制代码

缩写属性

比如 font 字体缩写，按顺序 font-style/font-variant/font-weight/font-size/line-height/font-family；background、box-shadow 等缩写

    font: italic bold 12px/20px '微软雅黑'；

    background: #00FF00 url(bgimage.gif) no-repeat fixed top;
复制代码

margin, padding, 等省略“0”值后面的单位。例如：

// good
margin: 0;

// not good
margin: 0px;
复制代码

声明顺序

为了保证更好的可读性和可扫描性，样式声明应该遵循以下顺序：

结构性属性:

a. display
b. position, left, top, right 等
c. overflow, float, clear 等
d. margin, padding
表现性属性：

a. background, border 等.

    /* position 定位 > 盒模型 > 其他属性 */
    .ele {
      /* position 定位 */
      position: absolute;
      left: 10px;
      top: 10px;
      z-index: 1;

      /* 盒模型 */
      display: block;
      overflow: hidden;
      float: left;
      width: 100px;
      height: 100px;
      margin: 20px auto;
      padding: 0 10px;

      /* 排版 */
      font: normal 13px “Helvetica Neue”, sans-serif;
      line-height: 1.5;
      color: #333;
      text-align: center;

      /* 可见属性 */
      background-color: #f5f5f5;
      border: 1px solid #e5e5e5;
      border-radius: 3px;

      /* 不影响布局的属性 */
      opacity: 1;
    }
复制代码

前端项目编码规范

开发工具配置规范统一。
首先，请下载使用vscode编辑器，其次，其相关插件及编码配置请手动安装推荐的相关插件实现统一配置，比如 VsCode Snippets 代码片段自动补全文档，优化代码提高编程速度。
项目模版内配置基本的规范统一。
首先遵循eslint基本语法规范，执行npm run lint， --fix能自动检测并修复。
代码提交规范。
1. 每次代码提交之前，请确保无任何语法错误、功能性错误等再提交；
2. 每次代码提交之时，请写清楚注释, 修改的主要功能一一列出，如git commit -am"1.修改用户管理-新增功能 2. 优化冗余代码"；
Js 代码块引号类型为单引号 ''
生产环境下禁止代码含断点 debugger 提交
总是使用 ===精确的比较操作符，而少使用“==”，避免强类型转换带来的困扰
js 代码尽量使用小驼峰命名， js 事件方法名，多以动词命名，且选取有意义的词，并写清必要的注释。允许的变量命名和事件方法名如下：

    const max = 20;
    let myFavoriteColor = [];
    const _myFavoriteColor = '#112C85';
    /**
     * 监听input值变化
     * @param val String input输入值
     * @param oldVal String input原来旧值
     * */
    function onInputChangeVal(val, oldVal) {}
复制代码

不能含有未使用的变量, 未使用请及时删除
不能含有未使用的组件, 未使用请及时删除
不能含有无用的代码块, 未使用请及时删除

同一个项目内的文件结构尽量一致，如

样式预编译严格使用 less，避免同时使用多种，造成开发维护困扰。
文件命名、静态资源名, 请使用纯小写字母或小写字母和下划线组合。

    文件夹或文件(组件)命名：home, layout, file_upload, zixun, zx_service etc.
    静态资源名：imgbg.jpg, home_top_img.png, base.css etc.
复制代码

id/class 类名，css 命名组织结构这里采用 BEM 规则。请使用纯小写字母或小写字母和下划线组合。

BEM 规则: block_element--modifier 语法
Block 块级元素，容器类，如.form .header .top .main；
Element 主要是以 1 个下划线接在 block 之后，来表示从属关系；没有对同一页上其他 blocks/elements 的依赖，如.form_input;
Modifier 修饰符，主要是以两个中短线连接，block 或 element 上的标记，使用他来改变外观或行为。如：disabled,highlighted,checked,fixed。

    布局容器类：
    #header, #main, #footer,
    .l_left, .l_right, .l_main, .l_list, .l_list_item
    模块类：
    .module, .mod_list, .mod_title, .mod_bottom, .dialog, .dialog_title,
    状态类：
    .is_collapsed
    .is_clicked
    .is_error
    .is_success
    .is_hidden
复制代码

    /* BEM规则: */
    .block {
    }
    .block_element {
    }
    .block_element--modifier {
    }

    .form {
    }
    .form_input {
    }
    .form_input--checked {
    }

    /* Modifier修饰符: */
    /* block--modifier_value 语法 */
    .button--state_success {
    }
    .form--theme_xmas {
    }
    .form--simple {
    }
    .input--disabled {
    }
复制代码

尽量使用公用的变量或已封装的混入样式来开发，方便后期维护，公用的文件尽量不要改动。

增加 proxy 本地代理规范，参见 vue.config.js

proxy: {
    '/api': {
        target: 'http://192.168.1.1:8080', // 域名+端口号，不能加路径
        changeOrigin: true, // 发送请求头中的host会设置成target
        pathRewrite: {}
    }
}
复制代码

联调后台接口状态码规范

常用状态码

CODE_MESSAGE: {
  200: '成功',
  304: '缓存',
  401: '尚未登录授权，请登录',
  403: '禁止访问，请联系管理员',
  404: '请求地址出错: 请联系管理员',
  500: '查找失败, 服务器发生错误，或数据异常',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。',
};
复制代码

UI 规范要求

尽量 100%高保真还原 UI 设计图及保证交互流畅

常用 vue 组件规范

Vue 组件命名

组件的命名需遵从以下原则：

有意义的 : 不过于具体，也不过于抽象
简短 : 2 到 3 个单词
具有可读性 : 以便于沟通交流
小写字母命名

如：commonheader.vue， common_header.vue

组件结构化

按照一定的结构组织，使得组件便于理解。 vue 组件里，根据其生命周期依次组织代码。执行顺序：name>mixins>props>data>computed>components>watch>methods>created>mounted>unmounted

    <template>
      <div class="wrapper"></div>
    </template>
    <script>
    import HelloWorld from './components/helloworld.vue';

    export default {
      name: 'LayoutDefault',
      mixins: [],
      props: {},
      data() {
        return {
          leftDrawerOpen: false,
        };
      },
      computed: {},
      components: {
        HelloWorld,
      },
      watch: {},
      methods: {
        // 获取初始化数据
        getInitData() {},
        // 新增功能
        handleAdd() {},
        // 监听删除
        onDelete() {},
        /**
         * 监听input值变化
         * @param val String input输入值
         * @param oldVal String input原来旧值
         * */ 
        onInputChangeVal(val, oldVal) {}
      },
      created() {},
      mounted() {},
      unmounted() {},
    };
    </script>
    <style lang="scss" scoped></style>
复制代码

使用单文件 .vue 文件格式来组件代码, 即 HTML,js,css 同一个文件内。
按首字母排序 properties, data, computed, watch 和 methods 使得这些对象内的属性便于查找。
一个清晰、组织有序的组件，使得组件易于阅读和理解。(name; extends; props, data and computed; components; watch and methods; lifecycle methods 等.);
合理的 CSS 结构，这里采用 BEM 规则，便于模块化、可复用，可以提供给我们优良的代码结构和易于识别的术语。请使用纯小写字母或小写字母和下划线组合。 BEM规则: block_element--modifier语法
js变量和事件方法命名请使用小驼峰命名。
js事件方法名，多以动词命名, 且选取有意义的词, 并写清必要的注释, 如上所示。

最后

以上为个人总结的一些涉及前端团队统一规范的一些心得，有问题或者有待改进的点望各位大佬不吝指点