- 博客(248)
- 资源 (4)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 基于 jspdf.js 库生成 PDF 文件时中文乱码问题的解决
因此，要解决这种方式中文乱码的问题，其实就是解决 html2canvas 库对中文的不支持问题，其解决方式是通过设置 html2canvas 的字体。中的字体转换器，可以将字体的ttf文件转换为base64编码字符串的形式。使用 jspdf.js 生成 PDF 文件有两种方式：一种是创建 jsPDF 实例后，手动使用 addPage、text 等 api 把获取到的数据排版生成 PDF 文件；jsPDF支持 .ttf 文件，因此，如果你想在 PDF 中使用中文文本，则字体必须具有包含必要的中文字形的功能。
2023-03-08 18:06:17
3000
原创 视频自动播放的实现与问题解决
一个布尔属性，如果为 true，那么当用户在当前页面和另一个页面或应用程序之间来回切换时，会自动切换画中画（picture-in-picture）模式。在发布代码之后，页面第一次加载时，视频可以正常播放，但是在页面刷新后，视频却不能正常播放了。通常，网站上展示的视频推荐采用 WebM 格式，其中使用 VP9 编解码器，以及 MP4 格式，采用 AVC（H.264）编解码器。muted：布尔属性，指明在视频中音频的默认设置。指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。
2023-03-03 15:00:22
782
原创 在 vite 为构建工具的开发环境中实现 SVG 图标组件化
一、前言在以 webpack 为构建工具的开发环境中我们可以很方便的实现 SVG 图标的组件化，这里面 require.context 可以被使用是实现的关键。在 vite 为构建工具时，require.context 不再可用，那应该采用什么样的方式实现呢，这就是本文的要阐述的内容。 开发环境版本： vue：v3.2.31 vite：v2.8.0vite-plugin-svg-icons：v2.0.1二、we......
2022-02-25 10:43:08
1270
原创 vue-router v4.x版本创建router对象注意点
vue-router 的 v4.x 版本是为适应 vue3 而开发的版本，它的引入和创建实例对象的方式有所改变，在使用的时候容易忽略变化导致低级错误。1、采用旧的导入方式 在 npm 管理依赖包的开发模式下使用 import 导入时不能采用 import Router from 'vue-router' 的方式，应该采用import {createRouter, createWebHashHistory} from 'vue-router'，否则会报错...
2022-01-18 10:33:11
1496
原创 element table组件的show-overflow-tooltip属性的实现原理
element ui框架中的 table 组件的 show-overflow-tooltip 属性是如何实现的？其中体现了哪些 DOM 原生 API 的用法？让我们一探究竟。
2022-01-11 18:51:46
16248
原创 Vue项目中Nginx配置及第三方模块添加采坑记
一般项目的前端工程都是在开发完毕并打包后交给后端或运维来部署，前端开发人员是两耳不闻部署事，一心只把UI画。正在开发的一个项目采用了前端人员自己部署打包好的前端文件并自己配置web服务器，web服务器采用的是高性能web服务器——Nginx。本文记录在使用Nginx过程中遇到的各种坑，比如Nginx的基本配置、作为反向代理服务器的配置、缓存的配置、读取环境变量的配置等等。
2021-11-22 15:58:55
2140
原创 ts配置文件配置踩坑
文章目录前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结前言tsconfig.json是一种内置的能够管理TypeScript工程的配置文件。“tsconfig.json”配置文件是一个JSON格式的文件，用来管理TypeScript工程的功能。在配置的过程中有可能回产生一些配置，而这些错误可能不那么容易发现和解决。一、增加allowJs:true配置项后编辑器报错 1、报错信息 无法写入“XXXXX.js...
2021-10-31 19:55:46
541
原创 vue3中如何优雅地在 setup 使用 globalProperties
一、前言vue3 已经发布到 v3.2.x 版了，在项目中也使用上了 vue3，总体感觉还是不错的。vue3 中使用Proxy 来实现响应式数据，解决了 vue2 中的部分性能损耗、无法监听动态添加的属性的值变化、无法监听数组元素对象的属性的值的变化问题。vue3 中的模板可以包含多个根节点、v-model 参数化等等特性也很值得肯定。还没有使用 vue3 的开发者，推荐赶快上手试用。二、令人困惑的 globalPropertiesvue3 中每个 vue 的实例都会对外暴露一个包含此应用实例的
2021-09-15 22:34:22
11809
1
原创 vue中可响应式provide/inject的实现
一、基本概念当需要访问父级组件的实例的时候，我们可以通过$parent属性来获取父级组件的实例。但是，在嵌套了多层组件并且想在较深层级的子组件中获取顶级父级组件时通过这个属性就不太好了。这个时候就要用到vue中依赖注入的概念了。vue中依赖注入的具体实现是通过两个实例选项——provide/inject实现的。provide选项允许我们指定我们想要提供给后代组件的数据/方法。示例：export default { provide: function(){ retur
2021-04-22 16:32:08
1251
原创 npm发布项目报404错误解决
一、问题描述在npm官方创建了账号并且创建了一个项目，在向npm使用npm publish命令发布项目时报错。报错内容为 404.'[email protected]' is not in the npm registry.。二、解决方案通过查询资料得知造成这个报错的原因是在命令行中未登录到npm，执行npm publish命令时无法通过npm的权限校验。所以，只需要登录npm账号获取到token，再执行npm publish命令就可以了。步骤如下。在命令行终端执行 npm login。在.
2021-04-09 14:21:40
5766
原创 移动端H5实现手动选择地图点的一种解决方案
一、准备文中所用地图应用为高得地图v1.4.15版，代码开发环境为Vue.js框架+webpack+node.js。二、需求移动端H5实现类似打车软件中在地图界面手动选择目的地功能。这里面有两个关键点是必须要解决的：1、如何实现地点标记在地图上移动进行选点，2、如何实现获取到点标记图标选择的点的坐标（经纬度）。三、解决方案首先来解决第一个问题。在打车软件中我们选择地图中的点的时候看似是选择图标在地图界面上移动，其实我们也可以反过来看，如果选择图标固定不动，手指移动的是地图，那么效果也
2021-01-18 16:13:12
1822
1
原创 高德地图坐标拾取组件
// 高德地图坐标拾取 param point 位置展示 如'114.424314,30.606697' getPoint选择位置返回坐标字符串<template> <div class="map-wrapper"> <div :id="id" class="container"> <div v-show="isShow" class="info"> <input id="tipInput" type="tex.
2021-01-18 10:19:17
4156
原创 【应用场景解析】性能优化指标和方式
为了不断提升用户体验，前端工程师往往会对页面性能不断改进，而这个改进的过程就叫性能优化。一、性能指标什么是性能？性能是指程序的运行速度，而前端性能是指页面的响应速度，提到速度必然离不开一个变量，那就是时间。所以我们会看到性能指标都是以时间为单位来测量的。前端性能的指标有很多，本文从是否可以通过浏览器采集上报，是否由权威组织或大型公司提出，以及是否严重影响用户体验这 3 个方面考虑，选取了下面一些重要的指标。1、首屏绘制（First Paint，FP）首屏绘制由 W3C 标准 Paint
2020-08-17 14:15:07
416
原创 【应用场景解析】合理搭建前端项目
前端项目搭建并不只是使用构建工具这么简单，我们将从项目组织、代码规范 2 个方面来进行分析。一、项目组织考虑这样一个场景，在开发项目 projectA 的时候，发现其中的 codeX 也可以用于项目 projectB，最简单直接的处理方式就是把 codeX 的代码直接复制到 projectB 下，按照“三次原则”（三次原则是指同一段代码被使用到 3 次时再考虑抽象）这种处理方式没什么问题。但如果此时项目 projectC 和 projectD 也会用到 codeX，那么这种方式维护起来会很麻烦。
2020-08-14 13:56:35
368
原创 【应用场景解析】组件通信的状态管理
通过组件化的方式能够有效地将 Web 页面进行解耦，但另一个问题也随之出现，组件之间如何进行通信。我们就来分析组件化 Web 应用中的组件通信问题。一、全局状态对于父子组件通信，框架都已给出可行的解决方案：父组件通过 prop(s) 属性向子组件传参，子组件通过自定义事件来向父组件发送消息。而非父子组件之间，如果通过层层传递，这个过程就会变得相当麻烦。最简单的直接解决方式就是设置一个供多个组件共享的全局变量，但如果直接使用全局变量会存在一些问题，比如：可能多个组件会同时修改变量值，这个过程...
2020-08-13 11:01:24
211
原创 【应用场景解析】前端路由实现
当浏览器地址栏中的 URL 发生变化时，会请求对应的网络资源，而负责响应这个网络资源的服务就称为路由。在早期的 Web 开发中，路由都是交由服务端处理，但随着前端技术的快速发展，路由模块逐渐转移交给了前端进行控制，而路由转移到前端，正是前后端分离和单页应用架构 的 基石。一、前端路由实现基础默认情况下，当地址栏的 URL 发生变化时，浏览器会向服务端发起新的请求。所以实现前端路由的重要基础就是在修改 URL 时，不引起浏览器向后端请求数据。根据浏览器提供的 API，有下面两种实现方案。1、基于
2020-08-12 11:19:12
326
原创 【核心基础知识】前后端通信——API设计规范
前后端通信的重要协议是 HTTP，但在实际通信场景中，光有协议是不够的。假设有下面的 GET 请求，返回结果是用户列表数据。GET https://a.com/a对于浏览器而言，可以通过头部字段 Content-Type 轻松判断出来，然后进行对应的逻辑处理。但对于工程师而言是不可读的，不知道 /a 代表什么。解决这个问题的方法就是制定一种规范，让请求具有语义化，这种规范就是我们常说的 API 设计规范。下面就来介绍前后端通信中出现过的 3 种 API 规范。一、RPC—远程过程调用RP
2020-08-10 11:16:30
601
原创 【核心基础知识】浏览器同源策略与跨域方案
一、浏览器的同源策略（Same Origin Policy）源（Origin）是由 URL 中协议、主机名（域名 domain）以及端口共同组成的部分。如果两个 URL 的源相同，我们就称之为同源。不同源的情况有以下几种：协议不同。比如：http：//www.baidu.com与https：//www.baidu.com，http与https协议不同。 主机名不同。比如：http://www.baidu.com与http://sp2.baidu.com。如果是ip地址也是同理。 端口不同。比
2020-08-08 10:39:19
326
原创 【核心基础知识】浏览器缓存
想要加快浏览器加载网络资源的速度，可以通过减少响应内容大小，比如使用 gzip 算法压缩响应体内容和 HTTP/2 的压缩头部功能；另一种更通用也更为重要的技术就是使用缓存。Web 缓存按存储位置来区分，包括数据库缓存、服务端缓存、CDN 缓存和浏览器缓存。浏览器缓存的实现方式主要有两种：HTTP 和 ServiceWorker 。一、HTTP缓存使用缓存最大的问题往往不在于将资源缓存在什么位置或者如何读写资源，而在于如何保证缓存与实际资源一致的同时，提高缓存的命中率。也就是说尽可能地让浏览
2020-08-07 15:18:13
191
原创 【核心基础知识】HTTP协议的各个版本的特性与差异
HTTP（HyperText Transfer Protocol，超文本传输协议）是浏览器与服务端之间最主要的通信协议一.HTTP/0.91991 年 HTTP 正式诞生，当时的版本是 0.9，从名字可以看出，该协议的作用是传输超文本内容 HTML。协议定义了客户端发起请求、服务端响应请求的通信模式。请求报文内容只有 1 行，为 GET 加上请求的文件路径。服务端收到请求后返回一个以 ASCII 字符流编码的 HTML 文档。HTTP/0.9 通信示意图如图.二.HTTP/1.0随着
2020-08-05 11:29:08
377
原创 【核心基础知识】认识浏览器的javascript引擎
JavaScript 引擎的编译过程大体上，可分为解析、解释和优化 3 个步骤。下面就以 V8 引擎为例。一.编译过程1.解析解析步骤又可以拆分成 2 个小步骤：词法分析，将 JavaScript 代码解析成一个个的令牌（Token）； 语法分析，将令牌组装成一棵抽象的语法树（AST）。下面是一段简单的代码，声明了一个字符串变量并调用函数 console.log 进行打印。var name = 'web'console.log(name)通过词法分析会对这段代码逐个字符进行解
2020-08-03 14:37:13
177
原创 【核心基础知识】模块化的模块规范和实现方式
作为前端开发者或许早已习惯了在开发组件时使用 import 和 export 来管理代码模块，在编写 Node.js 服务时通过 require 和 module.exports 来复用代码。但 JavaScript 模块化之路充满了坎坷，JavaScript 模块发展史上有很多著名的模块规范与实现。一、ES6模块目前最主流的模块化方案应该是 ECMAScript 2015 提出的模块化规范（也称“ES6 模块”），这个规范同时适用于 JavaScript 的前后端环境。1、定义和引用.
2020-07-30 18:46:14
482
1
原创 linux安装微信
一.准备1.安装wine,可参考:https://wiki.winehq.org/Download_zhcn2.安装winetricks,安装成功后,如图,其中winetricks-zh可以忽略.3.设置32位wine环境,可参考:https://www.kutu66.com/ubuntu/article_1568414.安装必要的windows的dll,组件,字体.需要安装的dll: d3dcompiler_43 d3dx9_24到d3dx9_43 d3dx9 d9vk dinpu
2020-07-30 14:42:08
5984
原创 linux中安装微信开发者工具
微信开发者工具是微信小程序官方指定的开发工具，但是微信官方没有推出Linux版本，幸好很多牛人自己制作了能够在Linux中运行的微信开发者工具版本。该文中便是采用github中开源的linux版开发者工具。一、准备安装前需要下载或者克隆开发者工具源码，地址：...
2020-07-22 19:05:22
1819
原创 Fedora安装anydesk后无法远程连接解决
电脑系统为Fedora，安装anydesk后能够远程连接其他已经安装了anydesk的电脑，但是其他电脑无法远程连接该电脑，同时无法设置自主访问，点击解锁安全设置后弹出了让输入密码的对话框，输入密码后无任何反应。一、解锁安全设置无法解锁安全设置，anydesk的高级功能是无法使用的，所以必须想办法解锁安全设置。步骤如下。1、打开终端2、输入sudoanydesk命令，anydesk被打开，设置的安全项可以进行设置了3、设置需要自定义的项这里会出现一个问题，设置自主访问项时输入访...
2020-07-22 10:23:10
3519
原创 【核心基础知识】Promise的常用场景
一、异步串行将异步转化为串行执行的基本实现方式。异步函数 asyncF1 和 asyncF2，且 asyncF2 依赖 asyncF1 的返回结果执行。使用 Promise 提供的 then 函数可以直接实现，代码如下。asyncF1().then(data => asyncF2(data)).then(() => { ...}).catch(e => console.error(e))如果使用 async/await 可以摆脱链式调用，代码可读性更好：
2020-07-17 16:21:23
519
原创 【核心基础知识】函数、原型、作用域
数据类型与函数是很多高级语言中最重要的两个概念，前者用来存储数据，后者用来存储代码。JavaScript 中的函数相对于数据类型而言更加复杂，它可以有属性，也可以被赋值给一个变量，还可以作为参数被传递......正是这些强大特性让它成了 JavaScript 的“一等公民”。下面我们就来详细了解函数的重要特性。一、this关键字什么是 this？this 是 JavaScript 的一个关键字，一般指向调用它的对象。这句话其实有两层意思，首先 this 指向的应该是一个对象，更具体地说是函数执行
2020-07-15 15:33:55
409
原创 【核心基础知识】javascript的数据类型
JavaScript 的数据类型可以分为 7 种：空（Null）、未定义（Undefined）、数字（Number）、字符串（String）、布尔值（Boolean）、符号（Symbol）、对象（Object）。其中前 6 种类型为基础类型，最后 1 种为引用类型。这两者的区别在于，基础类型的数据在被引用或拷贝时，是值传递，也就是说会创建一个完全相等的变量；而引用类型只是创建一个指针指向原有的变量，实际上两个变量是“共享”这个数据的，并没有重新创建一个新的数据。一、UndefinedUndefi
2020-07-14 13:30:29
214
原创 【核心基础知识】浏览器渲染页面的流程
假设我们在浏览器中输入了一个网址，得到了下面的 html 文件，渲染引擎是怎样通过解析代码生成页面的呢？<html> <head> </head> <body> CSDN </body></html>一、从HTML到DOM1、字节流解码对于上面的代码，我们看到的是它的字符形式。浏览器通过 HTTP 协议接收到的文档内容是字节数据，下图是抓包工具截获的报文截图，报文内容为左侧高亮显示的区域（为...
2020-07-09 14:28:03
251
原创 解决微信小程序长页面滚动到底部点击底部的输入框后输入框漂浮且页面滚动到顶部
一、问题描述项目中有一个长页面上部展示部分信息下部为信息录入，页面长度为三屏幕（不同手机屏幕大小略有差异），当滚动到第二屏或者第三屏去填写信息时点击输入框后输入框漂浮起来了并且页面向上滚动了一段距离，回到了第一屏中展示的内容。效果如图。滚动到第二屏，证件号输入。点击输入框可以看到证件号输入框漂浮了起来并且页面滚动到了第一屏展示的内容。注意：小程序是2018年上线，在2020年4月份之前该页面从未出现过这种现象。推测：微信的后续更新中对微信小程序基础库进行了重构，导致点击输入框后页
2020-07-03 18:37:29
2558
原创 【核心基础知识】如何管理CSS代码
尽管 CSS 提供了 import 命令支持文件引用，但由于其存在一些问题（比如影响浏览器并行下载、加载顺序错乱等）导致使用率极低。更常见的做法是通过预处理器或编译工具插件来引入样式文件。将样式文件进行分类，把相关的文件放在一起，让工程师在修改样式的时候更容易找到对应的样式文件，在创建样式文件的时候更容易找到对应的目录。管理样式文件的目的就是为了让开发人员更方便地维护代码。一、开源项目中的样式文件先来看看著名的 UI 相关的开源项目是怎么管理样式文件的。（1）Bootstrap：https:
2020-07-03 15:53:48
340
原创 【核心基础知识】CSS的关键：布局
通常提到的布局，有两个共同点：大多数用于 PC 端，因为 PC 端屏幕像素宽度够大，可布局的空间也大； 布局是有限空间内的元素排列方式，因为页面设计横向不滚动，纵向无限延伸，所以大多数时候讨论的布局都是对水平方向进行分割。我们在讨论布局的时候，会把网页上特定的区域进行分列操作。按照分列数目，可以大致分为 3 类，即单列布局、两列布局、三列布局。一、单列布局单列布局是最常用的一种布局，它的实现效果就是将一个元素作为布局容器，通常设置一个较小的（最大）宽度来保证不同像素宽度屏幕下显示一致。一
2020-07-02 18:16:59
261
转载 前端代码规范最佳实践
以下文章来源于全栈成长之路，作者山月行。一千个读者，就有一千个哈姆雷特。一千个程序员，就有一千种代码风格。那什么是代码风格呢？从小的来说，有的开发喜欢带分号，有的不喜欢带分号。有的喜欢使用空格，有的喜欢使用 Tab。有的喜欢空两个空格，有的喜欢四个空格。除了这些，还有一些关于代码的优化，如避免声明未使用，避免冗余的代码逻辑等。如果你是新参加工作的人员，又恰好遇到一个代码风格混乱...
2020-07-02 16:26:10
291
原创 【核心基础知识】3个场景的DOM事件处理
一、防抖在一段时间内能够多次触发并且在最后一次触发才是能够得到完整结果的事件可以使用防抖来防止事件处理函数的多次执行以提升体验和性能。比如：有一个搜索输入框，为了提升用户体验，希望在用户输入后可以立即展现搜索结果，而不是每次输入完后还要点击搜索按钮。一种实现方式应该很容易想到，那就是绑定 input 元素的input事件，然后在监听函数中发送 AJAX 请求。这样的实现很容易造成性能问题。比如一个词需要输入四次那么就会发送四次ajax请求。其实只有最后一次才是用户想要输入的完整内容，前面三次的查
2020-07-02 16:22:16
245
原创 【核心基础知识】高效的操作DOM元素，避免性能陷阱
为什么说 DOM 操作耗时？要解释 DOM 操作带来的性能问题，我们不得不提一下浏览器的工作机制。一、浏览器的工作机制1、线程切换浏览器包含渲染引擎（也称浏览器内核）和 JavaScript 引擎，它们都是单线程运行。单线程的优势是开发方便，避免多线程下的死锁、竞争等问题，劣势是失去了并发能力。浏览器为了避免两个引擎同时修改页面而造成渲染结果不一致的情况，增加了另外一个机制，这两个引擎具有互斥性，也就是说在某个时刻只有一个引擎在运行，另一个引擎会被阻塞。操作系统在进行线程切换的时候需要保存上
2020-05-26 16:31:40
350
原创 【核心基础知识】你不知道的HTML标签
有一些非常重要却容易被忽视的标签，这些标签大多数用在页面头部 head 标签内，虽然对用户不可见，但如果在某些场景下，比如交互实现、性能优化、搜索优化，合理利用它们就可以达到事半功倍的效果。一、实现交互在实现一个功能的时候，我们编写的代码越多，不仅开发成本越高，而且代码的健壮性也越差。有几个标签，可以帮助我们更简单地实现一些页面交互效果。1、meta 标签：自动刷新/跳转假设要实现一个间隔一段时间自动跳转的效果，你很可能会想到使用 JavaScript 定时器控制页面跳转来实现。但其实有更加
2020-05-26 14:43:34
346
原创 最完整的webpack Dll打包与采坑总结
webpack已经成为前端主流的项目打包工具，对于前端开发必不可少。在前端项目依赖第三方库过多，项目比较大文件比较多时，webpack打包的速度也会被拖成蜗牛，是时候优化一下webapck的打包速度了。在优化打包速度方面有不少方法方式，其中一个比较重要的方式是DllPlugin。DllPlugin把第三方库打包成动态链接库（动态链接库：windows系统中库文件概念，这里是借用了这一概念。），DllPlugin将不频繁更新的库进行编译，当这些依赖的库的版本没有变化时，就不需要重新编译。如果更新了依赖的第三.
2020-05-21 15:29:43
925
原创 微信小程序中图片压缩的最佳实现与封装
一、概述在项目开发过程中遇到一个需要从小程序上传图片的需求，此需求实现起来并不难，只需要调用chooseImage接口拿到图片的临时路径然后调用uploadFile接口进行上传。到这里这个功能已经实现了，可是这样简单实现了之后用户在使用时体验非常差。因为现在手机摄像头像素非常高，拍出来的照片体积都很大，上传时不做处理就会导致上传耗时长，用户消耗流量大，查看图片时加载非常慢等体验问题。二、图...
2020-04-11 09:59:54
5361
联想笔记本电脑电源管理系统——Energy Manager
2022-01-06
SQL Server 使用top时默认排序不是自增id的顺序吗？
2017-04-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人