前段开发规范

一、通用书写规范

1. 基本原则：结构、样式、行为分离

• 尽量确保文档和模板只包含 HTML 结构，样式都放到 css 样式表里，行为都放到 js 脚本里
• 标记应该是结构良好、语义正确。
• Javascript应该起到渐进式增强用户体验的作用。

2.文件/资源命名

• 在 web 项目中，使用连字符（-）来分隔文件名，可以提高可读性。例如：order-detail-view.js。确保不用大写字母开头，不要驼峰命名。

3. 写注释

• 写注释时请一定要注意：写明代码的作用，重要的地方一定记得写注释。 没必要每份代码都描述的很充分，它会增重HTML和CSS的代码。这取决于该项目的复杂程度。

二.HTML规范

通用约定

标签

• 自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；
• 可选的闭合标签（closing tag），需闭合 ( 例如：
或 )；
• 尽量减少标签数量；

Class 与 ID

• class 应以功能或内容命名，不以表现形式命名；
• class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
• 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；

<!-- Not recommended -->
<div class="item-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="item-hook" class="sidebar content-wrapper"></div>

嵌套 &lta> 不允许嵌套 &ltdiv> 这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如 &lta> 不允许嵌套 &lta>。 严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。 语义嵌套约束

• &ltli> 用于 &ltul> 或 **&ltol>**下；
• &ltdd>, **&ltdt>用于&ltdl>**下；
• &ltthead>,&lttbody>, &lttfoot>, &lttr>, &lttd> 用于lttable> 下；

三.js规范

1.通用约定

** 注释原则 **

• As short as possible（如无必要，勿增注释）：尽量提高代码本身的清晰性、可读性。
• As long as necessary（如有必要，尽量详尽）：合理的注释、空行排版等，可以让代码更易阅读、更具美感。

** 命名 **

• 变量, 使用驼峰命名。

let thisIsDome = {};

私有属性、变量和方法以下划线 _ 开头。

let _privateMethod = {};

常量, 使用全部字母大写。

let MAXCOUNT = 10;

** 枚举变量 使用 Pascal 命名法。 枚举的属性， 使用全部字母大写，单词间下划线分隔的命名方式。**

let TargetState = {
    READING: 1,
    READED: 2,
    APPLIED: 3,
    READY: 4
};

** boolean 类型的变量使用 is 或 has 开头。**

let isReady = false;
let hasMoreCommands = false;

** 二元和三元操作符 **

• 操作符始终写在前一行, 以免分号的隐式插入产生预想不到的问题。

let x = a ? b : c;
let y = a ?
    longButSimpleOperandB : longButSimpleOperandC;
let z = a ?
        moreComplicatedB :
        moreComplicatedC;

• 操作符也是如此：

let x = foo.bar().
    doSomething().
    doSomethingElse();

2.函数设计

函数设计基本原则：低耦合，高内聚。（假如一个程序有50个函数；一旦你修改其中一个函数，其他49个函数都需要做修改，这就是高耦合的后果。）

** 函数长度 **

• [建议] 一个函数的长度控制在 50 行以内。 将过多的逻辑单元混在一个大函数中，易导致难以维护。一个清晰易懂的函数应该完成单一的逻辑单元。复杂的操作应进一步抽取，通过函数的调用来体现流程。 特定算法等不可分割的逻辑允许例外。

四 Vue规范参考

Vue规则说明

详细说明可查看 Vue官方风格指南

1.目录构建规范

[toc] ── project-name ├── public 项目公共目录 │ ├── favicon.ico Favourite 图标 │ └── index.html 页面入口 HTML 模板 ├── src 项目源码目录 │ ├── main.js 入口js文件 │ ├── App.vue 根组件 │ ├── api 把所有请求数据的接口，按照模块在单独的JS文件中 │ │ ├── home.js 首页接口 │ │ ├── detail.js 详情页接口，等等 │ │ ··· │ ├── assets 静态资源目录，公共的静态资源，图片，字体等 │ │ ├── fonts 字体资源 │ │ ├── images 图片资源 │ │ ··· │ ├── common 公共脚本，样式，配置，等动态信息 │ │ ├── js 公共脚本 │ │ │ │── utlis.js 公共 JS 工具函数 │ │ │ │── config.js 公共配置 │ │ │ ··· │ │ ├── style 公共样式，可以是各种预处理语言 │ │ │ │── index.css 样式主文件 │ │ │ │── reset.css 重置样式 │ │ │ ··· │ │ ··· │ ├── components 公共组件目录 │ │ ├── confirm 弹框组件 │ │ │ └── index.vue │ │ ├── scroll 局部内容滚动组件 │ │ │ └── index.vue │ │ ··· │ ├── http 封装的 HTTP 请求方法 │ │ ├── axios.js Axios 的封装 │ │ ├── jsonp.js JSONP 的封装 │ │ ··· │ ├── store 数据中心 │ │ ├── state.js state 数据源，数据定义 │ │ ├── mutations.js 同步修改 state 数据的方法定义 │ │ ├── mutation-types.js 定义 Mutations 的类型 │ │ ├── actions.js 异步修改 state 数据的方法定义 │ │ ├── getters.js 获取数据的方法定义 │ │ └── index.js 数据中心入口文件 │ ├── routes 前端路由 │ │ └── index.js │ └── views 页面目录，所有业务逻辑的页面都应该放这里 │ ├── home 应用首页 │ │ └── index.vue │ ··· ├── .env.development Vue 开发环境的配置 ├── .env.production Vue 生成环境的配置 ├── .eslintrc.js Eslint 配置文件 ├── .gitignore Git 忽略文件 ├── package.json 包依赖文件 ├── package-lock.json 依赖包版本管理文件 ├── README.md 项目介绍 ├── vue.config.js vue/cli 项目脚手架配置 ···

2.src 文件说明

• src/api 模块的请求方法。应该参考 src/views 中的直接子文件夹的结构，做映射。
• src/assets 项目的静态资源文件。虽然是静态文件(图片，字体，等)，但是还是经过 webpack 处理会好一些，因为有些比较小的文件被打包到文件，减少请求和压缩第三方包。这个模块的文件，如果还需要扩展，一个单词作为文件夹名字！保持简洁性。
• src/common 公共的动态的脚本、样式。在实际中，样式可能是各种预处理语言写的，请自行组织目录结构。
• src/components 公共组件。放置项目中抽象的基础和业务组件。你应该为每个组件都单独建一个文件夹，以做好组件之间的隔离，并且有一个默认的文件：index.vue 文件，以便引入组件时少写几个字母。默认组件中的文件是一个最小的单位，不应该有依赖其他组件，或操作 - state 状态等行为。
• src/http 主要是关于请求方法的封装。建议开发过程中不要修改，因为会影响到全局。
• src/store 数据中心。这部分内容比较多，独立出来，详情参考：数据中心
• src/router 页面路由。默认所有路由映射写在一个文件，如果需要路由模块化，请自行组织。
• src/views 所有业务逻辑的页面

组件/实例的选项顺序

• name
• components / directives / filters
• extends / mixins
• model / props / propsData
• data / computed
• watch / 生命周期钩子
• methods

<script> 
  export default {
    name: 'ExampleName',  // 这个名字推荐：大写字母开头驼峰法命名。
    props: {},            // Props 定义。
    components: {},       // 组件定义。
    directives: {},       // 指令定义。
    mixins: [],           // 混入 Mixin 定义。
    data () {              // Data 定义。
      return {
        dataProps: ''     // Data 属性的每一个变量都需要在后面写注释说明用途
      }
    },
    computed: {},         // 计算属性定义。
    created () {},         // 生命钩子函数，按照他们调用的顺序。
    mounted () {},         // 挂载到元素。
    activated () {},       // 使用 keep-alive 包裹的组件激活触发的钩子函数。
    deactivated () {},     // 使用 keep-alive 包裹的组件离开时触发的钩子函数。
    watch: {},            // 属性变化监听器。
    methods: {            // 组件方法定义。
      publicbFunction () {}  // 公共方法的定义，可以提供外面使用
      _privateFunction () {} // 私有方法，下划线定义，仅供组件内使用。
    }
  }
</script>