sayUonly的博客

本文章长期汇总Canvas的使用技巧，并长期更新。

解析html文件的时候，出现了“You may need an appropriate loader to handle this file type.”问题。意思是我需要添加一些loader来解析html，网上基本上的解决方案是用。最后，我决定还是回归本源问题，最好减少引入的插件。，配置的地方和文件都需要修改。重新运行一下，问题已经解决了。有冲突，导致html中的类似。的变量不能够正确解析了。这里的描述可以看出，

vite + ts + eslint全局变量配置在开发过程中，我们经常需要配置一些全局变量。下面我将记录，我全局变量的配置流程。我为了使用mock，所以增加了一个全局环境变量__USE_MOCK__来区分环境。首先，我需要安装cross-env插件包，并在package.json增加一条脚本：{... "scripts": { "dev:mock": "cross-env USE_MOCK=true vite", ... }...}这样，我就可以在vite.conf

之前我总结过使用react-scripts如何通过env进行环境配置（原文），但是我们在打包的时候常用的是webpack。所以我针对webpack总结了一下如何使用env进行环境配置。安装首先我们需要安装相应的插件，我将我的package.json放在下面了，大家按需安装吧。{ "name": "react-remplate", "version": "0.1.0", "private": true, "dependencies": { "@babel/polyfill": "

当我们将标签<input>的type设置为number时，是无法输入除数字以外的字符串的，只有E,e,-,+除外。那么当输入E,e,-,+的时候实际上<input>的值变成了什么呢？我将那一刻的实际输入情况记录了下来。<input id="input" type="number" />document.getElementById('input').addEventListener("input", event => { var value = even

Web Worker 可以为 JavaScript 创建多线程环境，可以将一部分任务分配给分线程处理，从而不阻塞主线程的运行。通过 Web Worker 创建的分线程和主线程是同时运行互不干扰的。具体的Web Worker的相关知识，大家可以参考阮一峰大神的博客。Web Worker 在使用过程中需要注意的是分线程创建之后，为了随时响应主线程的通信会始终运行在后台。所以 Worker 是比较消耗资源的，且不会自动关闭。当然为了解决这个问题 Web Worker 为我们提供了手动关闭的方法，那么怎么确定

ECMAScript的字符串可以通过+进行自加连接。let str1 = "";str1 += "str1 ";这个过程需要完成以下步骤：创建存储 "hello " 的字符串。创建存储 “world” 的字符串。创建存储连接结果的字符串。把 str的当前内容复制到结果中。把 “world” 复制到结果中。 更新 str，使它指向结果。每一次的字符串+都需要完成第2到第6个步骤，这种消耗在庞大的数据基数下是不可忽视的。我在复习W3school中ECMAScript 定义类或对象的内容

在实际开发过程中，我们需要在不同的环境下进行测试。我们可能需要使用 mock 或者灵活修改后端请求 IP 等。为了方便测试，我们需要创建不同的配置文件进行管理，以达到迅速切换运行环境的目的。React的NODE_ENV首先，我们来认识一下React常用的运行模式并输出他们的NODE_ENV来看一下。"scripts": { "start": "react-scripts start", // development "build": "react-scripts build", // prod

JavaScript三种事件绑定的方法和执行顺序JavaScript的三种事件绑定方法HTML标签DOM事件addEventListener三种绑定事件的执行顺序JavaScript的三种事件绑定方法事件就是指在HTML元素上发生的事情。例如，onchange元素发生了变化，onclick元素被点击了，onload元素加载完成等。那么如何绑定这些事件，让事件发生的时候可以按照用户的心意完成一些功能呢？目前常用的绑定方法有如下三种：HTML标签可以直接在HTML的标签上绑定事件，可以是直接的JavaS

将多个Promise实例包装成一个新的Promise实例的方法Promise.all()Promise.allSettled()Promise.race()Promise.any()Promise对象提供了很多方法来实现对多个Promise实例的统一处理，常用的方法我会在下面一一说明。Promise.all()Promise.all() 当所有的 Promise 都执行完成后返回所有数据组成的数组，如果任一 Promise 失败，则直接返回该 Promise 的错误信息。// Promise 传参封

Promise的catch（）和then（...,err）的执行顺序创建Promise的测试函数当then在catch之前then中没有err时then中有err时Promise测试函数有错误时then中有错误时当catch在then之前对于Promise如果你看过ES6的教程，应该就已经有所了解了。在Promise的回调中then(...,err)和catch()都是用来捕获错误的，那么这俩在实际应用上的执行顺序是怎样的呢，我个人做了点小测试。有兴趣的大家可以继续阅读本章，也可以提出你的想法。我会多做补

Symbol在对象中的应用什么是Symbol？概念使用方法特点如何利用Symbol安全地增加JavaScript对象的属性在合作开发或者使用别人做好的对象进行开发的时候，在对象中添加自己的属性有可能会和对象中的原属性重名，这样是不安全的。为了解决这样的矛盾，也为了节省不必要的代码阅读时间，ES6增加了Symbol类型。什么是Symbol？概念Symbol是ES6中引入的一种新的原始数据类型，和string、number等数据类型同等。使用方法let varSymbol = Symbol(); /

JavaScript更新到ES6，增加了新的let和const两种命令来声明变量。我结合var对这三个命令的作用域进行了比较。命令名作用域var全局let块级const块级为了更直接的看出区别，可以看如下代码：for (var var_i = 0; var_i < 3; var_i++) { { console.log(var_i); }}// 全局作用域console.log(var_i);for (let let_i =

开发需求制作调查问卷，问题为单选题。因此答案的数据绑定需要动态处理。<el-radio-group v-model="answers[index]"> <el-radio>...</el-radio></el-radio-group>data(){ return{ answers:{} }}methods:{ init: function(){ for(const key in questions){ this.answer

主要使用的插件是axios，将属性responseType设置为blob。数据流处理代码如下：const { data } = responcelet url = new Blob([data], { type: data.type}if (window.navigator && window.navigator.msSaveBlob) { try { window.navigator.msSaveBlob(url, 'fileName') } catch (e) {

目录正则表达式学习笔记RegExp对象字面量构造函数元字符字符类字符类取反范围类预定义类边界量词贪婪模式与非贪婪模式贪婪模式非贪婪模式分组或正则表达式学习笔记正则表达式使用单个字符串用来描述、匹配一系列符合某个句法规则的字符串。在Javascript中的正则表达式，可以帮助我们迅速的完成字符串的判断或者处理。RegExp对象Javascript通过内置对象RegExp支持正则表达式。...

开发过程中我们经常需要遍历数组和对象。for...of和for...in都可用于遍历，但是两者略有区别。for…of我们来输入一组代码：const array = ['a', 'b', 'c']const object = { 'o1': 'a', 'o2': 'b', 'o3': 'c'}for(const item of array){ console.log(...