MapGIS Pan-Spatial Map

# 编码规范

# 风格指南

本项目的风格指南主要是参照 vue 官方的风格指南 (opens new window)。在真正开始使用该项目之前建议先阅读一遍指南，这能帮助让你写出更规范和统一的代码。当然每个团队都会有所区别。其中大部分规则也都配置在了eslint-plugin-vue (opens new window)之中，当没有遵循规则的时候会报错。

当然也有一些特殊的规范，是不能被 eslint 校验的。需要人为的自己注意，并且来遵循。最主要的就是文件的命名规则，这里拿MapGIS Pan-Spatial Map来举例。

# Component 文件

所有的Component文件都是以大写开头 (PascalCase)，这也是官方所推荐的 (opens new window)。

但除了 index.vue。

例子：

  • src/components/MapContainer/index.vue
  • src/components/BaseMapSwitch/BaseMapSwitch.vue

# 组件名

官方推荐的组件名是 每个单词首字母大写(PascalCase)或者全小写用横线连接(kebab-case),在 DOM 中使用的时候，改为全小写，单词之间用横线连接(kebab-case)。

<template>
  <my-component></my-component>
</template>

import MyComponent from 'MyComponent.vue'

export default {
  name: 'MyComponent'
}

# props

声明 prop 的时候，使用驼峰命名(myProps)，模板中使用的时候，用横线连接(kebab-case)。

<template>
  <my-component :my-props="abc"></my-component>
</template>

import MyComponent from 'MyComponent.vue'

export default {
  name: 'MyComponent',
  props: {
    myProps: {}
  }
}

# 自定义事件名

因为 html 对大小写不敏感，所以大写的都会被转为小写的。所以推荐都用横线连接(kebab-case)来命名。

<template>
  <my-component @my-event="abc"></my-component>
</template>

...
this.$emit（'my-event'）;
...

# JS 文件

所有的.js、.ts文件都遵循横线连接 (kebab-case)。

例子：

  • src/map/base-layers.ts
  • src/result-set/result-set.ts
  • src/config/data-catalog.ts

# 组件选项顺序

组件选项应该有统一的顺序。

export default {
  name: '',

  mixins: [],

  components: {},

  props: {},

  data() {},

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  destroyed() {},

  methods: {}
}

# 使用 TypeScript

TypeScript 是 Javascript 的超集，它相对于 Javascript，增加了许多实用的新特性:

  • 类型批注和编译时类型检查
  • 类型推断
  • 类型擦除
  • 接口
  • 枚举
  • Mixin
  • 泛型编程
  • 名字空间
  • 元组
  • Await

使用 TypeScript 对 IDE 会更加友好，如果你是用 vscode 开发的，那么你的开发体验将会显著提升。 MapGIS Pan-Spatial Map 中自带了 TypeScript 所需的配置文件.

  • tsconfig.js

tsconfig 会声明这是一个 TypeScript 的项目，其中会进行一些配置，详细内容可以看这里 (opens new window)。接下来我们就可以开始 TypeScript 开发了。

← 扩展服务 →