# 橙立科技前端工作手册

# 推荐工具与索引

# 开发工具

# 科学上网

建议使用 Google 搜索作为常用搜索引擎

# markdown 文档

推荐使用 vscode 用于 markdown 文档编写, 配合 prettier 插件 (opens new window) 用于文档格式化

markdown 语法 (opens new window)

技术文档写作规范

技术测试报告写作规范

# Git

Git 官方文档 (opens new window)

Git 教程 (opens new window)

# Terminal 命令行

推荐使用 git bash 替换 windows 自带命令行, 并集成至编辑器中

常用 Linux 命令

# Chrome 开发者工具

Chrome 开发者工具 (opens new window)

Android 设备的桌面端调试 (opens new window)

# CI/CD

公司根据代码仓库类型设置需要集成的 CI/CD 服务.

现在使用的是 Gitea 代码仓库服务配合 Drone CI (opens new window) 完成产品的自动构建与发放.

CI/CD 说明

GitLab CI/CD (opens new window)

GitLab CI/CD 配置管理 (opens new window)

Drone CI 文档 (opens new window)

# 前端知识

# flex 布局

Flexible Box 模型，通常被称为 flexBox 布局 (opens new window)，是一种一维的布局模型。它给 flexBox 的子元素之间提供了强大的空间分布和对齐能力。

flexBox 示例 (opens new window)

# yarn 包管理器

yarn 包管理器 (opens new window) 是一个快速、可靠、安全的依赖管理。

# IndexedDB

IndexedDB (opens new window) 是一种低级 API，用于客户端存储大量结构化数据(包括, 文件/ blobs)。该 API 使用索引来实现对该数据的高性能搜索

在数据量不大的情况, 一般使用 localForage (opens new window) 简化 indexedDB 操作. 对于需要大量数据储存(>100MB)的前端存储, 最好使用原生 indexedDB API, localForage 存在单个键值对最大容量限制(128M)

# eslint 规范

ESLint - 可组装的 JavaScript 检查工具

项目一般使用 airbnb + eslint-plugin-vue + eslint-plugin-prettier 作为格式要求

Airbnb eslint config (opens new window)

Vue 风格指南 (opens new window)

prettier 配置选项 (opens new window)

# mock.js 接口模拟

Mock.js - 生成随机数据，拦截 Ajax 请求

mock.js (opens new window)

项目使用RAP2 服务 (opens new window) 作为前后端同步开发的接口文档, 其中 RAP2 使用 MockJs 作为模拟数据的生成依赖, 相关的随机值生成方法参考 MockJs 文档.

后端接口搭建完成后, 将使用后端生成的 swagger doc 用于最终标准的接口文档.

RAP2 (opens new window)

# vue 全家桶

Vue.js (opens new window)

Vue CLI (opens new window)

Vue Router (opens new window)

Vuex (opens new window)

Vue 资源 (opens new window)

# react 全家桶(了解)

react (opens new window)

Create React App (opens new window)

react router (opens new window)

redux (opens new window)

The React Handbook (opens new window) (推荐阅读)

antd (opens new window)

# service worker (了解)

Service Worker (opens new window) 是浏览器在后台独立于网页运行的脚本，它可以用于增强页面的离线功能，详细 API 见 Service Worker API (opens new window)

Workbox (opens new window) 是谷歌开发的 Service Worker 工具, 通常使用 Workbox-webpack-plugin (opens new window) 与现有配置整合打包

# 性能优化(强烈建议完整阅读)

谷歌推荐的 web 开发性能优化方法 Web Fundamentals performance (opens new window)

# 地理信息系统与地图理论

# GIS 与 webGIS

地理信息系统 (opens new window)

webGIS (opens new window)

GIS 与数据图形基础 (opens new window)

# GeoJSON 格式

GeoJson 格式 (opens new window) 是常用的 web 端地理信息数据格式, 通常用于地理信息数据的绘制

# Mapbox-gl

Mapbox-gl 是一个使用 webGL 用于地图绘制的库, 主要包括地图控制与地图样式绘制两个部分

Mapbox GL JS API (opens new window)

样式配置手册 (opens new window)

具体的样式操作与地图编辑可以使用 mapbox-style-editor (opens new window) 进行练习

# Turf.js (了解)

Turf.js (opens new window) 是一个地理信息数据分析处理库, 可以借鉴相应的地理信息算法