useFetcher：让数据管理变得如此简单

大家好，今天我要和你们分享一个让我惊喜万分的小工具——useFetcher。说实话，第一次用它的时候，我感觉自己像是发现了新大陆！它彻底改变了我处理数据预加载和跨组件更新的方式。

alovajs简介

在介绍useFetcher之前，我们先来聊聊alovajs。它是一个革命性的新一代请求工具，可以大大简化我们的API集成流程。 与react-query和swrjs等hooks库不同，alovajs提供了针对各种请求场景的完整解决方案。

alovajs的强大之处在于：

• 它将API的集成从7个步骤降低为只需要1个步骤


• 提供了15+个针对特定场景的"请求策略"


• 不仅能在客户端使用，还提供了服务端的请求策略

如果你想深入了解alovajs，强烈推荐去官网 alova.js.org 看看。相信你会像我一样，被它的强大功能所吸引。

useFetcher的妙用

现在，让我们聚焦到今天的主角——useFetcher。这个小工具真的太棒了，它让我轻松实现了一些以前觉得很复杂的功能。

数据预加载

想象一下，你正在开发一个分页列表，希望在用户浏览当前页面时就预加载下一页的数据。useFetcher可以轻松实现这一点：

const { fetch } = useFetcher({ updateState: false });



const currentPage = ref(1);

const { data } = useWatcher(() => getTodoList(currentPage.value), [currentPage], {

  immediate: true

}).onSuccess(() => {

  fetch(getTodoList(currentPage.value + 1));

});

这段代码会在当前页加载成功后，自动预加载下一页的数据。是不是感觉很简单？我第一次实现这个功能时，都被自己的效率惊到了！

跨组件更新

另一个让我惊喜的功能是跨组件更新。假设你在一个组件中修改了todo数据，想要在另一个组件中更新列表。useFetcher配合method快照匹配器可以轻松实现：

const { fetch } = useFetcher();



const handleSubmit = () => {

  // 提交数据...

  const lastMethod = alovaInstance.snapshots.match({

    name: 'todoList',

    filter: (method, index, ary) => index === ary.length - 1

  }, true);

  if (lastMethod) {

    await fetch(lastMethod);

  }

};

这段代码会在提交数据后，自动找到最后一个名为'todoList'的method实例并重新获取数据，从而更新列表。这种优雅的数据管理方式，让我的代码结构变得更加清晰了。

总结

useFetcher真的改变了我对数据管理的看法。它不仅可以帮我们实现数据预加载，还能轻松处理跨组件更新的问题。使用它，我们可以写出更加高效、更加优雅的代码。

你们平时是怎么处理这些数据管理的问题的呢？有没有遇到过什么困难？我很好奇大家的经验和想法，欢迎在评论区分享。如果这篇文章对你有帮助，别忘了点个赞哦！让我们一起探讨，一起进步！

在 Vue.js 中，nextTick 是一个非常重要的函数，它用于延迟回调函数的执行，直到下次 DOM 更新循环之后执行。这是因为 Vue 的数据绑定系统需要确保在数据变化后 DOM 被更新之前不执行某些依赖于 DOM 状态的操作。

实现原理

Vue 的 nextTick 主要是为了处理异步更新队列的问题。当数据发生变化时，并不是立刻更新 DOM，而是将这个更新放入一个队列中，等到当前执行栈清空时（也就是当前同步任务执行完毕），Vue 会进行一次更新，将所有需要更新的内容一次性渲染到 DOM 中，这样做是为了减少 DOM 操作次数，提高性能。

在 Vue 2 中的实现

在 Vue 2 中，nextTick 的实现在 src/core/util/next-tick.js 文件里。它利用了 setTimeout, setImmediate（如果支持的话），以及 MessageChannel 这几种不同的异步方法来实现。如果浏览器环境支持 Promise，那么它也会使用 Promise.then 来实现异步操作。

Javascript

深色版本

function nextTick (cb, ctx) {

  var _resolve

  callbacks.push(function () {

    if (cb) {

      try {

        cb.call(ctx)

      } catch (e) {

        handleError(e, 'nextTick')

      }

    } else if (_resolve) {

      _resolve(ctx)

    }

  })



  if (!pending) {

    pending = true

    if (typeof Promise !== 'undefined' && isNative(Promise)) {

      // 使用 Promise 的话，创建一个 resolve 函数，并立即调用它。

      var resolve = Promise.resolve

      // 使用 then 回调来执行

      resolve.call(Promise, function () { _resolve = $internal; })

    } else {

      // 如果没有 Promise 支持，就退而求其次使用 setImmediate 或 setTimeout

      setTimeout(_flushCallbacks, 0)

    }

  }

}

这里的关键在于 Promise.resolve() 后面跟着的 .then() 会放到 JavaScript 引擎的微任务队列中，等待当前执行栈清空后执行。这样可以确保 nextTick 的回调是在所有同步任务完成后被执行。

在 Vue 3 中的实现

Vue 3 中使用了更现代的方法来实现 nextTick，主要是基于 queueMicrotask API。这个 API 可以让回调函数在当前任务完成后的下一个微任务时机执行。如果没有 queueMicrotask 支持，则退回到 Promise 的 .then() 方法。

Javascript

深色版本

export function nextTick(cb?: Function, delay = 0): PromiseLike<any> | void {

  if (cb) {

    // 如果提供了回调函数，则注册回调

    registerFlushSyncCallback(() => {

      queueMicrotask(() => {

        // 使用 queueMicrotask 来确保回调是在微任务时机执行

        // 这样可以保证在任何其他异步任务之前执行

        callWithAsyncErrorHandling(cb, activeInstance, SchedulerGuards.NEXT_TICK_HANDLER);

      });

    });

  } else {

    // 如果没有提供回调，则返回一个 promise

    return new Promise((res) => {

      queueMicrotask(res);

    });

  }

}

总结来说，nextTick 的主要作用是确保某些操作在 DOM 更新之后进行，从而避免了由于数据变化但 DOM 尚未更新导致的问题。通过使用异步机制（如微任务或宏任务），nextTick 能够确保在适当的时机执行回调。

通过这篇文章你可以了解到：

• 性能优化的思维方式


• WebView进阶知识

写在前面

最近组里做新的Web容器的，一次承载多个H5页面，以实现左右切换，默认展示主会场页，并要达到提升打开率的目标。要达到这个目标，那势必要从加载优化入手，缩短页面的打开时间。优化的点包括但不限于，Activity初始化、ViewPager和Fragment的初始化、WebView的初始化等等。

上一片文章给大家分享了我在ViewPager上面做的优化，本篇文章再接着给大家分享下WebView秒开的尝试。

优化效果

我们以提升打开率为目标，口径是资源位点击到WebView的onPageFinished。

使用新的容器之后，打开率提升了大约10%-20%（65%—>85%），在低端机上的提升较为明显。为了让各位同学更加直观的感受到优化后的效果，这里用两张图简化的流程图来表示：

以上是我们的容器简略的加载过程需经过6个步骤，加载时长从Activity的onCreate开始计算到WebView的onPageFinished大约需要3000ms（低端机）。很显然，在如今这个快节奏的社会，用户是不会等待这么长时间的。为此我们对它进行了一场手术，把它整成了下边的样子：

？？？what's the ****？玩俄罗斯方块吗？

同学憋急，你现在只需要关注的是：它由6个冗长的步骤，变成了两个步骤（Na组件放在了WebView初始化完成后加载），大大缩减了我们首页的加载时间。关于你的疑问，我会在下边的章节解释。

过程分析

上一节我们讲到，一次完整的打开过程需要经过6个步骤，经过了我们大刀阔斧的改造后，只需要两个步骤。这节接着给大家剖析我们这么做的底层逻辑。

Native优化

资源预加载

WebView组件加载过程有三处网络耗时分别是主文档HTML的加载、JS/CSS的加载和内容数据的加载，串行的流程是效率及其低下的。那么我们是不是改成并行的？当然不能！

• 主文档HTML其实就是一个H5的框架，一个页面内所有的资源都是先通过主文档来触发加载，在主文档被加载之前我们是不能知道有哪些JS和CSS文件的。


• 内容数据（包括图片）是由我们的业务方决定的，涵盖了各个营销场景，不像新闻浏览类的页面有固定的排版样式。由于页面不统一，单独对它进行下载再注入的改造成本有点大。（后续的离线化方案可实现）

基于上述两点，可取的做法是：先把主文档数据预取后缓存，待WebView loadUrl之后，通过WebViewClient的监听去拦截主文档的请求

@Nullable

@Override

public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {

    for (RequestInterceptor interceptor : Interceptors) {

        //拦截请求，去缓存中取出主文档数据

        WebResourceResponse response = interceptor.intercept(view, request);

            if (response != null) {

                return response;

            }

    }

    return super.shouldInterceptRequest(view, request);

}

预加载时机

预加载放在点击资源位（资源位在首页区域）之前是最理想的，这也是我们的初步设想。但是涉及到首页模块的改造，需要对应组件方的配合支持，会导致开发周期的延长。所以我们决定在第一版以HOOK Instumentation的方式，在点击资源位之后，Activity的onCreate之前去开启子线程对主文档进行预加载。

同时跟首页组件方协调方案：在首页的T2阶段(不影响其它优先级更高的任务)对资源位进行预加载，点击后如果首页预加载成功则直接打开Activity，否则继续Instrumentation加载逻辑。

JS/CSS预加载

主文档加载完成了之后，可以对缓存的数据进行识别查找到需要加载的JS/CSS文件，紧接着开始进行JS/CSS的预加载。

下面时查找JS文件的伪代码：

private static final String JS_PATTERN = "<script\\s+[^>]*?src=[\"']([^\"']+)[\"'][^>]*>(?:<\\/script>)?";



/**

 *@param htmlData 将主文档的二进制文件转换成的String类型

 *@param JSPattern 用于从主文档内匹配JS文件的正则表达式

 */

private void recognitionJS(String htmlData, String JSPattern) {

    try {

        Pattern scriptPattern = Pattern.compile(JSPattern, Pattern.CASE_INSENSITIVE);

        Matcher scriptMatcher = scriptPattern.matcher(htmlData);

        while (scriptMatcher.find()) {

            String link = scriptMatcher.group(1) + "";

            if (TextUtils.isEmpty(link)) {

                continue;

            }

 

            mResSet.add(link);

        }

     } catch (Exception e) {

     }

}

这样一来我们的流程在第二版就变成了：

到这里我们在数据请求这一块所做的优化就结束了，那么我们的矛头接下来该指向哪里？

WebView预热

首次创建耗时较长

我从埋点的数据中发现，容器冷启打开的时间比热启要长的多，从Activity onCreate到WebView loadUrl之前的耗时比起热启大约慢了200多ms。这个过程中初始化的组件除了WebView还有有ViewPager和Fragment，通过再次细分阶段的埋点统计耗时发现，启动方式对这两者的初始化时间影响不大，WebView初始化时间自然就成了我们攻克的对象。

我们找来了其它几个机型重复上述的步骤，高端机上表现并不明显，但也存在差异（大约80ms）。进一步确定了是WebView自身的原因，可以得出结论：WebView第一次初始化的时间会比后续创建的时间长，具体差异取决于机型性能。

WebView Pool

利用前面得出的结论，可以在App启动时开始WebView的第一次初始化再销毁，以减少后续使用过程的创建时间。但还是避免不了往后创建带来的时间开销，这个时候池化技术就呼之欲出了。

我们可以将创建好的WebView放入容器中，可以一个也可以多个，取决于业务。由于创建WebView需要和Context绑定，而预创建WebView是无法提前获知所需要挂载的Activity的，为此我们找到了MutableContextWrappe。引用官方对它的介绍：

Special version of ContextWrapper that allows the base context to be modified after it is initially set. Change the base context for this ContextWrapper. All calls will then be delegated to the base context. Unlike ContextWrapper, the base context can be changed even after one is already set.

翻译成人话：它允许在运行时动态地更改 Context。这在某些特定场景下非常有用，例如，当您需要在不同的 Context 之间灵活切换或修改 Context 时。真是完美的解决了我们预创建绑定Context的问题！

//预创建WebView，存入缓存池

MutableContextWrapper contextWrapper = new MutableContextWrapper(getAppContext());

mWebViewPool.push(new WebView(contextWrapper));



//取出WebView，替换我们所需要的Context

WebView webView = mWebViewPool.pop();

MutableContextWrapper contextWrapper = (MutableContextWrapper) webView.getContext();

contextWrapper.setBaseContext(activityContext);

看到这里，如果你是不是以为WebView的池化就这样结束了？

那是不可能滴

那是不可能滴

那是不可能滴

子进程承接

众所周知，一个亿级DAU的商业化App是非常庞杂的。在App启动时，有许多的任务需要初始化，势必会带来很大的性能开销。如果在这个阶段进行WebView的创建和池化的操作。前者可能会引出ANR，后者则是会面临内存溢出的风险。一波刚平，一波又起！

怎么办？再开个线程？WebView不能在子线程初始化，即使可以也解决不了内存开销的问题。PASS！

线程不行，进程呢？Bingo！

我们可以在App启动时开启一个子进程，在子进程进行WebView的初始化和池化的任务。系统会为子进程重新开辟内存空间，同时在子进程创建WebView也不会阻塞主进程的主线程，顺带也可以提高我们主进程的稳定性，可谓是一举多得。整个加载流程也就变成了三个大步骤。

组件懒加载

上一篇文章里有讲到我们容器的页面结构，没看过的请点击这里。在开始WebView加载之前会经过ViewPager和Fragment的初始化，经过线下实验统计，省去这两玩意儿大约可以提升67%（口径：Activity onCreate到WebView loadUrl，也就是说ViewPager和Fragment占这个过程的67%）。这不，优化点又来了。

打开容器的第一阶段，只需加载一个页面。因此我们可以将WebView直接放在Activity上显示，无需ViewPager和Fragment的介入，等到首页加载完成后再初始化这两组件，并开始缓存其它页面。

到这里我们的加载流程就变成了开头的样子了：

不要抬杠：你开头画的也不是这个样子的啊？。

咱这不是为了更方便的理解，所以在开头小小的抽象了一下吗。手动狗头

其它优化

剩下还有一些前端的通用优化方式、网络通用优化方式在网上有同学总结的很清楚，在这里我就不一一列举。感兴趣的可以跳转对应文章进行查阅

今日头条品质优化 - 图文详情页秒开实践

前言

最近开发一个涉及到很多颜色转换的工作，每次都搜索打开一个新页面在线转换，十分麻烦，于是想着开发一个颜色转换的浏览器插件，每次点击即可使用。

查看Chrome插件开发的文档developer.chrome.com/docs/extens… ，从头开始开发一个插件还是比较麻烦且原始的。搜索网上资料，发现了2个工具

最后选择了WXT，因为它用起来更方便，且支持多浏览器。

WXT是什么

WXT号称下一代浏览器扩展开发框架，免费、开源、易用且支持多种浏览器。

这段文字是关于WXT框架的介绍，它是一个用于构建浏览器扩展的开源框架。下面是对文中提到的几个关键点的解释：

• WXT有自己一套约定的框架，为开发者提供了一套标准化的做法，有助于保持项目的一致性，使得新手能够更容易地理解和接手项目。


• 基于项目文件结构自动生成manifest。manifest是浏览器扩展的配置文件，定义了扩展的名称、版本、权限等信息。WXT框架能够根据项目结构自动创建这个文件，简化开发过程。


• 单文件配置Entrypoint，比如背景脚本或内容脚本，这样可以更直观地管理和维护代码。


• WXT提供了开箱即用的TypeScript支持，并且改进了浏览器API的类型定义。TypeScript是一种强类型语言，它在JavaScript的基础上增加了类型系统，有助于在开发过程中捕捉到潜在的错误。


• 输出文件的路径最小化，这意味着WXT在构建扩展时会优化文件路径，减少runtime的path长度，可以提高扩展的加载速度和性能。

WXT 安装&开发

我们直接脚手架开一个项目

pnpm dlx wxt@latest init wxt-demo

cd wxt-demo

pnpm install

套用官网的一个图

不过我选的react，生成的工作目录文件如下

调试运行pnpm dev，WXT直接开了一个无头浏览器，可以实时看到效果

颜色转换开发

因为我的需求比较简单，实现各种颜色的转换，页面UI就直接使用antd，样式直接Inline。代码如下：

    <>

      <header style={pageLayoutStyle}>

        <p style={{ fontSize: '1.5rem', textAlign: 'center', fontWeight: 'medium' }}>Color Converter</p>

        <p>This tool helps you convert colors between different color formats.</p>

      </header>



      <main style={pageLayoutStyle}>

        <div>

          <p style={{ fontSize: '1.2rem', textAlign: 'left' }}>Enter a color:</p>

        </div>

        <Input

          suffix={

            <ColorPicker

              defaultValue={defaultColor}

              value={hex === '' ? defaultColor : hex}

              styles={{ popupOverlayInner: { position: 'absolute', left: '50%', transform: 'translate(-100%, -50%)' } }}

              onChangeComplete={(color) => {

                const str = (color.toRgbString())

              }} />

          }

          placeholder={defaultColor}

          autoFocus={true}

          onChange={(e) => {

            const str = (e.target.value)

          }} />



        <div>

          <p style={{ fontSize: '1.2rem', textAlign: 'left' }}>Results</p>

        </div>

        {contextHolder}

        <Input addonBefore="RGB" value={rgb} suffix={<CopyOutlined onClick={() => { copyToClipboard(rgb) }} />} readOnly={true} defaultValue="" />

        <Input addonBefore="HEX" value={hex} suffix={<CopyOutlined onClick={() => { copyToClipboard(hex) }} />} readOnly={true} defaultValue="" style={{ marginTop: '8px' }} />

        <Input addonBefore="HSL" value={hsl} suffix={<CopyOutlined onClick={() => { copyToClipboard(hsl) }} />} readOnly={true} defaultValue="" style={{ marginTop: '8px' }} />

        <Input addonBefore="HSV" value={hsv} suffix={<CopyOutlined onClick={() => { copyToClipboard(hsv) }} />} readOnly={true} defaultValue="" style={{ marginTop: '8px' }} />

        <Input addonBefore="CMYK" value={cmyk} suffix={<CopyOutlined onClick={() => { copyToClipboard(cmyk) }} />} readOnly={true} defaultValue="" style={{ marginTop: '8px' }} />

      </main>

    </>

新建color.ts，定义几个变量名称和方法名称，一路按tab，AI自动补全了代码。代码太长就不贴出来了，主要是颜色的正则匹配和转换。同上面UI绑定后，最终实现效果如下：

在调试firefox时，遇到一个小坑：content.ts中需要至少有一个匹配matches，否则会直接退出提示插件invalid。

发布

WXT发布也比较简单，直接运行 pnpm zip就会构建chrome的扩展压缩包，发布firefox只需要pnpm zip:firefox。在ouput目录下就会生成对应产物。

不过记得在打包前修改wxt.config.ts，添加名称、版本、描述等。如:

export default defineConfig({

  modules: ['@wxt-dev/module-react'],

  manifest: {

    version: '1.0.0',

    name: 'color-converter',

    description: 'A color converter tool',    

  }

});

最后完整代码见github: github.com/xckevin/col…

现在插件也已经上架了市场，欢迎下载:

• chrome: chromewebstore.google.com/detail/colo…


• firefox: addons.mozilla.org/en-US/firef…

最近接到一个任务，要求实现一个课表拖拽的功能，支持快速修改个人日程时间。项目采用taro框架。

基于性能的抉择

container采用grid布局，7colum+12row,共84个单元格

拖拽的方式有两种

• 盒子跟随手指，并实时显示松手后落入的位置，松手时寻找一个离手指最近的单元格放入


• 盒子实时在格子之内，根据手指位置实时计算填入的格子，将盒子放入

哪一种性能更高？？？？？？

显然第一种方案在第二种方案上多了盒子实时跟随手指这个额外操作，性能不占优势。

catch-move避免滑动穿透

因为课表支持左右滑动查看自己每一周的课程安排，采用了一个Swiper包裹在container之外，在滑动时会带动Swiper的滑动，那该怎么办？？？？？？？？？

不妨请教学长，经过学长的指导，告诉了我一个api

不得不感慨阅读官方文档的重要性（老实了，以后必须多看官方文档）

如何根据手指的位置，计算所在单元格

const unitwith = 350 / 7;

const unitheight = 600 / 12;

先得到了每一个单元格的宽高

然后通过滑动的事件对象可以获取当前的(x,y),那么动态设置grid样式就可以实现

  const getGridPositionByXY = (xp, yp) => {

    return `gridColumn:${Math.floor(xp / unitwith)} ;gridRow:${Math.floor(

      yp / unitheight

    )}/${Math.floor(yp / unitheight) + 2}`;

  };

handleTouchMove函数的实现

我们需要两个响应式的变量x,y,通过在handleTouchMove函数中修改x,y来带动style的修改

 const [x, setX] = useState(350 / 7);

 const [y, setY] = useState(600 / 12);

 

 const handleTouchMove =(e) => {

    setX(e.changedTouches[0].clientX  + 50);

    setY(e.changedTouches[0].clientY  + 50);

  };

性能优化（节流）

节流：在一定时间内，无论函数被触发多少次，函数只会在固定的时间间隔内执行一次

为防止handleTouchMove的触发频率太高，我们采用节流函数来让它在固定时间内只执行一次

function Throttle(fn, delay) {

  let timer = null;

  return function () {

    if (timer) return;

    timer = setTimeout(() => {

      fn.apply(this, arguments);

      timer = null;

    }, delay);

  };

}



const handleTouchMove = Throttle((e) => {

    setX(e.changedTouches[0].clientX  + 50);

    setY(e.changedTouches[0].clientY  + 50);

}, 10);

提升交互性

我们可以让用户长按激活，随后才能滑动，并且在激活的时候触发震动

直接贴完整代码在这里

import { View, Swiper, SwiperItem } from "@tarojs/components";

import { useState, useRef } from "react";

import Taro, { useLoad } from "@tarojs/taro";

import "./index.css";



function Throttle(fn, delay) {

  let timer = null;

  return function () {

    if (timer) return;

    timer = setTimeout(() => {

      fn.apply(this, arguments);

      timer = null;

    }, delay);

  };

}

export default function Index() {

  const [isLongPress, setIsLongPress] = useState(false);

  useLoad(() => {

    console.log("Page loaded.");

  });

  const timer = useRef(null);



  const [x, setX] = useState(350 / 7);

  const [y, setY] = useState(600 / 12);

  // const [StartPosition, setStartPosition] = useState({ x: 0, y: 0 });



  const unitwith = 350 / 7;

  const unitheight = 600 / 12;

  const getGridPositionByXY = (xp, yp) => {

    return `gridColumn:${Math.floor(xp / unitwith)} ;gridRow:${Math.floor(

      yp / unitheight

    )}/${Math.floor(yp / unitheight) + 2}`;

  };



  const handleTouchMove = Throttle((e) => {

    if (!isLongPress) return;

    setX(e.changedTouches[0].clientX  + 50);

    setY(e.changedTouches[0].clientY  + 50);

  }, 10);



  return (

    <View className='index'>

      <Swiper circular style={{ width: "100vw", height: "100vh" }}>

        <SwiperItem>

          <view className='container'>

            <view

              style={getGridPositionByXY(x, y)}

              className={`items-1 ${isLongPress ? "pressActive" : ""}`}

              catch-move

              onTouchStart={() => {

                timer.current = setTimeout(() => {

                  setIsLongPress(true);

                  Taro.vibrateShort();

                  // console.log("长按");

                }, 1000);

              }}

              onTouchMove={handleTouchMove}

              onTouchEnd={() => {

                clearTimeout(timer.current);

                setIsLongPress(false);

              }}

            ></view>

            <view className="items-2">2</view>

          </view>

        </SwiperItem>

        <SwiperItem>

          <view className="container">

            <view className="items-1">no</view>

          </view>

        </SwiperItem>

        <SwiperItem>

          <view className="container">

            <view className="items-1" catch-move></view>

          </view>

        </SwiperItem>

        <SwiperItem>

          <view className="container">

            <view className="items-1" catch-move></view>

          </view>

        </SwiperItem>

        <SwiperItem>

          <view className="container">

            <view className="items-1" catch-move></view>

          </view>

        </SwiperItem>

      </Swiper>

    </View>

  );

}



//index.css

.container {

  width: 700px;

  height: 1200px;

  background-color: #ccc;

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  grid-template-rows: repeat(12, 1fr);

}

.griditems-1 {

  border: 1px solid #fff;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: cadetblue;

}

.griditems-2 {

  border: 1px solid #fff;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: aquamarine;

}

.griditems-3 {

  border: 1px solid #fff;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: burlywood;

}

.griditems-4 {

  border: 1px solid #fff;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: darkcyan;

}

.griditems-5 {

  border: 1px solid #fff;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: darkgoldenrod;

}



.items-1 {

  grid-column: 1; /* 从第1列开始，到第2列结束 */

  grid-row: 1 / 4;

  border-radius: 10px;

  border: 1px solid #fff;

  background-color: burlywood;

}

.items-2 {

  grid-column: 3;

  grid-row: 1 / 4;

  border-radius: 10px;

  border: 1px solid #fff;

  background-color: burlywood;

}

.pressActive {

  border-radius: 10px;

  border: 1px solid #fff;

  background-color: #fff;

  opacity: 0.5;

}

下一期将介绍如何控制方块不重合，以及在展开后方块的处理和对多方块的情况怎么单独管理每一个方块的情况

你也碰到断网检测的需求啦？

一般的断网检测需求，大部分都是在用户网络状态不好或者网络掉线时，我们给用户一个提示或者引导界面，防止用户不知道自己卡了在那里一直等待。

方案1，轮询请求

直接说最有效的方案，我们通过轮训请求来检测网络是否可用，比如加载图片或者访问接口等...

下面我以加载图片为例，搞个小demo：

6. 没问题，一切ok，发个包，就叫network-watcher吧，欢迎大家star！

github.com/waltiu/netw…

方案2，直接调api

首先说下这种方案不推荐，其一浏览器兼容性有问题，其二只能检测到是否网络有连接，但是不能检测是否可用，这种实用性真的很差。

浏览器也提供了navigator.onLine 和 navigator.connection 可以直接查询网络状态，我们可以监听网络状态的变化。

    window.addEventListener('online',function () {

        alert("正常上网");

    })

    window.addEventListener('offline',function () {

        alert('无网络');

    })

这种实用性真的很差，用户网络连接但是没有网或者网很慢，实际上都会影响用户体验！！

用户的体验永远是NO.1

什么是零宽度字符

一种不可打印的Unicode字符，在浏览器等环境不可见，但是真是存在，获取字符串长度时也会占位置，表示某一种控制功能的字符。

常见的零宽字符有：

空格符：格式为U+null00B，用于较长字符的换行分隔；
非断空格符：格式为U+FEFF，用于阻止特定位置的换行分隔；
连字符：格式为U+null00D，用于阿拉伯文与印度语系等文字中，使不会发生连字的字符间产生连字效果；
断字符：格式为U+200C，用于阿拉伯文、德文、印度语系等文字中，阻止会发生连字的字符间的连字效果；
左至右符：格式为U+200E，用于在混合文字方向的多种语言文本中，规定排版文字书写方向为左至右；
右至左符：格式为U+200F : 用于在混合文字方向的多种语言文本中，规定排版文字书写方向为右至左；

使用零宽字符给信息加密

(function(window) {

    var rep = { // 替换用的数据，使用了4个零宽字符代理二进制

        '00': '\u200b',

        '0null': '\u200c',

        'null0': '\u200d',

        'nullnull': '\uFEFF'

    };

 

    function hide(str) {

        str = str.replace(/[^\x00-\xff]/g, function(a) { // 转码 Latin-null 编码以外的字符。

            return escape(a).replace('%', '\\');

        });

 

        str = str.replace(/[\s\S]/g, function(a) { // 处理二进制数据并且进行数据替换

            a = a.charCodeAt().toString(2);

            a = a.length < 8 ? Array(9 - a.length).join('0') + a : a;

            return a.replace(/../g, function(a) {

                return rep[a];

            });

        });

        return str;

    }

 

    var tpl = '("@code".replace(/.{4}/g,function(a){var rep={"\u200b":"00","\u200c":"0null","\u200d":"null0","\uFEFF":"nullnull"};return String.fromCharCode(parseInt(a.replace(/./g, function(a) {return rep[a]}),2))}))';

 

    window.hider = function(code, type) {

        var str = hide(code); // 生成零宽字符串

 

        str = tpl.replace('@code', str); // 生成模版

        if (type === 'eval') {

            str = 'eval' + str;

        } else {

            str = 'Function' + str + '()';

        }

 

        return str;

    }

})(window);



var code = hider('测试一下');

console.log(code);

直接复制到项目中可以使用，我们现在来试试

var code = hider('测试一下');

console.log(code);

结果如下：

实际用法

功能用途

这个技术可以应用到很多领域，非常具有实用性。

比如：代码加密、数据加密、文字隐藏、内容保密、隐形水印，等等。

原理介绍

实现字符串隐形，技术原理是“零宽字符”。

在编程实现隐形字符功能时，先将字符串转为二进制，再将二进制中的1转换为\u200b；0转换为\u200c；空格转换为\u200d，最后使用\ufeff 零宽度非断空格符作分隔符。这几种unicode字符都是不可见的，因此最终转化完成并组合后，就会形成一个全不可见的“隐形”字符串。

功能源码

function text_2_binary(text){

    return text.split('').map(function(char){ return char.charCodeAt(0).toString(2)}).join(' ');

}

function binary_2_hidden_text(binary){

    return binary.split('').map(function (binary_num){

        var num = parseInt(binary_num, 10);

        if (num === 1) {

            return '\u200b';

        } else if(num===0) {

            return '\u200c';

        }

        return '\u200d';

    }).join('\ufeff')

}

var text = "jshaman是专业且强大的JS代码混淆加密工具";

var binary_text = text_2_binary(text);

var hidden_text = binary_2_hidden_text(binary_text);

console.log("原始字符串：",text);

console.log("二进制：",binary_text);

console.log("隐藏字符：",hidden_text,"隐藏字符长度：",hidden_text.length);

隐型还原

接下来介绍“隐形”后的内容如何还原。

在了解上文内容之后，知道了字符隐形的原理，再结合源代码可知：还原隐形内容，即进行逆操作：将隐形的unicode编码转化成二进制，再将二进制转成原本字符。

直接给出源码：

function hidden_text_2_binary(string){

  return string.split('\ufeff').map(function(char){

    if (char === '\u200b') {

      return '1';

    } else if(char === '\u200c') {

      return '0';

    }

    return ' ';

  }).join('')

}

function binary_2_Text(binaryStr){

  var text = ""

  binaryStr.split(' ').map(function(num){

    text += String.fromCharCode(parseInt(num, 2));

  }).join('');

  return text.toString();

}

console.log("隐形字符转二进制：",hidden_text_2_binary(hidden_text));

console.log("二进制转原始字符：",binary_2_Text(hidden_text_2_binary(hidden_text)));

运行效果

如果在代码中直接提供“隐形”字符内容，比如ajax通信时，将“隐形”字符由后端传给前端，并用以上解密方法还原，那么这种方式传递的内容会是非常隐秘的。

但还是存在一个安全问题：他人查看JS源码，能看到解密函数，这可能引起加密方法泄露、被人推导出加密、解密方法。

前端的js想做到纯粹的加密目前是不可能的，因为 JavaScript 是一种在客户端执行的脚本语言，其代码需要在浏览器或其他 JavaScript 运行环境中解释和执行，由于需要将 JavaScript 代码发送到客户端，并且在客户端环境中执行，所以无法完全避免代码的逆向工程和破解。

背景

准备工作

安装依赖，也可以把源码下载到本地，源码地址。

npm install wxml2canvas

布局

无论哪种方案，布局都是一致的，需要注意一些暂未支持的属性：

布局示例：

注意，除了uniapp，原生和Taro要使用原生组件的方式绘制canvas，因为Taro不支持data-xx的属性绑定方式，这一点很糟糕

<!-- 外层wrap用于fixed定位，使得整个布局离屏，离屏canvas暂未支持 -->

<view class='wrap'>

  <!-- canvas id，一会 new 的时候需要 -->

  <canvas canvas-id="poster-canvas"></canvas>

  <view class="container">

    <view data-type="text" data-text="测试文字绘制" class='text'>测试文字绘制</view>

    <image data-type="image" data-src="https://img.yzcdn.cn/vant/cat.jpeg" class='image'></image>

    <image data-type="radius-image" data-src="https://img.yzcdn.cn/vant/cat.jpeg" class='radius-image'></image>

  </view>

</view>

原生小程序

import Wxml2Canvas from 'wxml2canvas'



Component({

  methods: {

    paint() {

      wx.showLoading({ title: '生成海报' });

      // 创建绘制实例

       const drawInstance = new Wxml2canvas({

        // 组件的this指向，组件内使用必传

        obj: this,

        // 画布宽高

        width: 275,

        height: 441,

        // canvas-id

        element: 'poster-canvas',

        // 画布背景色

        background: '#f0f0f0',

        // 成功回调

        finish: (url) => {

          console.log('生成的海报url，开发者工具点击可预览', url);

          wx.hideLoading();

        },

        // 失败回调

        error: (err) => {

          console.error(err);

          wx.hideLoading();

        },

      });

      // 节点数据

      const data = {

        list: [

          {

            // 此方式固定 wxml

            type: 'wxml',

            class: '.text', // draw_canvas指定待绘制的元素

            limit: '.container', // 限定绘制元素的范围，取指定元素与它的相对位置计算

          }

          {

            // 此方式固定 wxml

            type: 'wxml',

            class: '.image', // draw_canvas指定待绘制的元素

            limit: '.container', // 限定绘制元素的范围，取指定元素与它的相对位置计算

          }

          {

            // 此方式固定 wxml

            type: 'wxml',

            class: '.radius-image', // draw_canvas指定待绘制的元素

            limit: '.container', // 限定绘制元素的范围，取指定元素与它的相对位置计算

          }

        ]

      }

     // 调用绘制方法

     drawInstance.draw(data);

    }

  }

})

Uniapp

uniapp 主要讲Vue3的版本，因为涉及 this，需要获取 this 以及时机

import {  getCurrentInstance} from 'vue';

// 调用时机 setup内，不能在其他时机

// @see https://github.com/dcloudio/uni-app/issues/3174

const instance = getCurrentInstance();





function paint() {

  uni.showLoading({ title: '生成海报' });

  const drawInstance = new Wxml2Canvas({

    width: 290, // 宽， 以iphone6为基准，传具体数值，其他机型自动适配

    height: 430, // 高

    element: 'poster-canvas', // canvas-id

    background: '#f0f0f0',

    obj: instance,

    finish(url: string) {

      console.log('生成的海报url，开发者工具点击可预览', url);

      uni.hideLoading();

    },

    error(err: Error) {

      console.error(err);

      uni.hideLoading();

    },

  });

  // 节点数据

  const data = {

    list: [

      {

        // 此方式固定 wxml

        type: 'wxml',

        class: '.text', // draw_canvas指定待绘制的元素

      }

      {

        // 此方式固定 wxml

        type: 'wxml',

        class: '.image', // draw_canvas指定待绘制的元素

      }

      {

        // 此方式固定 wxml

        type: 'wxml',

        class: '.radius-image', // draw_canvas指定待绘制的元素

      }

    ]

  }

  // 调用绘制方法

  drawInstance.draw(data);

}

Taro

Taro 比较特殊，框架层面的设计缺陷导致了 Taro 组件增加的 data-xx 属性在编译的时候是会清除的，因此Taro要使用这个库要用原生小程序的方式编写组件。

代码和原生的一样，只是要用原生的方式编写组件，然后在 Taro 中使用。
参考原生的代码，原生小程序js参考这

假设原生组件名为 draw-poster，那么首先需要再Taro的页面中引入这个组件，然后在页面中使用这个组件，然后在组件中使用这个库。

export default {

  navigationBarTitleText: '',

  usingComponents: {

    'draw-poster': '../../components/draw-poster/index',

  },

};

  const draw = useCallback(() => {

    const { page } = Taro.getCurrentInstance();

    // 拿到目标组件实例调用里面的方法

    const instance = page!.selectComponent('#draw_poster');

    // 调用原生组件绘制方法

    instance.paint();

  }, []);

 return <draw-poster id="draw_poster"/>

总结

对比原生的canvas绘制方案，布局的方式获取节点的方式都是一样的，只是绘制的时候不一样，原生的是直接绘制到canvas上，而这个库是先把布局转换成canvas，然后再绘制到canvas上，所以这个库的性能会比原生的差一些，但是这个库的优势在于布局的方式，不需要自己去计算位置，只需要布局，然后调用绘制方法就可以了，非常方便，而且扩展性非常好，可以自己扩展一些布局方式，比如说flex布局，grid布局等等，这些都是可以的，只需要在布局的时候把布局转换成canvas的布局就可以了，这个库的布局方式是参考的微信小程序的布局方式，所以布局的时候可以参考微信小程序的布局方式，这样就可以很方便的布局了。

问题：

最近在业务开发中遇到一个问题，问题是这样的，当前有一个主项目和一个子项目，主项目通过微前端wujie来嵌套这个子项目，其中呢为了方便项目之间进行通信，所以规定该子项目的端口号必须为5173，否则通信失败，但是这时候发现一个问题，当我启动了该子项目后:

该项目的端口号为5173，但是此时我再次通过vite的官方搭建一个react+ts+vite项目：npm create vite@latest react_demos -- --template react-ts，之后通过npm run dev启动项目，发现端口号并没有更新:

这是什么原因呢？

寻因：

查阅官方文档，我发现:

那么我主动在vite.config.ts中添加这个配置：

正常来说，会出现这个报错：

但是此时结果依然为：

我百思不得不得其解，于是再次查阅官方文档：

我寻思这也与文档描述不一致啊，于是我再次尝试，思考是不是vite版本号的问题，两个项目的版本号分别为：

我决定创建一个4版本的项目npm create vite@^4.1.4 react_demos3 -- --template react-ts

结果发现，还是有这个问题，跟版本号没有关系，于是我又耐心继续看官方文档，看到了这个配置：

我抱着试试的态度，在其中一个vite项目中添加这个配置：

发现，果然是这个配置的锅，当其中一个项目host配置为0.0.0.0时，vite不会自动尝试更新端口号

难道vite的端口监测机制与host也有关？

结果：

不甘心的我再次进行尝试，将两个项目的host都设置成：

vite会自动尝试更新端口号

原来如此，vite的端口号检测机制在对比端口号之前，会先对比host，由于我的微前端项目中设置了host，而新建的项目中没有设置host，新建的项目host默认值为localhost对比不成功，vite不会自动尝试下一个可用端口，而是共用一个端口

总结：

在遇到问题时，要多多去猜，去想各种可能，并且最重要的是去尝试各种可能，还要加上积极去翻阅官方文档，问题一定会得到解决的；哪怕不能解决，那也会在尝试中，学到很多东西

嗨，我们又见面了！

今天咱们聊聊前端分页加载那些事儿。你有没有遇到过这样的烦恼：在做分页的时候，要手动维护各种状态，比如页码、每页显示数量、总数据量等等，还要处理各种边界情况，哎呀妈呀，真是太麻烦了！

那么，有没有什么好办法能让我们从这些繁琐的工作中解脱出来呢？这时候，alovajs就派上用场了！

alovajs：轻量级请求策略库

alovajs是一个轻量级的请求策略库，它可以帮助我们轻松处理分页请求。它支持开发者使用声明式实现各种复杂的请求，比如请求共享、分页请求、表单提交、断点续传等等。使用alovajs，我们可以用很少的代码就实现高效、流畅的请求功能。比如，在Vue中，你可以这样使用alovajs进行分页请求：

const alovaInstance = createAlova({

  // VueHook用于创建ref状态，包括请求状态loading、响应数据data、请求错误对象error等

  statesHook: VueHook,

  requestAdapter: GlobalFetch(),

  responded: response => response.json()

});



const { loading, data, error } = useRequest(

  alovaInstance.Get('https://api.alovajs.org/profile', {

    params: {

      id: 1

    }

  })

);

看到了吗？只需要几行代码，alovajs就帮我们处理了分页请求的各种细节，我们再也不用手动维护那些繁琐的状态了！

对比axios，alovajs的优势

和axios相比，alovajs有哪些优势呢？首先，alovajs与React、Vue等现代前端框架深度融合，可以自动管理请求相关数据，大大提高了开发效率。其次，alovajs在性能方面做了很多优化，比如默认开启了内存缓存和请求共享，这些都能显著提高请求性能，提升用户体验的同时还能降低服务端的压力。最后，alovajs的体积更小，压缩后只有4kb+，相比之下，axios则有11+kb。

总之，如果你想在分页加载方面做得更轻松、更高效，alovajs绝对值得一试！

当前主流组件库的问题

我之前使用过很多组件库，比如 MUI，AntDesign，ElementUI，等等。他们都是很出名的组件库。

优点就不说了。他们的缺点是不灵活。

不灵活有 2 个原因。

生态不开放

第 1 个不灵活的原因是我感觉选了一家之后，就得一用到底，没有办法使用其他派系的组件了，比如我觉得 MUI 中的表格不好，Ant Design 的表格好，但是我无法在 MUI 中使用 AntDesign 的表格组件，因为在一个项目中无法同时使用 Mui 和 AntDesign。

无法使用的原因组件库把样式和组件库绑定在一起了，MUI 和 AntD 的样式又是不兼容的。使用了一个组件库，就需要套一个 ConfigProvider 或 ThemeProvider, 套上之后，就把地盘占领了，其他组件库就没法再套了。

修改不方便

第 2 个不灵活的原因要修改定制二次开发一个组件时感觉很麻烦，成本很高。有时需要看很多文档才能找到怎么修改，有时直接就无法修改。

Headless UI

为了解决组件库不灵活的问题，出现了无头组件库（ headless ui ），不过 headless ui 虽然灵活却不方便。

如果要写一个按钮，按钮的各种状态都需要自己来关心，那还不如直接用大而全的组件库。大部分场景中，方便的优先级还是大于灵活的。

这也是为什么 radix-ui 一开始做了一个 headless 组件库，http://www.radix-ui.com/primitives , 后来又做了一个带主题的组件库

shadcn/ui

shadcn/ui 的优势正是解决了上面两个问题，同时又尽量保留了组件库使用方便的优势。

真·灵活

shadcn/ui 给人的感觉没有什么负担，因为 shadcn/ui ，主打一个按需加载，真·按需加载，加载组件的方式是通过命令把代码加到你的项目中，而不是从依赖中引用代码，所以代码不在外部依赖 node_modules 中，直接在自己的项目源代码中，不会有依赖了重重的一坨代码的感觉。因为都是源代码，这样你可以直接随意修改，二次开发。实际场景中，通常是不需要修改的，在偶尔需要修改是也很灵活，大不了复制粘贴一份，总比“明明知道怎么实现却无法实现强”。

拥抱 Tailwindcss

shadcn/ui 使用了 tailwindcss 作为样式方案，这样可以复制 tailwindcss 生态中的其他代码，比如 tailspark.co/ 和 flowbite.com/ ，一下子生态就大了很多，而且修改起来也方便。

方便

通过官方封装组件 + CLI 命令，灵活的同时并没有明显降低效率

比如要使用按钮组件，ui.shadcn.com/docs/compon… , 直接通过一行命令添加后就可以使用了 npx shadcn-ui@latest add button

总结

总结 shancn/ui 的优点

起因

前两天看到小红书网页版的这个效果，感觉挺神奇的：

就是它同一个url对应了两种不同的页面。

上面这个是从列表页点开一个文章的时候，浏览器的路由变了，但是页面没有发生跳转，而是以一个弹窗的模式显示文章，底下我们还能看到列表。

但是当我们把这个url发送给别人，或者刷新浏览器后，同一个url会显示为下面这一个文章详情页，这样就避免了查看详情的时候还需要加载背后的列表。并且小红书的列表和详情是有对应关系（hero效果），但是列表页是随机排列的，如果要加载列表后再加载详情，就很难定位到文章在列表中的位置（随机推荐逻辑就很难改），而且还会影响性能。

思考

解决方案我跟小伙伴思考了很久（基于vue-router），一开始我想的是通过路由守卫来控制，如果from来自列表，to就不跳转；如果from不是列表，则to跳转。但是这个方案会导致路由出现问题，因为如果没有跳转，则路由也不会变化。

另一个小伙伴想的是在路由表上，复用相同的组件，并使用keepAlive控制，来达到组件重用的目的。但是这个逻辑页有问题，keepAlive是路由的重用，其实不是组件的重用。

但当真正写起代码，才发现我们根本是想太多，其实解决方案简单到不足100行。

代码

第一步：搭建项目

这里我采用vite来搭建项目，其实小红书这种网站需要考虑SEO的需求，应该会采用nuxt或者next等同构解决方案，这里我们简化了一下，只考虑路由的变化，所以也就不使用nuxt来搭建项目了。

第二步，加入vue-router

routes.ts

import { RouteRecordRaw } from "vue-router";



export const routes: RouteRecordRaw[] = [

  {

    path: "/",

    redirect: '/home'

  },

  {

    path: "/home",

    name: "Home",

    component: () => import("./Home.vue"),

    children: [

      {

        path: ':id',

        name: "Detail",

        component: () => import('./Detail.vue'),

      }

    ]

  },

]

router.ts

import {createRouter, createWebHistory} from "vue-router";

import { routes } from './routes.ts'

export const router = createRouter({

  history: createWebHistory(),

  routes,

})

文件结构：

我习惯吧routes和router分开两个文件，一个专心做路由表的编辑，另一个就可以专门做路由器（router）和路由守卫的编辑。

代码结构其实很简单，为了缩减代码量，我直接把page组件跟router放在一起了。

简单解释一下：

routes.ts 文件中我写了三个路由，一个是根路由/,一个是列表/home，一个是详情页Detail，这里使用了一个相对路由:id的小技巧，待会你们就会知道为什么要这样了。

第三步，编写Home.vue

<template>

  <div>

    <div class="text-red-700">Homediv>

    <div class="w-full flex flex-wrap gap-3">

      <router-link v-for="item in dataList" :to="`/home/${item.id}`">

        <img :src="item.url" alt="">

      router-link>

    div>

  <el-dialog title="Detail" v-model="dialogVisible">

    <router-view>router-view>

  el-dialog>

  div>

template>



<script setup lang="ts">

import {computed, ref} from "vue";

import {useRoute, useRouter} from "vue-router";

import axios from "axios";

import {randomSize} from "../utils/randomSize.ts";



const route = useRoute()

const router = useRouter()

const lastRoute = computed(() => route.matched[route.matched.length - 1])

const dialogVisible = computed({

  get() {

    return lastRoute.value.name == 'Detail'

  },

  set(val) {

    if (!val) {

      router.go(-1)

    }

  },

})



const dataList = ref([])

const loading = ref(false)

function getList() {

  loading.value = true

  const data = localStorage.getItem('imageData')

  if (!data) {

    axios.get('https://picsum.photos/v2/list')

        .then(({data}) => setDataList(data))

        .then(data => localStorage.setItem('imageData', JSON.stringify(data)))

        .finally(() => {

          loading.value = false

        })

  } else {

    setDataList(JSON.parse(data))

  }

}

getList()



function setDataList(data) {

  dataList.value = data.map(item => ({

    id: item.url.split('/').pop(),

    url: randomSize(item.download_url)

  }))

  return data

}

script>

这里重点看两个地方：

1. template里需要有显示detail视图的地方，因为Home.vue除了要显示列表，还需要显示弹窗中的Detail，所以我把列表做成了router-link，并且把router-view放在了dialog里。（这里借助了tailwindcss和element-plus）

2. 为了控制弹窗的显隐，我定义了一个dialogVisible计算对象，他的get来自router.matched列表中最后一个路由（最终命中的路由）是否为Detail，如果为Detail，就true，否则为false；它的set我们只需要处理false的情况，当false的时候，路由回退1。（其实是用push/replace还是用go我是有点纠结的，但是我看到小红书这里是用的回退，所以我也就用回退了，虽然回退在这种使用场景中存在一定的隐患） 

剩下的代码就是获取数据相关的，我借用了picsum的接口（获取demo图片），并且我也没有做小红书的瀑布流（毕竟还是有点难度的，等有空了再做个仿小红书瀑布流来水一篇文章）。

Detail.vue的代码就不贴了，它没有太多技术含量。

大概的页面效果是这样的：这里我就没有做数据加载优化之类功能了。（代码尽量简短）

我们可以看到，当点击详情的时候，浏览器右下角是有显示对应的路由，点开之后浏览器地址栏也变化了，详情内容在弹窗中出现，是我们想要的效果。

但是此时如果刷新页面，页面还是会一样先加载列表页，然后以Dialog显示详情。

刷新只显示详情

怎么做到刷新的时候只显示Detail页面而不显示列表页呢？我很快有一个想法：在路由表（routes.ts）的下面再增加一个路由，让它的路由路径跟详情的一样，这样刷新的时候会不会能够匹配到这个新路由呢？

// route.ts

export const routes = [

  ...

  {

    path: '/home/:id',

    name: "DetailId",

    component: () => import('./Detail.vue')

  }

]

这个路由跟Home是同级的，使用了绝对路径来标记path（这就是上面detail采用相对路径的原因），同时为了避免name冲突，我换了一个name，component还是使用Detail.vue（这里我后来发现其实也可以使用其他的组件，其实真正起作用的是path，而不是component）。

但是不行，不论是将这个路由放在Home前面还是Home后面，都没法做到小红书的那种效果，放在home前面会导致从列表页直接跳转到详情页，不会在弹窗中显示；放在home后面又会因为匹配优先级的问题，匹配不到底下的DetailId

解决方案

但是前面的思考还是给了我灵感，添加一个路由守卫是不是就可以解决问题呢？于是我添加了这样一个全局路由守卫：

// router.ts

router.beforeEach((to, from) => {

  if (to.name === 'Detail') {

    if (from.name === 'Home') {

      return true

    } else {

      return { name: 'DetailId', params: to.params }

    }

  }

})

这个守卫的作用是，当发生路由跳转时，如果to为Detail，则判断from是否为Home，如果from为Home，则可以正常跳转，如果from不为Home，则说明是刷新或者链接打开，这时跳转至DetailId页面，并且params保持不变。

短短十行代码，就解决了问题。

可以看到，正常从列表显示详情还是会正常从弹窗中显示，而如果此时刷新页面，就会直接进入到详情页面。

如此我们成功的模仿了小红书的路由逻辑。

总结

其实做完效果才会发现代码非常简单无非就是一个路由守卫，一个弹窗显示，加一起不到一百行代码。代码地址我贴在下方了，希望对大家有帮助。

github.com/Tz-george/x…

作者：George_Tz
来源：juejin.cn/post/7343883765540962355

引言

大多数人都遇到过这种场景，我在某个网站上浏览过的信息，但我并未登录，可是到了另一个网站发现被推送了类似的广告，这是为什么呢？

本文将介绍一种浏览器指纹的概念，以及如何利用它来判断浏览者身份。

浏览器指纹

浏览器指纹是指通过浏览器的特征来唯一标识用户身份的一种技术。

它通过记录用户浏览器的一些基本信息，包括操作系统、浏览器类型、浏览器版本、屏幕分辨率、字体、颜色深度、插件、时间戳等，通过这些信息，可以唯一标识用户身份。

应用场景

其实浏览器指纹这类的技术已经被运用的很广泛了，通常都是用在一些网站用途上，比如：

• 资讯等网站：精准推送一些你感兴趣的资讯给你看


• 购物网站: 精确推送一些你近期浏览量比较多的商品展示给你看


• 广告投放: 有一些网站是会有根据你的喜好，去投放不同的广告给你看的，大家在一些网站上经常会看到广告投放吧？


• 网站防刷: 有了浏览器指纹，就可以防止一些恶意用户的恶意刷浏览量，因为后端可以通过浏览器指纹认得这些恶意用户，所以可以防止这些用户的恶意行为


• 网站统计: 通过浏览器指纹，网站可以统计用户的访问信息，比如用户的地理位置、访问时间、访问频率等，从而更好的为用户提供服务

如何获取浏览器指纹

指纹算法有很多，这里介绍一个网站 https://browserleaks.com/ 上面介绍了很多种指纹，可以根据自己的需要选择。

这里我们看一看canvas，可以看到光靠一个canvas的信息区分，就可以做到15万用户只有7个是重复的，如果结合其他信息，那么就可以做到更精准的识别。

canvas指纹

canvas指纹的原理就是通过 canvas 生成一张图片，然后将图片的像素点信息记录下来，作为指纹信息。

不同的浏览器、操作系统、cpu、显卡等等，画出来的 canvas 是不一样的，甚至可能是唯一的。

具体步骤如下：

2. 要从画布生成签名，我们需要通过调用toDataURL() 函数从应用程序的内存中提取像素。此函数返回表示二进制图像文件的 base64 编码字符串。然后，我们可以计算该字符串的MD5哈希来获得画布指纹。或者，我们可以从IDAT块中提取 CRC校验和 ，IDAT块 位于每个 PNG 文件末尾的16到12个字节处，并将其用作画布指纹。