一些Web最佳实践的探索-Yinode Blog

正好这半年多的前端开发经验让我获得了一些最佳实践的灵感，所以正好乘这次机会，干脆写一个不受任何人，不受业务影响的情况下，我心目中的好项目。我想把所有我新学习到，理解到的，想做的，觉得对项目有优势的东西，进行一个整合，我不希望在这个项目上有任何的业务妥协。

主要围绕了以下几点进行

明确干净统一的目录系统
请求拦截器的进阶使用
RESTFul 风格的接口
Views + components + base 的组件化系统
前端预渲染
打包优化
更加优雅便捷的部署到 Gh-pages
docker 虚拟化
Vue 组件内部可读性
后端给签名前端直接上传到阿里云
更好的去利用 Stylus 的变量
PWA 的使用
全面拥抱 Asyncawait 函数

接下来我会对我做到的一些事情进行更加详细的解释

目录结构

.
├── babel.config.js
├── dist
├── git-pages-deploy.sh
├── package.json
├── public
├── src
│   ├── App.vue
│   ├── api
│   │   ├── request.js
│   │   └── urls.js
│   ├── assets
│   ├── base
│   │   └── shortcut-scroll
│   │       └── shortcut-scroll.vue
│   ├── common
│   │   ├── config
│   │   │   └── config.js
│   │   ├── mixins
│   │   │   └── mixins.js
│   │   └── stylus
│   │       ├── common.styl
│   │       └── variable.styl
│   ├── components
│   │   ├── header
│   │   │   └── header.vue
│   │   ├── plate-nav
│   │   │   └── plate-nav.vue
│   │   ├── reply-box
│   │   │   └── reply-box.vue
│   │   ├── reply-item
│   │   │   └── reply-item.vue
│   │   ├── reply-view
│   │   │   └── reply-view.vue
│   │   ├── theme-item
│   │   │   └── theme-item.vue
│   │   └── theme-view
│   │       └── theme-view.vue
│   ├── main.js
│   ├── registerServiceWorker.js
│   ├── router
│   │   └── index.js
│   └── views
│       ├── create-theme
│       │   └── create-theme.vue
│       ├── home
│       │   └── home.vue
│       ├── layout.vue
│       ├── login.vue
│       ├── search
│       │   └── search.vue
│       └── theme
│           └── theme.vue
├── vue.config.js
├── yarn-error.log
└── yarn.lock

这一部分大家的习惯并不一样，但应该做到易于理解，避免特别深度的嵌套，尽可能的扁平化

拦截器

请求拦截器其实已经用的非常普遍了，这个东西是顺应了 AOP，面向切面编程的思想。我刚进入工作的时候，其实自己写了一个拦截器，但是没了解到 axios 的拦截器，所以重复造了一个不太好用的轮子，说来有点惭愧

这一次，我进一步的使用了 axios 的拦截系统，让他做到了如下功能

当服务器发送错误，或者请求不被允许时，自动调用 Message 组件来告知用户的错误信息
登录拦截器，当请求必须登录时，自动调整到登录页（这个其实非常普遍了）
自动重发请求（最大次数我设置为 3 次）

通过这样的一个系统，我能够极大的减轻判断接口错误与否登录与否等情况检查的负担。让我的注意力能够放到应用的核心上

import axios from 'axios'
import { Message } from 'element-ui'
import Router from '@/router'

const baseURL =
  process.env.NODE_ENV === 'development'
    ? 'https://api.yinode.tech/anode/'
    : 'https://api.yinode.tech/anode/'

const request = axios.create({
  baseURL,
  timeOut: 10000,
  reponseType: 'json'
})

// token检查
request.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.token = token
  }
  return config
})

request.defaults.retry = 2
request.defaults.retryDelay = 3000
// 错误码检查
request.interceptors.response.use(
  res => {
    if (res.status === 200) {
      return res.data
    }
    // TOKEN失效 重新登录
    if (res.status === 401) {
      Router.push({ name: 'login' })
    } else {
      // 其他错误
      Message({
        type: 'error',
        message: res.data.msg
      })
      return Promise.reject(res.data.msg)
    }
  },
  err => {
    var config = err.config
    if (!config || !config.retry) return Promise.reject(err)
    config.__retryCount = config.__retryCount || 0

    if (config.__retryCount >= config.retry) {
      Message({
        type: 'error',
        message: '重复请求次数已达上限，停止请求'
      })
      return Promise.reject(err)
    }
    config.__retryCount += 1

    var backoff = new Promise(resolve => {
      setTimeout(() => {
        resolve()
      }, config.retryDelay || 1)
    })
    Message({
      type: 'error',
      message: `${(err.response &&
        err.response.data &&
        err.response.data.msg) ||
        '哎呀，请求出错了'}，正在尝试重新请求`
    })
    return backoff.then(() => {
      return request(config)
    })
  }
)

export default request

RESTFul

这个东西其实需要后端配合，我觉得这个东西还是非常棒的，他充分利用了 HTTP 自身本来就很高的语义化，让整个请求过程变得更加易读易理解。

我主要用了 Django + drf 这个框架写了整个后端系统。作为一个后端菜鸟，我还是想谈谈我对 Django 的感觉。

ORM 很强大但让我感觉不透明有点距离感
django admin 很牛逼
写起来感觉会有点笨重
整体开发效率还是非常不错的。特别是用 ViewSet 来进行 API Path 的自动构建

tips: 其实我们公司的 CODE 依旧是放到响应结果的 JSON 里面的，但我这次直接利用的 HTTP 的 Status CODE 我觉得这更好

在前端部分我对于路由也尽可能的去贴近 RESTFul 的风格，比如查看主题详情

/app/theme/47

我放弃了用 query 传递 ID 的丑陋方式，完全拥抱更加符合资源定位的 URL

组件化系统

更加明确了整个组件化的概念

Views 是整个系统的核心骨架

── views
│       ├── create-theme
│       │   └── create-theme.vue
│       ├── home
│       │   └── home.vue
│       ├── layout.vue
│       ├── login.vue
│       ├── search
│       │   └── search.vue
│       └── theme
│           └── theme.vue

我的顶级 Views 其实只有两个，一个是应用的通用布局页面 layout(里面包含了 Header 这样的 components),另外一个是登录组件。

而存活于 layout 组件的 router-view 中的二级 Views 则被我封装到了同级的文件夹中。

components 应该是可以被通用的，被复用，拥有一定业务逻辑（少量）的组件

base 应该是没有明确业务逻辑，简单化的小型组件

当然 components 以及 base 类型的组件都应该控制里面的代码量，避免一个组件过于复杂，如果发现代码过多阅读困难，应进行拆分，我目前是控制在 200 行以内，大部分在 100 行左右。

前端预渲染

所谓预渲染，其实就是在打包完成后，开启这个服务，并通过无头浏览器(没有 GUI)抓取里面的 HTML 结构（具体在页面加载到什么时候开始抓，可以由你来确定），并输出到你最终打包结果的 HTML 中去。

我这里用了一个 webpack 的 plugin

由于我用了 vue-cli3 所以可以更方便的添加插件

vue add prerender-spa

接下来在你的项目目录下创建一个.prerender-spa.json 文件

{
  "renderRoutes": ["/"],
  "useRenderEvent": true,
  "headless": true,
  "onlyProduction": true,
  "customRendererConfig": {
    "renderAfterDocumentEvent": "now-pre-render"
  }
}

我目前只需要预渲染根路由，接下来去 Home 组件的 mounted 中触发我的自定义抓取事件，插件就会自动去抓取当前的 HTML 内容。

// home.vue
export default {
  mounted() {
    // Now Pre render
    document.dispatchEvent(new Event('now-pre-render'))
  }
}

最终输出的 Index.html 中就会有你触发自定义时间时的结构。

通常你抓取的时机就是你的整个页面骨架已经出来的时候。

打包优化

这里我遇到了几个问题

elementui 全量打包容量太大

解决办法：按需打包

在 babel.confis.js 中设置如下内容

module.exports = {
  presets: ['@vue/app'],
  plugins: [
    [
      'component',
      { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' }
    ]
  ]
}

并安装 babel-plugin-component 这个插件

接着不要直接引入整个 Element-ui ，用了什么，引入什么。

import { Button, Select, Upload, Loading, Form } from 'element-ui'

Vue.use(Form)
// ... more

moment.js 太大

解决方法：删除不必要的本地化时间格式化

利用 Vue-cli webpack 插件暴露手段，注册 Webpack 的过滤组件

// vue.config.js
import webpack from 'webpack'
module.exports = {
  baseUrl: process.env.NODE_ENV === 'production' ? '/ANode-forum/' : '/',
  chainWebpack: config => {
    config
      .plugin('ignore')
      .use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
  }
}

Gh-pages

我其实相当喜欢这个东西，用来放 Demo SPA 的前端部分都非常合适，这里从 Vue-cli3 的文档中偷学了一招（本来是利用的切换分支的方式，操作麻烦，而且比较蠢）

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

echo 'yinode.tech' > CNAME

git init
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:zhangzhengyi12/ANode-forum.git master:gh-pages

cd -

运行一下这个脚本就自动打包部署了，同理其他的项目很多都可以利用这个东西。关键是利用了重新 init,之前怎么没想到呢

docker

其实 python 对于环境的要求比 node.js 高，各种 pip 版本啥的，自带的依赖管理也不是很好用，部署到服务器上可能会有问题。这里就分享一下我的 Docker 配置

# Dockerfile
FROM python:3
ENV PYTHONUNBUFFERED 1
RUN mkdir /code
WORKDIR /code
ADD requirements.text /code/
RUN pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -r requirements.text
ADD . /code/

RUN python3 manage.py migrate

version: '3'
services:
  web:
    build: .
    command: python3 manage.py runserver 0.0.0.0:9528
    volumes:
      - .:/code
    ports:
      - '8020:9528'

 自动构建镜像并守护运行

docker-compose up –build -d

持续构建

git pull

docker-compose up -d

代码可读性

多用 Vue 的 computed

避免在模版中写 v-if="xxx.length > 0" 这种东西，特别是复杂的判断，一定要写成计算属性 v-if="isEmptyList" 这样可读性就好了非常多。

避免过多的 IF 嵌套

我基本上都是如果函数运行不下去尽快 return

// good
function name(params) {
  if (!params.xx || !params.bb) {
    return
  }
  // go
}
// bad
function name(params) {
  if (params.xx) {
    if (params.bb) {
      // go
    }
  }
}

可读性会有提高

多用更容易理解的迭代方式

map filter reduce some every 这些东西实在太棒了，写起来真的超级优美好吗，少用那些 For 循环吧，真的不好看，除非你特别需要性能。

CDN 图片前端直接上传

这里我借鉴了一个 demo

非常好用哦，把他放到你的服务器上以后你的任何项目都可以独立的去调用，很方便。

Stylus

其实大家用这些预编译 CSS 的时候，一定要充分利用这里面的系统哦，其实我觉得好的 CSS 最难的地方就是高度复用性。整个 CSS 的类名就是一个组件，一个东西的样式只要附着一些比较通用的类名，然后稍微加点细节修改，就能拥有样式。并且能够利用权重覆盖系统，做到灵活，更少的代码量。低耦合。

其实我觉得 CSS 写得好真的很难。

这次我大量用了主题的颜色以及一些通用的类名。当然我觉得还能做的更好，继续努力！

PWA

这个东西的缓存能力实在太强了，也能够优雅的降级，我找不到特别充分不去用的理由啊。

赶紧去装起来吧。

Async/await

很多人说这个可能才是 JS 异步的终极解决方案，真的是超爽，这次我全面使用的 axios 来进行异步操作。

export default {
  async getThemeList() {
    this.onLoadingThemeList = true
    try {
      const res = await this.$axios.get(theme, {
        params: Object.assign({}, this.themeListOptions, {
          title: decodeURIComponent(this.keywords)
        })
      })
    } catch (e) {
      return false
    } finally {
      this.onLoadingThemeList = false
    }
    if (res.data.length <= 0) {
      this.themeListIsEnd = true
    }
    this.themeList = this.themeList.concat(res.data)
    this.themeTotal = res.total
  }
}

我觉得这个是一个比较典型的东西，我觉得是非常优雅的。用了这个之后你的库.js 大约会增加 20kb 我觉得还是非常划算的。

开启 Loading > 请求 > 错误直接返回 > 关闭 Loading > 成功后端数据处理

总结

以上只是我个人的一些最佳实践的处理，欢迎大家讨论，纠正。共同进步，继续努力。

CODE & Preview

github 预览

一些Web最佳实践的探索

TOC

目录结构

拦截器

RESTFul

组件化系统

前端预渲染

打包优化

Gh-pages

docker

代码可读性

CDN 图片前端直接上传

Stylus

PWA

Async/await

总结

CODE & Preview

FEATURED TAGS

目录结构

拦截器

RESTFul

组件化系统

前端预渲染

打包优化

Gh-pages

docker

代码可读性

CDN 图片前端直接上传

Stylus

PWA

Async/await

总结

CODE & Preview

FEATURED TAGS

docker