![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
学习笔记
文章平均质量分 68
张贺_
合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下
展开
-
记一次微信小程序从原生到Taro的迁移
taor 框架使用心得级踩坑记录。原创 2022-10-24 16:12:00 · 1438 阅读 · 1 评论 -
webpack 打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)
如今,webpack毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack知识。webpack的基本用法这里就不展开讲了。主要探讨一下如何提高webpack的打包速度。这篇文章以vue cli3.0+,webpack4.0+,nodejs10.0+这几个版本为例。一、打包分析1.1、速度分析我们的目的是优化打包速度,那肯定需要一个速度分析插件,此时speed-measure-webpack-plugin就派上用场了。它的作用如下:...原创 2020-10-12 19:14:39 · 971 阅读 · 0 评论 -
Live2D的基础使用
效果图:代码如下:<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script><script> L2Dwidget.init({ "model": { //jsonpath控制显示那个小萝莉模型,下面这个就是我觉得最可爱的小萝莉模型 js.原创 2020-05-27 16:55:49 · 2479 阅读 · 1 评论 -
vue cli3配置文件vue.config.js中配置解析
//vue.config.jsonconst path = require('path');// const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟开发者工具 插件 (另:https://github.com/liriliri/eruda)// const CompressionPlugin = re...原创 2020-04-29 14:49:02 · 1933 阅读 · 0 评论 -
ES11新特性概览
目录String.prototype.matchAll - 由 Jordan Harband 提出import() - 由 Domenic Denicola 提出BigInt – 任意精度整数,由 Daniel Ehrenberg 提出Promise.allSettled - 由 Jason Williams, Robert Pamely 和 Mathias Bynens 提出globalThis...原创 2020-04-28 15:07:07 · 13968 阅读 · 1 评论 -
Canvas绘制箭头
Canvas的CanvasRenderingContext2D对象中是没有提供绘制箭头的方法,也就是说,如果我们需要在Canvas中绘制箭头是需要自己封装函数来处理的。封装函数// ctx:Canvas绘图环境// fromX, fromY:起点坐标(也可以换成 p1 ,只不过它是一个数组)// toX, toY:终点坐标 (也可以换成 p2 ,只不过它是一个数组)// the...原创 2020-01-06 17:57:49 · 1122 阅读 · 0 评论 -
前端 ArrayBuffer 与 Blob 互转
首先说一点基础知识:responseType 可选的参数有:"text"、"arraybuffer"、"blob" 或 "document";对应的返回数据为 DOMString、ArrayBuffer、Blob、Document;默认参数为"text"。前端请求二进制数据的时候需要设置数据响应格式:xhr.responseType = "arraybuffer";写法如下:...原创 2019-12-05 17:47:04 · 23183 阅读 · 0 评论 -
js通过html2canvas,jspdf,canvg来对网页进行截图生成pdf
通过html2canvas,jspdf就能够生成截图以及pdf,但是如果对图表(svg)就需要canvg来转换svg生成为图片,再插入到pdf里。1.html2canvas用法:首先需要引入这两个文件,最新的可以去git下载示列:function down2(){ var str = $('#example-2'); //console.log(str); htm...转载 2019-10-25 18:04:29 · 1029 阅读 · 0 评论 -
是否改变原数组的方法总结
是否改变原数组的方法总结改变原数组的:shift:将第一个元素删除并且返回删除元素,空即为undefined unshift:向数组开头添加元素,并返回新的长度 pop:删除最后一个并返回删除的元素 push:向数组末尾添加元素,并返回新的长度 reverse:颠倒数组顺序 sort:对数组排序 splice:splice(start,length,item)删,增,替换数组元素...原创 2018-09-29 08:39:21 · 1825 阅读 · 0 评论 -
关于内存溢出和内存泄漏的讨论
什么是内存泄漏? 程序的运行需要内存。只要程序提出要求,操作系统或者运行时(runtime)就必须供给内存。 不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak),对于持续运行的服务进程(daemon),必须及时释放不再用到的内存。否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃。 有些语言(比如 C 语言)必须手动释放内存,程序员负责内存管理...原创 2018-10-29 10:40:55 · 248 阅读 · 0 评论 -
json-server+faker模块批量创建本地模拟数据
JSON-Server简单来说,JSON-Server是一个Node模块,运行Express服务器,你可以指定一个json文件作为api的数据源。只用json-server可以在很短的时间内搭建一个Rest API, 让前端在不依赖后端的情况下进行开发。全局安装JSON-Server:npm install -g json-server //osx系统加'sudo'新建一个...原创 2018-10-31 09:29:11 · 534 阅读 · 0 评论 -
React-Native创建一个APP脚手架步骤
1.全局安装expo的cli:cnpm install expo-cli -g 2.创建初始项目:expo init projectname3.进入我们创建的项目:cd projectname4.运行项目:expo start原创 2018-10-30 17:31:06 · 1354 阅读 · 0 评论 -
mpvue开发小程序的步骤
首先,安装下vuecli这一脚手架。原创 2019-02-27 15:20:07 · 117 阅读 · 0 评论 -
vue.js基础总结
表达式:使用前要先引入文件vue.js; 要创建vue实例对象,工厂模式的应用el/element、data/object、metnods、computed、watch el作用的范围:全局vue实例; 差值表达式{{ }} 简单数据类型simple data type(string、number、boolean)、复杂数据类型complex(array、object、function...原创 2018-10-07 22:42:05 · 430 阅读 · 0 评论 -
node.js的express框架的介绍与使用
首先进行express的全局安装 运行命令:npm i express -g安装express, 运行命令:npm install -g express-generator安装express项目生成器运行命令:express –e expressProjectName创建一个名称为expressProjectName的项目到项目expressProjectName目录下...原创 2018-10-07 14:30:51 · 1109 阅读 · 0 评论 -
Node.js基础总结
Node.js中模块的类型: 第三方模块(npm->node package manager、cnpm、yarn)、 内置模块、 自定义模块(遵循CommonJS规范:模块定义,接口暴露,模块引入,模块调用 | AMD/CMD require.js/.sea.js) 接口暴露方式:module.exports 、exports 、export default...原创 2018-10-07 12:17:56 · 191 阅读 · 0 评论 -
Vue-CLI使用说明
CLI(Command Line Interface)开发的时候需要构建本地服务器环境,从文件打开模式切换到服务器打开模式 需要实现模块化的开发与封装; 需要实现文件的处理(sass转css等)、代码的解析(ES6转ES5等)、模块的打包(webpack操作)、服务的启动(webpack-dev-server等); 需要安装npm install -g vue-cli搭建一个vue 2...原创 2018-09-26 22:08:26 · 226 阅读 · 0 评论 -
npm 包管理工具使用总结
最常用的包管理工具有:npm cnpm yarn(排名顺序不分先后,越靠后的越吊)最近改用了yarn安装包管理,原因大家都懂;yarn全局安装:npm i yarn -g yarn和npm的区别:yarn / yarn install 等同于npm install 批量安装依赖 yarn add xxx 等同于 npm install xxx —save 安装指定包...原创 2018-09-10 21:27:52 · 754 阅读 · 0 评论 -
正则表达式(持续更新)
1.[][]:匹配其中一个。 [abc]:匹配a[]:一个范围。 [3-7]:匹配3到7之间的任意一个数字,包括3和7.[0-9]===[\d] 等价的,匹配数字[a-zA-Z0-9]:匹配大小写字母和数字。[^a-z0-9]:匹配任意不在括号中的字符 --- 不包括小写字母和数字2.组合的规则\d:匹配数字0-9。\D:匹配非数字。\w:匹配数...原创 2018-08-03 21:12:13 · 648 阅读 · 0 评论 -
JS基础知识点(3)——函数表达式、匿名函数和事件处理函数详解
1.函数表达式 定义函数有两种方式:一种是函数声明,另一种是函数表达式; 正常定义一个函数:function 函数名(参数){函数体}function functionName(arg) { //函数体 }正常定义的函数调用的时候不分前后顺数(即:可在函数定义之前调用)。函数表达式定义:var 函数名= functio...原创 2018-07-19 16:52:12 · 334 阅读 · 0 评论 -
ReactNative:The development server returned response error code: 500解决方案
在当前项目的路径下运行以下命令:npm uninstall babel-preset-react-native一种更好的解决方案:使用yarn 代替npm安装包原创 2018-11-01 16:26:35 · 576 阅读 · 0 评论 -
React中的路由
什么是React路由主要使用HTML5的history API来同步UI和url Router相当于一个容器,不会被渲染出来。组件都要放在Router里面使用react-router的功能。 Link被渲染称一个a标签,通常以声明式的方式被定义在应用程序中 Route包含一个path,并指明了在path与URL匹配时要渲染的组件。 ( 如果说我们的应用程序是一座小城的话...原创 2018-11-13 12:09:43 · 174 阅读 · 1 评论 -
ECMAScript 6常用知识点及实例整理,包含(ECMAScript 7/8/9)
提示:文章篇幅较长,涉及知识点较多,建议收藏后观看。目录let 和 const解构赋值箭头函数的使用模板字符串函数默认参数展开运算符对象字面量 与 classPromise数组新增方法对象新增方法指数函数的中缀形式原创 2019-09-29 16:03:10 · 1002 阅读 · 0 评论 -
h5新增标签和表单属性
一、h5新增结构性标签(有意义的div)1.header 定义网页的头部2.nav 定义网页的导航部分3.section 定义网页的某个区域4.footer 定义网页的底部5.article 定义网页的一篇文章6.aside 定义网页的侧边栏7.hgroup 将网页的标题进行组合8.figure 将网页的元素进行组合9.figcaption 给figure组合添...原创 2019-08-02 15:06:39 · 445 阅读 · 0 评论 -
js中常用字符串方法总结
includes()判断一个字符串是否包含其他字符串// 返回布尔值, 表示是否找到了参数字符串let s = 'Hello world!'s.includes('0') // true// 支持第二个参数,表示开始搜索的位置s.includes('Hello', 6) // falseendsWith()判断一个字符串的结尾是否包含其他字符串的字符// 返回布尔值,...原创 2019-07-11 18:15:34 · 132 阅读 · 0 评论 -
JSX在vue中使用
什么是JSX?JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析.vue中大部分场景是不需要用render函数的,还是用模板更简洁直观.使用template// item.vue<template> <div> ...原创 2019-05-29 18:54:35 · 8183 阅读 · 1 评论 -
ECharts Demo分析
https://blog.csdn.net/luanpeng825485697/article/details/773683871.饼图option = { title : { text: '某站点用户访问来源', //标题名称 subtext: '纯属虚构', //副标题 x:'lef...原创 2019-04-02 13:34:38 · 345 阅读 · 0 评论 -
渐变 CSS linear-gradient
渐变渐变(Gradient)是 CSS3 引入的特性,其定义详见 CSS Images Module Level 3。它本质上是一个 2D 图像,可以对 background-image、list-style-image 和 border 等进行细微着色。渐变本身是没有固有尺寸的,虽然渐变框有具体大小要想指定一个渐变效果,只需定义这三个元素,即可:渐变线(gradient lin...原创 2019-03-25 14:40:59 · 387 阅读 · 0 评论 -
lodash和Underscore介绍
Lodash 和 Underscore 是非常优秀的当代JavaScript的工具集合框架,它们被前端开发者广泛地使用。如官方所介绍的那样,Lodash是一个具有一致接口、模块化、高性能的JavaScript工具库。一开始Lodash只是Underscore.js的一个fork,之后再原有的成功基础上取得了更大的成果,lodash的性能远远的超过了Underscore。因此,很多模块放弃了Un...原创 2019-03-14 18:20:50 · 1240 阅读 · 0 评论 -
升级已有项目到vue-cli 3.0版本
之前有考虑过通过将现有项目进行修改,安装@vue/cli以及相关的包,发现行不通。其实,最简单的方法,就是使用vue-cli 3.0,创建一个新的项目,然后将原有的项目的源码拷到新的项目中即可。使用vue-cli创建新的项目 删除新项目中src下的内容 将原有项目src中的源码拷贝到新项目的src中 将原有项目的index.html及favicon.ico拷贝到新项目的public中 ...原创 2019-02-25 15:52:46 · 9555 阅读 · 0 评论 -
iView中DatePicker的表单验证问题
1. type="datetime"的验证方式:<DatePicker v-model="form.chooseDate" placeholder="选择日期" type="datetime" format="yyyy-MM-dd"/>chooseDate: [{required: true, message: '日期不能为空!', trigger: 'blur',原创 2019-01-24 17:29:17 · 8984 阅读 · 8 评论 -
vue中的路由
路由的跳转方式使用 <router-link> 映射路由:只需要跳转页面,不需要添加验证方法的情况,可以使用 <router-link> 来实现导航的功能:会被渲染为 <a> 标签, to 会被渲染为 href编程式导航: this.$router.push() 跳转到不同的url,但这个方法回向history栈添加一个记录,点击后退会返回到上一个...原创 2018-11-20 23:54:40 · 150 阅读 · 0 评论 -
关于vue与react路由中懒加载的使用
vue路由的懒加载懒加载 --->延迟加载 ,在需要的时候进行加载,随用随载像vue单页面应用,如果么有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会长时间出现白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效地分担首页所承担的加载压力,减少首页加载用时webpa...原创 2018-11-13 14:10:12 · 668 阅读 · 0 评论 -
css面试题汇总
1 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin2 box-sizing属性?用来控制元素的盒子模型的解析模式,默认为content-boxcontex...转载 2018-07-18 20:59:48 · 168 阅读 · 0 评论 -
CSS3中的动画使用详解
在了解css3中的动画之前,我们必须搞清楚一个问题:我们为什么要学习它,它能给我们带来什么好处。这个问题换种说法,就是css3中使用动画的意义:首先同样的动画效果我们用css3来实现要比用JS实现要简单的多,最重要的是从性能方面看,使用css3中的动画实现的效果远远比我们利用JS进行DOM操作的性能要好。当我们搞清楚这个问题,接下来看它的用法:1.首先@keyframes 声明...原创 2018-07-18 11:46:30 · 362 阅读 · 0 评论 -
css3中的3d属性实现一个星空效果
在css3新增属性的学习中,有关3d的知识,下面是利用transform属性的3d效果做的一个星空中星球围绕太阳旋转,实现了自转和公转效果;话不多说,直接code:HTML:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title&原创 2018-07-12 11:03:04 · 4399 阅读 · 6 评论 -
JS基础知识点(13)——History对象和Screen对象
History对象history.length;:获取浏览器浏览过的url数量;history.back;:返回历史记录的前一个页面;history.forward;:加载历史记录中的下一个页面;history.go(n);:跳转到历史记录中指定的页面,如果n是-1相当于history.back的功能;...原创 2018-06-07 12:48:27 · 255 阅读 · 0 评论 -
JS基础知识点(12)——location对象
location对象location.href:返回url信息(可以获取url信息,也可以给其赋值,实现页面跳转)location.assign();加载新的文档(跳转页面)location.reload();重新加载当前文档(相当于F5刷新)location.replace();用新的文档替换当前文档(跳转)location.assign();和location.replace();的区别:lo...原创 2018-06-07 12:30:54 · 151 阅读 · 0 评论 -
JS基础知识点(11)——js中找对象的方法总结
id: document.getElementById("id名字");通过id查找;标签:document.getElementsByTagName("标签名字");找到所有的标签,返回一个数组(对象的集合); 如:document.getElementsByTagName("div");找到所有的div标签//数组; 对象.document.getElementsB...原创 2018-06-07 10:36:49 · 1125 阅读 · 0 评论 -
JS基础知识点(9)——轮播的实现
轮播效果及原理的分析:1.定时器:反复性定时器;2.页面加载完成之后才回去切换图片:onload事件;3.鼠标放到图片上,图片停止切换;鼠标离开图片,图片继续切换(动起来);4.鼠标放到列表上,图片停止到对应的图片,列表标的背景颜色也要改变;5.鼠标离开列表,图片继续自动切换,列表标背景颜色也自动切换;...原创 2018-06-06 11:04:13 · 720 阅读 · 0 评论