08 2021 档案
摘要：发展历史 简要的提及一下，异步流程控制的发展历史大概是 callback hell => Promise => Generator => async/await ES6 中 Promise 是通过 .then().then().catch() 的方式来解决 callback 多层嵌套的问题。但 Pr
阅读全文
摘要：水平扩展 Node.js 应用程序 水平扩展是复制应用程序实例以管理大量传入连接。 此操作可以在单个多内核机器上执行，也可以在不同机器上执行。垂直扩展是提高单机性能，它不涉及代码方面的特定工作。在同一台机器上的多进程提高应用程序吞吐量的一种常用方法是为机器的每个内核生成一个进程。 通过这种方式，No
阅读全文
摘要：困在笼子里的Web Worker 在使用Web Worker前我们要了解它的能力边界，让我们避免无谓的撞壁： 同源限制 1.1. 以http(s)://协议加载给WebWorker线程运行的脚本时，其URL必须和UI线程所属页面的URL同源；1.2. 不能加载客户端本地脚本给WebWorker线程运
阅读全文
摘要：最近在使用d3 zoom得时候 遇到一个小坑 直接对元素添加 zoom事件 会有很大得抖动，查文档 看代码之后发现是 由于元素在不断变化， 所以计算基础值也不不断变化，所以会导致计算出来得值 忽大忽小 从而造成抖动 解决办法 :在他父元素上添加事件 然后在子元素上添加style 方法 具体代码 _a
阅读全文
摘要：1.回调函数 我们编写一个问候的函数，首先创建一个函数greet(name)，该函数返回欢迎消息： function greet(name) { return `Hello, ${name}!`; } greet('fly63'); // => 'Hello, fly63!' 如果要向一些人问候怎么
阅读全文
摘要：animejs 是现如今非常不错的一个 js 动画库。我们将其与 react Hooks 融合，使它更方便的在 react 中使用。 最终效果： const Animate: React.FC = () => { const { animateTargetRef, animationRef } =
阅读全文
摘要：color ==功能==：JavaScript库，用于不可变的颜色转换和对css颜色字符串的支持。 npm install color var color = Color('#7743CE').alpha(0.5).lighten(0.5); console.log(color.hsl().stri
阅读全文
摘要：简介 早期的 Web 网站主要由 html 和 css 组成。如果有任何 JavaScript 的代码需要在页面中执行，通常是以小的代码片段的形式来提供功能和交互性。结果就是通常 JavaScript 的代码都会被编写在一个文件中，然后通过 script 标签加载到页面中。开发人员可以将 JavaS
阅读全文
摘要：初识运动 1.停不下来 给定时器添加timer 来判断是否需要停止 2.到目的地，还能点击移动，把移动的代码放入else中 3.重复点击按钮会加速运动 是因为点一次就会启动一次定时器，多次就会启动多次 保证只有一个定时器在启动，启动一次就关闭上一次启动定时器 运动框架: ? 1 启动就关闭定时器?
阅读全文
摘要：babel 本质上是个编译器，所以它所做的基本上就是编译器要做的事，为了避免对编译器的某些东西讲的太细，我们重点只要知道 babel 的工作流程就行了。 转换成AST 第一步可以说是是编译器的基本功能，通过解析器将原始代码转换成抽象语法树（AST），顾名思义就是描述语法的数据结构，一般在这一步编译器
阅读全文
摘要：js 是种弱类型语言，对变量的类型没有限制。例如，如果我们使用字符串类型创建了一个变量，后面又可以为同一变量分配一个数字： let message = 'Hello'; // 分配一个字符串 message = 14; // 分配一个数字 这种动态性为我们提供了灵活性并简化了变量声明。 不好方面，我
阅读全文
摘要：大数据时代下，很多企业开始建立自己的网站，前期用户体验需要借助百度问答、贴吧这样的平台，后期的网站推广、seo优化同样需要，但是在过程中如果大量使用同一个IP重复操作，必然会受到限制。 今天我们来具体聊一聊seo优化专员应该具备的七种能力。 1、数据分析能力 为什么把数据分析能力放在前面来说呢?因为
阅读全文
摘要：无论你是react、Angular、vue.js，还是原生JavaScript开发者，你的代码都有可能成为黑客眼中的猎物。 作为一个前端开发者，我们可能更加关注性能、seo、UI/UX，往往会忽视安全问题。 当你了解了大型框架是如何让你对xss攻击保持开放态度时，也许你会感觉到很意外。例如，reac
阅读全文
摘要：CSS 自定义属性和 JavaScript 自定义属性在这里应该不会令人感到惊讶。自浏览器提供支持以来，他们一直在做的一件事就是与 JavaScript 协同工作以设置和操作值。 不过具体来说，我们可以通过几种方式使 JavaScript 与自定义属性一起工作。可以使用 setProperty 设置
阅读全文
摘要：页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。 1、将内容部分的底部外边距设为负数 这是个比较主流的用法，把内容部分最小高度设
阅读全文
摘要：雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件： 合成雪碧图后是这样拼在一起的一张图： 2.雪碧图的使用 首先确定要使用的图标的位置和大小（可以通过ps测量）， 如下的雪碧图大小统
阅读全文
摘要：扩展性（Extensibility）-指对现有系统影响最小的情况下，系统功能可持续扩展或者提升的能力，表现在系统基础设施稳定不需要经常变更，应用之间较少依赖和耦合，对需求变更可以敏捷响应。它是系统架构设计层面的开闭原则（对扩展开放，对修改关闭），架构设计考虑未来功能扩展，当系统增加新功能时，不需要对
阅读全文
摘要：一、先了解下overflow-wrap属性 css overflow-wrap 属性其实就是以前的 word-wrap 属性，MDN现在直接把 word-wrap 的文档页跳转到 overflow-wrap 属性的文档页了。 由于 overflow-wrap 属性IE浏览器不支持，而其他现代浏览器依
阅读全文
摘要：利用 css 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 css 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。 方法一 这个方法把一些
阅读全文
摘要：预编译 JavaScript 执行步骤 检查通篇的语法错误 -> 预编译 -> 解释执行 暗示全局变量 变量不声明直接赋值，挂载到 window 对象下 a = 1; console.log(a); // 1 function test() { var b = c = 1; } test(); co
阅读全文
摘要：基线 baseline：字符x的底部 x-height: 字母x的高度，vertical-aling设置为middle的时候，对齐的是baseline往上1/2的x-height，所以vertical-aling设置为middle不是整正的居中对齐 line-height 1.内容高度 思考：未
阅读全文
摘要：一、塌陷 1.当position设置为：absolute或者fixed时，元素的display会转换为block。（设置float也会产生这样的效应）2.正常情况下，div会被内容撑开，但是如果设置了1.的情况下，父元素就会产生塌陷，失去高度。 解决办法： 给父元素设置高度。给父元素设置overfl
阅读全文
摘要：当你的用户需要一些额外的上下文来放置图标，或者当他们需要一些保证来点击按钮，或者可能是一个复活节彩蛋的标题来搭配一个图片时，工具提示是一个很好的方法来增强用户界面。现在让我们来制作一些动画工具提示，只使用html和css。 演示 以下是我们的工作目标: 主要目标是拥有一种添加工具提示的简单方法，因此
阅读全文
摘要：在css中有很多好看的样式都可以实现，css设置出来的样式让整个网页看起来也会非常美观，今天的这篇文章就给大家来介绍一下在css中怎么设置文字的透明度，让你的文字在网页中看起来是透明的。 CSS设置透明度可用如下两类方法实现： 1、使用rgba2、使用opacity 使用rgba设置文字不透明度的方
阅读全文
摘要：因项目需要，需要在元素上实现动画效果，并且需要有动画间隔。坑爹的是animation-delay只有在第一次动画开始的时候才起效。 在网上找了很多方法，最终的方法基本都是改动画规则，比如 @keyframes move{ /* 此处从75%开始 */ 75%{ transform: translat
阅读全文
摘要：了解浏览器背后的运行机制 了解浏览器背后的运行机制就是了解浏览器的内核，现在市面上主流浏览器的内核名称分别如下： chrome: blink内核 Opera: blink内核 Safari: webkit内核 FireFox: Gecko内核 IE: Trident内核 ** 注：blink内核其实
阅读全文
