- 博客(53)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 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关注的人