温和些吧-优快云博客

原创 echarts画精确到街道的地图

echarts画精确到街道地图

2022-11-11 13:50:16 2620 1

原创滚动条隐藏

Firefox浏览器scrollbar-width: none; /* Firefox */IE浏览器-ms-overflow-style: none; /* IE 10+ */Chrome和Safari浏览器在出现滚动条的元素上更改伪元素scrollbar：::-webkit-scrollbar {display: none; /* Chrome Safari */}

2022-03-02 16:48:30 563

原创 Error: Failed to load parser ‘babel-eslint‘ declared in ‘node_modules/shallowequal/package.json‘: Ca

npm 启动报错解决办法：使用手动安装 babel-eslint npm i -D babel-eslint

2021-12-06 13:34:40 1858

原创解决git clone:LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443

1.打开vpn，查找到vpn代理的出口入口端口号我这里是78902. 命令行输入git config --global -e3. 进入修改模式，新增[http]proxy = socks5://127.0.0.1:7890[https]proxy = socks5://127.0.0.1:78904.重新git clone即可下载完成...

2021-12-06 11:27:56 1868

Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client导致这个错误的原因是，目前，最新的mysql模块并未完全支持MySQL 8的“caching_sha2_password”加密方式，而“caching_sha2_password”在MySQL 8中是默认的加密方式。因此，下面的方式命令是默

2021-09-06 13:41:15 1333

原创 JavaScript：图片异步加载 onLoad函数

由于业务中有个需求，有个选项是让用户点击查看大图，这个大图应该带遮罩层显示在屏幕正中间，但是由于图片是挂载在服务器上的图片，所以加载图片是异步的，即图片并不能一次性加载完毕，这就导致图片即使加载完成，也无法实现屏幕居中。后来发现可以在img标签里实现onLoad函数，当图片完毕后，让图片替换之前的默认图片。<img src={imgLoading} onLoad={e => model.imageLoadHandler(e)}/> imageLoadHandler = e =&gt

2021-08-11 10:08:28 2068

原创 webpack补充2:webpack的source map

webpack有一个devtool的配置，我们可以在其中选择一种 source map 格式来增强调试过程。这个source map的作用就是即使在合并和缩小客户端代码后仍能保持其可读性，更重要的是可调试，而不会影响性能。也就是说，当项目运行后，如果出现错误，错误信息只能定位到打包后文件中错误的位置。如果想查看在源文件中错误的位置，则需要使用映射关系，找到对应的位置。官网说到了一个注意事项：验证 devtool 名称时，我们期望使用某种模式，注意不要混淆 devtool 字符串的顺序，模式是：

2021-07-22 13:53:02 221

原创 webpack补充1:Module、Chunk、Output

在说起这三者的关系之前，我们先说一下webpack六大概念：Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。Loader：模块转换器，用于把模块原内容按照需求转换成新内容。Plugin：扩展插件，在 Webpack 构建流程中的特定时机

2021-07-22 13:50:32 367

原创 webpack：使用介绍

1.什么是 WebpackWebpack 是为浏览器构建 JavaScirpt 模块脚本的前端工具。它可以像 Browserify 一样使用，并且更加强大。$ browserify main.js > bundle.js# 相当于$ webpack main.js bundle.jsWebpack 是一款强大的打包工具。在 Webpack 中一切皆模块。Webpack 官网的 banner 图完美地诠释了这一理念。Webpack 从一个入口文件开始递归地分析模块的依赖关系，根据依赖关系将这

2021-07-20 10:39:48 282

原创 JavaScript与数据结构:基于链表（非双向）的数据结构

要存储多个元素，数组或者列表可能是最常用的数据结构。但是这种数据结构有个缺点：数组大小一般是固定的，从数组起点或者中间插入或者移动元素成本过高，因为需要移动很多元素。链表存储有序元素的集合，但不同于数组，链表中的元素并不是连续放置的。每个元素由一个存储元素本身的节点和下一个指向下一个元素的引用（也称指针或链接）组成。它的一个好处在于，添加或者移除元素不需要移除其他元素。注意：要想访问链表中的一个元素，需要从起点（表头）开始迭代链表直到找到所需元素。我们可以通过以下方法创建链表：class N.

2021-07-07 15:21:06 139

原创 JavaScript与数据结构:基于循环队列、双端队列的数据结构——击鼓传花、回文检查器

对于队列的思想可以参考栈，与栈不同的是，队列是“先进先出”的思想。击鼓传花例子代码可这样写：循环队列：击鼓传花在该游戏中，孩子们围城一个圆圈，把花尽快的传递给旁边的人。某一时刻传花停止，这时候花在谁手里，谁就退出圆圈，直到剩余一个孩子，这个孩子即为胜者。class Qeque { //定义队列类 constructor(){ this.count = 0; this.items = {}; this.firstCount = 0;//用来追

2021-07-07 10:53:13 305

原创 JavaScript与数据结构:基于栈的数据结构

栈是一种遵循先进后出，后进先出原则的有序集合。常用于变成语言的编译器以及内存中保存变量、方法调用，也被用于浏览器的历史记录（也就是浏览器的返回按钮）等。创建一个基于数组的栈class Stack { constructor() { this.items = []; } }为栈声明一些方法：push：添加新元素到栈顶pop：移除栈顶元素peek：返回栈顶元素，不对栈做任何修改isEmpty：如果栈为空，则返回true,否.

2021-07-06 14:35:33 132

原创 react:new与不new

mobx是一个小型状态管理工具，方便且好用（这是前言）。但是今天迁移代码发现了一个问题，由于是小项目，所以这个小项目用一个mobx的store就够了，于是想也没想，就把之前非常多store的项目照搬过来了，结果我发现：子组件将mobx的store里的变量更改了，但是父组件读取store里的某一个变量却依然是初始值，试了很多方法，一直没成功，后来我突然看到这个store文件导出的方法，把new加上，并且在每个组件里面不进行new store这个操作，居然发现父组件的数据并不是初始值了，而是子组件修改的值了。

2021-07-05 14:51:53 573

原创 nextJs:document、window报错

页面使用ssr渲染的时候，react的生命周期中render()阶段负责创建虚拟dom，进行diff算法，更新dom树，render及之前的阶段，并没有将组件渲染为实际的dom节点，所以不能获取window对象，如果是下面这样是可以拿到window对象的：官方解决办法在使用document/window组件的父组件写成：import dynamic from 'next/dynamic'const DynamicComponent = dynamic(() => import('../co

2021-07-02 13:24:17 2695

原创 nextJs:内置scss配置

首先确保本地有sassnpm i sass --save由于nextJs有内置sass，所以只用在配置next.config.js里面打开即可const path = require('path')module.exports = { sassOptions: { includePaths: [path.join(__dirname, 'styles')], },}全局scss引入：在_app.js 中引入：import '../styles/ab.scss'如果

2021-07-02 12:44:27 2924 1

原创 umi框架：react优雅引入阿里巴巴矢量图标库

进入阿里巴巴矢量图标库，将选入的图标放入购物车。选择添加至项目，没有项目可新建项目。封装一个自定义Icon组件，这里推荐React使用函数形式：import React from 'react';import classnames from 'classnames';import propsTypes from 'prop-types';const scriptElem = document.createElement('script');// 在上方复制的链接放在这里scriptEl

2021-07-01 17:32:08 1431 1

原创 umi框架：Cannot find module ‘@umijs/preset-react‘ from‘xxxx‘

启动报错：解决方法：pakeage.json修改：在"/"左右两边各加一个空格。"@umijs / preset-react": "^1.15.8",启动成功

2021-07-01 15:56:30 3263

原创获取屏幕高度——浏览器高度、控制台高度、工具栏高度

今天想写一个效果，进入网站顶部导航栏需要一个全屏背景图，这个需要根据不同的屏幕大小适应不同的高度（不能使用height为100%，这个涉及到最外层容器的高度，容易造成高度塌陷），所以需要一个确定高度值。一开始最快反应就是document.body.clientHeight确实拿到了屏幕高度，可是出现了一个问题，就是你一旦打开控制台以后再刷新页面，当前获取的clientHeight高度就变成了剪掉控制台的高度了。就像下面这样：当你打开控制台后：关闭控制台后：这就是问题所在，于是我找了资料，就

2021-07-01 14:27:51 2923

原创【测评】前端实习生测评二期

1.以下代码执行后，a.x 和 b.x 的结果分别是？function A(x) { this.x = x; } A.prototype.x = 1; function B(x) { this.x = x; } B.prototype = new A(); var a = new A(2), b = new B(3); delete b.x;B.2 1C.2 undefinedD.上面都不对答

2021-01-12 14:33:42 317

原创前端实习生题库整理（一）

关于 javascript 模块化，下列描述错误的是？A. AMD推崇依赖前置，CMD推崇依赖就近B. Sea.js遵循AMD规范，RequireJS遵循CMD规范C. 主流的模块化包括CommonJS,AMD,CMD等D. 模块化有利于管理模块间的依赖，更依赖模块的维护答案:B解析：CommonJS是服务器端的同步js模块化规范，由NodeJS实现amd, cmd是用在浏览器端的异步模块化规范。AMD依赖前置书写，由require.js实现。CMD依赖就近书写，由sea.js.

2021-01-11 10:30:23 1135

原创 js迭代

“迭代”的意思是按照顺序反复多次执行一段程序，通常会有明确的终止条件。ECMAScript 6 规范新增了两个高级特性：迭代器和生成器。使用这两个特性，能够更清晰、高效、方便地实现迭代。1. 首先先要理解迭代：在 JavaScript 中，计数循环就是一种最简单的迭代：for (let i = 1; i <= 10; ++i) { console.log(i); }循环是迭代机制的基础，这是因为它可以指定迭代的次数，以及每次迭代要执行什么操作。每次循环都会在下一次迭代开始之前完成，而每次迭.

2021-01-08 11:15:04 1220

原创 apply()、call()、bind()

这两个方法都会以指定的 this 值来调用函数，即会设置调用函数时函数体内 this 对象的值。apply()方法接收的参数：函数内 this 的值和一个参数数组。第二个参数可以是 Array 的实例，但也可以是 arguments 对象。function sum(num1, num2) { return num1 + num2; } function callSum1(num1, num2) { return sum.apply(this, arguments); // 传入 .

2021-01-08 10:41:39 126

原创【测评】前端实习生测评一期

1.以下运行什么结果：const a = Symbol('test'); const b = Symbol('test'); const c = Symbol(); const d = Symbol(); console.log(a === b, c === d);答案： false false解析：原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型。Symbol函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的Symbol函数的返回值

2021-01-07 13:31:24 1132 1

原创 undefined 和 null

undefined 和 null为什么undefined==null其实在 ECMAScript 的原始类型中，是有Undefined 和 Null 类型的。这两种类型都分别对应了属于自己的唯一专用值，即undefined 和 null。Undefined 类型只有一个值，就是特殊值 undefined。当使用 var 或 let声明了变量但没有初始化时，就相当于给变量赋予了 undefined 值。注意：增加这个特殊值的目的就是为了正式明确空对象指针（null）和未初始化变量的区别

2021-01-07 12:51:16 271

ilovewangjie990502的博客