- 博客(53)
- 资源 (1)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 vue 使用html2canvas和print.js实现前端打印功能,并自适应所有纸张
一开始用print.js打印包含canvas的dom,后来,查了资料,对print.js修改后,可以很好的解决了问题,但是没有自适应打印纸张。没办法,那就自己改一下吧。基本print.js的基础上将代码进行修改,将需要打印的dom转为图片后,调用print.js将图片进行打印。import html2canvas from "html2canvas"// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options)
2021-09-16 15:18:02
5190
8
转载 你了解JavaScript ES2021的新特性吗?
ECMAScript 2021 推出了一些有趣且强大的功能,如果你使用其他语言,一定会对这些特性觉得熟悉。
2022-09-14 17:26:07
538
原创 ‘get‘ on proxy: property ‘modelviewmatrix‘ is a read-only and non-configurable data property
Vue3 + Three.js 报错‘get‘ on proxy: property ‘modelviewmatrix‘ is a read-only and non-configurable data property
2022-03-16 17:11:01
5842
9
原创 js中的URL含有特殊字符串的解决方案
js的encodeURIComponent函数,详情参考MDNthis.$axios({ method:'POST', url:`/api/test?list=${encodeURIComponent(ws)}`,})
2021-09-26 09:35:03
486
原创 IE11中使用vh/vw作为单位会使line-height失效?
在IE浏览器测试中发现line-height使用vh作为单位失效的问题,后来加了display:-ms-flexBox后得到解决。.title{ display:-ms-flexBox; line-height: 9.1vh;}
2021-03-23 14:04:56
666
转载 防抖和节流
模拟在输入框输入之后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>没有使用防抖和节流</title></head><body> <input type="text" name="normal" id="normal">
2021-03-02 16:41:28
99
原创 关于LESS中对“/”的编译处理
在css中,绘制椭圆的样式如下#ellipse { width: 100px; height: 50px; background-color: #47d1eb; border-radius: 100px / 50px; // 注意这里的写法}但是在less中,会自动根据+、-、*、/当做运算符来进行计算border-radius: 100px / 50px,将会被编译成border-radius: 2px 从而造成异常。解决办法一:border-radius:...
2020-10-31 17:29:30
273
2
转载 Chrome DevTools 之 Profiles,深度性能优化必备
虽然一直在用Chrome DevTools,但大多停留在常用的功能和调试上,比如Elements/Network/Sources/Console等主要功能,而对于性能分析/优化相关的Timeline/Profiles一直敬而远之,深感其门槛高,于是潜心阅读文档,以望窥得一二,以解决实际问题。不同版本的Chrome DevTools差别很大,这篇文章基于最新版的Mac Chrome完成,主要介绍Network/Timeline/Profiles三个方面的内容。系统版本 & Chrome版本
2020-07-16 17:20:04
1195
转载 javascript闭包和柯里化的深度解释
javascript成为浏览器的唯一语言,并且成为世界标准许多年,是有非常重要的理由的。《JavaScript: The Good Parts》做出了非常清晰地解释。JavaScript:The World's Most Misunderstood Programming Language然而,想要掌握javascript的正确编写方式并不容易。尤其是当你从教科书开始的时候,大部分给你的信息都是面向对象的东西:new, prototype,class,extend,...这些都不是正确编写j
2020-07-16 10:52:46
588
转载 闭包与柯里化
闭包和柯里化都是JavaScript经常用到而且比较高级的技巧,所有的函数式编程语言都支持这两个概念,因此,我们想要充分发挥出JavaScript中的函数式编程特征,就需要深入的了解这两个概念,闭包事实上更是柯里化所不可缺少的基础。一、柯里化的概念 在计算机科学中,柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。这个技术由Christopher Strachey以逻辑学家 Haskell Curry ...
2020-07-15 16:36:48
969
转载 【转】REST风格框架实战:从MVC到前后端分离(附完整Demo)
转自:https://blog.csdn.net/justloveyou_/article/details/74379479摘要: 本人在前辈《从MVC到前后端分离(REST-个人也认为是目前比较流行和比较好的方式)》一文的基础上,实现了一个基于Spring的符合REST风格的完整Demo,具有MVC分层结构并实现前后端分离,该项目体现了一个具有REST风格项目的基本特征,即具有统一响应结构、 前后台数据流转机制(HTTP消息与Java对象的互相转化机制)、统一的异常处理机制、参数验证机制、Cor
2020-07-15 10:53:20
248
原创 weui的下拉框重新赋值问题
weui的下拉框重新赋值,会出现在上一次值的基础上追加新的值,加上“update”,轻松解决。$("#equ").select("update",{ title: "选择设备", items: item1, onChange: function(d) { $("#equCode").val(d.values) }, onClose: function() {}, onOpen: function() {},});...
2020-07-02 11:02:35
966
1
原创 div实现水平垂直居中的几种方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{ position: relative;wid...
2020-02-20 10:11:52
461
转载 webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin
场景:webpack2.4.*集成vue-loader@15.2.4报错vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.分析参考官方文档 https://vue-loader.vuejs.org/mig...
2020-02-07 15:00:40
276
转载 webpack的学习(五):Plugin/Preset files are not allowed to export objects,webpack报错/babel报错的解决方法
1、为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突。 多是因为你的 babel 依赖包不兼容。 可以查看你的 package.json 的依赖列表 即有 babel 7.0 版本的( @babel/core , @babel/preset-react ) 也可命令查看 bebel-cli 的版本 ( babel -V ) 也有 babel 6.0 版本的...
2020-02-06 22:10:01
973
原创 webpack的学习(四):插件 html-webpack-plugin
作用:1.自动在内存中根据指定的页面生成一个内存的页面2.自动,把打包好的bundle.js追加到页面中去1、运行 npm i html-webpack-plugin -D 安装2、在webpack.config.js 中导入 html-webpack-pluginconsthtmlWebpackPlugin=require("html-webpack-plu...
2020-02-06 14:09:17
251
原创 webpack的学习(三):webpack-dev-server实现自动打包编译
使用webpack-dev-server来实现自动打包编译的功能1、运行npmiwebpack-dev-server-D把这个工具安装到项目的本地开发依赖注意:webpack-dev-server这个工具,如果想要正常运行,要求在本地项目中,必须安装webpack2、安装完毕后,运行 webpack-dev-server 会报错原因:由于我们是在项目中,本地安装...
2020-02-06 13:41:45
1064
原创 Error: Cannot find module 'webpack-cli/bin/config-yargs'
webpack 用npn run dev启动报错,原因是 webpack-cli 包已经从webpack分离出来了,所以要单独安装解决方案: 运行npm i -D webpack-cli
2020-02-04 16:36:26
566
原创 webpack的学习(二)
webpack不通过命令的形式指定入口和出口进行打包构建创建一个配置文件 webpack.config.jsconstpath=require('path')//这个配置文件,其实就是一个JS文件,通过Node中的模块操作,向外暴露了一个配置对象module.exports={//在配置文件中,需要手动指定入口和出口entry:p...
2020-02-04 16:07:57
148
原创 webpack的学习(一)
webpack安装的两种方式1、全局安装 npm i webpack -g2、在项目根目录中运行 npm i webpack --save-dev 安装到项目依赖环境中1、初始化项目 npm init -y2、npm i jquery -S 安装jquery3、创建一个main.js文件,使用import *** from *** 的方式导入模块 impor...
2020-02-04 15:42:30
140
原创 nrm的安装使用
作用:提供一些最常用的NPM包镜像地址,能够让我们快速切换安装包的服务器地址;什么是镜像:原来包刚一开始只是存在于国外的NPM服务器,但是由于网络问题,经常访问不到,这时候,我们可以在国内,创建一个和官网完全一样的NPM服务器,只不过,数据都是从人家那里拿过来的,除此之外,使用方式完全一样。1、运行 npm i nrm -g 全局安装 nrm 包2、使用 nrm ls 查看当...
2020-02-04 13:51:09
330
转载 问题:webpack not installed Install webpack to start bundling: $ npm install --save-dev webpack
刚开始默认装的webpack4.39.3的,webpack时报下面的错误,按照提示也无法解决于是换了版本,先卸载npmuninstallwebpack-g在安装指定版本 ,我装的是3.5.5npminstallwebpack@3.5.5-g但是上面指令会报错如下:解决办法,将安装指令换为:npminstallwebpack@3....
2020-01-05 14:45:10
2318
1
转载 大屏项目屏幕分辨率适配
一、大屏项目屏幕分辨率适配:1366*768 和 1920*1080 和 2560*1440和 4096×2160二、css方案选择:css的宽高以什么为单位?1、字体大小以 “相对单位rem” 为单位更合适(以 1920*1080 的设计稿为基本尺寸设置 rem 值)(字体相对单位)2、大的布局的宽高以 “相对单位vh,vw” 为单位更合适(视窗相对单位,高宽占满)3、内容的布...
2019-11-28 11:05:27
3197
原创 js 中set去重并转为数组
const items = new Set([1, 2, 3, 4, 5, 5]); //去重const array1 = [...items]; //2.转成数组
2019-10-11 10:54:05
1700
原创 微信清除缓存问题
在工作中经常遇到公众号的开发,其中公众号的缓存问题是比较恶心人的。解决办法:找到文件传输助手,发送debugtbs.qq.com,打开链接,选择清除TBS内核,success...
2019-09-24 16:33:40
370
原创 解决td内容过长撑开table的固定宽度
table表格宽度固定,需td内容过长也不会被撑开时,设置如下css:table{table-layout:fixed;word-break:break-all;}
2019-08-29 10:24:39
5012
转载 如何将 Web 主页性能提升十倍以上?
最近,我们将 Universe.com 主页的性能提升了十倍以上。在本文中,我们将解析实现这一重大改进的具体技术手段。但在开始之前,让我们先对网络性能的重要意义进行一番论证(博文末尾提供相关案例研究链接): 用户体验: 糟糕的性能可能导致响应失败,从 UI 与 UX 的角度来看,这可能会引发用户的沮丧情绪。 客户转化与收入: 网站速度缓慢通常会导致客户流失,并对转化率与收入产生...
2019-06-18 10:41:57
436
转载 JavaScript 面试:何为闭包?
什么是闭包?闭包即函数与其引用的周边状态(词法环境)绑定在一起形成的(封装)组合。换句话说,闭包可以让我们从函数内部访问其外部函数的作用域。在 JavaScript 中,每当函数创建,闭包就被创建。为了使用闭包,我们可以简单的将一个函数定义在另一个函数的内部,然后将其暴露给外部,返回这个函数或者是把它传给另一个函数。内部函数会拥有访问外部函数作用域中变量的能力,即使是外部函数已经执行完...
2019-06-18 09:58:22
128
转载 常见浏览器兼容性问题与解决方案(面试题目)
1,浏览器兼容问题一:不同浏览器的标签默认的margin和padding不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。碰到频率:100%解决方案:可以使用Normalize来清除默认样式,具体可参考文章:来,让我们谈一谈 Normalize.css也可以使用如下代码:body,h1,h2,h3,ul,li,input,d...
2019-04-11 15:41:00
8529
转载 memoization提升递归效率
一 memoization简介维基百科是这样描述的:memoization最初是用来优化计算机程序使之计算的更快的技术,是通过存储调用函数的结果并且在同样参数传进来的时候返回结果。大部分应该是在递归函数中使用。memoization这个词是在1968年被Donald Michie创造出来的,它源于拉丁语memoradum,在英语中通常简写为memo,因此就有了将一个函数的返回结果暂存...
2019-04-11 13:58:55
544
转载 如何提升JavaScript的递归效率
影响JavaScript性能的另外一个杀手就是递归,在上一节中提到采用 memoization技术可以优化计算数值的递归函数,但memoization不是万能的,不是所有的递归函数都可以用memoization技术优 化,本文介绍了这些情况,并介绍了解决办法,就是将递归转换为迭代,同时需要注意,本文末尾介绍的方案不是最终的方案,还需要和上一节优化循环的方案综合 起来才能达到最佳效果。 【原...
2019-04-11 09:39:20
738
转载 如何提升JavaScript循环的运行速度
根 据Nicholas的说法,有四种代码会拖慢脚本的运行,并最终导致脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的DOM调用。这篇着重讲第一个原因。最后给出了一个开发模式,替换传统的循环结构,可以完全避免脚本失控的状况发生。【原文标题】Speed up your JavaScript, Part 1【原文作者】Nicholas C. Zakas在我上一篇帖子...
2019-04-11 09:37:29
438
转载 如何提升JavaScript函数的运行速度
这 篇是Nicholas讨论如果防止脚本失控的第二篇,主要讨论了如何重构嵌套循 环、递归,以及那些在函数内部同时执行很多子操作的函数。基本的思想和上一节trunk()那个例子一致,如果几个操作没有特定的执行顺序,而且互相不是 依赖关系,我们就可以通过异步调用的方式加以执行,不止可以减少执行的次数,还可以防止脚本失控。本文还介绍了通过memoization技术取代递归的 方法。【原文标题】Spe...
2019-04-11 09:35:50
343
转载 Javascript脚本导致IE浏览器运行缓慢
在 Web开发的时候,经常会遇到的一种情况就是浏览器提示脚本运行时间过长,停止还 是继续,无论你选择什么,相信你都会想尽一切办法让这个对话框远离你的用户们。可你是否知道,这些不同的浏览器究竟是如何判断,哪些脚本处于“失控”状态 么?本文作者,就从Internet Explorer、Firefox、Safari、Chrome和Opera五种浏览器,分析了这个情况出现的原因。【原文标题】What ...
2019-04-11 09:33:36
2369
转载 前端性能优化 14 条规则
规则01:尽量减少HTTP请求前端优化的黄金准则指导着前端页面的优化策略:只有10%-20%的最终用户响应时间花在接受请求的HTML文档上,剩下的80%-90%时间花在为HTML文档所引用的所有组件(图片、脚本、样式表等)进行的HTTP请求上。因此,改善响应时间的最简单途径就是减少组件的数量,并由此减少HTTP请求的数量。当然很多人就会说,既然这样,那我们就减少页面组件的数量不就OK了吗?那你...
2018-10-25 17:44:46
273
原创 解决js设置svg image,图片无法显示问题
用setAttribute来设置svg的image的路径,图片无法显示要用 image.href.baseval 才会有效var svgDoc = document.getElementById("sketchpad");var imgSVG = document.createElementNS("http://www.w3.org/2000/svg", 'image');img...
2018-09-05 17:02:47
21718
7
转载 【转】常见浏览器HACK技巧总结
什么是hack 技术:行业中存在各种浏览器,典型的浏览器包括 IE 、火狐、谷歌等等;同样种类的浏览器,也存在着不同的版本,如 IE6、IE7…等。不同浏览器对 CSS 解析机制并不是完全相同,因此会导致不同浏览器中,页面的效果各不相同。此时可以针对某种浏览器进行样式设置,从而达到所有浏览器显示的效果一致,这种标识不同浏览器的方法就是 hack简单地说就是可以通过 hack 技术,只...
2018-08-20 17:11:50
1522
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人