抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

Document 倒计时： 停止 // 1 // function countDown (num) { // document.getElementById('timer_num').innerText = num; // const timer = setTimeout(() => { // clear...

前言

之前做了一个需求，大致内容是：登录系统时，登录接口多次错误后，依据错误次数禁止登录的时间越来越长，即多次登录错误需要等待一定时间才能再次登录，在禁止时间内，即使登录信息填写正确，登录接口也会提示需要等待一定时间才能再次登录。要求在登录页面显示等待的时间，同时等待时间内，禁止使用登录按钮。相信大家看到这个需求之后，首先想到的就是使用定时器，接下来通过这个需求的具体实现来看一下关于定时器的使用及其他方案的探索。

现有方案及实现过程中遇到的问题

上面这个需求中，涉及到前端部分其实就是在页面根据接口返回的等待时间，显示一个倒计时，同时倒计时内，禁止使用登录功能。这个需求中其实主要的就是一个定时器，我们先抛开其他，单看定时器的实现。看到倒计时，大家一般都会使用setTimeout、setInterval，这里我选择了使用setTimeout。

一般来说，如果我们已经拿到了需要倒计时的时间，我们常见的做法可能是使用setTimeout，每秒减去一，把结果展示在页面上，就能实现一个简单的倒计时功能：

说明

本人使用github搭建个人博客，博客框架为Hexo(5.4.2)，博客主题为Volantis(5.8.0)。为了便于使用，接入了Giscus作为评论系统。本篇文章主要说明接入Giscus的具体操作。

步骤一

  • 建一个公共库
    由于Giscus使用github的discussion作为评论数据存放地，所以使用Giscus需要先建一个github的公共仓库，仓库名称可根据自己的需要进行设置。本文中评论的仓库名为comments。
    create-repo

除了要求是个公共库之外，是否需要README、gitignore无具体要求

关于docker的使用问题

问题：删除docker网络，报错存在active endpoints
例如： while removing network: network docker_dms_net id ec0611ba3525 has active endpoints

解决方法：
第一种：
重启docker

1
sudo service docker restart

第二种：

  1. 查看docker的网络

    1
    docker network ls

  2. 查看网络的endpoint, 停止使用网络的container

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    docker network inspect <network-id>

    // container-id 是Containers下对应的数据
    // 例如：
    // "Containers": {
    //   "6bcc2418b08f9e1446053ab2e95bda066ec79bcbb0bd200c5e5110dc9bc637a3": {
    //       "Name": "dms-mysql-2",
    //       "EndpointID": "75b980a5ad52734eccf237b9bcef0b5c1b2b1426274326eb317d006aceac3eff",
    //       "MacAddress": "02:42:ac:1f:86:03",
    //       "IPv4Address": "172.31.134.3/24",
    //       "IPv6Address": ""
    //   }
    // }
    // container-id为：6bcc2418b08f9e1446053ab2e95bda066ec79bcbb0bd200c5e5110dc9bc637a3
    docker container stop <container-id>

什么是Shadow Dom？

一种连接节点的树状结构，代表标记文档（通常是在 web 文档中的 HTML 文档）中出现的不同元素和文本字符串。

浏览器渲染文档的时候会给指定的DOM结构插入编写好的DOM元素，但是插入的Shadow DOM 会与主文档的DOM保持分离，也就是说Shadow DOM不存在于主DOM树上。并且Shadow DOM封装出来的DOM元素是独立的，外部的配置不会影响到内部，内部的配置也不会影响外部。

Chrome中查看Shadow Dom
1.打开浏览器控制台的设置选项
2.找到Preference -> Elements，把show user anent shadow dom勾上
chrome-setting
shadow-dom

Shadow Dom的结构

前言

unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。
之前有分享提到过Tailwind，不知道大家是否还记得，Tailwind就是一种原子化的CSS框架。

原子化CSS是一种CSS架构方式，其支持小型、单一用途的类，其名称基于视觉功能。更加通俗的来讲，原子化CSS是一种新的CSS编程思路，它倾向于创建小巧且单一用途的class，并且以视觉效果进行命名。

优点

它可以让你快速地开发和原型设计，而不需要考虑CSS的细节。
它可以让你的CSS文件更小，因为它只生成你用到的工具类。
它可以让你的CSS更一致，因为它遵循一套预设的规则和变量。
它可以让你的CSS更灵活，因为它支持自定义工具类，变体，指令和图标。
它可以让你的CSS更易于维护，因为它避免了样式冲突和重复代码。

前言

前面我们说了diff算法里面的双端对比，主要是在vue2中使用。但在vue3中，使用了另一种比双端diff更快的算法 – 快速diff，今天我们来看一下快速diff的使用方式。

快速diff的使用场景

  • 预处理前置节点
  • 预处理后置节点
  • 仅有新增节点
  • 仅有卸载节点
  • 新增、卸载、移动节点

仅从上面这五种场景的字面意思上面我们大概能看出它们对应的处理情况，下面我们来看一下，每种场景具体的处理逻辑是怎么样的。（PS：为了便于理解，本文中的节点仅用数字表示）

前言

diff算法，全称为difference算法，是一种用于比较和查找文本、源代码或任何字符串之间差异的算法。前端中在react、vue等中使用diff算法对比虚拟DOM树，进行虚拟DOM树的更新，进而完成真实DOM的更新，达到更新页面的效果。在vue2中使用的就是双端diff算法。

什么是双端对比？

双端对比，即双端diff算法，一种同时对新旧两组子节点的两个端点进行比较的算法。
但就从上面这句话来看，可能有点抽象，可参考下面这张图片
double-end-contrast

双端对比的简单实现

概览

工具

微信小游戏使用《小游戏可视化制作工具》进行制作开发。《小游戏可视化制作工具》是一款web应用，可用于开发微信小游戏。以可视化的操作方式编辑游戏场景，使用积木作为脚本设计精灵的行为逻辑。

《小游戏可视化制作工具》推荐使用Chrome浏览器或者最新的QQ浏览器打开。

《小游戏可视化制作工具》支持微信扫码登录，创建的小游戏项目为开发者私人所有，无法跟他人共享或共同编辑。
《小游戏可视化制作工具》的账号密码登录为团队开发登录使用，暂未开放注册。

前言

假设你所在的公司有一个购物网站，想要分析不同用户的喜好偏向，预测商品销售情况等一些情况，这时就需要收集线上活动的用户行为的数据，并结合具体的指标进行分析。那么这些数据怎么收集？通常就可以通过埋点的方式解决类似的问题。

什么是埋点？

埋点是一种常用的数据采集方法，是收集并记录用户行为数据的过程。

通过埋点收集用户行为的有效信息，用作统计页面加载和事件行为的数据支撑，比如访问量、点击率、跳出率等，同时埋点为数据运营提供基础，为未来的业务发展提供有力支持。


3 / 9