小程序开发中，数据的监听和响应是非常重要的。为了更方便地监听数据的变化，小程序提供了 observe 方法。本文将详细介绍如何在小程序中使用 observe 实现数据监听，以及一些常见的应用场景。

什么是 observe？

observe 是小程序中的一个方法，用于监听数据的变化并触发相应的回调函数。它可以用于监听页面数据、组件数据以及其他数据对象。

如何使用 observe？

监听页面数据

在页面的 .js 文件中，可以使用 Page 函数中的 data 中的 observe 字段来监听数据的变化。以下是一个示例：

// pages/index/index.js

Page({

  data: {

    count: 0,

  },



  // 监听 count 数据的变化

  observe: {

    'count': function (newVal, oldVal) {

      console.log('count 的值从 ' + oldVal + ' 变为 ' + newVal);

    }

  },



  // 增加 count 值的函数

  increaseCount() {

    this.setData({

      count: this.data.count + 1,

    });

  },

});

在上述示例中，我们在 observe 字段中定义了一个监听器，当 count 数据发生变化时，会触发相应的回调函数。

监听组件数据

在小程序的组件中，也可以使用 observe 来监听组件数据的变化。以下是一个示例：

// components/my-component/my-component.js

Component({

  data: {

    message: 'Hello, World!',

  },



  methods: {

    changeMessage() {

      this.setData({

        message: 'New Message!',

      });

    },

  },



  // 监听 message 数据的变化

  observe: {

    'message': function (newVal, oldVal) {

      console.log('message 的值从 ' + oldVal + ' 变为 ' + newVal);

    }

  },

});

在组件的 observe 字段中同样定义了一个监听器，用于监听 message 数据的变化。

常见应用场景

1. 数据绑定

observe 可以用于在数据变化时自动更新视图，实现数据绑定。这对于构建响应式的页面和组件非常有用。

2. 数据校验

通过监听数据的变化，可以在数据变化时进行校验，确保数据的合法性。例如，监听输入框中的文本变化并验证其格式。

3. 事件通知

当某个数据变化时，可以通过 observe 触发相关的事件，通知其他部分的代码执行相应的操作。

4. 数据持久化

在某些情况下，需要将数据持久化到本地存储或服务器，可以在数据变化时触发数据保存操作。

注意事项和最佳实践

在使用 observe 进行数据监听时，有一些注意事项和最佳实践需要考虑：

1. 
   

   数据引用类型的监听：当监听对象是引用类型（例如对象或数组）时，需要注意对象的引用是否发生变化。observe 监听的是对象的引用，而不是对象内部属性的变化。如果需要监听对象内部属性的变化，可以使用深度监听或手动触发。

   
   


2. 
   

   避免过多监听器：不要过度使用 observe，因为过多的监听器可能会导致性能问题。只监听那些真正需要监控的数据。

   
   


3. 
   

   监听器的性能开销：监听器的回调函数在数据变化时会被频繁调用，因此要确保回调函数的执行效率较高，以避免影响应用的性能。

   
   


4. 
   

   避免循环引用：在监听器回调函数中不要再次修改被监听的数据，以防止循环引用和无限循环触发监听器。

   
   


5. 
   

   生命周期管理：在页面或组件销毁时，要记得取消监听以防止内存泄漏。可以在 onUnload 生命周期中取消监听。

   
   

onUnload() {

  this.setData({

    observe: null, // 取消监听

  });

}

通过谨慎使用 observe，你可以实现有效的数据监听和响应，提高小程序应用的可维护性和性能。

结语

observe 是小程序中非常有用的功能，它允许你监听数据的变化并执行相应的操作。无论是在页面中还是在组件中，都可以使用 observe 来实现数据的监听和响应。通过合理利用 observe，你可以构建更加动态和交互性的小程序应用。

前言

前2篇文章，分别介绍了dat.gui和纹理贴图，老是理论没有实战也是没有什么意思的，今天我们就来着手一个小案例，赶紧实现起来，让你的博客更加炫酷！

这个案例包含了tweenjs动画库的使用，该动画库已在three.js中内置，路径为： examples/jsm/libs/tween.module.js,使用起来也是比较简单。

初始化

老样子，场景、相机、渲染器三要素初始化，并导入需要的插件库，插件库都已在three中内置：

import * as THREE from 'three';

// tween动画库

import TWEEN from 'three/addons/libs/tween.module.js';

//通过轨迹球控件TrackballControls 我们可以实现场景的旋转、缩放、平移等功能

import { TrackballControls } from 'three/addons/controls/TrackballControls.js'

// 雪碧图

import { CSS3DRenderer, CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js'



// 定义场景、相机、渲染器

let scene, camera, renderer;



// 初始化

init()

// 渲染

animate();



function init() {

    // 透视相机  远端距离最好设大一点  不然会展示不全

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);

    // 相机位置

    camera.position.set(600, 400, 1500);

    // 相机朝向位置

    camera.lookAt(0, 0, 0);



    // 场景

    scene = new THREE.Scene();



    // 渲染画布

    renderer = new CSS3DRenderer();

    renderer.setSize(innerWidth, window.innerHeight);

    document.getElementById('container').appendChild(renderer.domElement);

}



// 渲染

function animate() {

    requestAnimationFrame(animate);

    renderer.render(scene, camera)

}

CSS3DSprite创建521个水球

// 定义小球数量

const particlesTotal = 512;

// 定义位置

const positions = [];

// 定义物体

const objects = []

const image = document.createElement('img');

image.addEventListener('load', () => {

    for (let i = 0; i < particlesTotal; i++) {

        //   cloneNode() 方法可创建指定的节点的精确拷贝

        const object = new CSS3DSprite(image.cloneNode())

        // 随机分布位置 -2000 2000的立方体内

        object.position.x = Math.random() * 4000 - 2000,

            object.position.y = Math.random() * 4000 - 2000,

            object.position.z = Math.random() * 4000 - 2000,

            scene.add(object)



        objects.push(object);

    }

})

image.src = './static/img/sprite.png';

上面的代码中，我们创建了img标签，并使用CSS3DSprite将HTML元素转化为threejs的CSS3精灵模型，类似与转换成了three中的网格，并随机分布在-2000，2000的立方体中。

看下效果：

添加控制器

关于控制器，前面也已经介绍过啦，通过控制器，我们就可以改变相机的位置，观察不同角度的物体。

// 定义控制器

let controls;

controls = new TrackballControls( camera, renderer.domElement );



// 渲染  

function animate() {

    ...

    controls.update();

    ...

}

注意哦，controls.update需要防止在animate中，每帧执行。

有了控制器。我们就可以实现交互啦：

让小球按规律放大缩小

让小球按照正弦时间，放大缩小，即有一种闪烁的效果：

const time = performance.now();



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

    const object = objects[i];

    const scale = Math.sin((Math.floor(object.position.x) + time) * 0.002) * 0.3 + 1;

    object.scale.set(scale, scale, scale);

}

让小球生成特定图形

生成矩形，对应的每个小球坐标：

const amount = 8;

const separationCube = 150;

const offset = ( ( amount - 1 ) * separationCube ) / 2;



for ( let i = 0; i < particlesTotal; i ++ ) {



    const x = ( i % amount ) * separationCube;

    const y = Math.floor( ( i / amount ) % amount ) * separationCube;

    const z = Math.floor( i / ( amount * amount ) ) * separationCube;



    positions.push( x - offset, y - offset, z - offset );



}

tween.js使用

const position = {x: 0,y: 0};

;//创建一段tween动画

const tween = new TWEEN.Tween(position)

//经过2秒，position对象的x和y属性分别从零变化为100、50

tween.to({x: 100,y: 50}, 2000);

//tween动画开始执行

tween.start();

// 动画效果  类似annimation

tween.easing()

// 完成时执行的钩子，里面可以继续执行下一个操作

tween.onComplete()

使杂乱的小球变成矩形

import * as THREE from 'three';

// tween动画库

import TWEEN from 'three/addons/libs/tween.module.js';

//通过轨迹球控件TrackballControls 我们可以实现场景的旋转、缩放、平移等功能

import { TrackballControls } from 'three/addons/controls/TrackballControls.js'

// 雪碧图

import { CSS3DRenderer, CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js'



// 定义场景、相机、渲染器

let scene, camera, renderer;

// 定义控制器

let controls;



// 定义小球数量

const particlesTotal = 512;

// 定义位置

const positions = [];

// 定义物体

const objects = []

let current = 0;

// 初始化

init()

// 渲染

animate();



function init() {

    // 透视相机  远端距离最好设大一点  不然会展示不全

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);

    // 相机位置

    camera.position.set(600, 400, 1500);

    // 相机朝向位置

    camera.lookAt(0, 0, 0);





    scene = new THREE.Scene();



    const image = document.createElement('img');

    image.addEventListener('load', () => {

        for (let i = 0; i < particlesTotal; i++) {

            //   cloneNode() 方法可创建指定的节点的精确拷贝

            const object = new CSS3DSprite(image.cloneNode())

            // 随机分布位置 -2000 2000的立方体内

            object.position.x = Math.random() * 4000 - 2000,

                object.position.y = Math.random() * 4000 - 2000,

                object.position.z = Math.random() * 4000 - 2000,

                scene.add(object)



            objects.push(object);

        }

        transition()

    })

    image.src = './static/img/sprite.png';



    // cube

    const amount = 8;

    const separationCube = 150;

    const offset = ((amount - 1) * separationCube) / 2;



    for (let i = 0; i < particlesTotal; i++) {



        const x = (i % amount) * separationCube;

        const y = Math.floor((i / amount) % amount) * separationCube;

        const z = Math.floor(i / (amount * amount)) * separationCube;



        positions.push(x - offset, y - offset, z - offset);



    }



    // 渲染画布

    renderer = new CSS3DRenderer();

    renderer.setSize(innerWidth, window.innerHeight);

    document.getElementById('container').appendChild(renderer.domElement);



    controls = new TrackballControls(camera, renderer.domElement);



}





// 动画

function transition() {

    const offset = current * particlesTotal * 3;

    const duration = 2000;

    for (let i = 0, j = offset; i < particlesTotal; i++, j += 3) {

        const object = objects[i];

        new TWEEN.Tween(object.position)

            .to({

                x: positions[j],

                y: positions[j + 1],

                z: positions[j + 2]

            }, Math.random() * duration + duration)

            .easing(TWEEN.Easing.Exponential.InOut)

            .start();

    }

    new TWEEN.Tween(this)

        .to({}, duration * 3)

        .onComplete(transition)

        .start();

    current = (current + 1) % 4;

}



// 渲染

function animate() {

    requestAnimationFrame(animate);

    controls.update();

    TWEEN.update();



    // 让小球按照正弦时间，放大缩小

    const time = performance.now();



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



        const object = objects[i];

        const scale = Math.sin((Math.floor(object.position.x) + time) * 0.002) * 0.3 + 1;

        object.scale.set(scale, scale, scale);



    }

    renderer.render(scene, camera)

}

杂乱的小球变成多种形态完整代码

限制文件大小啦，没法完全展示，大家自行运行看看吧！

<div id="container"></div>

<script type="module">

    import * as THREE from 'three';

    // tween动画库

    import TWEEN from 'three/addons/libs/tween.module.js';

    //通过轨迹球控件TrackballControls 我们可以实现场景的旋转、缩放、平移等功能

    import { TrackballControls } from 'three/addons/controls/TrackballControls.js'

    // 雪碧图

    import { CSS3DRenderer, CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js'



    // 定义场景、相机、渲染器

    let scene, camera, renderer;

    // 定义控制器

    let controls;



    // 定义小球数量

    const particlesTotal = 512;

    // 定义位置

    const positions = [];

    // 定义物体

    const objects = []

    let current = 0;

    // 初始化

    init()

    // 渲染

    animate();



    function init() {

        // 透视相机  远端距离最好设大一点  不然会展示不全

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);

        // 相机位置

        camera.position.set(600, 400, 1500);

        // 相机朝向位置

        camera.lookAt(0, 0, 0);





        scene = new THREE.Scene();



        const image = document.createElement('img');

        image.addEventListener('load', () => {

            for (let i = 0; i < particlesTotal; i++) {

                //   cloneNode() 方法可创建指定的节点的精确拷贝

                const object = new CSS3DSprite(image.cloneNode())

                // 随机分布位置 -2000 2000的立方体内

                object.position.x = Math.random() * 4000 - 2000,

                    object.position.y = Math.random() * 4000 - 2000,

                    object.position.z = Math.random() * 4000 - 2000,

                    scene.add(object)



                objects.push(object);

            }

            transition()

        })

        image.src = './static/img/sprite.png';



        // Plane

        const amountX = 16;

        const amountZ = 32;

        const separationPlane = 150;

        const offsetX = ((amountX - 1) * separationPlane) / 2;

        const offsetZ = ((amountZ - 1) * separationPlane) / 2;

        for (let i = 0; i < particlesTotal; i++) {

            const x = (i % amountX) * separationPlane;

            const z = Math.floor(i / amountX) * separationPlane;

            const y = (Math.sin(x * 0.5) + Math.sin(z * 0.5)) * 200;

            positions.push(x - offsetX, y, z - offsetZ);

        }



        // Cube

        const amount = 8;

        const separationCube = 150;

        const offset = ((amount - 1) * separationCube) / 2;

        for (let i = 0; i < particlesTotal; i++) {

            const x = (i % amount) * separationCube;

            const y = Math.floor((i / amount) % amount) * separationCube;

            const z = Math.floor(i / (amount * amount)) * separationCube;

            positions.push(x - offset, y - offset, z - offset);

        }



        // Random

        for (let i = 0; i < particlesTotal; i++) {

            positions.push(

                Math.random() * 4000 - 2000,

                Math.random() * 4000 - 2000,

                Math.random() * 4000 - 2000

            );

        }



        // Sphere

        const radius = 750;

        for (let i = 0; i < particlesTotal; i++) {

            const phi = Math.acos(- 1 + (2 * i) / particlesTotal);

            const theta = Math.sqrt(particlesTotal * Math.PI) * phi;

            positions.push(

                radius * Math.cos(theta) * Math.sin(phi),

                radius * Math.sin(theta) * Math.sin(phi),

                radius * Math.cos(phi)

            );

        }



        // 渲染画布

        renderer = new CSS3DRenderer();

        renderer.setSize(innerWidth, window.innerHeight);

        document.getElementById('container').appendChild(renderer.domElement);

        controls = new TrackballControls(camera, renderer.domElement);

    }





    // 动画

    function transition() {

        const offset = current * particlesTotal * 3;

        const duration = 2000;

        for (let i = 0, j = offset; i < particlesTotal; i++, j += 3) {

            const object = objects[i];

            new TWEEN.Tween(object.position)

                .to({

                    x: positions[j],

                    y: positions[j + 1],

                    z: positions[j + 2]

                }, Math.random() * duration + duration)

                .easing(TWEEN.Easing.Exponential.InOut)

                .start();

        }

        new TWEEN.Tween(this)

            .to({}, duration * 3)

            .onComplete(transition)

            .start();

        current = (current + 1) % 4;

    }



    // 渲染

    function animate() {

        requestAnimationFrame(animate);

        controls.update();

        TWEEN.update();



        // 让小球按照正弦时间，放大缩小

        const time = performance.now();



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



            const object = objects[i];

            const scale = Math.sin((Math.floor(object.position.x) + time) * 0.002) * 0.3 + 1;

            object.scale.set(scale, scale, scale);



        }

        renderer.render(scene, camera)

    }



</script>

设想一种场景，有两个组件，这两个组件在初始化阶段，都需要调用同一个 API 接口去获取数据。为了防止请求冗余，可以把两个组件的请求都挪到父组件中，由父组件统一调用一次请求，然后再将响应的数据结果传给两个子组件。这种方法应该是最常见的，不过它也有一个局限性条件：两个组件必须有一个共同的祖先组件，如果这两个组件是同级的兄弟组件倒也还好，如果非同级，那么数据的传参就会有些麻烦了。那么还有其他办法吗？当然是有的。

我们可以换个思路，每个组件还是保持原有的业务逻辑不变，从请求接口处做文章。既然是同一个接口调用了两次，而且还是返回了相同的请求结果，那么不妨在第一次时调用成功时，就把请求结果缓存起来，等到第二次再调用时，直接返回缓存的数据。按照这个思路可以写出第一版的代码（这里用了 TS 方便查看参数的类型）：

/**

 * 缓存请求的响应结果

 * 把发起请求的 Promise 对象挂载在原型对象上

 * @param request 请求函数

 */

function cacheRequest<T>(request: (...args: any[]) => Promise<T>) {

  const cache = Symbol("cache")

  return function (...args: any[]): Promise<T> {

    if (!request.prototype[cache]) {

      request.prototype[cache] = request(...args)

    }

    return request.prototype[cache]

  }

}

• 首先 cacheRequest 函数，需要接收一个参数 request，request 是一个返回结果为 Promise 对象的函数。cacheRequest 执行完后返回一个新的匿名函数。


• 然后，在匿名函数的内部，先判断 request 的原型对象上是否有 cache（这里的 cache 使用了 Symbol 类型，确保键名唯一）。也即，是否有缓存过的请求结果，如果没有，说明是第一次调用，则将 request 的执行结果存到缓存里。如果有缓存，则直接返回缓存。


• 可以看到，缓存也是一个 Promise 类型。在同时调用多次请求时，只要在第一次调用执行后，已经把 Promise 存到缓存里了，后续的请求返回的也是缓存里的 Promise，从而保证多个请求都指向同一个 Promise ，也即只会调用一次 API 接口。


• 这里需要注意一点，由于需要往 request 的原型对象上挂载缓存，所以 request 不能是箭头函数。因为箭头函数没有 this，也就意味着没有原型对象。

小测一下：

function cacheRequest(request) {

  const cache = Symbol("cache")

  return function (...args) {

    if (!request.prototype[cache]) {

      request.prototype[cache] = request(...args)

    }

    return request.prototype[cache]

  }

}



const request = function () {

  return new Promise(resolve => {

    console.log("fetch request")

    setTimeout(resolve, 2000)

  })

}



const newRequest = cacheRequest(request)



newRequest()

newRequest()

newRequest()

可以看到虽然 newRequest 调用了三次，但是 fetch request 只打印了一次，也就是说 request 只调用了一次，符合预期！但是，最后一次 newRequest 的调用，是在 3 秒后调用的，也是走的缓存，没有重新执行。仔细思考一下，后续无论什么时候调用 newRequest 都会使用缓存里的数据，不会重新调用请求了，这显然是不合理的。我们还需要加个缓存的过期时间，超过这个时间，就重新发起新的请求。第二版如下：

/**

 * 缓存请求的响应结果

 * 把发起请求的 Promise 对象挂载在原型对象上

 * 保证在 cacheTime 时间间隔内的多次请求，只会调用一次

 * @param request 请求函数

 * @param cacheTime 最大缓存时间（单位毫秒）

 */

export function cacheRequest<T>(request: (...args: any[]) => Promise<T>, cacheTime = 1000) {

  const cache = Symbol("cache")

  const lastTime = Symbol("lastTime")

  return function (...args: any[]): Promise<T> {

    if (!request.prototype[cache] || Date.now() - request.prototype[lastTime] >= cacheTime) {

      request.prototype[cache] = request(...args)

      request.prototype[lastTime] = Date.now()

    }

    return request.prototype[cache]

  }

}

• 首先，cacheRequest 新增一个入参 cacheTime，用于设置过期时间，默认为 1 秒。


• 其次，在原型对象上新增了一个 lastTime 属性，用来记录最后一次调用的时间。


• 当缓存为空，或者当前时间距离上一次调用时间超过缓存过期时间时，更新 cache 和 lastTime 。

再来小测一下：

function cacheRequest(request) {

  const cache = Symbol("cache")

  const lastTime = Symbol("lastTime")

  return function (...args) {

    if (!request.prototype[cache] || Date.now() - request.prototype[lastTime] >= cacheTime) {

      request.prototype[cache] = request(...args)

      request.prototype[lastTime] = Date.now()

    }

    return request.prototype[cache]

  }

}



const request = function () {

  return new Promise(resolve => {

    console.log("fetch request")

    setTimeout(resolve, 2000)

  })

}



const newRequest = cacheRequest(request)



newRequest()

newRequest()

setTimeout(newRequest, 3000)

这一次，fetch request 打印了两次，符合预期，完美！

前言

个人项目开发创业半年有余，两个项目全部扑街，一无所获。

仔细想来其实也不是什么都没有得到，因为现状就是，我创业开始前能预想到的最坏情况，哪怕一毛钱都挣不到，但是也可以从中积累一些经验，比如微信小程序的开发经验。

我过去7年的工作都是在从事前端开发，从最开始从事IPTV 开发，用原生JS、JQuery 开发运行在机顶盒上JSP 页面；到18年，创建了项目组的第一个Vue 项目，那时候我才算是开始“现代”前端的工作；21年到上海，在新公司开始全面使用React + TS，也就是时至创业开始，我所有的工作技能，都是前端技术，后端相关的只有自己瞎折腾的项目，没有真正应用到实际项目中的，这次也算是逼着自己进步了一把。

技术选型

前端 - 后台管理系统：React + TS，用了Antd 的组件库提供的模板直接创建项目

前端 - 微信小程序：原生微信小程序开发 + Vant Weapp

服务端：微信云开发

为什么要选用以上技术栈，只有有一个原因，就是成本极低！非常低！并且很稳定，前后端全部用JS 搞定；后台管理系统部署在腾讯云的Web 应用托管上，直接免去运维工作。说个题外话，前几年自己搞个人网站的时候，服务器是薅的阿里云的羊毛，结果就是啥活都得自己干，用Express 框架开发的后端服务，用Nginx 做代理，结果并发超过100个 服务器直接挂掉。。

现在这一套技术栈，几乎没有学习成本，腾讯云的Web 应用托管集成了CI 工具，提交代码到线上分之后，自动部署，用了半年多，网站、小程序都没有挂掉过。（我真不是腾讯的托。。）

后台管理系统

React、TS、Antd 业务开发技术不多赘述，讲讲怎么在Web 端请求微信云开发的接口吧。

微信云开发提供了可访问云服务的Web Sdk，引入sdk 后，只需要进行简单的初始化，即可访问接口。

云开发登录授权配置，打开匿名登录

示例代码

处理请求

import cloudbase from "@cloudbase/js-sdk";

...

const env = ""; // 环境id

const clientId = ""; 终端id



// 创建实例

const app: any = cloudbase.init({

  env,

  clientId,

});



const auth = app.auth({

  persistence: "local",

});



...

// 请求方法

export const cloudFn = async (

  type: string,

  params?: any

): Promise<any> => {

  // 判断登录态

  if (!auth?.hasLoginState()) {

    localStorage.clear();

    await auth.signInAnonymously();

  }



  const res = await app.callFunction({

    name: "xxxx", // 云函数名称

    data: { type, data: options?. }, // 传参

    parse: isDev, // 环境

  });



  // 根据自己的业务方式处理返回数据

  ...

处理接口

import { cloudFn } from "@/utils";



export const xxx = (params: API.xxx) => {

  return cloudFn("name", params);

};

Web Sdk 官方文档：docs.cloudbase.net/api-referen…

部署

提交代码到部署分之后，会自动部署，访问web 应用托管，会提供一个默认访问的域名，可以直接访问，但是不推荐生产使用，只需要再配置一个域名就好了。

微信小程序

如果没有开发过微信小程序，去看一下官方文档，前端基本可以无成本上手，参照官方文档开发就好；为什么组件库选择Vant Weapp，基本补全了官方没有提供的组件，使用方式也很简单，实际使用后体验不错，值得推荐。

微信云开发

我用Java、python、node 都写过后端接口，对于一个前端来说，单论简单、好上手而言，微信云开发，我愿称之为YYDS！就两个字，简单！

官方提供了请求的方法，我对其简单的封装了一下，如果觉得不错，尽管拿去用，如果有不完善的，还请指正

示例代码

云函数入口 index.js

const user = require('./user);



exports.main = async (event, context) => {

  switch (event.type) {

    case "userGet":

    case "userUpdate":

      return await user.main(event, context);

  



    default:

      return {

        code: -1,

          msg: '接口不存在'

      }

  }

};

user 入口

const get = require("./get");

const update = require("./update");



exports.main = async (event) => {

  const apiType = event.type

  const data = event.data || {};



  if (apiType === 'userGet') {

    return await get.main(data);

  };



  if (apiType === 'userUpdate') {

    return await update.main(data);

  };

};

user/get.js

const {

  dbGet, // 通用get 方法 (见后问)

  filterParams, // 清除异常参数，比如空字符串，null 等

} = require("../../utils");

const check = require('./check');



exports.main = async (data) => {

  // 校验参数

  if (check(data)) return {

    code: -1,

    msg: check(data),

  }



  const params = {

    offset: data.offset,

    limit: data.limit,

    name: data.name,

  };





  // 模糊搜索

  if (params.name) {

    params.name = {

      $regex: ".*" + params.name,

      $options: "i",

    };

  }



  return await dbGet("user", filterParams(params));

};

user/update.js

const {

  dbUpdate

} = require("../../utils");

const check = require('./check');



exports.main = async (data) => {

  if (check(data)) return {

    code: -1,

    msg: check(data),

  }





  const params = {

    _id: data._id,

    name: data.name

  };



  return await dbUpdate("user", params);

};

utils.js

const cloud = require("wx-server-sdk");



// 初始化云环境

cloud.init({

  env: cloud.DYNAMIC_CURRENT_ENV,

});



const db = cloud.database();



async function dbGet(

  databaseTable, // 表名

  params, // 参数

  orderByKey = "", // 排序参数

  order = "desc" // 排序方式

) {

  const pageInfo = {

    offset: params.offset || 1,

    limit: params.limit || 10,

  };

  delete params.offset;

  delete params.limit;



  try {

    // 获取总数

    const resCount = await db

      .collection(databaseTable)

      .where(params)

      .count();

      

    const resCountData = formatRes(resCount) 

    if(resCount?.code !== 0) {

      return resCountData

    }

    

    // 总数是0，直接返回数据

    if(resCount?.data === 0) {

        return {

          code: 0,

          data: { data: [] },

          total: 0,

        }

    }

    

    // 获取数据

    const res = await db

      .collection(databaseTable)

      .where(params)

      .skip((pageInfo.offset - 1) * pageInfo.limit) // 分页

      .limit(pageInfo.limit) // 最多几条

      .orderBy(orderByKey, order) // 排序

      .get();

    

    // 处理返回数据

    const resData = formatRes(res);

    if(resData?.code === 0) {

        return {

          code: 0,

          data: {

            data: resData?.data || [],

            total: resCountData?.data || 0

          },

        }

    } else {

      return resData

    }

  } catch (error) {

    return {

      code: -2,

      data: null,

      msg: "请求失败",

    };

  }

}



async function dbUpdate(databaseTable, updateData) {

  let res;

  let isSuccess = false;

  try {

    const params = updateData;

    

    if (updateData._id) {

      // 编辑

      delete params._id;

      res = await db.collection(databaseTable).doc(updateData._id).update({

        data: params,

      });

      

      if (res.errMsg === "document.update:ok") {

        isSuccess = true;

      }

    } else {

      // 新增

      res = await db.collection(databaseTable).add({

        data: params,

      });

      

      if (res.errMsg === "collection.add:ok") {

        isSuccess = true;

      }

    }

    if (isSuccess) {

      return {

        code: 0,

        _id: res._id,

        msg: `${updateData._id ? "更新" : "新增"}数据成功`,

      };

    } else {

      return {

        code: -1,

        data: null,

        msg: `${updateData._id ? "更新" : "新增"}数据失败`,

      };

    }

  } catch (error) {

    return {

      code: -1,

      data: null,

      msg: `请求服务器失败，${updateData._id ? "新增" : "更新"}数据失败`,

    };

  }

}



function formatRes(res) {

  const cloudFnMsgList = ["document.get:ok", "collection.get:ok", "collection.count:ok"];



  if (cloudFnMsgList.includes(res?.errMsg)) {

    return {

      code: 0,

      data: res.data || res.total,

    };

  } else {

    return {

      code: -1,

      data: null,

      msg: "请求服务器失败",

    };

  }

}



module.exports = {

  dbGet,

  dbUpdate,

  formatRes,

};

差不多到此就结束了，Web 端的后台管理系统，微信小程序的后端接口实现了，并且可以互通，这种方式是我实践过，在保证业务、性能、稳定的前提下，最低成本的全栈开发方案，如果有其他更好的方案，欢迎讨论。

"将 JavaScript 代码写入 HTML 文件与将其单独写入 JavaScript 文件之间有一些考虑因素。下面是一些关于两种做法的优缺点和适用场景的讨论：

将 JavaScript 代码写入 HTML 文件的优点：

• 方便快捷：将 JavaScript 代码直接嵌入到 HTML 文件中可以节省创建和加载额外文件的时间，特别是对于小型项目或仅需少量 JavaScript 代码的情况。


• 直观可见：通过将 JavaScript 代码嵌入到 HTML 文件中，可以更容易地将其与相关的 HTML 元素和结构联系起来，使代码的逻辑更加清晰明了。

将 JavaScript 代码单独写入 JavaScript 文件的优点：

• 结构清晰：将 JavaScript 代码与 HTML 分离可以使代码结构更加清晰，提高代码的可读性和可维护性。这样做有助于保持 HTML 文件的简洁和专注于内容。


• 可重用性：将 JavaScript 代码存储在单独的文件中，可以使其在多个 HTML 文件中重复使用，提高代码的可重用性和一致性。


• 缓存优化：当 JavaScript 代码被单独提取到外部文件中时，浏览器可以将其缓存起来，从而提高页面加载速度并节省带宽。

综上所述，将 JavaScript 代码写入 HTML 文件适合小型项目或仅需少量 JavaScript 代码的情况，以及需要快速原型设计或简单交互的情况。而将 JavaScript 代码单独写入 JavaScript 文件适合大型项目或需要复杂的逻辑和结构的情况，以及需要提高代码的可读性、可维护性和可重用性的情况。根据项目的需求和规模，我们可以灵活选择适合的方式来组织和管理 JavaScript 代码。"

大家好，今天我们来聊聊前端开发中的网络请求，顺便也来体验一下promise的神奇之处！

以下示例是基于axios@1.5.1进行开发，在一些低版本中的一些用法可能不太一样，建议安装新版进行测试。

阅读下文需要了解前置知识：promise、class、axios

请求中断

1.判定相同请求：请求url、请求方法、请求params参数、请求 body参数，四个值都相同，则认为是一个相同的请求。

2.判断请求中断：在上一个相同请求还没有得到响应前，再次请求，则会自动中断。

请求重发（无感刷新token）

1.当前请求返回401时，执行刷新token。

2.当同时存在多个请求返回401时，可在类中维护一个静态变量保存请求刷新接口的promise，防止多次调用刷新token。

3.RetryRequest类实例化参数：

   instance：请求实例对象

   success：刷新成功回调函数

   error：刷新失败回调函数

请求排队

1. queue：请求等待队列。
   


2. isWating：是否正在等待上个请求响应。
   


3. add：向队列里加入一个等待请求的promise的resolve方法，执行该方法可立刻发送下一个请求 。
   


4. next：执行下一个请求方法，在上一个请求响应后调用。
   
   

响应处理

axios请求实例

测试

1.请求中断测试

快速点击test请求按钮多次

2.刷新token请求重发测试

（1）当用户没有登录请求接口时

（2）当用户登录后，accessToken过期，但refreshToken还没过期调用接口时

在调用刷新token接口成功后，将重发失败的test接口

（3）当refreshToken过期后调用接口时

这时已经无法刷新token了，只能乖乖跳转到登录页面了。

3.请求排队测试

（1）没有使用请求排队时

场景：当输入框输入关键字实时查找内容时，由于网络原因，可能会出现先请求的后响应的请求，导致请求错乱。

如下，模拟网络请求延迟:

当输入框依次输入1、2、3、4、5时，期望的返回结果应该是1，12，123，1234，12345。
但确得到了以下的结果：

(2)使用请求队列时

在网络请求的waterfall列可以清晰看到，当上一请求完成才会执行下一请求，直到等待队列执行完成。

源码

后端接口

var express = require('express');

var router = express.Router();



const access_token = 'access_token'

const refresh_token = 'refresh_token'

// token有效期（单位毫秒）

const tokenValidTime = 1000*2

// 刷新token有效期

const refreshTokenValidTime = 1000*5

// 登录时间，模拟token过期

let loginTime;

// 模拟判断token是否过期

const IsTokenExpired = () => {

  if(new Date().getTime() > loginTime + tokenValidTime) {

    return true

  }

  return false

}

router.post('/login', (req, res) => {

  loginTime = new Date().getTime()

  res.json({

    access_token,

    refresh_token

  })

})



router.post('/refresh-token', (req, res, next) => {

  const refreshToken = req.headers.authorization

  console.log('refresh-token', refreshToken)

  if(refreshToken !== refresh_token) {

    return res.status(401).json({

      msg: ' refreshToken不正确！'

    })

  }

  if(new Date().getTime() > loginTime + refreshTokenValidTime) {

    return res.status(401).json({

      msg: ' refreshToken已过期，请重新登录！'

    })

  }

  loginTime = new Date().getTime()

  res.json({

    access_token: 'access_token',

    refresh_token: 'refresh_token'

  })

})



router.get('/test', (req, res, next) => {

  const token = req.headers.authorization

  if(token !== access_token) {

    return res.status(401).json({

      msg: '没有访问权限'

    })

  }

  if(IsTokenExpired()) {

    return res.status(401).json({

      msg: 'token已过期'

    })

  }

  res.json({

    name: '哈哈'

  })

})



router.get('/random', (req, res) => {

  const keyword = req.query.keyword

  setTimeout(() => {

    res.json({

      value: keyword

    })

    // 5秒内随机返回，测试网络请求延迟效果

  }, Math.random()*5000);

})



module.exports = router;

前端

Index.js

import axios from "axios"

import AbortRequest from './hooks/AbortRequest'

import ResponseHanlder from "./hooks/ResponseHanlder"

import { getAccessToken, getRefreshToken } from '@/utils'

import { refreshTokenUrl } from '@/api/urls'

import { useRequestKey } from "./hooks/useRequestKey"

import RequestQueue from "./hooks/RequestQueue"

import { isAddQueue } from '@/api'



export const baseURL = '/api'

const timeout = 6000



// 创建axios实例

const instance = axios.create({

  baseURL,

  timeout

});



// 创建中断请求控制器

const abortRequest = new AbortRequest()

// 创建响应处理器

const responseHandler = new ResponseHanlder(instance)

// 创建请求队列排队实例

const requestQueue = new RequestQueue()



// 添加请求拦截器

instance.interceptors.request.use(function (config) {

  console.log('在发送请求之前做些什么', config)

  // 在发送请求之前做些什么

  if(config.url !== '/login') {

    const token = config.url === refreshTokenUrl ? getRefreshToken() : getAccessToken()

    config.headers.Authorization = token

  }

  // 刷新token接口不用创建取消请求，已经再RetryRequest类维护静态属性

  if(config.url !== refreshTokenUrl) {

    abortRequest.create(useRequestKey(config), config)

  }

  // 加入请求等待队列

  if(isAddQueue(config)) {

    return requestQueue.add(config.url, config)

  }

  return config

}, function (error) {

  // 对请求错误做些什么

  return Promise.reject(error);

});



// 添加响应拦截器

instance.interceptors.response.use(function (response) {

  const config = response.config

  console.log('响应成功', response)

  abortRequest.remove(useRequestKey(config))

  if(isAddQueue(config)) {

    requestQueue.next(config.url, config)

  }

  // 2xx 范围内的状态码都会触发该函数。

  // 对响应数据做点什么

  return responseHandler.success(response)

}, function (error) {

  const config = error.config

  console.log('响应错误', config)

  if(config) {

    abortRequest.remove(useRequestKey(config))

  }

  if(isAddQueue(config)) {

    requestQueue.next(config.url, config)

  }

  // 超出 2xx 范围的状态码都会触发该函数。

  // 对响应错误做点什么

  if(axios.isCancel(error)) {

    return Promise.reject('已取消重复请求！')

  }

  return responseHandler.error(error)

});



export default instance;

AbortRequest.js

// 重复请求中断类

class AbortRequest {

  constructor() {

    // 请求中断控制器集合

    this.list = new Map()

  }

  // 创建中断请求控制器

  create(key, config) {

    const controller = new AbortController();

    config.signal = controller.signal

    // 集合中存在当前一样的请求，直接中断

    if(this.list.has(key)) {

      controller.abort()

    } else {

      this.list.set(key, controller)

    }

  }

  // 请求完成后移除集合中的请求

  remove(key) {

    this.list.delete(key)

  }

}

export default AbortRequest

RequestQueue.js

/**

 * 相同url请求队列，排队执行维护类

 */

class RequestQueue {

  constructor() {

    // 请求等待队列

    this.queue = {}

    // 正在等待上一请求执行中

    this.isWating = false

  }

  add(url, config) {

    return new Promise((resolve) => {

      const list = this.queue[url] || []

      if(this.isWating) {

        // 当前请求url存在等待发送的请求，则放入请求队列

        list.push({ resolve: () => resolve(config) })

      } else {

        // 没有等待请求，直接发送

        resolve(config)

        this.isWating = true

      }

      this.queue[url] = list

      console.log('list', list)

    })

  }

  // 响应处理

  next(url) {

    this.isWating = false

    // 拿出当前请求url的下一个请求对象

    if(this.queue[url]?.length > 0) {

      const nextRequest = this.queue[url].shift()

      // 执行请求

      nextRequest.resolve()

    }

  }

}



export default RequestQueue

RetryRequest.js

/**

 * 无感刷新token类

 */

class RetryRequest {

  // 解决存在多个并发请求时，重复调用刷新token接口问题

  static refreshTokenPromise = null

  constructor({

    instance, // axios实例

    success, // 刷新token成功执行的回调函数

    error  // 刷新token失败执行的回调函数

  }) {

    this.instance = instance

    this.success = success

    this.error = error

  }

  /**

   * @param config 当前请求对象，等待token刷新完成再重复执行

   * @param refreshTokenApi 刷新token方法

   */

  useRefreshToken(config, refreshTokenApi) {

    if(!config.headers.Authorization) {

      this.error()

      return Promise.reject('token不存在！')

    }

    return new Promise((resolve, reject) => {

      if(!RetryRequest.refreshTokenPromise) {

        // refreshTokenPromise不为null，则当前正在执行刷新token方法，不再重复调用

        RetryRequest.refreshTokenPromise = refreshTokenApi()

      }

      RetryRequest.refreshTokenPromise.then(res => {

        // 刷新token成功

        this.success(res)

        // 重新发送请求

        this.instance(config).then(data => {

          resolve(data)

        }).catch(err => {

          // 重发失败

          reject(err)

        })

      }).catch(err => {

        // refreshToken失效或刷新token失败

        this.error()

        reject(err)

      }).finally(() => {

        // 刷新token调用完成，重置

        RetryRequest.refreshTokenPromise = null

      })

    })

  }

}



export default RetryRequest

ResponseHanlder.js

import RetryRequest from './RetryRequest'

import { refreshToken as refreshTokenApi } from '@/api/index'

import { getRefreshToken, setRefreshToken, setAccessToken } from '@/utils'

import { refreshTokenUrl } from '@/api/urls'



/**

 * 响应处理类

 */

class ResponseHanlder {

  constructor(instance) {

    this.retryRequest = new RetryRequest({

      instance,

      success: (res) => {

        const { access_token, refresh_token } = res

        setAccessToken(access_token)

        setRefreshToken(refresh_token)

      },

      error: () => {

        console.log('刷新token失败！')

        // 执行失败逻辑...

      }

    })

  }

  // 请求正常响应方法

  success(response) {

    // 对响应数据做处理

    return response.data

  }

  // 请求错误响应方法

  error(error) {

    const status = error.response?.status

    // 当前返回401，且不是调用刷新token接口响应的（避免后端刷新token失败返回401导致死循环的情况）

    if(status === 401 && error.config.url !== refreshTokenUrl) {

      return this.retryRequest.useRefreshToken(

        error.config, 

        () => refreshTokenApi(getRefreshToken())

      )

    } else {

      return Promise.reject(error.response)

    }

  }

}



export default ResponseHanlder

request.js

import instance from './index'



class Request {

  constructor() {

    

  }

  get(url, params, args) {

    return instance.get(url, {

      params,

      ...args

    })

  }

  delete(url, params) {

    return instance.get(url, {

      params

    })

  } 

  post(url, data) {

    return instance.post(url, data)

  }

  put(url, data) {

    return instance.put(url, data)

  }

}



export default new Request();

结语

还有一个控制请求并发数量还没进行扩展，相信大家了解了请求排队的思路后，实现请求并发控制也不是什么难事了。

无感刷新token参考文章：juejin.cn/post/728974…

我们需要实现的效果图

理清需求

拿到效果图的第一步，理清下需求~

• 首先，元素有左右上下四个方向。这边的问题在我如何在一个元素上划分上下左右四个区域？


• 然后，鼠标进入元素和离开元素会有触发一个事件，这个简单js就自带了监听事件。


• 最后，最难的是如何判断鼠标进入的时候会落在我们划分好的上下左右四个区域？

思路

• 首先我们先来划分下四个区域，一般划分的都如下图

• 
  

  图里面有四个三角形，每个三角形代表的是一个方向，所以问题简化为如何在一个矩形里，根据对角线划分区域。由于元素存在坐标系，也就是X、Y轴，所以问题再次抽象成，如何得到两条对角线的线性函数。(初高中数学问题。)

  
  


• 
  

  最后的问题我们就要来搞定判断鼠标落点的问题，首先我们知道我们可以在元素的鼠标事件中通过event得到鼠标的pageX和pageY，再配合元素的offsetLeft和offsetTop就可以得到鼠标在元素中的坐标。综合一下就变成了，我有一个坐标，且我知道对角线的函数表达式，请问我如何知道我这个坐标是在函数的下面还是上面？

  
  


• 
  

  当然也许描述的比较抽象，我们可以类比一个例子，我现在有一个坐标(2,1)，有一个函数y=x，值域大于0(既y>0)，定义域大于0(既x>0)，求该坐标在y=x的函数下面还是上面？(是不是感觉到了线性规划得到最优解的味道，对，少年，没有错，就是这样。)这里我们只要把坐标中的x值代入函数，然后判断代入的结果是否大于坐标的y值，如果大于则在函数下面，小于则在函数上面，什么？你问等于怎么办？当然是在函数上面，该坐标即在上面又在下面，所谓薛定谔的坐标是也(当然是在函数上了)。

  
  


• 
  

  然后我们是不是可以扩展下，如果存在多个函数，再加上逻辑判断经常用的交集，并集是不是又有新的思维出现了呢？好了，这边就不再扩展了，下面直接上实现代码吧。

  
  

实现代码

注意:该demo只是简单的demo，其中有很多可以优化的地方，比如组件化，变量优化，利用发布订阅模式，实现事件联动

<!DOCTYPE html>

<html lang="ch">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css" >

		.ct{

			height: 100px;

			width: 100px;

			border:1px red solid;

		}

	</style>

</head>

<body>

	<div class="ct" onmouseover="fun1(event);" onmouseout="fun2(event);">

		

	</div>

	<script type="text/javascript">

        //当然这样绑定事件函数是不对的

	var div=document.getElementsByTagName("div")[0];

		function fun1(event){

			var x=event.pageX-div.offsetLeft;//(得到鼠标在框中的坐标)

			var y=event.pageY-div.offsetTop;//(得到鼠标在框中的坐标)

			var H=div.clientHeight;

			var W=div.clientWidth;

			var k=Math.floor(H/W);//为了防止不能整除

			//得到2个斜边函数

			//设y=ax+c

			//(0,0) (width,height)其中一个斜边过这两点

			//a=height/width,c=0

			//y=(height/width)*x;

			//(0,height) (width,0)另外一个斜边过这两点

			//a=-height/width,c=height

			//y=-(height/width)*x+height

			if((k*x)>=y && (H-k*x)>=y){//这是判断从上方进入,这边简化处理不对等于情况做特别处理

				console.log("从上方进入");

				//todo

			}



			if((k*x)<y && (H-k*x)<y){

				console.log("从下方进入");

				//todo

			}



			if((k*x)<y && (H-k*x)>y){

				console.log("从左边进入");

				//todo

			}



			if((k*x)>y && (H-k*x)<y){

				console.log("从右边进入");

				//todo

			}

			

		}

		function fun2(event){

			var x=event.pageX-div.offsetLeft;//(得到鼠标在框中的坐标)

			var y=event.pageY-div.offsetTop;//(得到鼠标在框中的坐标)

			var H=div.clientHeight;

			var W=div.clientWidth;

			var k=Math.floor(H/W);//为了防止不能整除

			//得到2个斜边函数

			//设y=ax+c

			//(0,0) (width,height)其中一个斜边过这两点

			//a=height/width,c=0

			//y=(height/width)*x;

			//(0,height) (width,0)另外一个斜边过这两点

			//a=-height/width,c=height

			//y=-(height/width)*x+height

			if((k*x)>=y && (H-k*x)>=y){//这是判断从上方进入,这边简化处理不对等于情况做特别处理

				console.log("从上方离开");

				//todo

			}



			if((k*x)<y && (H-k*x)<y){

				console.log("从下方离开");

				//todo

			}



			if((k*x)<y && (H-k*x)>y){

				console.log("从左边离开");

				//todo

			}



			if((k*x)>y && (H-k*x)<y){

				console.log("从右边离开");

				//todo

			}

			

		}

	</script>	

</body>

</html>

每次面试都问，每次都背；每次都背的不错，每次都不太理解。

定义

闭包是一个函数和对其周围状态的引用捆绑在一起，这样的组合就是闭包。闭包让我们可以在一个内层函数中访问到其外层函数的作用域。

一个简单的例子认识闭包：

function init() {

  var name = 'wendZzzoo';

  function getName() {

    console.log(name)

  }

  getName()

}

init()

使用场景

那闭包有什么作用呢？但从上面这个简单的例子中，似乎很难发现这样写，也就是闭包这样的写法的用途。

数据封装和隐藏

通过使用闭包，可以创建一个作用域限定的环境，以保护变量不受外部的访问和修改。这样可以防止变量被意外修改，避免命名冲突和全局污染，提高代码的可维护性和可读性。

举个例子，定义一个计数器函数，用来某些场景下计算次数。

没有使用闭包的示例：

let count = 0

function increment() {

  count++

  console.log(count)

}

increment()

increment()

上述代码是实现了计数器的需求，但是代码存在风险，count变量是全局定义的，在后续开发中或者是其他人维护时可以轻易修改这个变量，导致bug出现。

使用闭包的示例：

function createCounter() {

  let count = 0;

  function increment() {

    count++;

    console.log(count);

  }

  return increment;

}



const counter = createCounter();

counter();

counter();

在上述示例中，createCounter函数返回了一个内层函数increment，该函数可以访问并递增count变量。外层函数的作用域被封装在闭包中，外部无法直接访问和修改count变量。

这里可以衍生思考一下，count变量封装在闭包中只能递增，外部无法修改，那该如何重置或者递减count呢？

其实需要新增的逻辑也可以封装到闭包里，以重置count为例：

const counterModule = (function() {

  let count = 0;

  function increment() {

    return ++count;

  }

  function reset() {

    count = 0;

  }

  return {

    increment,

    reset

  };

})();



console.log(counterModule.increment());

console.log(counterModule.increment());

counterModule.reset();

console.log(counterModule.increment());

在上面的例子中，使用立即调用函数表达式（IIFE）创建了一个闭包，内部定义了count变量和两个操作它的函数increment和reset。通过返回一个包含这些函数的对象，实现了对count变量的封装和控制。

保持数据状态

通过闭包，内层函数可以访问和持有外层函数的变量，即使外层函数执行完毕，这些变量依然存在于内层函数的词法环境中，从而实现了数据状态的保持。

这个使用场景可以算是上一个的延申，在上述示例代码中添加传参，就可以起到了数据状态保持的目的。

函数柯里化

闭包使得函数可以返回另一个函数作为结果，从而形成函数工厂的模式。通过在内层函数中访问外层函数的参数或变量，可以创建具有不同参数或上下文的函数。这种技术称为柯里化，其目的在于避免频繁调用具有相同参数函数的同时，又能够轻松的重用。

举个例子，定义一个求矩形面积的函数。

不使用柯里化的示例：

function getArea(width, height) {

    return width * height

}

const area1 = getArea(10, 20)

console.log(area1)

const area2 = getArea(10, 30)

console.log(area2)

const area3 = getArea(10, 40)

console.log(area3)

上面代码里，假设我们需要这个计算矩形面积的函数，来计算宽度总是10的多种情况，那就需要多次调用getArea函数传入相同的宽度参数，且在维护的时候，假设需要统一修改宽度为20，就需要重复修改每一次调用时宽度的传参，这样重复的工作在力求优雅的情况下看来是不合适的。

使用闭包柯里化的示例：

function getArea(width) {

    return height => {

        return width * height

    }

}



const getTenWidthArea = getArea(10)

const area1 = getTenWidthArea(20)

console.log(area1)

const area2 = getTenWidthArea(30)

console.log(area2)

const area3 = getTenWidthArea(40)

console.log(area3)

如果有需要宽度改变的情况，也可以轻松复用：

const getTwentyWidthArea = getArea(20)

再举个例子，定义一个打印日志的函数。

function createLogger(prefix) {

  function logger(log) {

    console.log(`${prefix}: ${log}`);

  }

  return logger;

}



const exportWarnning = createLogger('warnning');

exportWarnning('这是一个警告日志');



const exportError = createLogger('error');

exportError('这是一个错误日志');

通过调用createLogger函数并传递不同的参数，可以创建具有不同日志前缀的logger函数。

通过上述两个柯里化的例子，可以发现柯里化是一种技术更多是一种提倡，使用这样的技术可以让你的代码更有维护性。

模拟私有化方法

私有方法是将某些函数或变量限定在一个作用域内，外部无法直接访问。

function makeCounter() {

  var privateCounter = 0;

  function changeBy(val) {

    privateCounter += val;

  }

  return {

    increment: function() {

      changeBy(1);

    },

    decrement: function() {

      changeBy(-1);

    },

    value: function() {

      return privateCounter;

    }

  }

}



var Counter1 = makeCounter();

var Counter2 = makeCounter();

console.log(Counter1.value());

Counter1.increment();

Counter1.increment();

console.log(Counter1.value());

Counter1.decrement();

console.log(Counter1.value());

console.log(Counter2.value());

上述代码通过使用闭包来定义公共函数，并令其可以访问私有函数和变量，这种方式也叫模块方式

两个计数器 Counter1 和 Counter2 是维护它们各自的独立性的，每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境，不会影响另一个闭包中的变量

注意事项

闭包是一种强大的特性，但滥用闭包可能导致代码可读性和性能方面的问题，因此需要注意的是：

1. 避免不必要的闭包，只有在确实需要保留状态或隐藏数据时才使用闭包。不要为了使用闭包而创建不必要的函数嵌套，盲目使用闭包并不会让你的代码看起来更高级。


2. 要注意内存管理，闭包会持有对外部作用域的引用，可能导致内存泄漏。确保在不再需要闭包时，手动解除对外部作用域的引用，以便垃圾回收器能够正确处理。


3. 特别要小心循环中的闭包，闭包会捕获循环变量的引用，可能导致意外结果。可以使用立即调用函数表达式（IIFE）或函数绑定来解决。


4. 换一种解决方案，可以使用模块模式，如果需要封装私有方法和变量，考虑使用模块模式或其他模块化工具，如ES6模块。这样可以更清晰地定义私有和公共部分，并提供更好的可维护性和可测试性。

内存泄漏

闭包可以引起内存泄漏的情况，通常是涉及对外部作用域的引用。当函数形成闭包时，它会持有对其包含作用域的引用，这可能导致无法释放被闭包引用的内存。

可能导致内存泄漏的情况：

1. 未及时释放闭包，如果闭包持有对外部作用域的引用，但不再需要使用闭包时，如果没有显式地解除对外部作用域的引用，闭包将继续存在并持有外部作用域中的变量。


2. 当闭包和其包含作用域之间存在循环引用时，可能导致内存泄漏。例如，如果闭包中引用了一个对象，而该对象又持有对闭包的引用，这将导致它们互相引用，无法被垃圾回收。


3. 闭包中引用了全局变量，闭包将一直存在，即使在不再需要闭包时也无法释放。这种情况下，全局变量将一直保持活动状态，无法被垃圾回收。

为避免闭包引起的内存泄漏，建议：

1. 及时解除引用，当不再需要使用闭包时，确保手动解除对外部作用域的引用。只需要将闭包中引用的变量设置为 null 或重新分配其他值，以便垃圾回收器能够正确处理。


2. 尽量避免闭包和其包含作用域之间的循环引用。确保在闭包中不引用外部对象，或者在外部对象中不引用闭包，以避免循环引用导致的内存泄漏。


3. 只在确实需要保留状态或隐藏数据时使用闭包，在不需要闭包的情况下，使用适当的作用域（例如局部变量或模块作用域）来防止不必要的内存占用。

内存泄漏的发生并不一定是由闭包引起的，还可能涉及其他因素，但是，闭包在不正确使用的情况下容易导致内存泄漏问题。

前言

要在 JavaScript 中实现屏幕录制，可以使用 navigator.mediaDevices.getDisplayMedia() 方法来获取屏幕的媒体流。然后，可使用 MediaRecorder 对象将媒体流录制为视频文件。

但该方法会在浏览器弹出一个授权窗口，让用户选择要分享的内容，这不可实现“无感知”。

如果真正做到无感知，那我们就不能借助浏览器或者系统系统的能力了。我们能做的就只能是通过js去操作了。

要在页面内直接录制视频似乎并不容易，没有现成的开源库可以使用，也没有很好的想法。

那我们换一个思路，视频是由帧组成的，我们是否可以不断的截图，然后组合成一段视频？好像是可以的。

效果

页面

先写一个简单的页面：

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <title>Canvas视频录制</title>

    <link rel="stylesheet" href="styles.css">

</head>



<body>

    <main>

        <div class="buttons">

            <button class="start-btn">开始录制</button>

            <button class="pause-btn">暂停录制</button>

            <button class="resume-btn">继续录制</button>

            <button class="stop-btn">结束录制</button>

        </div>

        <div id="box">

            <section class="content">

                <h2>TODO LIST</h2>

                <div class="background-div">

                    <button class="background-btn">切换背景颜色</button>

                </div>

                <div id="todo-form">

                    <input type="text" class="input-field" placeholder="输入待办事项">

                    <button type="submit" class="submit-btn">提交</button>

                </div>

                <div class="list"></div>

            </section>

        </div>

        <img src="" alt="" class="hidden">

    </main>



    <script src="<https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js>" defer></script>

    <script src="canvas.js" defer></script>

</body>



</html>

截图

实现网页的截图操作，最常用的库是 html2canvas用，它可以将网页中的 HTML 元素转换为 Canvas 元素，并将其导出为图像文件。在浏览器中捕获整个页面或特定区域的截图，包括 CSS 样式和渲染效果。

const canvasFunction = () => {

    html2canvas(box).then(canvas => {

        const imgStr = canvas.toDataURL("image/png");

        img.src = imgStr;

        img.onload = function () {

            ctx.drawImage(img, 0, 0, w, h);

        }

    });

  }

合成视频

这里我们要使用到一个 API MediaRecorder ，用于在浏览器中进行音频和视频的录制。它提供了一种简单的方式来捕获来自麦克风、摄像头或屏幕的媒体数据，并将其保存为文件或进行实时流传输。

它有以下几个常用的方法：

• isTypeSupported() 返回一个 Boolean 值，来表示设置的 MIME type 是否被当前用户的设备支持。


• start() 开始录制媒体，这个方法调用时可以通过给 timeslice 参数设置一个毫秒值，如果设置这个毫秒值，那么录制的媒体会按照你设置的值进行分割成一个个单独的区块，而不是以默认的方式录制一个非常大的整块内容。


• pause() 暂停媒体录制。


• resume() 继续录制之前被暂停的录制动作。


• stop() 停止录制。同时触发 dataavailable 事件，返回一个存储 Blob 内容的录制数据。之后不再记录。

首先创建一个 canvas 元素，用来保存 html2canvas 的截图，然后通过 captureStream 方法实时截取媒体流。

const w = boxBoundingClientRect.width;

const h = boxBoundingClientRect.height;

const canvas = document.createElement('canvas');

canvas.setAttribute('id', 'canvas');

canvas.setAttribute('width', w);

canvas.setAttribute('height', h);

canvas.style.display = 'none';

box.appendChild(canvas);



const img = document.querySelector('img');

const ctx = canvas.getContext("2d");

const allChunks = [];

const stream = canvas.captureStream(60); // 60 FPS recording   1秒60帧

通过 canvas 的流来创建一个 MediaRecorder 实例，并在 ondataavailable 事件中保存视频信息：

const recorder = new MediaRecorder(stream, {

    mimeType: 'video/webm;codecs=vp9'

});



recorder.ondataavailable = (e) => {

    allChunks.push(e.data);

};

最后，在停止录制时将帧信息创建 blob 并插入到页面上：

recorder.stop();

const fullBlob = new Blob(allChunks);

const videoUrl = window.URL.createObjectURL(fullBlob);



const video = document.createElement('video');

video.controls = true;

video.src = videoUrl;

video.muted = true;

video.autoplay = true;

document.body.appendChild(video);

或者可以将视频下载

recorder.stop();

const fullBlob = new Blob(allChunks);

const videoUrl = window.URL.createObjectURL(fullBlob);



let link = document.createElement('a');

link.style.display = 'none';

let fullBlob = new Blob(allChunks);

let downloadUrl = window.URL.createObjectURL(fullBlob);

link.href = downloadUrl;

link.download = 'canvas-video.mp4';

document.body.appendChild(link);

link.click();

link.remove();

这里，为了节省资源，只在点击按钮、输入等事件发生时才调用 html2canvas 截图 DOM。

如果实时记录屏也可以使用 requestAnimationFrame 。

最后

虽然实现了无感知录制屏幕，但也仅限于网页内，没有办法录制网页以外的部分。

以上的 demo 中只实现了 DOM 的录制，如果想要录制鼠标轨迹，可以增加一个跟随鼠标的元素～

本人是95前端菜鸟一枚，目前在广州打工混口饭吃。刚好换了工作，感觉生活节奏变得慢了下来，打了这么多年工总觉得想纪录些什么，怕以后自己老了忘记自己还有这么一些风流往事。书接上回。

小聚

“这里！这里！”我朝着声音望去，便看到小白兴奋的向我招着手，我小步快跑的走了过去，在小白对面落了座。“少爷阔气，今天怎么请我来这里吃饭？”我问出心中疑虑，璇玑地中海自助旋转餐厅，位于广州塔106层，从窗户放眼望去，晚霞与珠江美景浑天然一色，无数高楼一览无遗，万家灯火如星光皆纳入眼前，最要命的是，大众点评人均525/人，还好不是我掏钱。

小白不以为然的笑了笑，“等到核污水传遍全球，你想吃都不敢吃了，人生短短几十年，要懂得及时行乐。而且，咱两的关系也非同一般啊~”。打从有记忆起，我和小白就认识了，年龄跟我差不多，性格跟我差不多，爱好也跟我差不多，好巧不巧，如今他跟我一样也是在广州做IT，所以我们经常联系，关系特别好。“还是你会享受，走吧，拿吃的。”随即我和小白分头寻宝，不一会儿的功夫，桌子上便摆满了芝士波士顿、芝士生蚝、海螺、北极贝、不知名海虾各种海鲜。

我抓起一个芝士生蚝就往里炫，甜中带嫩，入口即化，香味从味蕾刺激我的脑海，当我准备再抓一个，小白轻飘飘的说了句：“我破产了。”我顿时一僵，尴尬地把手收了回去，突然想到了什么，小心翼翼地问，“你不会找我借钱吧？我可没钱哦，这顿AA也行”。

互诉

“你想的倒是挺多，只是这芝士生蚝我才拿了两个，你吃了一个还想再拿，我只能技术性打断你了”，我沉默良久，直至小白把另一只芝士生蚝炫完，露出了他满足的嘴脸

我才询问道“是你那家自助预约舞蹈室吗？”

破产

小白点了点头，“自从前年疫情过后，收入就一直不太乐观了，且竞争愈来愈激烈，到了暑假最旺期间扣完水电和物业租金，我竟还要倒贴两百元。这样亏本坚持了大概8个月后，合伙人L总她终于决定要解散了。之前成立公司和几位合伙人签订的股份分配书感觉自己犹如走上人生巅峰，随着几家分店加盟，畅想无限美好未来，好日子越来越有，越来越甜。未曾想两年不到，昨日便签了注销公司的文件，现在搞一份副业，付出了大量心血，最后也未必落得一个美好的结局。”

“唉~”我长叹了一声，刚刚吃完这个芝士生蚝，嘴巴有点渴，顺手拿起手边的茶杯抿了一口，这铁观音茶，清淡清香、浓郁扑鼻，喝了一口后自有淡淡回甘。“大局已定，失败乃成功之母，不过这次你收获也不少吧？”之前我也听过小白的舞蹈室副业，记得他刚成立之初前几个月每月都有几万流水，扣除杂七杂八到手还能有个两三千块钱，没想到还是经受不住岁月的考验。

“的确有所收获，L总把舞蹈室的哈曼卡顿音响送我了，这音响听着贼带劲~”。或许是我安慰，小白皱着的双眉似乎舒展几分，“那你呢，你最近在搞什么？”

“我上王者了。”我漫不经心的回了一句。

“王者是谁？”，我白了他一眼，他笑了笑，“没想到你还在玩啊？”。“嗯，现在机制60星就能王者了，有时间便利用下elo机制完成下十年前的梦想，最近练了一手刀妹，真的万军丛中过，片叶不沾身，得心应手。”说罢，我便给他看了看我上王者的截图。

“羡慕你，你还是一如既往的追寻你想要的东西。”小白一边说一边用筷子把半截波士顿龙虾连根拔起，张开血盆大口，吞入嘴中。

“切，就算舞蹈室倒闭也不影响你现在的生活吧，你看你现在一样过的挺滋润啊。”我不屑的说到。

“本来还挺滋润的，但最近压力有点大了，现在每个月发工资后都往家里打几千。”我不解，问道“怎么了，是家里出什么事了吗？”

暴雷

“我家资产暴雷了，你之前也应该知道我家里主要收入吧”。我点了点头，“现在存放到那里的资产因为公司负责人喝酒脑溢血离世了，剩下一大堆债务没法处理，本来每月提供的利息也没有了，本金还被冻结住，现在暂时拿不回来，这些都是我妈跟我说的。”我听完，大吃一惊，不过这种依靠大资金存放赚取高额利息的盈利，本来就是极高风险的，正所谓高风险高回报。但我看着小白失落的神情，也只能安慰说，“有什么要帮忙的跟我说，还有这顿哥请你”。

“就等你这句话”。小白乐呵呵的看着我，看着他这副表情，我硬了，拳头硬了。

“现在主要靠负责人的弟弟处理家中事务，他也承诺两年后慢慢还回本金，但是家里主要的收入来源没有了，我也不想家里人看不开，毕竟健康最重要。之前本来就有向家里人打钱，只不过现在翻了一倍，自己花钱也不能像之前大手大脚了，不过请你这顿饭倒是不成问题”。小白见我长舒一口气，好奇问我，“怎么请我吃顿饭好像要你命似的，最近手头很紧吗？”

“你小子，我听你这件事也不是死局，才放心下来，如果承诺两年之内将本金还清并落实到位，也已经算是万幸了。不过我最近手头的确不充裕”。“怎么？之前大礼包十几万全买皮肤去了？”。我摇了摇头，给他打开了我的小鹏APP，“我买了小鹏G9”。

小白看了看我的订单，便看向我，满是不解，“咦，之前你的梦中情车不是宝马5系，连在掘金写小说用的头图都是盗的百度，怎么买了小鹏G9啊，你不是看不上这种牌子的车吗？”

我笑了笑，说“所以这篇小说用的头图是小鹏G9”。“啊？”

“以前我总天真的以为，只要自己不断的存钱，总有一天能够实现自己买下宝马5系的梦想，但梦想终归是梦想，现实毕竟是现实，钱真的很难赚，我不想贷款，不靠父母支持，要自己一边打工一边存钱，凑够这五十万谈何容易。当然，毕竟我也是能力不行，能力配不上自己的野心，转眼之间便差不多到了而立之年，往后的日子还要准备结婚，生娃等等世俗制定好的人生阶梯，之前我老是看懂车帝推文，什么5系，E级，是普通人的天花板，那时候觉得天花板离我触手可及，而现在，我每天睁开眼都觉得天花板离我越来越远。慢慢的我也认清了自己，知道自己是个什么水平，也学会放下，但是，梦想永远会存在我的心中，不会灭去”。

“你爸妈不反对你？”。

“嗐，他们吵上天了，什么电车不安全呀，电车只能买特斯拉啊，小鹏都要倒闭之类的。但是又如何呢，毕竟钱是我的，他们做不了主。我也有试驾过宝马iX3，只是觉得当下，这台车更适合我”。小白听完我的赘述，点了点头，“嗯，我了解你这个人，一旦认定了某些事，别人很难去改变你的想法。”我嘿嘿一笑，“你不也是吗？”

边聊边吃时间总是过得特别快，不一会儿我们两人的桌碟上放满了残骸，堆积如山，刚好服务员经过帮我们更换了新碟子，我们异口同声的说了声谢谢。

进入了短暂的沉默，我率先问小白，“最近工作情况如何？”。

小白听完，擦了擦嘴，表情也正经了起来，“其实今天我主要目的就是来跟你分享一下我最近的经历的，看看你有啥想法。”。

“哦？细说。”

曙光

“前两周我之前的leader让我去他公司面试。”

“你去了？”

“别打岔”。小白没好气的看我一眼，继续说道“一开始我是拒绝的，你也知道，我最近都比较躺平了，拿着一份在广州过的不差的薪资，浑浑噩噩的过着日子。谁知道，那位大佬开口便以35 * 14邀约，我本是性情中人，路见不平便拔刀相助，朋友有困难，我都会鼎力相助，何况这是贵人”。随即，他给我看了看聊天内容。

“听到这个数，我真的是垂死病中惊坐起，手上的switch瞬间丢到一边，立刻屁颠屁颠准备简历了。他说我是人才，其实我知道，贵人的实力，才称得上真正的人才”

“因为base要去深圳，如果薪资涨幅不是太高的话，其实我心里还是不太乐意的，因为现在在公司其实也得到leader青睐了，而且临近年终了，说实话，工作了6年多，之前跳来跳去，为了眼前那点利益，年终奖都没拿过几次，实属心累。但是这次如果薪资到胃，能给到这么高，虽然脉脉都劝别人不要去，但是我还是想尝试一下，毕竟这是更大的平台，为自己以后职业规划着想，现在累点真不算啥。”

我表示理解，“毕竟脉脉都是问就是别去，劝就是不走”。

小白笑着点了点头，“所以我去了，一面二面都过了。”

“牛逼啊，面了什么，分享一下啊~”

“牛逼个啥啊，问的都比较浅，一面印象比较深主要下面几点”。

• typescript中 interface 和 type 的区别

1. type类型使用范围更广, 接口类型只能用来声明对象

2. 在声明对象时, interface可以多次声明

3. 区别三 interface支持继承的，type不支持

4. interface可以被类实现

• typescript中 字面量类型

这个我真忘了，回头你自己整理一下

• redis中如何处理大key

这个我不会，面试官也很nice的讲解了一波

• 服务器容灾方案

这个我不会，面试官也很nice的讲解了一波

• service worker作用

这个我不会，面试官也很nice的讲解了一波

“不是，你咋啥都不会啊？”。我超大声的问。

“那你会吗？”小白反问我。

“我也不会”。

“那我就放心了，然后就是问项目细节，我稀里糊涂的答，他稀里糊涂的听，二面的话就是更深入的项目细节了。”

“然后呢然后呢？”

“然后便是昨天的HR终面，HR让我从春秋时期讲起，阐述我的工作经历，我也是乖巧的从百草园讲到三味书屋，其中声情并茂，对细节说到尽情之处，心中也不免感慨之前的辉煌。不过，往事已成云烟。待烟消云散，HR便说重点，问我期望薪资。因为期间我也听HR说现在节奏很紧，加班已是常态，10-10-6稀松平常，我见HR诚心待我，我便以真心待她”。

“你说了多少？”

“98K”

“她同意了？”

“她说你现在的薪资过低，申请不到这个数，如果降低你是否会考虑？”

“那你怎么回？”

“我怎么回，难道你不知道吗？”

“我怎么会知道？”

“past lives couldn't ever hold me down, lost love is sweeter when it's finally”

"i've got the strangest feelin, this isn't out first time around"

“怎么我的闹钟响了？”突然，周遭的一切突然模糊了起来，旋即进入黑暗。