简介

本项目是用于AppLovin公司前端工程师岗位招聘的笔试题。 点击此处查看DEMO。

技术方案

语言：typescript
UI构建库：react
请求库：axios
状态管理：mobx
路由管理：react-router-dom
样式开发：styled-components

构建指令

安装依赖

npm i

启动本地开发环境

npm run start:dev

打包生产环境静态资源

npm run build

重要目录结构

.husky: husky 脚本，用于部署git hooks相关逻辑
.storybook: storybook 配置
_tpl_: 模板代码
assets: 静态资源
config: 各种配置
dist: 生产环境构建输出
storybook-static: storybook 生产环境输出
src: 源码
    components: 组件
    pages: 页面
    models: 前端模型
    services: 接口封装
    types: interface定义
    utils：工具库
    app.tsx: 应用入口
    store.ts: 全局状态
    styles.tsx: 全局样式
index.ejs: index.html 模板

离线使用App

通过service worker实现离线使用能力，具体逻辑见assets/js/serviceWorker.js。

切换 白天/夜晚 主题

有两种方式切换主题

自动切换

目前设定 6:00 ~ 18:00 为"白天"，否则为"夜晚"

手动切换

在url里添加查询参数手动切换主题，theme=day为"白天"，theme=night为夜晚

前端工程化

自动代码格式化

使用prettier对源码进行格式化，统一基本编码风格。

使用npm run prettier命令进行格式化。

部署了husky后，在git commit前会强制进行代码格式化。

为了方便起见，日常开发时应开启保存时触发自动格式化的能力。 pycharm用户请下载prettier插件，并勾选相应选项。 vscode用户参见《eslint + prettier + vscode 配置实现保存自动格式化》 。

代码静态检查

使用tsc 和 eslint 对js/ts/tsx 进行静态分析检查，避免低级错误。

使用npm run tsc进行typescript编译器检查。

使用npm run eslint进行基于eslint规则的分析检查。

部署了husky后，在git push前会强制进行tsc & eslint检查，出错则无法push。

前端组件管理

使用storybook对前端组件进行开发 & 管理。

使用npm run storybook开启本地开发服务器。

使用npm run build-storybook将storybook编译成静态文件，用于生产环境部署。 点击此处查看DEMO