开发项目注意事项-----笔记

一、项目文件管理

• node_modules文件夹不要传输，内部存放各个依赖包
• README.md 该文件内部有自己的名称即可
• package.json 和 package-lock.json文件要保存好，内部存放各个依赖包的版本信息，可通过包管理工具进行安装
• 其他无用文件可删除

二、编码问题

1、模块导入方式

• ES Modules ：通过 import 和 export
• CommonJS： 通过require 和 module.export

2、代码风格

（1）分号、单引号和双引号，通过Eslint来设置

• Eslint + Standard 或者 Eslint + Prettier，同时可配置一键修复的快捷键
  • WebStrom： 中可通过Ctrl + Alt + L
  • VsCode: Alt + Shift +F

（2）单文件存在多个import语句

• 考虑引入顺序问题，如将 node模块、vue、js、css等文件分类排列

• 可适当加上注释

• 原型属性

  • Vue2中尽量不要再Vue原型上挂属性，可能导致编辑器无法提示对应自定义原型属性
    • 可将Echarts 或者 axios在各个文件中单独引用

（3）跨域数据请求API

• axios可以放到``src/api`下面，创建一个service实例并分发到各个文件。

  • api/index.js

  import axios from 'axios'
  import { Toast } from 'vant/lib/toast'
  
  // Vite项目导入env变量的方式，使得本文件的所在位置能够暴露出来
  const ENV = import.meta.env 
  const { VITE_APP_BASEURL } = ENV
  export const service = axios.create({
    baseURL: VITE_APP_BASEURL
  })
  
  //设置拦截器，用于处理请求回来的结果
  service.interceptors.response.use(
    (response) => response,
    (error) => {
      if (error.code === 'ECONNABORTED') {
        Toast.fail('请求超时！')
      } else {
        Toast.fail('未知错误')
      }
      return Promise.reject(error)
    }
  )
  

  • api/userAPI.js

  import { service } from '@/api/index'
  // 用户路由
  export const userAPI = {
    // POST 添加用户
    add(registerData) {
      return service.post('/pollution/user/add', registerData)
    },
    // POST 登录接口
    login(loginData) {
      return service.post('/pollution/user/login', loginData)
    }
  }
  

  • 具体vue组件使用

  import { userAPI } from '@/api/userAPI'
  // ...
  const { data: res } = await userAPI.login({
    createTime: '',
    id: 0,
    password: password.value,
    salt: '',
    username: username.value
  })
  

（4）标签样式

• 给对应标签添加一个class类名称
• 加上sass 和 scoped
  • 有等级划分
  • 不会造成样式泄露

（5）变量声明

• 变量名称要易懂
• 用途相同的变量可以放到一起，如 let aaLayer, bbLayer
• 局部作用域的变量不要放到全局作用域
• Let 声明变量值会变的，const声明引用值不会更改的

3、地图开发

• 地图操作大多与组件是分离的，一般会将地图操作放到一个map.js文件中，之后以方法的形式暴露出来。

//封装map对象
import { loadScript, loadModules } from 'esri-loader';

export class MapApp {

  private mapView: __esri.MapView;

  /** Load ArcGIS JS API scripts. */
  async loadScript() {
    const AGS_SDK = 'https://app.gdeei.cn/arcgis-js-api/library/4.16';
    await loadScript({
      url: `${AGS_SDK}/init.js`,
      css: `${AGS_SDK}/esri/themes/light/main.css`
    });
  }

  /** Init a map view */
  async initMap(container) {
    const [Map, MapView] = await loadModules<[__esri.MapConstructor, __esri.MapViewConstructor]>(['esri/Map', 'esri/views/MapView']);
    const map = new Map({ basemap: 'satellite' });
    this.mapView = new MapView({
      map, container,
      extent: {
        // autocasts as new Extent()
        xmin: -9177811,
        ymin: 4247000,
        xmax: -9176791,
        ymax: 4247784,
        spatialReference: { wkid: 102100 }
      }
    });
  }

  /** add a feature layer to map */
  async addFeatureLayer() {
    // 使用 esri-loader 提供的 loadModules 方法加载这两个模块
    const [FeatureLayer, QueryTask] = await loadModules<[
        __esri.FeatureLayerConstructor,
        __esri.QueryTaskConstructor
    ]>([
        'esri/layers/FeatureLayer',
        'esri/tasks/QueryTask'
    ]);
    // 使用 FeatureLayer 服务的地址创建 QueryTask ， 并请求数据
    const queryTask: __esri.QueryTask = new QueryTask({
        url: 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0'
    });
    const featureSet: __esri.FeatureSet = await queryTask.execute({
        where: '1 = 1',
        outFields: ['*'],
        outSpatialReference: { wkid: 4326 },
        returnGeometry: true
    });
    // QueryTask 返回的结果是一个 FeatureSet ， 可以很方便的创建 FeatureLayer
    const featureLayer: __esri.FeatureLayer = new FeatureLayer({
        geometryType: featureSet.geometryType as any,
        fields: featureSet.fields,
        source: featureSet.features,
        spatialReference: featureSet.spatialReference,
        objectIdField: featureSet.fields.find(f => f.type === 'oid').name
    });
    this.mapView.map.layers.add(featureLayer);
  }

}

//组件调用
// Import stylesheets
import './style.css';

import { MapApp } from './map-app';

const pathBase = `${location.protocol}//${location.host}`;
window['dojoConfig'] = {
  async: true,
  packages: [
    // { name: 'THREE', location: 'https://unpkg.com/three@0.117.1/build', main: 'three.min' },
  ]
};
window['esriConfig'] = { locale: 'zh-cn' };

async function initMap() {
  const app = new MapApp();
  await app.loadScript();
  await app.initMap('viewDiv');
  await app.addFeatureLayer();
}

initMap();

4、技术选型

• 小项目可用Bus传值，中大型项目可使用Vuex和pinia等状态管理对象
• 选择依赖包，查看github上面的更新时间和周下载量