Minyoung 的博客

题目有多个并发请求时，实现一个请求完成后，再请求下一个。实现间隔1s按顺序打印出1、2、3、4。以下提供部分代码！function request(x) { return new Promise(resolve => { const timer = setTimeout(() => { console.log(x) resolve(x) clearTimeout(timer) }, 1000) })}function se

1.npm i default-passive-events -S2.main.js引入入：import ‘default-passive-events’

初始化项目创建一个文件夹，名称就是你的项目名称即可，在文件夹中使用以下命令初始化项目npm init vite-app安装依赖npm install 或yarn安装插件添加typescript，这里直接使用vue add typescript会报错，需要先添加一个依赖npm install @vue/cli-service --save-dev或yarn add @vue/cli-service -D使用vue添加插件，如果没有安装@vue/cli的先全局安装npm ins

发布自己的npm包创建项目文件夹，这里就举例项目名称为npm-demo进入项目文件夹，创建package.json文件逐项填写配置npm init使用默认配置npm init -ypackage.json配置说明：http://caibaojian.com/npm/files/package.json.html编写你的项目，这里就举例入口文件是index.js，我就随便写点东西exports.print = (content) => console.log(content);登

使用element-ui按需加载爬坑，在使用element-ui官方给出的配置报babel版本问题。目前安装的babel都比较新，而element-ui是使用的babel-preset-es2015，我么将配置babel的地方改成我们使用的babel就可以了。使用按需加载之前需要插架的支持，安装以下插件yarn add babel-plugin-component -D或npm install babel-plugin-component -D在babel.config.js：（我采用的是b

// 获取IE版本function IEVersion() { // 取得浏览器的userAgent字符串 var userAgent = navigator.userAgent; // 判断是否为小于IE11的浏览器 var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; // 判断是否为IE的Edge浏览器

基于vue-cli 4.x配置，觉得有必要的小伙伴可以当做模板直接使用。const path = require('path')const UglifyJsPlugin = require('uglifyjs-webpack-plugin')const CompressionWebpackPlugin = require('compression-webpack-plugin')const { HashedModuleIdsPlugin } = require('webpack')const is

vue渲染机制和如何解决数据修改页面不刷新问题的多种方法本文不讲原理，只讲干货易懂易学，(感觉能学到知识，麻烦给小编来个赞！)首先 第一点，vue底层是 将data对象传人，使用Object.definePropety,转换为getter和setter，所以，vue不支持IE8.简单介绍一下Object.definePropety,Object.defineProperty(obj, prop, descriptor)//参数obj要在其上定义属性的对象。prop要定义或修改的属性的名

去这个链接https://github.com/electron/electron/releases找到自己想要的版本，点进去下载。找到对应的系统版本和SHASUMS256.txt文件并下载，放到以下缓存路径。这是我下载的版本，系统是macOS catalina 10.15.2SHASUMS256.txt文件缓存路径，没有electron就新建一个文件夹然后再丢进去Linux：$XDG_CACHE_HOME或~/.cache/electron/苹果系统：~/Library/Ca..

一,使用view形式的回到顶部HTML：<image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>css：/* 返回顶部 */.goTop{ height: 80rpx; width: 80rpx; position: fixed; bottom: 50rpx; background: rgba(0

node-sass 安装失败问题解决方案当我们去github上找到一个前端项目，公式项目整合、调试等场景里面样式使用sass、scss来编写的时候，我们就必不可少的回去安装sass、node-sass、sass-loader三件套。以前node版本在12.x的时候还好，切使用npm来安装node-sass除了慢点基本没啥问题，而现如今node14.x都出来了，webpack4.x+的时代，在安装node-sass的时候总是会报错，总是会出现gyp ERR!...之类的错误，大多都是**__binding.

使用koa处理vue项目的history模式在vue项目的路由中默认是hash模式，又叫前端路由，根据浏览器url地址栏中的变化，使用onhashchange事件监听做出相应的操作，不会向服务器发送请求。但是若采用了history模式，就大大不同了，history不怕前进不怕后退就怕刷新，history模式是由浏览器提供的history api来处理。而且将vue项目（非ssr）打包后的静态资源...

placeholder-shown当input或者textarea元素拥有placeholder属性的时候可使用该伪类，选择所有显示占位符(placeholder)的元素。当placeholder的内容显示的时候拥有该伪类。比较直观的感受就是当用户框输入内容时该伪类不在生效。MDN:传送门这是一个实验中的功能此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用...

前端代码规范Front Standard Guide前端 JS 项目开发规范规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。引自《阿里规约》的开头片段：----现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁...

我们常常看到很多vue生态下的ui框架的消息提示框，在页面切换的时候依然停留在页面，我们知道vue这种单页面渐进式框架，所有的操作和元素都是挂载在一个节点上的，当路由变化是整个节点下的dom元素也在重新渲染，若要实现ui框架中的类似的消息提示框的话，理论上就该把这样的组件挂载到其他的节点上，这样就互不影响了。vue已经为我们考虑好了，在vue上提供了一个vue.extend()函数，可以创建一个...

默认的package.json文件直接使用命令：npm init --yes生成{ "name": "pingdingshan", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" &a...

在JavaScript数组函数中有一个reduce函数，和filter、map、forEach等方法略有不同，虽然中间也是有内部循环，但reduce多了一层递归。先看看reduce函数接收的参数。reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, ini...

手写webpack文章目录手写webpack构建自定义命令手写loader手写插件（简单实现）手写babel-loader实现file-loader实现url-loader实现css-loader，改造style-loader构建自定义命令因为这是单独的全局功能模块，源码请移步至https://github.com/smallMote/ypack.git手写loader这里以处理le...

订阅模式应用非常广泛，比如Vue中的钩子以及Vuex的设计模式中都大量使用了订阅模式。下面就简单的演示一下。class Event { constructor() { this.handlers = {} // 事件队列 } // 注册事件（发布） addEventListener(name, handler) { if (!(name in this.h...

Webpack(>4.0.0)第二阶段打包多页应用webpack.config.jsconst path = (p) => require('path').resolve(__dirname, p)const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { mode: 'devel...

p2m常用命令pm2 start app.js # 启动app.js应用程序pm2 start app.js --name="demo" # 启动应用程序并命名为 "demo"pm2 start app.js --watch # 当文件变化时自动重启应用pm2 start script.sh # 启动 bash 脚本...

vscode默认不支持ts或js文件使用提案中的一些语法，vscode会给予错误提示。以下是我的解决办法。错误提示：步骤一：步骤二：在用户选项下打钩就是全局支持，在工作区下打钩就是工程项目，工作区下支持。若是vscode 1.42.1版本或更新的版本，立即生效。若低于此版本则需要重启vscode。...

Webpack(>4.0.0)本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。安装yarn add webpack webpack-cli -Dwebpack可以0配置打包...

axios 主动取消请求已经发送的请求，在没有收到后台返回之前主动取消。这样的场景很常用。例如：一个支付组件，正在支付的时候用户立即又关闭了组件，这时应该立即取消支付请求。又或者tabs切换的时候，都是经常用到的。这里我是用Typescript来封装的一个简单的axios请求做演示。api.jsimport axios, { CancelTokenStatic } from 'axio...

防抖函数在规定时间内重复执行同一个函数，但是只生效一次函数的行为。比如由于网络延迟，用户在一定时间内会重复点击某一个按钮，然而不断的执行按钮上的事件。若该事件是网络请求，则会给服务器不断造成压力，这是我们不愿看到的。节流函数在规定时间内重复执行同一个函数，但是按照一定的时间段生效函数的行为。和防抖函数非常相似。例如在支付回调后我们要确认支付的状态，可以手动检查+自动检查的情况下，我们使用节流...

vue-cli3全局使用CSS预处理语言变量这里面包含Less、stylus、sass、scss我们主要使用一个插件style-resources-loader来实现。使用vue add style-resources-loader 添加插件的方式，这时控制台会让你选择语言，选择好回车后vue-cli3会在vue.config.js这个文件中自动给你配置一部分。module.ex...

在Vue项目中我们往往会用到功用组件，使用在不同层次、不同地方的的组件，以至于我们每次都会去import组件并且使用components注册，如果是两个三个还能接受，但是比如element-ui框架中el-button这样的组件使用频率是非常的高，那就非常繁琐。Vue官方文档中给我们提供了在main.js中使用Vue.component()的方式注册全局组件，这样是很好的，但是在我看来不算...

classifyDemand 函数说明该函可将数组按字段分类，并将字段或自定义名称作为索引便于查找，分类显示，大大提高了试图的遍历压力。函数体/** * @param arr 需要分类的数组 * @param value -> object | array * @param key -> string * @param nickName -> string *...

在很多情况下我们都会使用到自定义组件的双向绑定，今天我这里使用vue的model属性来实现双向绑定，其实原理还是一样的，只是我觉得这样做会不那么繁琐。父组件<template> <child v-model="message" /></template>export default { data() { return { ...

有需求就有方案。现在遇到一个问题是后台返回已经格式化好的CSR，但是在前端页面显示是不像在代码编辑器中一样会自定排版。之前看了有js方案的，传送门，这样解决是没问题，但是用来处理CSR的会出现一个问题就是会重新组合字符串的长度，但是这不是我们需要的，回溯到最初，布局本来就是CSS的事，我们先来看一张没有添加样式的CSR只能用一个“丑”来赞美了。接下来我就要传递秘籍了，直接上代码。...

在项目中遇到了一个37位的数字，后台默认返回的是long型的，但这个超过了js中number类型的安全范围（2^53 = 9007199254740992），js会自动转换成科学计数法，小数还是整数都会使用科学计数法来表示。对于整数来说可以使用js的内置对象BigInt来转换，接受的number类型console.log(BigInt(8.2947751915953e+37));//2...

在buildwebpack.prod.conf.js找到如下配置，找到removeAttributeQuotes: true,将true改为false，重新打包即可 new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true,...

vue2.x+element-ui打包后会出现字体找不到，在链接字体的时候会出现static/css/static/font这种路径解决办法：1.在build目录下webpack.base.conf.js确认配置module: { rules: [ ... { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/...

cssviewer可以说是一款非常好的Chrome上css提取器插件，一键点击，一键选择，可以支持抓去dom，style，dom-id，dom-class等等。Google 商城传送门GitHub 项目传送门下面就是随便抓了写这篇文章的页面的一个dom样式...

网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)网页正文全文宽：document.body.scrollWidth网页正文全...

安装ES6环境ES6是需要依赖与node上运行的，虽然现在很多浏览器也支持了不少ES6的语法，但是为了兼容我们可以将ES6转换成es5然后再向浏览器输出。使用Babel转换ES6首先我们再根目录初始化一下:1.首先在根目录创建src和dilst文件夹，src下创建一个index.js（用来写ES6）-src //用于编码 --index.js-dilst //用于输出2...

之前一直在用js时间工具，往往用Date.prototype.format的方式来封装，虽然代码量上会比ts少，但是为什么还用ts封装，自然是为了提高B格呀！最近一段时间迷恋上了ts，之前写了一年的java现在用上这玩意儿真是慢慢的回忆啊，每一次写构造函数、getter和setter方法的时候都会想起最初的java导师为我们讲解这两个的区别，功能，优化，现在感觉真的很感谢当时的松哥！废话说完了就来...

转载于：Vue.js最佳实践（五招让你成为Vue.js大师）感觉很实用大概内容有几点，使用频率很高，在这里分享一下啦！第一招：化繁为简的Watchers 第二招：一劳永逸的组件注册 第三招：釜底抽薪的router key 第四招: 无所不能的render函数 第五招：无招胜有招的高阶组件 随时都是学习的过程啊，看一看文章写一写代码，我的青春啊！...

axios的使用模板axios({ url : './source', method : 'GET', data : {id : '123'}, responseType : 'json', timeout : 1000 }).then((res)=>{ console.log(res); }).catch((err)=&g...

vue不断填坑中，首先要在需要拦截的路由添加meta: {requireAuth: true},然后使用路由钩子函数beforeEach拦截处理。import Router from 'vue-router'const routes = [ { path: '/controlPanel', name: 'ControlPanel', ...