什么是微前端

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

qiankun

qiankun 是蚂蚁金服开源的一套完整的微前端解决方案。具体描述可查看 文档 和 Github。

下面将通过一个微服务Demo 介绍 Vue 项目如何接入 qiankun，代码地址：micro-front-vue)

二、配置主应用

1. 使用 vue cli 快速创建主应用；
2. 安装 qiankun

$ yarn add qiankun # 或者 npm i qiankun -S

1. 调整主应用 main.js 文件：具体如下：

import Vue from "vue"
import App from "./App.vue"
import router from "./router"

import { registerMicroApps, setDefaultMountApp, start } from "qiankun"
Vue.config.productionTip = false
let app = null;
/**
 * 渲染函数
 * appContent 子应用html内容
 * loading 子应用加载效果，可选
 */
function render({ appContent, loading } = {}) {
    if (!app) {
        app = new Vue({
            el: "#container",
            router,
            data() {
                return {
                    content: appContent,
                    loading
                };
            },
            render(h) {
                return h(App, {
                    props: {
                        content: this.content,
                        loading: this.loading
                    }
                });
            }
        });
    } else {
        app.content = appContent;
        app.loading = loading;
    }
}

/**
 * 路由监听
 * @param {*} routerPrefix 前缀
 */
function genActiveRule(routerPrefix) {
    return location => location.pathname.startsWith(routerPrefix);
}

function initApp() {
    render({ appContent: '', loading: true });
}

initApp();

// 传入子应用的数据
let msg = {
    data: {
        auth: false
    },
    fns: [
        {
            name: "_LOGIN",
            _LOGIN(data) {
                console.log(`父应用返回信息${data}`);
            }
        }
    ]
};
// 注册子应用
registerMicroApps(
    [
        {
            name: "sub-app-1",
            entry: "//localhost:8091",
            render,
            activeRule: genActiveRule("/app1"),
            props: msg
        },
        {
            name: "sub-app-2",
            entry: "//localhost:8092",
            render,
            activeRule: genActiveRule("/app2"),
        }
    ],
    {
        beforeLoad: [
            app => {
                console.log("before load", app);
            }
        ], // 挂载前回调
        beforeMount: [
            app => {
                console.log("before mount", app);
            }
        ], // 挂载后回调
        afterUnmount: [
            app => {
                console.log("after unload", app);
            }
        ] // 卸载后回调
    }
);

// 设置默认子应用,与 genActiveRule中的参数保持一致
setDefaultMountApp("/app1");

// 启动
start();

<template>
  <div id="main-root">
    <!-- loading -->
    <div v-if="loading">loading</div>
    <!-- 子应用盒子 -->
    <div id="root-view" class="app-view-box" v-html="content"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  props: {
    loading: Boolean,
    content: String
  }
};
</script>

module.exports = {

    devServer: {

        port: 8090

    }

}

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';
import './public-path';

Vue.config.productionTip = false;

let router = null;
let instance = null;

function render() {
    router = new VueRouter({
        base: window.__POWERED_BY_QIANKUN__ ? '/app1' : '/',
        mode: 'history',
        routes,
    });

    instance = new Vue({
        router,
        render: h => h(App),
    }).$mount('#app');
}

if (!window.__POWERED_BY_QIANKUN__) {
    render();
}

export async function bootstrap() {
    console.log('vue app bootstraped');
}

export async function mount(props) {
    console.log('props from main app', props);
    render();
}

export async function unmount() {
    instance.$destroy();
    instance = null;
    router = null;
}

const path = require('path');
const { name } = require('./package');

function resolve(dir) {
    return path.join(__dirname, dir);
}

const port = 8091; // dev port

module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
    outputDir: 'dist',
    assetsDir: 'static',
    filenameHashing: true,
    // tweak internal webpack configuration.
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    devServer: {
        // host: '0.0.0.0',
        hot: true,
        disableHostCheck: true,
        port,
        overlay: {
            warnings: false,
            errors: true,
        },
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },
    // 自定义webpack配置
    configureWebpack: {
        resolve: {
            alias: {
                '@': resolve('src'),
            },
        },
        output: {
            // 把子应用打包成 umd 库格式
            library: `${name}-[name]`,
            libraryTarget: 'umd',
            jsonpFunction: `webpackJsonp_${name}`,
        },
    },
};

{

  output: {

    publicPath: `//localhost:${port}`;

  }

}

if (window.__POWERED_BY_QIANKUN__) {

  // eslint-disable-next-line no-undef

  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__

}

发送URL图片消息

WebIM.conn = new WebIM.connection({
  appKey: WebIM.config.appkey,
  isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
  https: typeof WebIM.config.https === "boolean" ? WebIM.config.https : location.protocol === "https:",
  url: WebIM.config.xmppURL,
  apiUrl: WebIM.config.apiURL,
  isAutoLogin: false,
  heartBeatWait: WebIM.config.heartBeatWait,
  autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
  autoReconnectInterval: WebIM.config.autoReconnectInterval,
  useOwnUploadFun: WebIM.config.useOwnUploadFun,
  isDebug: false,
  isHttpDNS:false
});

// 单聊通过URL发送图片消息

 var sendPrivateUrlImg = function () {

    var id = conn.getUniqueId();                   // 生成本地消息id

    var msg = new WebIM.message('img', id);        // 创建图片消息

    var option = {

        body: {

          type: 'file',

          url: url,

          size: {

            width: msg.width,

            height: msg.height,

           },

          length: msg.length,

          filename: msg.file.filename,

          filetype: msg.filetype

        },

        to: 'username',  // 接收消息对象

    };

    msg.set(option);

    conn.send(msg.body);

 }

如何加载子应用

single-spa 通过 js entry 的形式来加载子应用。而 qiankun 采用了 html entry 的形式。这两种方式的优缺点我们在理解微前端技术原理中已经做过分析，这里不再赘述，我们看看 qiankun 是如何实现 html entry 的。

qiankun 提供了一个 API registerMicroApps 来注册子应用，其内部调用 single-spa 提供的 registerApplication 方法。在调用 registerApplication 之前，会调用内部的 loadApp 方法来加载子应用的资源，初始化子应用的配置。

通过阅读 loadApp 的代码，我们发现，qiankun 通过 import-html-entry 这个包来加载子应用。import-html-entry 的作用就是通过解析子应用的入口 html 文件，来获取子应用的 html 模板、css 样式和入口 JS 导出的生命周期函数。

import-html-entry

import-html-entry 是这样工作的，假设我们有如下 html entry 文件:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body>



<!-- mark the entry script with entry attribute -->

<script src="https://unpkg.com/mobx@5.0.3/lib/mobx.umd.js" entry></script>

<script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script>

</body>

</html>

我们使用 import-html-entry 来解析这个 html 文件：

import importHTML from 'import-html-entry';



importHTML('./subApp/index.html')

    .then(res => {

        console.log(res.template);



        res.execScripts().then(exports => {

            const mobx = exports;

            const { observable } = mobx;

            observable({

                name: 'kuitos'

            })

        })

});

importHTML 的返回值有如下几个属性：

• template 处理后的 HTML 模板
• assetPublicPath 静态资源的公共路径
• getExternalScripts 获取所有外部脚本的函数，返回脚本路径
• getExternalStyleSheets 获取所有外部样式的函数，返回样式文件的路径
• execScripts 执行脚本的函数

在 importHTML 的返回值中，除了几个工具类的方法，最重要的就是 template 和 execScripts 了。

importHTML('./subApp/index.html') 的整个执行过程代码比较长，我们只讲一下大概的执行原理，感兴趣的同学可以自行查看importHTML 的源码。

importHTML 首先会通过 fetch 函数请求具体的 html 内容，然后在 processTpl 函数 中通过一系列复杂的正则匹配，解析出 html 中的样式文件和 js 文件。

importHTML 函数返回值为 { template, scripts, entry, styles }，分别是 html 模板，html 中的 js 文件（包含内嵌的代码和通过链接加载的代码），子应用的入口文件，html 中的样式文件（同样是包含内嵌的代码和通过链接加载的代码）。

之后通过 getEmbedHTML 函数 将所有使用外部链接加载的样式全部转化成内嵌到 html 中的样式。getEmbedHTML 返回的 html 就是 importHTML 函数最终返回的 template 内容。

现在，我们看看 execScripts 是怎么实现的。

execScripts 内部会调用 getExternalScripts 加载所有 js 代码的文本内容，然后通过 eval("code") 的形式执行加载的代码。

注意，execScripts 的函数签名是这样的 (sandbox?: object, strictGlobal?: boolean, execScriptsHooks?: ExecScriptsHooks): Promise<unknown>。允许我们传入一个沙箱对象，如果子应用按照微前端的规范打包，那么会在全局对象上设置 mount、unmount 这几个生命周期函数属性。execScripts 在执行 eval("code") 的时候，会巧妙的把我们指定的沙箱最为全局对象包装到 "code" 中，子应用能够运行在沙盒环境中。

在执行完 eval("code") 以后，就可以从沙盒对象上获取子应用导出的生命周期函数了。

loadApp

现在我们把视线拉回 loadApp 中，loadApp 在获取到 template、execScripts 这些信息以后，会基于 template 生成 render 函数用于渲染子应用的页面。之后会根据需要生成沙盒，并将沙盒对象传给 execScripts 来获取子应用导出的声明周期函数。

之后，在子应用生命周期函数的基础上，构建新的生命周期函数，再调用 single-spa 的 API 启动子应用。

在这些新的生命周期函数中，会在不同时机负责启动沙盒、渲染子应用、清理沙盒等事务。

隔离

在完成子应用的加载以后，作为一个微前端框架，要解决好子应用的隔离问题，主要要解决 JS 隔离和样式隔离这两方面的问题。

JS 隔离

qiankun 为根据浏览器的能力创建两种沙箱，在老旧浏览器中会创建快照模式 的浏览器中创建 VM 模式的沙箱 ProxySandbox。

篇幅限制，我们只看 ProxySandbox 的实现，在其构造函数中，我们可以看到具体的逻辑：首先会根据用户指定的全局对象（默认是 window）创建一个 fakeWindow，之后在这个 fakeWindow 上创建一个 proxy 对象，在子应用中，这个 proxy 对象就是全局变量 window。

constructor(name: string, globalContext = window) {

  const { fakeWindow, propertiesWithGetter } = createFakeWindow(globalContext);

  const proxy = new Proxy(fakeWindow, {

      set: (target: FakeWindow, p: PropertyKey, value: any): boolean => {},

      get: (target: FakeWindow, p: PropertyKey): any => {},

      has(target: FakeWindow, p: string | number | symbol): boolean {},



      getOwnPropertyDescriptor(target: FakeWindow, p: string | number | symbol): PropertyDescriptor | undefined {},



      ownKeys(target: FakeWindow): ArrayLike<string | symbol> {},



      defineProperty(target: Window, p: PropertyKey, attributes: PropertyDescriptor): boolean {},



      deleteProperty: (target: FakeWindow, p: string | number | symbol): boolean => {},



      getPrototypeOf() {

        return Reflect.getPrototypeOf(globalContext);

      },

    });

  this.proxy = proxy;

}

其实 qiankun 中的沙箱分两个类型：

• app 环境沙箱
  app 环境沙箱是指应用初始化过之后，应用会在什么样的上下文环境运行。每个应用的环境沙箱只会初始化一次，因为子应用只会触发一次 bootstrap 。子应用在切换时，实际上切换的是 app 环境沙箱。
• render 沙箱
  子应用在 app mount 开始前生成好的的沙箱。每次子应用切换过后，render 沙箱都会重现初始化。

上面说的 ProxySandbox 其实是 render 沙箱。至于 app 环境沙箱，qiankun 目前只针对在应用 bootstrap 时动态创建样式链接、脚本链接等副作用打了补丁，保证子应用切换时这些副作用互不干扰。

之所以设计两层沙箱，是为了保证每个子应用切换回来之后，还能运行在应用 bootstrap 之后的环境下。

样式隔离

qiankun 提供了多种样式隔离方式，隔离效果最好的是 shadow dom，但是由于其存在诸多限制，qiankun 官方在将来的版本中将会弃用，转而推行 experimentalStyleIsolation 方案。

我们可以通过下面这段代码看到 experimentalStyleIsolation 方案的基本原理。

const styleNodes = appElement.querySelectorAll('style') || [];

forEach(styleNodes, (stylesheetElement: HTMLStyleElement) => {

  css.process(appElement!, stylesheetElement, appInstanceId);

});

css.process 的核心逻辑，就是给读取到的子应用的样式添加带有子应用信息的前缀。效果如下：

/* 假设应用名是 react16 */

.app-main {

  font-size: 14px;

}



div[data-qiankun-react16] .app-main {

  font-size: 14px;

}

通过上面的隔离方法，基本可以保证子应用间的样式互不影响。

小结

qiankun 在 single-spa 的基础上根据实际的生产实践开发了很多有用的功能，大大降低了微前端的使用成本。

本文仅仅针对如何加载子应用和如何做好子应用间的隔离这两个问题，介绍了 qiankun 的实现。其实，在隔离这个问题上，qiankun 也仅仅是根据实际中会遇到的情况做了必要的隔离措施，并没有像 iframe 那样实现完全的隔离。我们可以说 qiankun 实现的隔离有缺陷，也可以说是 qiankun 在实际的业务需求和完全隔离的实现成本之间做的取舍。

原文：https://segmentfault.com/a/1190000041151414

在开发pc端项目中，使用微信授权登录是种很常用的功能，目前在功能实现上有两种不同的方式，现根据两种方式做如下总结。

一、跳转微信授权登录页面进行扫码授权

这种方法实现非常简单只用跳转链接就可以实现微信授权登录

window.location = https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${回调域名}/login&response_type=code&scope=snsapi_login&state=${自定义配置}#wechat_redirect

跳转之后进行微信扫码，之后微信会带着code，回调回你设置的回调域名，这之后拿到code再和后台进行交互，即可实现微信登陆。
这种方法相对来说实现起来非常简单，但是因为需要先跳转微信授权登录页面，在体验上来说可能不是太好。

二、在当前页面生成微信授权登录二维码

这种方法是需要引入wxLogin.js，动态生成微信登陆二维码，具体实现方法如下：

const s = document.createElement('script')
s.type = 'text/javascript'
s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
const wxElement = document.body.appendChild(s)
wxElement.onload = function () {
    var obj = new WxLogin({
      id: 'wx_login_id', // 需要显示的容器id
      appid: '', // 公众号appid
      scope: 'snsapi_login', // 网页默认即可
      redirect_uri:'', // 授权成功后回调的url
      state: '', // 可设置为简单的随机数加session用来校验
      style: 'black', // 提供"black"、"white"可选。二维码的样式
      href: '' // 外部css（查看二维码的dom结构，根据类名进行样式覆盖）文件url，需要https
    })
}

其中href参数项还可以通过node将css文件转换为data-url，实现方式如下：

var fs = require('fs');
function base64_encode(file) { 
    var bitmap = fs.readFileSync(file);
    return 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');
} 
console.log(base64_encode('./qrcode.css'))

在终端对该js文件执行命令：

node qr.js

把打印出来的url粘贴到href即可。
这种实现方法避免了需要跳转新页面进行扫码，二维码的样式也可以进行更多的自定义设置，可能在体验上是更好的选择。

原文：https://segmentfault.com/a/1190000024492932

本文会讲解一下Three.js控制物体显示与隐藏的方法，主要包括以下几种方式：

1. visible属性；
2. layers属性。

下面会分别通过简单的例子介绍下上述几个方式的简单使用方法和一些它们之间的区别。如果没有特殊说明，下面的源码以 r105 版本为例：

visible属性

visible 是Object3D的属性。只有当 visible 是 true 的时候，该物体才会被渲染。任何继承 Object3D 的对象都可以通过该属性去控制它的显示与否，比如：Mesh，Group，Sprite，Light等。

举个简单的例子：

// 控制单个物体的显示和隐藏

const geometry = new THREE.PlaneGeometry(1, 1) // 1*1的一个平面

const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }) // 红色平面

const plane = new THREE.Mesh(geometry, planeMaterial)

plane.visible = false // 不显示单个物体

scene.add(plane)

// 控制一组物体的显示和隐藏

const geometry = new THREE.PlaneGeometry(1, 1)

const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 })

const plane = new THREE.Mesh(geometry, planeMaterial)

const group = new THREE.Group()

group.add(plane)

group.visible = false // 不显示一组物体

scene.add(group)

通过后面的例子可以看出，当我们想要控制一组物体的显示与隐藏，可以把这些物体放入一个 Group 中，只通过控制 Group 的显示与隐藏即可。

这块的代码逻辑是在WebGLRenderer.js的 projectObject 方法中实现的。

首先，在 render 方法中调用了 projectObject 方法：

this.render = function ( scene, camera ) {

  // ...

  projectObject( scene, camera, 0, _this.sortObjects );

  // ...

}

projectObject 方法的定义如下：

function projectObject( object, camera, groupOrder, sortObjects ) {

  if ( object.visible === false ) return; // 注释1：visible属性是false直接返回

  // ...

  var children = object.children; // 注释2：递归应用在children上



  for ( var i = 0, l = children.length; i < l; i ++ ) {



    projectObject( children[ i ], camera, groupOrder, sortObjects ); // 注释2：递归应用在children上



  }

}

从注释1可以看出，如果 Group 的 visible 是 false，那么就不会在 children 上递归调用，所以就能达到通过 Group 控制一组对象的显示与隐藏的效果。

当 visible 是 false 的时候，Raycaster 的 intersectObject 或者 intersectObjects 也不会把该物体考虑在内。这块的代码逻辑是在 Raycaster.js：

intersectObject: function ( object, recursive, optionalTarget ) {

  // ...

  intersectObject( object, this, intersects, recursive ); // 注释1：调用了公共方法intersectObject

  // ...

},



intersectObjects: function ( objects, recursive, optionalTarget ) {

  // ...



  for ( var i = 0, l = objects.length; i < l; i ++ ) {



    intersectObject( objects[ i ], this, intersects, recursive ); // 注释1：循环调用了公共方法intersectObject



  }

  // ...

}



// 注释1：公共方法intersectObject

function intersectObject( object, raycaster, intersects, recursive ) {



    if ( object.visible === false ) return; // 注释1：如果visible是false，直接return



    // ...

}

从注释1可以看出，如果 Group 或者单个物体的 visible 是 false ，就不做检测了。

layers属性

Object3D的layers属性 是一个 Layers 对象。任何继承 Object3D 的对象都有这个属性，比如 Camera 。Raycaster 虽然不是继承自 Object3D ，但它同样有 layers 属性（r113版本以上）。

和上面的 visible 属性一样，layers 属性同样可以控制物体的显示与隐藏、Raycaster 的行为。当物体和相机至少有一个同样的层的时候，物体就可见，否则不可见。同样，当物体和 Raycaster 至少有一个同样的层的时候，才会进行是否相交的测试。这里，强调了是至少有一个，是因为 Layers 可以设置多个层。

Layers 一共可以表示 32 个层，0 到 31 层。内部表示为：

Layers 可以设置同时拥有多个层：

1. 可以通过 Layers 的 enable 和 disable 方法开启和关闭当前层，参数是上面表格中的 0 到 31 。
2. 可以通过 Layers 的 set 方法 只开启 当前层，参数是上述表格中的 0 到 31。
3. 可以通过 Layers 的 test 的方法判断两个 Layers 对象是否存在 至少一个公共层 。

当开启多个层的时候，其实就是上述表格中的二进制进行 按位或 操作。比如 同时 开启 0、2、31 层，那么内部存储的值就是 10000000000000000000000000000101。

layers 属性默认只开启 0 层。

还是上面那个例子，我们看下怎么控制物体的显示和隐藏：

// 控制单个物体的显示和隐藏

const geometry = new THREE.PlaneGeometry(1, 1)

const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 })

const plane = new THREE.Mesh(geometry, planeMaterial)

plane.layers.set(1) // 设置平面只有第1层，相机默认是在第0层，所以该物体不会显示出来

scene.add(plane)

// 控制一组物体的显示和隐藏

const geometry = new THREE.PlaneGeometry(1, 1)

const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 })

const plane = new THREE.Mesh(geometry, planeMaterial)

const group = new THREE.Group()

group.layers.set(1) // 注释1: 设置group只有第一层，相机默认是在第0层，但是此时平面物体还是显示出来了？

group.add(plane)

scene.add(group)

设置单个物体的 layer 可以看到物体成功的没有显示出来。但是，当我们给 group 设置 layer 之后，发现 group 的 children（平面物体）还是显示了出来。那么，这是什么原因呢？让我们看下源码，同样还是上面的 projectObject 方法：

function projectObject( object, camera, groupOrder, sortObjects ) {



  if ( object.visible === false ) return;



  var visible = object.layers.test( camera.layers ); // 注释1：判断物体和相机是否存在一个公共层



  if ( visible ) { // 注释1：如果存在，对物体进行下面的处理

    // ...

  }



  var children = object.children; // 注释1：不管该物体是否和相机存在一个公共层，都会对children进行递归



  for ( var i = 0, l = children.length; i < l; i ++ ) {



    projectObject( children[ i ], camera, groupOrder, sortObjects );



  }

}

从上述注释1可以看出，即使该物体和相机不存在公共层，也不影响该物体的 children 显示。这也就解释了上述为什么给 group 设置 layers ，但是平面物体还是能显示出来。从这一点上来看，layers 和 visible 属性在控制物体显示和隐藏的方面是不一样的。

和 visible 属性一样，接下来我们看下 Layers 对 Raycaster 的影响。同样我还是看了 Raycaster.js 文件，但是发现根本就没有 layers 字段。后来，我看了下最新版本 r140 的 Raycaster.js：

function intersectObject( object, raycaster, intersects, recursive ) {



  if ( object.layers.test( raycaster.layers ) ) { // 注释1：判断物体和Raycaster是否有公共层



    object.raycast( raycaster, intersects );



  }



  if ( recursive === true ) { // 注释1：不管该物体和Raycaster是否有公共层，都不影响children



    const children = object.children;



    for ( let i = 0, l = children.length; i < l; i ++ ) {



      intersectObject( children[ i ], raycaster, intersects, true );



    }

  }

}

不同于前面，visible 和 layers 都可以用来控制物体的显示与隐藏，visible 和 layers 只有一个可以用来控制 Raycaster 的行为，具体是哪一个生效，可以看下 Three.js的迁移指南。

可以看到，从 r114 版本，废除了 visible ，开始使用 layers 控制 Raycaster 的行为：

r113 → r114
Raycaster honors now invisible 3D objects in intersection tests. Use the new property Raycaster.layers for selectively ignoring 3D objects during raycasting.

总结

从上面可以看出，visible 和 layers 在控制物体显示与隐藏、Raycaster 是否进行等方面是存在差异的。

当该物体的 visible 属性为 false 并且 layers 属性测试失败的时候，行为总结如下：

原文链接：https://segmentfault.com/a/1190000041881241

本文参考：
官网
你可能并不需要微前端

什么是微前端？

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

qiankun是怎么来的？

所有的技术都是为了解决当前的现实问题，然后通过思考和实践创造出来的。微前端本质上是为了解决组织和团队间协作带来的沟通和管理的问题

引用微前端作者的思想：

微前端是康威定律在前端架构上的映射。 康威定律指导思想：既然沟通是大问题，那么就不要沟通就好了

作者认为大型系统都逃不过熵增定律，宇宙的本质，所有的东西都会从有序走向无序。一个东西如果你不去管理，他就会变成一坨垃圾，所以你想要维持一个东西的有序性，就要付出努力去维护他。所以从中找到平衡，qiankun就诞生了。通过分治的手段，让上帝的归上帝，凯撒的归凯撒

什么情况下使用qiankun？

我们在开发中可能会碰到下面的问题：

• 旧的系统不能下，新的需求还在来

• 公司内部有很多的系统，不同系统间可能需要展示同一个页面

• 一个系统过于庞大，每个人分别管理一个模块，git分支比较混乱。想要把系统拆分开来

微前端首先解决的，是如何解构巨石应用

核心价值：技术栈无关，应用之间不应该有任何直接或间接的技术栈、依赖、以及实现上的耦合。

作者认为正确的微前端方案的目标应该是：

方案上跟使用 iframe 做微前端一样简单，同时又解决了 iframe 带来的各种体验上的问题

qiankun的原理

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

由qiankun框架内部fetch请求资源，解析出js、css文件和HTML document，插入到主应用指定的容器中（使用HTML Entry接入方式）

1. 调用import-html-entry模块的importEntry函数，获取到对应子应用的html文件、可执行脚本文件以及publicpath

2. 调用getDefaultTplWrapper将子应用的html内容用div标签包裹起来

3. 调用createElement函数生成剔除html、body、head标签后的子应用html内容（通过innerHTML达到过滤效果）

4. 调用getRender函数得到render函数(所以子应用一定要有render函数)

5. 调用第4步得到的render，将container内部清空，并将子应用的dom元素渲染到指定的contanter元素上

6. 调用getAppWrapperGetter函数，生成一个可以获取处理过的子应用dom元素的函数initialAppWrapperGetter，以备后续使用子应用dom元素

7. 如果sandbox为true，则调用createSandboxContainer函数

8. 执行execScripts函数，执行子应用脚本

9. 执行getMicroAppStateActions函数，获取onGlobalStateChange、setGlobalState、offGlobalStateChange，用于主子应用传递信息

10. 执行parcelConfigGetter函数，包装mount和unmount

上述步骤的源码

qiankun如何实现隔离？

沙箱隔离

qiankun的沙箱有2种 JS沙箱 和 CSS沙箱

JS沙箱

JS沙箱又分为2种，快照沙箱（为了兼容IE）和 代理沙箱

快照沙箱 snapshotSandbox

基于diff实现，用来兼容不支持Proxy的浏览器，只适用单个子应用。会污染全局window

1. 激活沙箱：将主应用window的信息存到windowSnapshot里

2. 根据

   modifyPropMap

   ，恢复为子应用的window信息

   读取和修改的是window中的数据，windowSnapshot是缓存的数据

3. 退出沙箱：根据windowSnapshot把window恢复为主应用数据，将windowSnapshot和window进行diff，将变更的值存到modifyPropMap中，然后把window恢复为主应用数据

总结：

• windowSnapshot存主应用的window信息

• modifyPropMap存子应用修改的window信息

相对应的源码

代理沙箱

代理沙箱也分为2种，单例和多例，都是由Proxy实现

单例沙箱 legacySandbox

为了兼容性 singular 模式下依旧使用该沙箱，等新沙箱稳定之后再切换。 创建 addedPropsMapInSandbox（沙箱期间新增的全局变量）、modifiedPropsOriginalValueMapInSandbox（沙箱期间更新的全局变量）、currentUpdatedPropsValueMap（持续记录更新的(新增和修改的)全局变量的 map 用于在任意时刻做 snapshot） 三个变量，前两个用来恢复主应用window，最后一个用来恢复子应用window。同样会污染window，但性能比快照沙箱稍好，不用遍历window

1. 激活沙箱：根据currentUpdatedPropsValueMap还原子应用的window数据

2. window只要变动，在

   currentUpdatedPropsValueMap

   中进行记录

   1. 判断addedPropsMapInSandbox中是否有对应 key 的记录，没有新增一条，有的话往下执行

   2. 判断modifiedPropsOriginalValueMapInSandbox中是否有对应 key 的记录，没有的话，记录从window中对应key/value，有的话继续往下执行

   3. 修改window对应的key/value

3. 退出沙箱：根据addedPropsMapInSandbox和modifiedPropsOriginalValueMapInSandbox还原主应用的window信息

相对性的源码

多例沙箱 proxySandbox

主应用和子应用的window独立，不再共同维护一份window，终于JS沙箱也和qiankun微前端的思想统一了…实行了分治。不会污染全局window，支持多个子应用。

1. 激活沙箱

2. 取值，先从自己命名空间下的fakeWindow找key，没找到，找window

3. 赋值，直接给自己命名空间下的fakeWindow赋值

4. 退出沙箱

相对应的源码

CSS沙箱

严格沙箱 和 实验性沙箱

严格沙箱

在加载子应用时，添加strictStyleIsolation: true属性，会将整个子应用放到Shadow DOM内进行嵌入，完全隔离了主子应用

缺点：子应用中应用的一些弹框组件会因为找不到body而丢失

实验性沙箱

在加载子应用时，添加experimentalStyleIsolation: true属性，实现形式类似于vue中style标签中的scoped属性，qiankun会自动为子应用所有的样式增加后缀标签，如：div[data-qiankun=“xxx”]，这里的XXX为注册子应用时name的值

缺点：子应用中应用的一些弹框组件会因为插入到了主应用到body而丢失样式

相对应的源码

作者：丙乙
来源：https://juejin.cn/post/7100825726424711204

当没有key时

获取新旧数组长度，取最短的数组(Math.min())进行比较，如果用长的数组进行比较，会发生越界错误

以短数组进行for循环，从新旧数组各组一个值进行patch，如果内容一样就不进行更新，如果内容不一样，Vue源码会进行更深层次的比较，如果类型都不一样的话，直接创建一个新类型，如果类型一样，值不同，就只更新值，效率会更高，当for循环完毕，新旧数组长度会进行比较，如果旧的长度大有新的长度，就会执行unmountChildren,删除多余的节点，如果新的长度大于旧的长度，就会执行mountChildren,创建新的节点

当有key时

第一步，从头部开始遍历

通过isSameVNodeType进行比较

如果type 和 key 都一样，继续遍历，如果不同，跳出循环，进入第二步

第二步，从尾部开始遍历

和第一步操作一致

如果不同，跳出循环进入第三步

第三步，果旧节点遍历完，依然有新的节点，就是添加节点操作，用一个null和新节点进行patch，n1为空值时，是添加

如果新节点遍历完了，旧节点还有就进入第四步

第四步，新节点遍历完毕，旧节点还有，就进行删除操作

第五步，如果是一个无序的节点，vue会从旧的节点里找到新的节点里相同的值并创建一个新的数组，根据key建立一个索引，找到了就放入新数组里，比较完之后，有多余的旧节点就删除，有没有比较过的新节点就添加

作者：啊哈呀呀呀呀
来源：juejin.cn/post/7100858461520560135

尝试获取用户的位置信息

写在前面

想要像一些平台那样显示用户的位置信息，例如某省市那样。那么这是如何做到的， 据说这个位置信息的准确性在通信网络运营商那里？先不管，先实践尝试下能不能获取。

尝试一：navigator.geolocation

尝试了使用 navigator.geolocation，但未能成功拿到信息。

getGeolocation(){
  if ('geolocation' in navigator) {
    /* 地理位置服务可用 */
    console.log('地理位置服务可用')
    navigator.geolocation.getCurrentPosition(function (position) {
      console.dir('回调成功')
      console.dir(position) // 没有输出
      console.dir(position.coords.latitude, position.coords.longitude)
    }, function (error) {
      console.error(error)
    })
  } else {
    /* 地理位置服务不可用 */
    console.error('地理位置服务可用')
  }
}

尝试二：sohu 的接口

尝试使用 pv.sohu.com/cityjson?ie… 获取用户位置信息， 成功获取到信息，信息样本如下：

{"cip": "14.11.11.11", "cid": "440000", "cname": "广东省"}
// 需要做跨域处理
getIpAndAddressSohu(){
  // config 是配置对象，可按需设置，例如 responseType，headers 中设置 token 等
  const config = {
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json;charset=UTF-8',
    },
  }
  axios.get('/apiSohu/cityjson?ie=utf-8', config).then(res => {
    console.log(res.data) // var returnCitySN = {"cip": "14.23.44.50", "cid": "440000", "cname": "广东省"};
    const info = res.data.substring(19, res.data.length - 1)
    console.log(info) // {"cip": "14.23.44.50", "cid": "440000", "cname": "广东省"}
    this.ip = JSON.parse(info).cip
    this.address = JSON.parse(info).cname
  })
}

调试的时候，做了跨域处理。

proxy: {
  '/apiSohu': {
    target: 'http://pv.sohu.com/', // localhost=>target
    changeOrigin: true,
    pathRewrite: {
    '/apiSohu': '/'
    }
  },
}

下面是一张获取到位置信息的效果图：

尝试三：百度地图的接口

需要先引入百度地图依赖，有一个参数 ak 需要注意，这需要像管理方申请。例如下方这样

<script src="https://api.map.baidu.com/api?v=2.0&ak=3ufnnh6aD5CST"></script>
getLocation() { /*获取当前位置（浏览器定位）*/
  const $this = this;
  var geolocation = new BMap.Geolocation();//返回用户当前的位置
  geolocation.getCurrentPosition(function (r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      $this.city = r.address.city;
      console.log(r.address) // {city: '广州市', city_code: 0, district: '', province: '广东省', street: '', …}
    }
  });
}
function getLocationBaiduIp(){/*获取用户当前位置（ip定位）*/
  function myFun(result){
    const cityName = result.name;
    console.log(result) // {center: O, level: 12, name: '广州市', code: 257}
  }
  var myCity = new BMap.LocalCity();
  myCity.get(myFun);
}

成功用户的省市位置，以及经纬度坐标，但会先弹窗征求用户意见。

写在后面

尝试结果不太理想，sohu 的接口内部是咋实现的，这似乎没有弹起像下面那样的征询用户意见的提示。

而在 navigator.geolocation 和 BMap.Geolocation() 中是弹起了的。

用别人的接口总归是没多大意思，也不知道不用征求用户意见是咋实现的。

经实测 sohu 的接口和 new BMap.Geolocation() 都可以拿到用户的位置信息（省市、经纬度等）。

作者：灵扁扁

来源：https://juejin.cn/post/7100916925504421918

如何使用 Google Fonts CSS API 有效地使用WEB字体？

多年来，WEB字体技术发生了很多变化，过去在WEB中使用特殊字体的常用做法是图片或者Flash，这种借助图片或者Flash的实现方式不够灵活。随着 WEB 字体的出现，特别是 Google Fonts CSS API 的普及，让在WEB中使用特殊字体变得简单、快速、灵活，当然更多的还是面向英文字体，对于做外贸或者英文网站的开发者来说是福音。

Google Fonts CSS API 在不断发展，以跟上WEB字体技术的变化。它从最初的价值主张——允许浏览器在所有使用API的网站上缓存常用字体，从而使网页加载更快，到现在已经有了很大的进步。现在不再是这样了，但API仍然提供了额外的优化方案，使网站加载迅速，字体工作性能更佳。

使用Google Fonts CSS API ，网站可以请求它需要的字体数据来保持它的CSS加载时间到最少，确保网站访问者可以尽可能快地加载内容。该API将以最佳的字体响应每个请求的web浏览器。

所有这一切都是通过在代码中包含一行 HTML 来实现的。

如何使用 Google Fonts CSS API

Google Fonts CSS API 文档很好地总结了它：

你不需要做任何编程；所要做的就是在 HTML 文档中添加一个特殊的样式表链接，然后在 CSS 样式中引用该字体。

需要做的最低限度是在 HTML 中包含一行，如下所示：

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />

复制代码

当从 API 请求字体时，可以指定想要的一个或多个系列，以及（可选）它们的权重、样式、子集和其他选项。然后 API 将通过以下两种方式之一处理请求：

1. 如果请求使用 API 已有文件的通用参数，它会立即将 CSS 返回给用户，将定向到这些文件。

2. 如果请求的字体带有 API 当前未缓存的参数，它将即时对字体进行子集化，使用 HarfBuzz 快速完成，并返回指向它们的 CSS。

字体文件可以很大，但不一定要很大

WEB 字体可以很大，在 WOFF2 中，仅一个 Noto Sans Japanese 的大小就几乎是 3.4MB ，将其下载给每一位用户将拖累页面加载时间。当每一毫秒都很重要并且每个字节都很宝贵时，需要确保只加载用户需要的数据。

Google Fonts CSS API 可以创建非常小的字体文件（称为子集），实时生成，只为用户提供网站所需的文本和样式。可以使用 text 参数请求特定字符，而不是提供整个字体。

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />

复制代码

CSS API 还自动为用户提供额外的WEB字体优化，无需设置任何 API 参数。该 API 将为用户提供已启用 unicode-range 的 CSS 文件（如果 Web 浏览器支持），因此只为网站需要的特定字符加载字体。

unicode-range CSS 描述符是一种现在可用于应对大字体下载的工具，这个 CSS 属性设置 @font-face 声明包含的 Unicode 字符范围。如果在页面上呈现这些字符之一，则下载该字体。这适用于所有类型的语言，因此可以采用包含拉丁文、希腊文或西里尔文字符的字体并制作更小的子集。在前面的图表中，可以看到如果必须加载所有这三个字符集，则将超过 600 个字形。

这也为 Web 启用了中文、日文和韩文 (CJK) 字体提供支持。在上图中，可以看到 CJK 字体覆盖的字符数是拉丁字符字体的 15-20 倍。 CJK 字体通常非常大，并且这些语言中的许多字符不像其他字体那样频繁使用。

使用 CSS API 和 unicode-range 可以减少大约 90% 的文件传输。使用 unicode-range 描述符，可以单独定义每个部分，并且只有在内容包含这些字符范围中的一个字符时才会下载每个切片。

例如只想在 Noto Sans JP 中设置单词 こんにちは ，则可以按照如下方式使用：

• 自托管自己的 WOFF2 文件

• 使用 CSS API 检索 WOFF2

• 使用 CSS API 并将 text= 参数设置为 こんにちは

在此示例中，可以看到通过使用 CSS API，已经比自托管 WOFF2 字体节省了 97.5%，这要归功于 API 内置支持将大字体分隔到 unicode-range 中功能。通过更进一步并准确指定要显示的文本，可以进一步将字体大小减小到仅 CSS API 字体的 95.3% ，相当于比自托管字体小 99.9%。

Google Fonts CSS API 将自动以用户浏览器支持的最小和最兼容格式提供字体。如果用户使用的是支持 WOFF2 的浏览器，API 将提供 WOFF2 中的字体，但如果他们使用的是旧版浏览器，API 将以该浏览器支持的格式提供字体。为了减少每个用户的文件大小，API 还会在不需要时从字体中删除数据。例如，将为浏览器不需要的用户删除提示数据。

使用 Google Fonts CSS API 让WEB字体面向未来

Google 字体团队还为新的 W3C 标准做出了贡献，这些标准继续创新网络字体技术，例如 WOFF2。当前的一个项目是增量字体传输，它允许用户在屏幕上使用字体文件时加载非常小的部分，并按需流式传输其余部分，超过了 unicode-range 的性能。当使用 WEB 字体API时，当用户在浏览器中可用时，就可以获得这些底层字体传输技术的优化改进。

这就是字体 API 的美妙之处：用户可以从每项新技术改进中受益，而无需对网站进行任何更改。新的WEB字体格式？没问题，新的浏览器或操作系统支持？它已经处理好了。因此，可以自由地专注于用户和内容，而不是陷入WEB字体维护的困境。

可变字体支持内置

可变字体是可以在多个轴之间存储一系列设计变化的字体文件，新版本的 Google Fonts CSS API 包括对它们的支持。添加一个额外的变化轴可以使字体具有新的灵活性，但它几乎可以使字体文件的大小增加一倍。

当 CSS API 请求更具体时，Google Fonts CSS API 可以仅提供网站所需的可变字体部分，以减少用户的下载大小。这使得可以为 WEB 使用可变字体，而不会导致页面加载时间过长。可以通过在轴上指定单个值或指定范围来执行此操作，甚至可以在一个请求中指定多个轴和多个字体系列， API 可以灵活地满足需求。

总结

Google Fonts CSS API 可帮助WEB提供以下字体：

• 更兼容

• 体积更小

• 加载快速

• 易于使用

有关 Google 字体的更多信息，请访问 fonts.google.com。

作者：天行无忌
来源：juejin.cn/post/7100927964224700424

最近在工作中对 http 的请求参数解析有了进一步的认识，写个小短文记录一下。

回顾下自己的情况，大概就是：有点点网络及编程基础，只需要加深一点点对 HTTP 协议的理解就能弄明白了。

先分享一个小故事：我至今仍清晰地记得大三实习时的第一个工作任务，我需要调用其他部门提供的 api 去完成某项业务。

那个 api 文档只告诉了我请求参数需要传什么，没有提及用什么方式传，比如这样：

其实如果有经验的话，直接在请求体或 url 里填参数试一下就知道了；另一个是新人有时候不太敢问问题，其实只要向同事确认一下就好的。

然而由于当时我掌握的编程知识有限，只会用表单提交数据。所以当我下载完同事安利的 api 调用调试工具 postman 后，我就在网上查怎么用 postman 发送表单数据，结果折腾了好久 api 还是没能调通。

当天晚上我向老同学求助，他问我上课是不是又睡过去了？

我说你怎么知道？

他说当然咯，你上课睡觉不学习又不是一天两天的事情......

后来他告诉我得好好学一下 http 协议，看看可以在协议的哪些位置放请求参数。

一个简单的 http 服务器还原

那么，在正式讲解之前，我们先简单搭建一个 http 服务器，阿菌沿用经典的 python 版云你好服务器进行讲解。

云你好服务器的代码很简单，服务器首先会获取 name 用户名这个参数，如果用户传了这个参数，就返回 Hello xxx，xxx 指的是 name 用户名；如果用户没有传这个参数则返回 Hello World：

# 云你好服务源码
from flask import Flask
from flask import request

app = Flask(__name__)

# 云你好服务 API 接口
@app.get("/api/hello")
def hello():
    # 看用户是否传递了参数 name
    name = request.args.get("name", "")
    # 如果传了参数就向目标对象打招呼，输出 Hello XXX，否则输出 Hello World
    return f"Hello {name}" if name else "Hello World"

# 启动云你好服务
if __name__ == '__main__':
    app.run()

为了快速开发（大伙可以下载一个 python 把这个代码跑一下，用自己的语言实现一个类似的服务器也是可以的），阿菌这里使用了 flask 框架构建后端服务。

在具体获取参数的时候，我选择了在 request.args 中获取参数。这里提前剧透一下：在 flask 框架中，request.args 指的是从 url 中获取参数（不过这是我们后面讲解的内容，大家有个印象就好）

抓包查看 http 报文

有了 http 服务器后，我们开始深入讲解 http 协议，em...个人觉得只在学校上课看教材学计算机网络好像还欠缺了点啥，比较推荐大家下载一个像 Wireshark 这样的网络抓包软件，动手拆解网络包，深入学习各种网络协议。抓取网络包的示例视频

为了搞清楚什么是请求参数、表单参数、url 参数、Header 参数、Cookie 参数，我们先发一个 http 请求，然后抓取这个请求的网络包，看看一份 http 报文会携带哪些信息。

呼应开头，用户阿菌是个只会发表单数据的萌新，他使用 postman 向云你好 api 发送了一个 post 请求：

剧情发展正常，我们没能得到 Hello 阿菌（服务器会到 url 中获取参数，咱们用表单形式提交，所以获取不到）

由于咱们对请求体这个概念比较模糊，接下来我们重新发一个一模一样的请求，并且通过 Wireshark 抓包看一下：

可以看到强大的 Wireshark 帮助我们把请求抓取了下来，并把整个网络包的链路层协议，IP层协议，传输层协议，应用层协议全都解析好了。

由于咱们小码农一般都忙于解决应用层问题，所以我们把目光聚焦于高亮的 Hypertext Transfer Protocol 超文本传输协议，也就是大名鼎鼎的 HTTP 协议。

首先我们查看一下 HTTP 报文的完整内容：

可以看到，http 协议大概是这么组成的：

• 第一行是请求的方式，比如 GET / POST / DELETE / PUT

• 请求方式后面跟的是请求的路径，一般把这个叫 URI（统一资源标识符）

补充：URL 是统一资源定位符，见名知义，因为要定位，所以要指定协议甚至是位置，比如这样：http://localhost:5000/api/hello

• 请求路径后面跟的是 HTTP 的版本，比如这里是 HTTP/1.1

完整的第一行如下：

POST /api/hello HTTP/1.1

第二行的 User-Agent 则用于告诉对方发起请求的客户端是啥，比如咱们用 Postman 发起的请求，Postman 就会自动把这个参数设置为它自己：

User-Agent: PostmanRuntime/7.28.4

第三行的 Accept 用于告诉对方我们希望收到什么类型的数据，这里默认是能接受所有类型的数据：

Accept: */*

第四行就非常值得留意，Postman-Token 是 Postman 自己传的参数，这个我们放到下面讲！

Postman-Token: ddd72e1a-0d63-4bad-a18e-22e38a5de3fc

第五行是请求的主机，网络上的一个服务一般用 ip 加端口作为唯一标识：

Host: 127.0.0.1:5000

第六行指定的是咱们请求发起方可以理解的压缩方式：

Accept-Encoding: gzip, deflate, br

第七行告诉对方处理完当前请求后不要关闭连接：

Connection: keep-alive

第八行告诉对方咱们请求体的内容格式，这个是本文的侧重点啦！比如我们这里指定的是一般浏览器的原生表单格式：

Content-Type: application/x-www-form-urlencoded

好了，下面大家要留意了，第九行的 Content-Length 给出的是请求体的大小。

而请求体，会放在紧跟着的一个空行之后。比如本请求的请求体内容是以 key=value 形式填充的，也就是我们表单参数的内容了：

Content-Length: 23



name=%E9%98%BF%E8%8F%8C

看到这里我们先简单小结一下，想要告诉服务器我们发送的是表单数据，一共需要两步：

1. 将 Content-Type 设置为 application/x-www-form-urlencoded

2. 在请求体中按照 key=value 的形式填写请求参数

什么是协议？进一步了解 http

好了，接下来我们进一步讲解，大家试想一下，网络应用，其实就是端到端的交互，最常见的就是服务端和客户端交互模型：客户端发一些参数数据给服务端，通过这些参数数据告诉服务端它想得到什么或想干什么，服务端根据客户端传递的参数数据作出处理。

传输层协议通过 ip 和端口号帮我们定位到了具体的服务应用，具体怎么交互是由我们程序员自己定义的。

大概在 30 年前，英国计算机科学家蒂姆·伯纳斯-李定义了原始超级文本传输协议（HTTP），后续我们的 web 应用大都延续采用了他定义的这套标准，当然这套标准也在不断地进行迭代。

许多文献资料会把 http 协议描述得比较晦涩，加上协议这个词听起来有点高大上，初学者入门学习的时候往往感觉不太友好。

其实协议说白了就是一种格式，就好比我们写书信，约定要先顶格写个敬爱的 xxx，然后写个你好，然后换一个段落再写正文，可能最后还得加上日期署名等等。

我们只要按照格式写信，老师就能一眼看出来我们在写信；只要我们按协议格式发请求数据，服务器就能一眼看出来我们想要得到什么或想干什么。

当然，老师是因为老早就学过书信格式，所以他才能看懂书信格式；服务端程序也一样，我们要预先编写好 http 协议的解析逻辑，然后我们的服务器才能根据解析逻辑去获取一个 http 请求中的各种东西。

当然这个解析 http 协议的逻辑不是谁都能写出来的，就算能写出来，也未必写得好，所以我们会使用厉害的人封装好的脚手架，比如 java 里的 spring 全套、Go 语言里的 Gin 等等。

回到我们开头给出的示例：

from flask import Flask
from flask import request

app = Flask(__name__)

# 云你好服务 API 接口
@app.get("/api/hello")
def hello():
    # 看用户是否传递了参数 name
    name = request.args.get("name", "")
    # 如果传了参数就向目标对象打招呼，输出 Hello XXX，否则输出 Hello World
    return f"Hello {name}" if name else "Hello World"

# 启动云你好服务
if __name__ == '__main__':
    app.run()

阿菌的示例使用了 python 里的 flask 框架，在处理逻辑中使用了 request.args 获取请求参数，而 args 封装的就是框架从 url 中获取参数的逻辑。比如我们发送请求的 url 为：

http://127.0.0.1:5000/api/hello?name=ajun

框架会帮助我们从 url 中的 ? 后面开始截取，然后把 name=ajun 这些参数存放到 args 里。

切换一下，假设我们是云你好服务提供者，我们希望用户通过表单参数的形式使用云你好服务，我们只要把获取 name 参数的方式改成从表单参数里获取就可以了，flask 在 request.form 里封装了表单参数（关于框架是怎么在数行 http 请求中封装参数的，大家可以看自己使用的框架的具体逻辑，估计区别不大，只是存在一些语言特性上的差异）：

@app.post("/api/hello")
def hello():
    # 看用户是否传递了参数 name
    name = request.form.get("name", "")
    # 如果传了参数就向目标对象打招呼，输出 Hello XXX，否则输出 Hello World
    return f"Hello {name}" if name else "Hello World"

思考：我们可以在 http 协议中传递什么参数？

最后，我们解释本文的标题，其实想要明白各种参数之间的区别，我们可以换一个角度思考：

咱们可以在一份 http 报文的哪些位置传递参数？

接下来回顾一下一个 http 请求的内容：

POST /api/hello HTTP/1.1
User-Agent: PostmanRuntime/7.28.4
Accept: */*
Postman-Token: fbf75035-a647-46dc-adc0-333751a9399e
Host: 127.0.0.1:5000
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded
Content-Length: 23

name=%E9%98%BF%E8%8F%8C

大家看，咱们的 http 报文，也就是基于传输层之上的应用层报文，大概就长上面这样。

我们考虑两种情况，第一种情况，我们基于别人已经开发好的脚手架开发 http 服务器。

由于框架会基于 http 协议进行解析，所以框架会帮助我们解析好请求 url，各种 Header 头（比如：Cookie 等），以及具体的响应内容都帮我们封装解析好了（比如按照 key=value 的方式去读取请求体）。

那当我们开发服务端的时候，就可以指定从 url、header、响应体中获取参数了，比如：

• url 参数：指的就是 url 中 ? 后面携带的 key value 形式参数

• header 参数：指的就是各个 header 头，我们甚至可以自定义 header，比如 Postman-Token 就是 postman 这个软件自己携带的，我们服务端如果需要的话是可以指定获取这个参数的

• Cookie 参数：其实就是名字为 Cookie 的请求头

• 表单参数：指的就是 Content-Type 为 application/x-www-form-urlencoded 下请求体的内容，如果我们的表单需要传文件，还会有其他的 Content-Type

• json 参数：指的就是 Content-Type 为 application/json 下请求体的内容（当然服务端可以不根据 Content-Type 直接解析请求体，但按照协议的规范工程项目或许会更好维护）

综上所述，请求参数就是对上面各种类型的参数的一个总称了。

大家会发现，不管什么 url 参数、header 参数、Cookie 参数、表单参数，其实就是换着法儿，按照一定的格式把数据放到应用层报文中。关键在于我们的服务端程序和客户端程序按照一种什么样的约定去传递和获取这些参数。这就是协议吧～

还有另一种情况，当然这只是开玩笑了，比如以后哪位大佬或者哪家企业定义了一种新的数据传输标准，推广至全球，比如叫 hppt 协议，这样是完全可以自己给各种形式参数下定义取名字的。这可能就是为啥我们说一流的企业、大佬制定标准，接下来的围绕标准研发技术，进而是基于技术卖产品，最后是围绕产品提供服务了。

一旦标准制定了，整个行业都围绕这个标准转了，而且感觉影响会越来越深远......

讲解参考链接

作者：胡涂阿菌
来源：juejin.cn/post/7100400494081736711

事件委托基本概念

事件委托，就是一个元素的响应事件的函数委托给另一个元素

一般我们都是把函数绑定给当前元素的父元素或更外层元素，当事件响应到需要绑定的元素的时候，会通过事件冒泡机制（或事件捕获）去触发外层元素的绑定事件，在外层元素上去执行函数

在了解事件委托之前，我们可以先了解事件流，事件冒泡以及事件捕获

事件流：捕获阶段，目标阶段，冒泡阶段

DOM事件流有3个阶段：捕获阶段，目标阶段，冒泡阶段；

三个阶段的顺序为：捕获阶段——目标阶段——冒泡阶段

事件冒泡

事件的触发响应会从最底层目标一层层地向外到最外层（根节点）

比如说我现在有一个盒子f，里面有个子元素s

  <div class="f">
        <div class="s"></div>
  </div>

添加事件

var f = document.querySelector('.f')
var s = document.querySelector('.s')
f.addEventListener('click',()=>{
    console.log('fffff');
})
s.addEventListener('click',()=>{
    console.log('sssss');
})

当我点击子元素的时候

冒泡顺序 s -> f

事件捕获

事件响应从最外层的Window开始，逐级向内层前进，直到具体事件目标元素。在捕获阶段，不会处理响应元素注册的冒泡事件

继续使用上一个例子，只需要将addEventListener第三个参数改为true即可

添加事件

var f = document.querySelector('.f')
var s = document.querySelector('.s')
f.addEventListener('click',()=>{
    console.log('fffff');
},true)
s.addEventListener('click',()=>{
    console.log('sssss');
},true)

点击子元素

捕获顺序 f -> s

这里我们可以思考一下，如果同时绑定了冒泡和捕获事件的话，会有怎样的执行顺序呢？

例子不变，稍微改一下js代码

var f = document.querySelector('.f')
var s = document.querySelector('.s')
f.addEventListener('click',()=>{
    console.log('f捕获');
},true)
s.addEventListener('click',()=>{
    console.log('s捕获');
},true)
f.addEventListener('click',()=>{
    console.log('f冒泡');
})
s.addEventListener('click',()=>{
    console.log('s冒泡');
})

此时点击子元素

执行顺序： f捕获->s捕获->s冒泡—>f冒泡

得出结论：当我们同时绑定捕获和冒泡事件的时候，会先从外层开始捕获到目标元素，然后由目标元素冒泡到外层

回到事件委托

了解了事件捕获和事件冒泡，再来看事件委托就很好理解了

强调一遍，事件委托把函数绑定给当前元素的父元素或更外层元素，当事件响应到需要绑定的元素的时候，会通过事件冒泡机制（或事件捕获）去触发外层元素的绑定事件，在外层元素上去执行函数

新开一个例子

<ul class="list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
</ul>

现在我们有一个列表，当我们点击列表中的某一项时可以触发对应事件，如果我们给列表的每一项都添加事件，对于内存消耗是非常大的，效率上需要消耗很多性能

这个时候我们就可以把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件的时候再去匹配判断目标元素；

var list = document.querySelector('.list')
// 利用冒泡机制实现
list.addEventListener('click',(e)=>{
   e.target.style.backgroundColor='blue'
})
// 利用捕获机制实现
list.addEventListener('click',(e)=>{
   e.target.style.backgroundColor='red'
},true)

当我点击其中一个子元素的时候

总结

• 事件委托就是根据事件冒泡或事件捕获的机制来实现的

• 事件冒泡就是事件的触发响应会从最底层目标一层层地向外到最外层（根节点）

• 事件捕获就是事件响应从最外层的Window开始，逐级向内层前进，直到具体事件目标元素。在捕获阶段，不会处理响应元素注册的冒泡事件

补充：

对于目标元素，捕获和冒泡的执行顺序是由绑定事件的执行顺序决定的

作者：张宏都
来源：https://juejin.cn/post/7100468737647575048

一、 拦截器介绍

一般在使用axios时，会用到拦截器的功能，一般分为两种：请求拦截器、响应拦截器。

1. 请求拦截器
   在请求发送前进行必要操作处理，例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装；

2. 响应拦截器
   同理，响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。

二、 Axios实例

1. 创建axios实例

// 引入axios
import axios from 'axios'

// 创建实例
let instance = axios.create({
    baseURL: 'xxxxxxxxxx',
    timeout: 15000  // 毫秒
})

1. baseURL设置：

let baseURL;
if(process.env.NODE_ENV === 'development') {
    baseURL = 'xxx本地环境xxx';
} else if(process.env.NODE_ENV === 'production') {
    baseURL = 'xxx生产环境xxx';
}

// 实例
let instance = axios.create({
    baseURL: baseURL,
    ...
})

1. 修改实例配置的三种方式

// 第一种：局限性比较大
axios.defaults.timeout = 1000;
axios.defaults.baseURL = 'xxxxx';

// 第二种：实例配置
let instance = axios.create({
    baseURL: 'xxxxx',
    timeout: 1000,  // 超时，401
})
// 创建完后修改
instance.defaults.timeout = 3000

// 第三种：发起请求时修改配置、
instance.get('/xxx',{
    timeout: 5000
})

这三种修改配置方法的优先级如下：请求配置 > 实例配置 > 全局配置

三、 配置拦截器

// 请求拦截器
instance.interceptors.request.use(req=>{}, err=>{});
// 响应拦截器
instance.interceptors.reponse.use(req=>{}, err=>{});

1. 请求拦截器

// use(两个参数)
axios.interceptors.request.use(req => {
    // 在发送请求前要做的事儿
    ...
    return req
}, err => {
    // 在请求错误时要做的事儿
    ...
    // 该返回的数据则是axios.catch(err)中接收的数据
    return Promise.reject(err)
})

1. 响应拦截器

// use(两个参数)
axios.interceptors.reponse.use(res => {
    // 请求成功对响应数据做处理
    ...
    // 该返回的数据则是axios.then(res)中接收的数据
    return res
}, err => {
    // 在请求错误时要做的事儿
    ...
    // 该返回的数据则是axios.catch(err)中接收的数据
    return Promise.reject(err)
})

1. 常见错误码处理(error)
   axios请求错误时，可在catch里进行错误处理。

axios.get().then().catch(err => {
    // 错误处理
})

四、 axios请求拦截器的案例

// 设置请求拦截器
axios.interceptors.request.use(
  config => {
    // console.log(config) // 该处可以将config打印出来看一下，该部分将发送给后端（server端）
    config.headers.Authorization = store.state.token
    return config // 对config处理完后返回，下一步将向后端发送请求
  },
  error => { // 当发生错误时，执行该部分代码
    // console.log(error) // 调试用
    return Promise.reject(error)
  }
)

// 定义响应拦截器 -->token值无效时,清空token,并强制跳转登录页
axios.interceptors.response.use(function (response) {
  // 响应状态码为 2xx 时触发成功的回调，形参中的 response 是“成功的结果”
  return response
}, function (error) {
  // console.log(error)
  // 响应状态码不是 2xx 时触发失败的回调，形参中的 error 是“失败的结果”
  if (error.response.status === 401) {
    // 无效的 token
    // 把 Vuex 中的 token 重置为空，并跳转到登录页面
    // 1.清空token
    store.commit('updateToken', '')
    // 2.跳转登录页
    router.push('/login')
  }
  return Promise.reject(error)
})

作者：我彦祖不会秃
来源：https://juejin.cn/post/7100470316857557006

一、事件循环是什么

首先，JavaScript是一门单线程的语言，意味着同一时间内只能做一件事，但是这并不意味着单线程就是阻塞，而实现单线程非阻塞的方法就是事件循环

在JavaScript中，所有的任务都可以分为

• 同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行

• 异步任务：异步执行的任务，比如ajax网络请求，setTimeout定时函数等

同步任务与异步任务的运行流程图如下：

从上面我们可以看到，同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。上述过程的不断重复就事件循环

二、宏任务与微任务

如果将任务划分为同步任务和异步任务并不是那么的准确，举个例子：

console.log(1)

setTimeout(()=>{
    console.log(2)
}, 0)

new Promise((resolve, reject)=>{
    console.log('new Promise')
    resolve()
}).then(()=>{
    console.log('then')
})

console.log(3)

最终结果： 1=>'new Promise'=> 3 => 'then' => 2

微任务

一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前

常见的微任务有：

• Promise.then

• MutaionObserver

• Object.observe（已废弃；Proxy 对象替代）

• process.nextTick（Node.js）

宏任务

宏任务的时间粒度比较大，执行的时间间隔是不能精确控制的，对一些高实时性的需求就不太符合

常见的宏任务有：

• script (可以理解为外层同步代码)

• setTimeout/setInterval

• UI rendering/UI事件

• postMessage、MessageChannel

• setImmediate、I/O（Node.js）

这时候，事件循环，宏任务，微任务的关系如图所示

• 执行一个宏任务，如果遇到微任务就将它放到微任务的事件队列中

• 当前宏任务执行完成后，会查看微任务的事件队列，然后将里面的所有微任务依次执行完

回到上面的题目

console.log(1)
setTimeout(()=>{
    console.log(2)
}, 0)
new Promise((resolve, reject)=>{
    console.log('new Promise')
    resolve()
}).then(()=>{
    console.log('then')
})
console.log(3)

最终结果： 1=>'new Promise'=> 3 => 'then' => 2

// 遇到 console.log(1) ，直接打印 1
// 遇到定时器，属于新的宏任务，留着后面执行
// 遇到 new Promise，这个是直接执行的，打印 'new Promise'
// .then 属于微任务，放入微任务队列，后面再执行
// 遇到 console.log(3) 直接打印 3
// 好了本轮宏任务执行完毕，现在去微任务列表查看是否有微任务，发现 .then 的回调，执行它，打印 'then'
// 当一次宏任务执行完，再去执行新的宏任务，这里就剩一个定时器的宏任务了，执行它，打印 2

三、async与await

async 是异步的意思，await则可以理解为 async wait。所以可以理解async就是用来声明一个异步方法，而 await是用来等待异步方法执行

async

async函数返回一个promise对象，下面两种方法是等效的

function f() {
    return Promise.resolve('TEST');
}

// asyncF is equivalent to f!
async function asyncF() {
    return 'TEST';
}

await

正常情况下，await命令后面是一个 Promise对象，返回该对象的结果。如果不是 Promise对象，就直接返回对应的值

async function f(){
    // 等同于
    // return 123
    return await 123
}
f().then(v => console.log(v)) // 123

不管await后面跟着的是什么，await都会阻塞后面的代码

async function fn1 (){
    console.log(1)
    await fn2()
    console.log(2) // 阻塞
}

async function fn2 (){
    console.log('fn2')
}

fn1()
console.log(3)

上面的例子中，await 会阻塞下面的代码（即加入微任务队列），先执行 async外面的同步代码，同步代码执行完，再回到 async 函数中，再执行之前阻塞的代码

所以上述输出结果为：1，fn2，3，2

四、流程分析

通过对上面的了解，我们对JavaScript对各种场景的执行顺序有了大致的了解

这里直接上代码：

async function async1() {
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2() {
    console.log('async2')
}
console.log('script start')
setTimeout(function () {
    console.log('settimeout')
})
async1()
new Promise(function (resolve) {
    console.log('promise1')
    resolve()
}).then(function () {
    console.log('promise2')
})
console.log('script end')

分析过程：

执行整段代码，遇到 console.log('script start') 直接打印结果，输出 script start
遇到定时器了，它是宏任务，先放着不执行
遇到 async1()，执行 async1 函数，先打印 async1 start，下面遇到await怎么办？先执行 async2，打印 async2，然后阻塞下面代码（即加入微任务列表），跳出去执行同步代码
跳到 new Promise 这里，直接执行，打印 promise1，下面遇到 .then()，它是微任务，放到微任务列表等待执行
最后一行直接打印 script end，现在同步代码执行完了，开始执行微任务，即 await下面的代码，打印 async1 end
继续执行下一个微任务，即执行 then 的回调，打印 promise2
上一个宏任务所有事都做完了，开始下一个宏任务，就是定时器，打印 settimeout
所以最后的结果是：script start、async1 start、async2、promise1、script end、async1 end、promise2、settimeout

作者：用户8249803991033
来源：https://juejin.cn/post/7100468871752056868

渐变在网页设计中几乎随处可见，渐变的背景、文字、按钮、图表等等，相比于纯色，渐变的颜色显得更加灵动自然。

今天我们要探讨的，就是SVG中的渐变绘制。

更多SVG系列文章：SVG基础知识、SVG动画、SVG中的Transform变换。

概述

或许你有使用css绘制渐变图形的经验，如果要绘制一个渐变的矩形，我们可以这样写：

<div></div>

.bg{ 
    height: 100px; 
    width: 200px; 
    //给元素设置渐变背景
    background: linear-gradient(#fb3,#58a); 
}

使用SVG绘图，颜色是通过设置元素的fill（填充颜色）和stroke（边框颜色）属性来实现。

<rect height="100" width="150" stroke="#45B649" stroke-width="2" fill="#DCE35B"></rect>

对于渐变颜色的设置，我们不能像在css中那样，直接写fill="linear-gradient(color1, color2)"，而要使用专门的渐变标签：<linearGradient>（线性渐变） 和 <radialGradient>（径向渐变）。

线性渐变

基础使用

先来看一个最简单的例子，如何绘制一个线性渐变的矩形：

<svg>
   <defs>
       <linearGradient id="gradient-test">
           <stop offset="0%" stop-color="#DCE35B" />
           <stop offset="100%" stop-color="#45B649" />
       </linearGradient>
   </defs>
   <rect height="100" width="150" fill="url(#gradient-test)"></rect>
</svg>

通常，我们将渐变标签<linearGradient>定义在<defs>元素中，<linearGradient>的id属性作为其唯一标识，方便后面需要使用的地方对其进行引用。

<linearGradient>中的<stop>标签定义渐变色的色标，它的offset 和 stop-color属性分别定义色标的位置和颜色值，它还有一个属性stop-opacity，设定stop-color颜色的透明度。

如果将色标的位置拉近：

<linearGradient id="gradient-1">
    <stop offset="30%" stop-color="#DCE35B" />
    <stop offset="70%" stop-color="#45B649" />
</linearGradient>

矩形左边的 30％ 区域被填充为 #DCE35B 实色，而右边 30％ 区域被填充为 #45B649 实色。真正的渐变只出现在矩形中间 40％ 的区域。

如果两个颜色都设为50%，就得到了两块均分矩形的实色。在这基础上，我们可以生成各种颜色的条纹图案。

渐变的方向和范围

在没有设置渐变方向的时候，渐变的默认方向是从左向右。

如果要设定渐变方向，要用到<linearGradient>的x1,y1,x2,y2这几个属性。

<linearGradient id="gradient-1" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#DCE35B" />
    <stop offset="100%" stop-color="#45B649" />
</linearGradient>

我们知道，在平面上，方向一般由向量来表示。而渐变的方向由(x1,y1)（起点）和(x2,y2)（点）两个点定义的向量来表示。

在一般的应用场景中，x1,y1,x2,y2的取值范围是[0,1]（或者用百分数[0%, 100%]）。

对于矩形而言，不管矩形的长宽比例是多少，它的左上角对应的都是(0,0)，右下角则对应(1,1)。

x1="0" y1="0" x2="0" y2="1"表示从(0,0)到(0,1)，即渐变方向从矩形上边框垂直向下到下边框。

x1="0" y1="0.3" x2="0" y2="0.7"的情形如下：

可以看出，x1,y1,x2,y2不仅决定渐变的方向，还决定了渐变的范围，超出渐变范围的部分由起始或结束色标的颜色进行纯色填充。

案例1：渐变文字

<svg width="600" height="270">
    <defs>
        <linearGradient id="background">                          <!--背景渐变色-->
            <stop offset="0%" stop-color="#232526" />
            <stop offset="100%" stop-color="#414345" />
        </linearGradient>
        <linearGradient id="text-color" x1="0" y1="0" x2="0" y2="100%"> <!--文字渐变色-->
            <stop offset="0%" stop-color="#DCE35B" />
            <stop offset="100%" stop-color="#45B649" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" height="100%" width="100%" fill="url(#background)"></rect>
    <text y="28%" x="28%">试问闲情都几许？</text>
    <text y="44%" x="28%">一川烟草</text>
    <text y="60%" x="28%">满城风絮</text>
    <text y="76%" x="28%">梅子黄时雨</text>
</svg>
<style>
    text{
        font-size: 32px;
        letter-spacing:5px;
        fill:url(#text-color);     //文字的填充使用渐变色
    }
</style>

文字的填充，我们用了垂直方向的渐变色，对于每一行文字，都是从黄色渐变到绿色。

如果要将这几行文字作为一个整体来设置渐变色，像下面这样，应该怎样设置呢？

这就要用到gradientUnits属性了。

gradientUnits属性定义渐变元素（<linearGradient>、<radialGradient>）要参考的坐标系。 它有两个取值：objectBoundingBox 和 userSpaceOnUse。

默认值是objectBoundingBox，它定义渐变元素的参考坐标系为引用该渐变的SVG元素，渐变的起止、范围、方向都是基于引用该渐变的SVG元素（之前的<rect>，这里的<text>）自身，比如这里的每一个<text>元素的左上角都是渐变色的（0，0）位置，右下角都是（100%，100%）。

userSpaceOnUse则以当前的SVG元素视窗区域（viewport） 为渐变元素的参考坐标系。也就是SVG元素的左上角为渐变色的（0，0）位置，右下角为（100%，100%）。

<svg height="200" width="300"> 
    <defs>
        <!-- 定义两个渐变，除了gradientUnits，其他配置完全相同 -->
        <linearGradient id="gradient-1" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="objectBoundingBox">
            <stop offset="0%" stop-color="#C6FFDD" />
            <stop offset="100%" stop-color="#f7797d" />
        </linearGradient>
        <linearGradient id="gradient-2" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
            <stop offset="0%" stop-color="#C6FFDD" />
            <stop offset="100%" stop-color="#f7797d" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" ></rect>
    <rect x="150" y="0" ></rect>
    <rect x="0" y="100" ></rect>
    <rect x="150" y="100" ></rect>
</svg>
rect{
    height: 100px;
    width: 150px;
    fill: url(#gradient-1); //四个矩形都填充渐变色，下面左图为gradient-1，右图为gradient-2。
}

gradientUnits：userSpaceOnUse 适用于画布中有多个图形，但每个图形都是整体渐变中的一部分这样的场景。值得注意的是，当gradientUnits="userSpaceOnUse"时，x1,y1,x2,y2的取值只有用%百分数这样的相对单位才表示比例，如果取值为x2="1"，那就真的是1px，这一点与gradientUnits="objectBoundingBox"是不同的。

案例2：渐变的环形进度条

在上一篇文章中，我们实现了可交互的环形进度条：

这里我们将其改造成渐变的环形进度条。

使用渐变色作为描边stroke的颜色，中间使用一个白色透明度渐变的圆，增加立体感。

<!--改动部分的代码-->
<svg height="240" width="240" viewBox="0 0 100 100">
    <defs>
        <linearGradient id="circle">
            <stop offset="0%" stop-color="#A5FECB" />
            <stop offset="50%" stop-color="#20BDFF" />
            <stop offset="100%" stop-color="#5433FF" />
        </linearGradient>
        <linearGradient id="center">
            <stop offset="0%" stop-color="rgba(255,255,255,0.25)" />
            <stop offset="100%" stop-color="rgba(255,255,255,0.08)" />
         </linearGradient>
     </defs>
     <!--灰色的背景圆环-->
     <circle cx="50" cy="50" r="40" stroke-width="12" stroke="#eee" fill="none"></circle>
     <!--渐变的动态圆环-->
     <circle       
         
         cx="50" cy="50" r="40" 
         transform="rotate(-90 50 50)"
         stroke-width="12" 
         stroke="url(#circle)" 
         fill="none" 
         stroke-linecap="round"
         stroke-dasharray="251"></circle>
     <!--白色透明度渐变的圆，增加立体感-->
     <circle cx="50" cy="50" r="40" fill="url(#center)"></circle>
</svg> 

径向渐变

基础使用

径向渐变是色彩从中心点向四周辐射的渐变。

<svg height="300" width="200">

    <defs>

        <radialGradient id="test">

            <stop offset="0%" stop-color="#e1eec3" />

            <stop offset="100%" stop-color="#f05053" />

        </radialGradient>

    </defs>

    <rect fill="url(#test)" x="10" y="10" width="150" height="150"></rect>

</svg>

和线性渐变的结构类似，我们将径向渐变标签<radialGradient>定义在<defs>元素中，其id属性作为其唯一标识，以便后面需要使用的地方对其进行引用。

<radialGradient>中的<stop>标签定义渐变色的色标，它的offset 和 stop-color属性分别定义色标的位置和颜色值。

渐变的范围

径向渐变的范围由<radialGradient>的cx,cy,r三个属性共同决定，它们的默认值均是50%，是相对值，相对的是引用该渐变的SVG元素。

cx和cy定义径向渐变范围的圆心，（50%, 50%）意味着是引用该渐变的SVG元素的中心。r设定渐变范围的半径，当r=50%时，说明渐变范围的半径在x和y方向的分别是引用该渐变的SVG元素width和height的50%。

//当rect高度减小时，渐变在y方向的半径也减小。

<rect fill="url(#test)" x="10" y="10" width="150" height="100"></rect>

在cx,cy,r都取默认值的情况下，径向渐变的范围刚好覆盖引用该渐变的SVG元素。实际开发中，我们常常需要调整渐变范围。

渐变起点的移动

在默认情况下，渐变起点都是在渐变范围的中心，如果想要不那么对称的渐变，就需要改变渐变起点的位置。

<radialGradient>的fx和fy就是用来设置渐变色起始位置的。fx和fy的值也是相对值，相对的也是引用该渐变的SVG元素。

我们可以设定渐变的范围（cx,cy,r），也可以设定渐变的起点位置（fx,fy）。但是如果渐变的起点位置在渐变的范围之外，会出现一些我们不想要的效果。

测试代码如下，可直接运行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: flex;
            justify-content: center;
        }
        .control{
            margin-top:20px;
        }
    </style>
</head>
<body>
    <svg height="300" width="200">
        <defs>
            <radialGradient  id="test">
                <stop offset="0%" stop-color="#e1eec3" />
                <stop offset="100%" stop-color="#f05053" />
            </radialGradient>
        </defs>
        <rect fill="url(#test)" x="10" y="10" width="150" height="150"></rect>
    </svg>
    <div>
        <div>cx：<input value="50" type="range" min="0" max="100" id="cx" /></div>
        <div>cy：<input value="50" type="range" min="0" max="100" id="cy" /></div>
        <div>r：<input value="50" type="range" min="0" max="100" id="r" /></div>
        <div>fx：<input value="50" type="range" min="0" max="100" id="fx" /></div>
        <div>fy：<input value="50" type="range" min="0" max="100" id="fy" /></div>
    </div>
    <script>
        const rg = document.getElementById('test')
        document.querySelectorAll('input').forEach((elem) => {
            elem.addEventListener('change', (ev) => {
                rg.setAttribute(ev.target.id, ev.target.value+'%')
            })
        })
    </script>
</body>
</html>

综合案例：透明的泡泡

最后我们用线性渐变和径向渐变画一个泡泡。

分析：

• 背景是一个用线性渐变填充的矩形。

• 泡泡分为三个部分：由径向渐变填充的一个圆形和两个椭圆。

这里的径向渐变主要是颜色透明度的渐变。设定颜色透明度，我们可以直接指定stop-color的值为rgba，也可以通过stop-opacity来设定stop-color颜色的透明度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bubble{
            animation: move 5s linear infinite;
            animation-direction:alternate;
        }
        //泡泡的运动
        @keyframes move {
            0%{
                transform: translate(0,0);
            }
            50%{
                transform: translate(250px,220px);
            }
            100%{
                transform: translate(520px,50px);
            }
        }
    </style>
</head>
<body>
    <svg height="400" width="700">
        <defs>
            <!--背景的线性渐变-->
            <linearGradient id="background">
                <stop offset="0%" stop-color="#DCE35B" />
                <stop offset="100%" stop-color="#45B649" />
            </linearGradient>
            <!--光斑的径向渐变，通过fx、fy设置不对称的渐变-->
            <radialGradient id="spot" fx="50%" fy="30%">
                <stop offset="10%" stop-color="white" stop-opacity=".7"></stop>  
                <stop offset="70%" stop-color="white" stop-opacity="0"></stop>
            </radialGradient>
            <!--泡泡本体的径向渐变-->
            <radialGradient id="bubble">
                <stop offset="0%" stop-color="rgba(255,255,255,0)" ></stop>  
                <stop offset="80%" stop-color="rgba(255,255,255,0.1)" ></stop>
                <stop offset="100%" stop-color="rgba(255,255,255,0.42)"></stop>
            </radialGradient>
        </defs>
        <rect fill="url(#background)" width="100%" height="100%"></rect>
        <g>
            <circle cx="100" cy="100" r="70" fill="url(#bubble)"></circle>
            <ellipse rx="50" ry="20" cx="80" cy="60" fill="url(#spot)" transform="rotate(-25, 80, 60)" ></ellipse>
            <ellipse rx="20" ry="10" cx="140" cy="130" fill="url(#spot)" transform="rotate(125, 140, 130)" ></ellipse>
        </g>   
    </svg>
</body>
</html>

以上渐变配色均来自网站： uigradients.com/

作者：Alaso
来源：juejin.cn/post/7098637240825282591

前言

写过hybrid的同学，想必都会遇到这样的需求，如果用户安装了自己的APP，就打开APP或跳转到APP内某个页面，如果没安装则引导用户到对应页面或应用商店下载。这里就涉及到了H5与Native之间的交互，为什么H5能够唤起APP并且跳转到对应的页面？

就算你没写过想必也体验过，最常见的就是抖音里面的一些广告，如果你点击了广告，他判断你手机装了对应APP，那他就会去打开那个APP，如果没安装，他会帮你跳转到应用商店去下载，这个还算人性化一点的，有些直接后台给你去下载，你完全无感知。

哈哈，是不是觉得这种技术很神奇，今天我们就一起来看看它是如何实现的～

如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新文章～

唤端体验

实现之前我们先简单体验一下什么是唤端

从上图中，我们可以看到在浏览器中我们点击打开知乎，系统会提示我们是否在知乎中打开，当我们点击打开时，知乎就被打开了，这就是一个简单的唤端体验。

有了这项技术我们就可以实现H5唤起APP应用了，现阶段的引流方式大都得益于这种技术，比如广告投放、用户拉新、引流等。

唤端技术

体验过后，我们就来聊一聊它的实现技术是怎样的，唤端技术我们也称之为deep link技术。当然，不同平台的实现方式有些不同，一般常见的有这几种，分别是：

• URL Scheme（通用）

• Universal Link （iOS）

• App Link、Chrome Intents（android）

URL Scheme（通用）

这种方式是一种比较通用的技术，各平台的兼容性也很好，它一般由协议名、路径、参数组成。这个一般是由Native开发的同学提供，我们前端同学再拿到这个scheme之后，就可以用来打开APP或APP内的某个页面了。

URL Scheme 组成

[scheme:][//authority][path][?query][#fragment]

常用APP的 URL Scheme

打开方式

常用的有以下这几种方式

• 直接通过window.location.href跳转

window.location.href = 'zhihu://'

• 通过iframe跳转

const iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = 'zhihu://'
document.body.appendChild(iframe)

• 直接使用a标签进行跳转

• 通过js bridge来打开

window.miduBridge.call('openAppByRouter', {url: 'zhihu://'})

判断是否成功唤起

当用户唤起APP失败时，我们希望可以引导用户去进行下载。那么我们怎么才能知道当前APP是否成功唤起呢？

我们可以监听当前页面的visibilitychange事件，如果页面隐藏，则表示唤端成功，否则唤端失败，跳转到应用商店。

OK，我们尝试来实现一下：

首先我手机上并没有安装腾讯微博，所以也就无法唤起，我们让他跳到应用商店对应的应用下载页，这里就用淘宝的下载页来代替一下～

<template>
  <div class="open_app">
      <div class="open_app_title">前端南玖唤端测试Demo</div>
      <div class="open_btn" @click="open">打开腾讯微博</div>
  </div>
</template>

<script>
let timer
export default {
    name: 'openApp',
    methods: {
        watchVisibility() {
            window.addEventListener('visibilitychange', () => {
                // 监听页面visibility
                if(document.hidden) {
                    // 如果页面隐藏了，则表示唤起成功，这时候需要清除下载定时器
                    clearTimeout(timer)
                }
            })
        },
        open() {
            timer = setTimeout(() => {
              // 没找到腾讯微博的下载页，这里暂时以淘宝下载页代替
                window.location.href = 'http://apps.apple.com/cn/app/id387682726'
            }, 3000)
            window.location.href = 'TencentWeibo://'
        }
    }
}
</script>

<style lang="less">
.open_app_title {
    font-size: (20/@rem);
}
.open_btn{
    margin-top:(20/@rem);
    padding:(10/@rem) 0;
    border-radius: (8/@rem);
    background: salmon;
    color: #fff;
    font-size: (16/@rem);
}
</style>

适用性

URL Scheme 这种方式兼容性好，无论安卓或者 iOS 都能支持，是目前最常用的方式。从上图我们能够看出它也有一些比较明显的缺点：

• 无法准确判断是否唤起成功，因为本质上这种方式就是打开一个链接，并且还不是普通的 http 链接，所以如果用户没有安装对应的 APP，那么尝试跳转后在浏览器中会没有任何反应，通过定时器来引导用户跳到应用商店，但这个定时器的时间又没有准确值，不同手机的唤端时间也不同，我们只能大概的估计一下它的时间来实现，一般设为3000ms左右比较合适；

• 从上图中我们可以看到会有一个弹窗提示你是否在对应 APP中打开，这就可能会导致用户流失；

• 有 URL Scheme 劫持风险，比如有一个 app 也向系统注册了 zhihu:// 这个 scheme ，唤起流量可能就会被劫持到这个 app 里；

• 容易被屏蔽，app 很轻松就可以拦截掉通过 URL Scheme 发起的跳转，比如微信内经常能看到一些被屏蔽的现象。

Universal Link （iOS）

Universal Link 是在iOS 9中新增的功能，使用它可以直接通过https协议的链接来打开 APP。 它相比前一种URL Scheme的优点在于它是使用https协议，所以如果没有唤端成功，那么就会直接打开这个网页，不再需要判断是否唤起成功了。并且使用 Universal Link，不会再弹出是否打开的弹出，对用户来说，唤端的效率更高了。

原理

• 在 APP 中注册自己要支持的域名；

• 在自己域名的根目录下配置一个 apple-app-site-association 文件即可。（具体的配置前端同学不用关注，只需与iOS同学确认好支持的域名即可）

打开方式

openByUniversal () {
  // 打开知乎问题页
  window.location.href = 'https://oia.zhihu.com/questions/64966868'
  // oia.zhihu.com
},

适用性

• 相对 URL Scheme，universal links 有一个较大优点是它唤端时没有弹窗提示是否打开，提升用户体验，可以减少一部分用户流失；

• 无需关心用户是否安装对应的APP，对于没有安装的用户，点击链接就会直接打开对应的页面，因为它也是http协议的路径，这样也能一定程度解决 URL Scheme 无法准确判断唤端失败的问题；

• 只能够在iOS上使用

• 只能由用户主动触发

App Link、Chrome Intents（Android）

App Link

在2015年的Google I/O大会上，Android M宣布了一个新特性：App Links让用户在点击一个普通web链接的时候可以打开指定APP的指定页面，前提是这个APP已经安装并且经过了验证，否则会显示一个打开确认选项的弹出框，只支持Android M以上系统。

App Links的最大的作用，就是可以避免从页面唤醒App时出现的选择浏览器选项框;

前提是必须注册相应的Scheme，就可以实现直接打开关联的App。

• App links在国内的支持还不够，部分安卓浏览器并不支持跳转至App，而是直接在浏览器上打开对应页面。

• 系统询问是否打开对应App时，假如用户选择“取消”并且选中了“记住此操作”，那么用户以后就无法再跳转App。

Chrome Intents

• Chrome Intent 是 Android 设备上 Chrome 浏览器中 URI 方案的深层链接替代品。

• 如果 APP 已安装，则通过配置的 URI SCHEME 打开 APP。

• 如果 APP 未安装，配置了 fallback url 的跳转 fallback url，没有配置的则跳转应用市场。

这两种方案在国内的应用都比较少。

方案对比

URI Scheme

• URI Scheme的兼容性是最高，但使用体验相对较差:

• 当要被唤起的APP没有安装时，这个链接就会出错，页面无反应。

• 当注册有多个scheme相同的时候，没有办法区分。

• 不支持从其他app中的UIWebView中跳转到目标APP， 所以ios和android都出现了自己的独有解决方案。

Universal Link

• 已经安装APP，直接唤起APP；APP没有安装，就会跳去对应的web link。

• universal Link 是从服务器上查询是哪个APP需要被打开，所以不会存在冲突问题

• universal Link 支持从其他app中的UIWebView中跳转到目标app

• 缺点在于会记住用户的选择：在用户点击了Universal link之后，iOS会去检测用户最近一次是选择了直接打开app还是打开网站。一旦用户点击了这个选项，他就会通过safiri打开你的网站。并且在之后的操作中，默认一直延续这个选择，除非用户从你的webpage上通过点击Smart App Banner上的OPEN按钮来打开。

App link

• 优点与 universal Link 类似

• 缺点在于国内的支持相对较差，在有的浏览器或者手机ROM中并不能链接至APP，而是在浏览器中打开了对应的链接。

• 在询问是否用APP打开对应的链接时，如果选择了“取消”并且“记住选择”被勾上，那么下次你再次想链接至APP时就不会有任何反应

作者：南玖
来源：https://juejin.cn/post/7097784616961966094

前言

今天本来想开源自己写的CMS应用的，但是由于五一期间笔者的mac电脑突然崩溃了，所有数据无法恢复，导致部分代码丢失，但庆幸的是cms的打包文件已上传服务器，感兴趣的朋友可以在文末链接中访问查看。

今天要写的H5朋友圈也是基于笔者开发的cms搭建的，我将仿照微信朋友圈，带大家一起开发一个能发布动态（包括图片上传）的朋友圈应用。有关服务端部分笔者在本文中不会细讲，后续会在cms2.0中详细介绍。

你将收获

• 使用umi快速创建一个H5移动端应用

• 基于react-lazy-load实现图片/内容懒加载

• 使用css3基于图片数量动态改变布局

• 利用FP创建一个朋友圈form

• 使用rc-viewer查看/旋转/缩放朋友圈图片

• 基于axios + formdata实现文件上传功能

• ZXCMS介绍

应用效果预览

朋友圈列表

查看朋友圈图片

发布动态

正文

在开始文章之前，笔者想先粗略总结一下开发H5移动端应用需要考虑的点。对于任何移动端应用来说，我们都要考虑如下问题：

• 首屏加载时间

• 适配问题

• 页面流畅度

• 动画性能

• 交互友好

• 提供用户反馈 这些不仅仅是前端工程师需要考虑的问题，也是产品经理和交互设计师考虑的范畴。当然还有很多实际的考虑点需要根据自身需求去优化，以上几点大致解决方案如下：

1. 提高首屏加载时间 可以采用资源懒加载+gzip+静态资源CDN来优化，并且提供加载动画来降低用户焦虑。

2. 适配问题 移动端适配问题可以通过js动态设置视口宽度/比率或者采用css媒介查询来处理，这块市面上已经有非常成熟的方案

3. 页面流畅度 我们可以在body上设置-webkit-overflow-scrolling:touch;来提高滚动流畅度，并且可以在a/img标签上使用 -webkit-touch-callout: none来禁止长按产生菜单栏。

4. 动画性能 为了提高动画性能， 我们可以将需要变化的属性采用transform或者使用absolute定位代替，transform不会导致页面重绘。

5. 提供用户反馈 提供友好的用户反馈我们可以通过合理设置toast，modal等来控制

以上介绍的只是移动端优化的凤毛麟角，有关前端页面性能优化的方案还有很多，笔者在之前的文章中也详细介绍过，下面我们进入正文。

1. 使用umi快速创建一个应用

笔者将采用umi作为项目的前端集成解决方案，其提供了非常多了功能，使用起来也非常方便，并且对于antd和antd-mobile自动做了按需导入，所以熟悉react的朋友可以尝试一下，本文的方案对于vue选手来说也是适用的，因为任何场景下，方法和思维模式都是跨语言跨框架的。

目前umi已经升级到3.0，本文所使用的是2.0，不过差异不是很大，大家可以放心使用3.0. 具体使用步骤如下

// umi2.0
// 新建项目目录
mkdir friendcircle
// 创建umi项目
cd friendcircle
yarn create umi
// 安装依赖
yarn
yarn add antd-moblie

这样一个umi项目就创建好了。

2. 基于react-lazy-load实现图片/内容懒加载

在项目创建好之后，我们先分析我们需要用到那些技术点：

笔者在设计时研究了很多懒加载实现方式，目前采用react-lazy-load来实现，好处是支持加载事件通知，比如我们需要做埋点或者广告上报等功能时非常方便。当然大家也可以自己通过observer API去实现，具体实现方案笔者在几个非常有意思的javascript知识点总结文章中有所介绍。 具体使用方式：

<LazyLoad key={item.uid} overflow height={280} onContentVisible={onContentVisible}>
    // 需要懒加载的组件
    <ComponentA />
</LazyLoad>

react-lazy-load使用方式非常简单，大家不懂的可以在官网学习了解。

3. 使用css3基于图片数量动态改变布局

目前在朋友圈列表页有个核心的需求就是我们需要在用户传入不同数量的图片时，要有不同的布局，就像微信朋友圈一样，主要作用就是为了让用户尽可能多的看到图片，提高用户体验，如下图所示例子：

我们用js实现起来很方便，但是对性能及其不友好，而且对于用户发布的每一条动态的图片都需要用js重新计算一遍，作为一个有追求的程序员是不可能让这种情况发生的，所以我们用css3来实现，其实有关这种实现方式笔者在之前的css3高级技巧的文章中有详细介绍，我们这里用到了子节点选择器，具体实现如下：

.imgItem {
    margin-right: 6px;
    margin-bottom: 10px;
    &:nth-last-child(1):first-child {
      margin-right: 0;
      width: 100%;
    }
    &:nth-last-child(2):first-child,
    &:nth-last-child(3):first-child,
    &:nth-last-child(4):first-child,
    &:first-child:nth-last-child(n+2) ~ div {
      width:calc(50% - 6px);
      height: 200px;
      overflow: hidden;
    }
    &:first-child:nth-last-child(n+5),
    &:first-child:nth-last-child(n+5) ~ div {
      width: calc(33.33333% - 6px);
      height: 150px;
      overflow: hidden;
    }
}

以上代码中我们对于一张图片，2-4张图片，5张以上的图片分别设置了不同的尺寸，这样就可以实现我们的需求了，还有一个要注意的是，当用户上传不同尺寸的图片时，有可能出现高低不一致的情况，这个时候为了显示一致，我们可以使用img样式中的object-fit属性，有点类似于background-size，我们可以把img便签看作一个容器，里面的内容如何填充这个容器，完全用object-fit来设置，具体属性如下：

• fill 被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框

• contain 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”

• cover 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框

• scale-down 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些

• none 被替换的内容将保持其原有的尺寸

所以为了让图片保持一致，我们这么设置img标签的样式：

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

4. 利用FP创建一个朋友圈form

FP是笔者开源的一个表单配置平台，主要用来定制和分析各种表单模型，界面如下：

通过该平台可以定制各种表单模版并分析表单数据。这里朋友圈功能我们只需要配置一个简单的朋友圈发布功能即可，如下：

由于笔者电脑数据丢失导致代码部分损失，感兴趣可以了解一下。

5. 使用rc-viewer查看/旋转/缩放朋友圈图片

对于朋友圈另一个重要的功能就是能查看每一条动态的图片，类似于微信朋友圈的图片查看器，这里笔者采用第三方开源库rc-viewer来实现，具体代码如下：

<RcViewer options={{title: 0, navbar: 0, toolbar: 0}} ref={imgViewRef}>
  <div className={styles.imgBox}>
    {
      item.imgUrls.map((item, i) => {
        return <div className={styles.imgItem} key={i}>
          <img src={item} alt=""/>
        </div>
      })
    }
  </div>   
</RcViewer>

由上代码可知我们只需要在RcViewer组件里写我们需要的查看的图片结构就行了，其提供了很多配置选项可是使用，这里笔者在option中配置了title，navbar，toolbar均为0，意思是不显示这些功能，因为移动端只需要有基本的查看，缩放，切换图片功能即可，尽可能轻量化。效果如下：

当我们点击动态中的某一张图片时，我们可以看到它的大图，并通过手势进行切换。

6. 基于axios + formdata实现文件上传功能

实现文件上传，除了采用antd的upload组件，我们也可以结合http请求库和formdata来实现，为了支持多图上传并保证时机，我们采用async await函数，具体代码如下：

const onSubmit = async () => {
    // ... something code
    const formData = new FormData()
    for(let i=0; i< files.length; i++) {
      formData.delete('file')
      formData.append('file', files[i].file)
      try{
        const res = await req({
          method: 'post',
          url: '/files/upload/tx',
          data: formData,
          headers: {
              'Content-Type': 'multipart/form-data'
          }
        });
        // ... something co
      }catch(err) {
        Toast.fail('上传失败', 2);
      }
    }

其中req是笔者基于axios封装的http请求库，支持简单的请求/响应拦截，感兴趣的朋友可以参考笔者源码。

7. ZXCMS介绍

ZXCMS是笔者开发的一个商业版CMS，可以快速搭建自己的社区，博客等，并且集成了表单定制平台，配置中心，数据分发中心等功能，后期会扩展H5可视化搭建平台和PC端建站平台，成为一个更加只能强大的开源系统。设计架构如下：

具体界面如下：

一个笔者配置的社区平台：

文章详情页：

社区支持评论，搜索文章等功能。以下介绍后台管理系统：

简单介绍一下，后期笔者会专门出文章介绍具体实现方式和源码设计。

8. 源码地址

由于笔者电脑数据丢失，只能找到部分源码，所以大家可以参考以下地址：

• 表单定制平台源码

• H5朋友圈源码

• CMS在线预览地址

开源不易，欢迎支持～

作者：徐小夕
来源：https://juejin.cn/post/6844904150417801224

通过token校验登录信息

前端单点存储方式

共享本地存储数据token值，token存储方式用的是localStorage 或 sessionStorage,由于这两种都会受到同源策略限制。

跨域存储

想要实现跨域存储，先找到一种可跨域通信的机制，就是 iframe postMessage，它可以安全的实现跨域通信，不受同源策略限制（后端要修改配置允许iframe打开其他域的地址）。

cross-storage.js（开源库）

原理是用 postMessage 可跨域特性，来实现跨域存储。因为多个不同域下的页面无法共享本地存储数据，我们需要找个“中转页面”来统一处理其它页面的存储数据

前端后端通讯

多平台入口页=》某平台中转页=》平台首页

平台中转页

主要将其他平台的token 转成当前平台的信任token值

/** 单点登录获取票据 */
export async function getTicket(token) {
  return request('/getTicket', {
    method: 'GET',
     headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'x-access-token': token },
  });
}
/**免登录 */
export async function singleLogin(data) {
  return request('/singleLogin', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'x-access-token': token    },
    data
  });
}

export default (props: any) => {
  const _singleLogin = async () => {
    try {
      //根据本地token 获取票据 getTicket 通过localStorage.getItem("token")
      const { code, data } = await getTicket(token);
      //免登录成功后跳转页面
      const link = '/home';
      if (code !== 200 || !data) {
        window.location.href = link;
        return;
      }
      //免登接口 获取登录token值
      const res: any = await singleLogin({
        ticket: data,
        source: '',//平台来源
      });
      if (res?.code === 200) {
        localStorage.setItem('tokneKey', res?.data.tokneKey);
        localStorage.setItem('tokenValue', res?.data.tokenValue);
      } else {
        console.log(res?.msg);
        localStorage.removeItem('tokneKey');
        localStorage.removeItem('tokenValue');
      }
      window.location.href = link;
    } catch (e) {
      window.location.href = link;
    }
  };
  useEffect(() => {
    _singleLogin();
  });

  return (
    <div style={{ width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center', display: 'flex' }}>
      <Spin spinning={loading}></Spin>
    </div>
  );
};

作者：NeverSettle_
来源：https://juejin.cn/post/7021407926837313544

防抖概念

本质：是优化高频率执行代码的一种手段。

防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时。

好处：能够保证用户在频繁触发某些事件的时候，不会频繁的执行回调，只会被执行一次。

一个经典的比喻:

想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应。

电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这就是防抖策略（debounce）。

用于测试的HTML结构

实现效果：鼠标在盒子上移动时，盒子中央打印出数字。

      //未实现防抖时的测试代码
      const container = document.querySelector('#container')
      let count = 0
      function move(e) {
        container.innerHTML = count++
        console.log(this)
        console.log(e)
      }
      container.addEventListener('mousemove', move)

未实现防抖时对应的页面效果如下：

     //实现防抖后的测试代码
      const container = document.querySelector('#container')
      let count = 0
      function move(e) {
        container.innerHTML = count++
        console.log(this)
        console.log(e)
      }
      const test = debounce(move, 500, true)
      container.addEventListener('mousemove', test)
      const btn = document.querySelector('button')
      btn.onclick = function () {
        test.cancel()
      }

实现防抖后对应的页面效果如下：

接下来记录我一步步思考完善的过程。

v1.0 简单实现一个防抖(非立即执行版本)

function debounce(func, delay) {
  let timeout
  return function () {
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(func, delay)
  }
}

问题探讨：发现打印出来的this是window,打印出来的e是undefined。实际想要得到的是div#container和mouseEvent。出现这种情况的原因:在container的鼠标移动事件调用debounce函数时，在传递给形参func的实参move里打印了this与e。注意move是在定时器setTimeout里，定时器里的this在非严格模式下指向的是window对象，而window对象里的e自然是undefined。解决办法是在return的function里保存this与arguments，通过apply改变func的this指向同时把保存的参数传递给func。

v2.0 解决了this指向和event对象的问题。

function debounce(func, delay) {
  let timeout
  return function () {
    const context = this,
      args = arguments
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(function () {
      func.apply(context, args)
    }, delay)
  }
}

问题探讨：发现第一次不能立即执行,需要等到delay秒以后才会执行第一次。

v3.0 立即执行版本

function debounce(func, delay) {
  let timeout
  return function () {
    const context = this,
      args = arguments,
      callNow = !timeout
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(function () {
      timeout = null
    }, delay)
    if (callNow) func.apply(context, args)
  }
}

Q:为什么利用callNow = !timeout来判断?而不是用callNow = true,然后在定时器内将callNow设置为false?

首先解答为什么不能用布尔值来判断。因为定时器是异步任务，在delay时间段内，callNow始终为true，这就会导致func在delay时间段内会一直触发，直到时间到达delay，callNow变成false才会停止执行func。

再回到为什么可以利用callNow = !timeout来判断的问题上。在首次触发mousemove事件时，'let timeout'执行，此时timeout为undefined；callNow对timeout取反为true；因为此时timeout为undefined，跳过清除定时器操作；把定时器赋值给timeout，注意此时timeout保存的值是1（第一个定时器的id），但是定时器是异步任务，里面的'timeout = null'尚未执行；接下来判断callNow为true，执行func函数，达到了立即执行的效果。在delay秒内第二次移动鼠标，此时timeout保存的值为1，callNow取反为false；清除上一个id为1的定时器；timeout保存值2（id为2的定时器），判断callNow为false，不执行func；反之如果等到delay秒后第二次移动鼠标，此时异步任务已执行，timeout变为null，callNow取反为true，就会执行func。注意点：这里利用了闭包，timeout是可以被访问的。

问题探讨：可以通过传入一个参数来判断实际业务需求是要立即执行还是非立即执行。

v4.0 立即执行与非立即执行结合版本(immediate为true时立即执行,反之非立即执行)

function debounce(func, delay, immediate) {
  let timeout
  return function () {
    const context = this,
      args = arguments
    if (timeout) clearTimeout(timeout)
    if (immediate) {
      const callNow = !timeout
      timeout = setTimeout(function () {
        timeout = null
      }, delay)
      if (callNow) func.apply(context, args)
    } else {
      timeout = setTimeout(function () {
        func.apply(context, args)
      }, delay)
    }
  }
}

问题探讨：继续完善,如果需要获得func函数的返回值该怎么办呢?那就需要把func的执行结果保存为一个result变量return出来。由此又引出了一个问题，setTimeout是一个异步任务，return时获得的是undefined，只有在立即执行的情况下会获得返回值（immediate为true时）。

v5.0 包含返回值的版本

function debounce(func, delay, immediate) {
  let result, timeout
  return function () {
    const context = this,
      args = arguments
    if (timeout) clearTimeout(timeout)
    if (immediate) {
      const callNow = !timeout
      timeout = setTimeout(function () {
        timeout = null
      }, delay)
      if (callNow) result = func.apply(context, args)
    } else {
      timeout = setTimeout(function () {
        func.apply(context, args)
      }, delay)
    }
    return result
  }
}

问题探讨：当delay设置时间过长时(比如30秒甚至更长),我只有等到delay时间过后才能再次触发,如果可以把取消防抖绑定在一个按钮上,点击之后可以立即执行代码。需要考虑的问题是：可以把这个功能做成是debounce的一个cancel方法,因为函数也是一个对象。具体实现思路应该是把原先return出来的函数用一个变量debounced保存，然后再定义debounced.cancel，赋值为一个函数。

v6.0 包含取消功能的版本

function debounce(func, delay, immediate) {
  let timeout, result
  const debounced = function () {
    const context = this,
      args = arguments
    if (timeout) clearTimeout(timeout)
    if (immediate) {
      const callNow = !timeout
      timeout = setTimeout(function () {
        timeout = null
      }, delay)
      if (callNow) result = func.apply(context, args)
    } else {
      timeout = setTimeout(function () {
        func.apply(context, args)
      }, delay)
    }
    return result
  }
  debounced.cancel = function () {
    if (timeout) clearTimeout(timeout)
    //需要注意，这里的目的并不是为了避免内存泄漏！而是为了让取消后鼠标再次移入盒子能立即执行代码。如果不置空，取消过后再移入，是不会立即执行打印数字的操作的。
    timeout = null
  }
  return debounced
}

v7.0 ES6箭头函数版本（省略了this指向与参数对象的版本）

function debounce(func, delay, immediate) {
  let timeout, result
  //注意下面的函数声明不能改成箭头函数,否则this会指向window
  const debounced = function () {
    if (timeout) clearTimeout(timeout)
    if (immediate) {
      const callNow = !timeout
      timeout = setTimeout(() => {
        timeout = null
      }, delay)
      if (callNow) result = func.apply(this, arguments)
    } else {
      timeout = setTimeout(() => {
        func.apply(this, arguments)
      }, delay)
    }
    return result
  }
  debounced.cancel = () => {
    if (timeout) clearTimeout(timeout)
    timeout = null
  }
  return debounced
}

作者：GreyJiangy
来源：https://juejin.cn/post/7093466427805401118