背景

由于项目需要引入countup.js插件用于将数字实现累加动画效果,而且由于是vue项目,发现文档里有专门对vue封装的组件vue-countup-v2,所以自然而然
yarn add countup.js vue-countup-v2
然后根据文档一步一步下来,一切ok
随后想了想,需要安装两个依赖并且vue-countup-v2只是一个组件封装,那么为什么不用vue directives指令来写呢?

vue-directives自定义指令

vue指令其实随处都会用到,比如v-if,v-show,v-for等等,对于特殊场景,vue也提供注册自定义指令的方法,有两种方法可以注册自定义指令,分别是Vue.directive注册全局指令以及在组件中配置directives注册局部指令,在这里,全局指令更适合本场景,所以决定使用Vue.directive

开始编写

1
2
3
4
5
6
7
8
9
10
11
12

// main.js
import { CountUp } from 'countup.js'
Vue.directive('countUp', {
            bind (el) {
                el.countUpComponent = new CountUp(el, 0, {
                    duration: 1
                })
            },
            update (el, binding) {
                el.countUpComponent.update(binding.value || 0)
            }
        })

我现在坐在太阳底下
来往的人都打着伞
我不愿打伞
我喜欢这个温度
我看见一束花
紫色的
你知道我在说什么吗
我是说
凉薄也好

异步组件加载与webpack SplitChunks

在我们平时的开发工作中，为了减少首屏代码体积，往往会把一些非首屏的组件设计成异步组件，按需加载。利用webpack对代码进行分割是懒加载的前提，懒加载就是异步调用组件，需要时候才下载（按需加载）。
通过异步组件结合webpack的代码按需加载，我们可以得到两点好处：

• 用不到的组件不会加载，因此网页打开速度会很快，当你用到这个组件的时候，才会通过异步请求进行加载；
• 缓存组件，通过异步加载的组件会缓存起来，当你下一次再用到这个组件时，丝毫不会有任何的疑迟，组件很快会从缓存中加载出来。

关于webpack splitChunks,可以阅读腾讯IMWeb的文章,介绍的非常详细了,点击链接
异步加载虽然由以上的好处,但是必然有一个问题,就是在浏览器下载异步组件的代码时(比如新页面路由切换),如果网速比较慢的话,会显示白屏界面。那么,如何实现在浏览器下载异步组件的同时让页面展示诸如loading类的等待界面呢?

vue中处理异步组件加载状态

声明方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/**
 * 处理路由页面切换时，异步组件加载过渡的处理函数
 * @param  {Object} AsyncView 需要加载的组件，如 import('@/components/home/Home.vue')
 * @return {Object} 返回一个promise对象
 */
function lazyLoadView (AsyncView) {
  const AsyncHandler = () => ({
    // 需要加载的组件 (应该是一个 `Promise` 对象)
    component: AsyncView,
    // 异步组件加载时使用的组件
    loading: import('@/components/public/RouteLoading.vue'),
    // 加载失败时使用的组件
    error: import('@/components/public/RouteError.vue'),
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    delay: 200,
    // 如果提供了超时时间且组件加载也超时了，
    // 则使用加载失败时使用的组件。默认值是：`Infinity`
    timeout: 10000
  });
  return Promise.resolve({
    functional: true,
    render (h, { data, children }) {
      return h(AsyncHandler, data, children);
    }
  });
}

前言

每个人的代码风格不一,但对于团队来说,代码风格的统一有助于团队之间的协作,良好的代码风格更会令人赏心悦目。但是现实总会不如愿,可能一开始很规范的项目随着工作进度的推展,代码也会变得凌乱。人为的进行代码风格检查无疑是一种低效率且不可靠的方式,所以我们需要借助工具来进行强制的代码风格检查

eslint

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。ESLint被设计为完全可配置的，主要有两种方式来配置ESLint：

• 在注释中配置：使用JavaScript注释直接把配置嵌入到JS文件中。
• 配置文件：使用下面任一的文件来为全部的目录和它的子目录指定配置信息
  • javascript：使用.eslintrc.js文件并导出一个包含配置的对象。
  • YAML：.eslintrc.yaml或者.eslintrc.yml
  • JSON：.eslintrc.json，并且此文件允许使用JS形式的注释
  • 废弃的用法：.eslintrc，此文件可以是JSON或者YAML
  • package.json：在package.json文件中创建eslintConfig属性，所有的配置包含在此属性中

这些文件的优先级则是按照以上出现的顺序（.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json> .eslintrc > package.json）

可以被配置的信息主要分为3类：

• Environments：你的 javascript 脚步将要运行在什么环境（如：nodejs，browser，commonjs等）中。
• Globals：执行代码时脚步需要访问的额外全局变量。
• Rules：开启某些规则，也可以设置规则的等级。

安装

yarn add eslint 或者全局安装 yarn global add eslint

规则配置

什么是微前端

微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一应用转变为把多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时,它们也可以进行并行开发—这些组件可以通过NPM,GIT或者SVN来管理。

微前端架构特点

• 应用自治,即每个子应用之间不存在依赖关系,替换其中一个子应用而整体不受影响
• 单一职责,即微前端架构应该满足单一职责的原则
• 技术栈无关,即每个子应用可以用不同的前端框架去编写

微前端技术拆分方式

1.路由分发式

通过HTTP服务器的反向代理功能,将请求路由映射到对应的应用上

2.前端微服务化

在不同的框架上设计通信和加载机制,以在一个页面内加载对应的应用

3.微应用

通过软件工程的方式,在部署构建环境中,把多个独立的应用组合成一个应用

4.微件化

将业务功能拆分成独立的chunk代码,加载即可运行

5.前端容器化

iframe

6.应用组件化

Web Components技术

前端微服务化

这里我们将使用第二种方式,使用前端微服务化的方式将基于create-react-app脚手架搭建的react应用以及vue-cli搭建的vue应用合并在一个基座应用上,做到子应用可以独立开发,分别部署的同时也能做到合并在一起成为一个聚合应用