- 博客(87)
- 收藏
- 关注
RSS订阅原创 vue router meta icon 引用svg 无法改变颜色的问题
vue router meta icon 引用svg，图标颜色无法改变的问题
2022-08-03 10:25:56
880
原创 JavaScript数据结构之哈希表
????哈希表????????哈希表的介绍???? 哈希表是一种非常重要的数据结构。???? 几乎所有的编程语言都有直接或者间接的应用这种数据结构???? 哈希表通常是基于数组进行实现的⭐️ 相对于数组，它的优势:.它可以提供非常快速的插入-删除-查找操作 （数组进行插入操作时效率低；数组进行查找操作时，如果基于索引查找，效率非常高，如果基于内容查询，效率低；数组进行删除操作时，效率也不高；数组进行修改操作同查找）无论多少数据，插入和删除需要接近常量的时间：即O(1)的时间级。实际上，
2021-09-07 14:41:11
1847
原创 JavaScript数据结构之链表
????链表???? 链表和数组一样，可以用于存储一系列的元素，但是链表和数组的实现机制完全不同。???? ???? 回顾数组：⭐️ 要存储多个元素，数组可能是最常用的数据结构⭐️ 几乎每一种语言都有默认实现的数据结构???? 但数组也有一些缺点：???? 数组的创建通常需要申请一段连续的内存空间（一整块内存），并且大小是固定的（大多数编程语言的数组都是固定的），所以当当前数组不能满足容量需求时，需要扩容。????在数组的开头或中间位置插入数据的成本很高，需要进行大量元素的位移????
2021-09-03 10:28:34
493
原创 JavaScript数据结构之队列
????常见的数据结构- 数组 ????- 栈 ????- 链表 ????- 图 ????- 散列表 ????- 队列 ????- 树 ????- 堆 ???????? 这里先说队列???? 队列 Queue???????? 普通队列???? 是一种受限的线性表，先进先出（FIFO） first in first out???? 受限之处在于它只允许在表的前端（front）进行删除操作???? 而在表的后端（rear）进行插入操作???????????? 普通队列的封装（
2021-08-31 17:35:42
134
原创 JavaScript数据结构之栈结构
终于开始数据结构的学习。。。拖延症要不得上一次学习数据结构大约在大学时期，哦吼，完全应试学习，考完忘的干干净净。。。????????数据结构：在计算机中，存储和组织数据的方式。????常见的数据结构- 数组 ????- 栈 ????- 链表 ????- 图 ????- 散列表 ????- 队列 ????- 树 ????- 堆 ???????? 这里先说栈结构????栈结构???? 实际开发过程中，数组应该是最常使用的数据结构。那么我们知道数组是一种线性结构，并且可以在数组的任意
2021-08-31 16:43:26
136
原创 前端基础学习之高阶函数（currying、uncurrying、分时函数等等）
去年在过前端基础技术栈的时候有简单记录过一点高阶函数笔记 前端基础学习之js高级在看js设计模式与开发实践的时候，第一章节都在讲一些基础，比如this、call、apply、闭包等等。在看到高阶函数的时候，有些高阶应用比如节流是比较常见的，而有一些高阶函数的应用之前没有了解过，比如currying、分时函数等等，个人而言比较新奇，记录一下子~高阶函数满足以下两种条件之一的函数即高阶函数函数可以作为参数传递函数可以作为返回值输出高阶函数的应用1.回调函数 - 作为参数传递 （之前笔.
2021-06-22 17:24:58
289
原创 js基础之关键字new运算过程
从面试离职面试休息再入职的过程中逐渐习惯新的生活工作模式，生活趋于稳定，于是重新上手捡起前一段时间落下的学习计划。从《javascript设计模式与开发实践》看起，说来惭愧，这本书朋友一年前就推荐给我，因为一些其他的基础学习计划耽搁到现在，学习进程缓慢而艰巨啊~~~书中讲到的第一个设计模式–原型模式，应该是在不接触设计模式时最最最熟悉的一个模式了吧，其中讲到new运算的过程，记录一下方面后续回顾啦。在es6之前，javascript中是没有类的概念的，js是基于原型的面向对象。那么例如 ne.
2021-06-22 14:19:23
146
原创 vue 所有生命周期函数都执行了两遍的问题
在原有项目新增功能需求模块开发的过程中，发现无论哪一个模板中的created函数都被执行了两次，遂非常熟练的打开了百度…网络上的解决办法有：解决方案1：检查main.js 中是否重复声明vue实例 （没有, pass）解决方案2：据说使用了mixin的会调用两次 （尝试用一个干净的vue项目，使用一个简单的mixin文件，发现并没有执行两遍，把本项目的app文件其他内容全都注释，只留纯净的初始版本，发现也会调用两次。pass）解决方案3：说什么路由配置问题（直接注掉路由的引用，还是调用了两遍，.
2021-06-16 16:17:05
6295
2
原创 npm install时，报 npm ERR! cb()never called! 的问题
入职新公司，我本地的node版本12.x.x,而实际开发需要14.x.x,导致项目跑不起来，然后“不假思索”“十分干脆”的去安装了最新版本的node！！！好像就此打开了潘多拉的盒子，问题接踵而至。。。最新的版本理所当然有些问题，于是把最新16.x.x的版本卸载，再安装14.x.x的之后，node版本一致了，npm版本也一致了，哐哐删除node_modules文件，重新install，不急不慌等着依赖下载完成，就在这时候，报ERR! cb()never called的问题。网上关于这个问题说的最多.
2021-06-02 15:09:15
2911
原创 记录我2021年这半个月陆陆续续的面试题
PS:明天最后一家，面完结束，不想再接着找下去了，辗转奔波面试属实耗时耗力，太累了。基于我老老实实两年多的前端工作经验，面试官也没有问特别高深的。js基础1.this指向这里是有面试官直接在控制台敲了一段代码，让我说出每个this的指向及程序是否会报错。主要的知识点还是在函数中的this指向，方法中的this指向，箭头函数的this指向，bind,call,apply这一些导致的this指向发生的变化，其中有把箭头函数具名化，并且还bind一个对象，但是调用没有报错，这里不知道为什么（汗哒哒）.
2021-04-29 14:54:15
361
原创 前端基础学习之防抖（debounce）和节流（throttle）
1.防抖（debounce）例如在实现移动端的列表条件查询时，文本框中如果每输入一个字符都去后台查询一次，即短时间内大量触发同一事件，非常影响性能。解决办法：在第一次触发事件时，不立即执行查询，设置一个延迟执行的时间限制，若在这时间范围内再次触发，则清除当前的定时器，开启新的延迟执行查询，以此类推，直到这段时间范围内不再触发事件，执行查询函数。防抖函数： （其实就是返回一个延时定时器，在下一次调用时看是否有值，有则清空开启下一个，直到没有了，顺利执行延迟器中的函数）let debounce=fu
2021-04-12 13:15:12
402
原创 使用vue+weixin-js-sdk实现公众号页面的扫码功能
vue+barcode 实现app端的扫码功能同样的，详细的api文档描述可以看微信官方文档，这里就简单列一下用到的点。1.引入weixin-js-sdk 依赖 vue全局使用npm install weixin-js-sdkimport wx from "weixin-js-sdk";Vue.prototype.wx = wx;2.通过config接口注入权限验证配置此处的appId、timestamp、nonceStr、signature都是从后端接口获得。(大部分调试时间都
2021-03-22 11:22:04
1046
原创 使用vue+barcode 实现app端的扫码功能
开年事情有些多，最近刚好在用vue写app和公众号的移动端，两者都有扫码的功能，在这记录一下子。Barcode模块管理条码（一维码和二维码）扫描识别，支持常见的一维码（如EAN13码）及二维码（如QR码）。通过调用设备的摄像头对条码进行扫描识别，扫描到条码后进行解码并返回码数据内容及码类型。Barcode模块可使得Web开发人员能快速方便调用设备的摄像头进行条码扫描识别，而不需要安装额外的扫描插件。规范建议条码识别引擎的支持规范定义的所有条码常量类型。app端使用的是h5+的api barcode
2021-03-22 10:26:01
3547
11
原创 前端基础学习之零碎小点-父级容器高度不设置的情况下，子级高度百分百继承父级高度
在写一个步骤条的时候，发现用一个继承父级高度的子级的border就可以搞定。此时父级高度并没有设置，即此时父级的高度是由子级容器的高度决定的，而如果这个时候单单给子级设置个height:100%,并不会起作用。父级的高度依赖于子级容器，子级又想继承父级的高度，两相矛盾。解决方案：第一步：给父级容器设置定位（relative、absolute、fixed都可）以作为子级的参照容器；第二步：给子级容器一个绝对定位 （这样的子级其实已经脱离了文档流，父级的高度不依赖于脱标的子级，且此时父级是子级的参照容
2021-02-18 17:25:05
1570
原创 前端基础学习之背景裁剪（background-clip）
以往写页面，若要给一个有padding的盒子内容填充背景，通常做法就再加了一个div…(汗哒哒，dom冗余，还是基础知识积累不够啊…) 今天刚好看见这个裁剪的用法，记录一下子。1.background-origin规定 background-position 属性相对于什么位置来定位。值描述border-box背景图像相对于边框盒来定位padding-box背景图像相对于内边距框来定位content-box背景图像相对于内容框来定位2.backgroun.
2021-01-29 14:55:46
1334
原创 前端基础学习之移动端触摸事件touch
1. touch是移动端的触摸事件，是一组事件1.1 touchstart 当手指触摸屏幕时触发1.2 touchmove 手指在屏幕上来回滑动时触发1.3 touchend 手指离开屏幕时触发1.4 touchcancel 被迫终止滑动时触发（比如玩游戏的时候突然有来电显示，或者突然弹出一条消息）2.利用touch相关事件来实现移动端常见的滑动效果和常见的手势事件使用touch绑定事件:推荐使用 addEventListenertouch事件对象中关注三个对象值：cha
2021-01-29 10:22:11
1003
原创 前端基础学习之手写基础轮播图（pc端、移动端）
最近在看移动端开发知识点的时候，刚好看到移动端轮播图，想着不如和之前pc端的轮播图放在一起做个记录，再回顾一遍一些基础知识点。轮播图的几个基础功能点：自动无缝切换轮播图片点击按钮切换图片移动端手指滑动切换图片移动端手机滑动短距离图片吸附回去指示器随着图片滚动而改变1.无缝轮播图（仅简单自动轮播，通过改变绝对定位left值来实现滚动的效果，无其他任何功能点）<!DOCTYPE html><html><head lang="en"> .
2021-01-28 18:05:04
1182
原创 前端基础学习之h5-canvas入门5-坐标转换（translate、scale、rotate）
1.直线绘制及绘制折线图2.矩形绘制及绘制渐变矩形3.曲线绘制及绘制饼状图4.图片绘制及绘制帧动画坐标变换平移 移动画布的原点translate(x,y) 参数表示移动目标点的坐标缩放 坐标轴缩放scale(x,y) 参数表示宽高的缩放比例旋转 旋转画布原点rotate(angle) 参数表示旋转角度实例1.translate 变的是坐标的原点位置，而不是绘制物的位置这里先绘制一个起始位置（100,100），宽300，高300的矩形，再使用trans.
2021-01-22 14:05:13
1852
原创 前端基础学习之h5-canvas入门4-图片绘制、帧动画
1.直线绘制及绘制折线图2.矩形绘制及绘制渐变矩形3.曲线绘制及绘制饼状图绘制图片首先得知道html中图片加载的几种方式<!--1.dom中直接加载--><img src="img/1EF971FD.jpg" alt="">//2.加载图片到内存中 let img=document.createElement('img'); img.src='img/1EF971FD.jpg'; document.body.append(img); //3.使用图片.
2021-01-21 13:37:03
459
原创 前端基础学习之h5-canvas入门3-曲线的绘制及绘制完整饼状图
canvas直线绘制及绘制完整折线图canvas一些基础的概念在直线绘制中已经提过。下面主要提曲线和文本绘制，以完成一个完整饼状图的绘制。（一）曲线的绘制弧度概念1 弧度 = 1 r(半径)圆的周长=2πr原的总弧度=2π确定圆心确定半径确定圆弧的起始位置和结束位置 (以弧度为单位，0====水平右边)确定圆弧的绘制方向 默认false 顺时针arc() 圆弧绘制函数x 圆心横坐标y 圆心纵坐标r 半径startAngle 开始角度endAngle 结束角度a.
2021-01-20 10:58:18
1335
1
原创 前端基础学习之h5-canvas入门2-矩形绘制及渐变色矩形
canvas绘制矩形的基本使用方法：rect(x,y,w,h) 没有独立路径strokeRect(x,y,w,h) 有独立路径，不影响别的绘制fillRect(x,y,w,h) 有独立路径，不影响别的绘制clearRect(x,y,w,h) 擦除矩形区域实例绘制矩形的几种方式1.使用前面一篇文章所讲的直线来画矩形2.直接使用绘制矩形路径工具rect()3.使用独立矩形路径strokeRect()fillRect()let myCanvas=document.query
2021-01-14 15:35:03
502
原创 前端基础学习之h5-canvas入门1-直线绘制及绘制完整折线图
canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。<canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。（一）什么是Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制.
2021-01-14 14:43:04
2560
原创 前端基础学习之h5-canvas中的非零环绕规则
最近在看canvas,canvas在对某一区域进行填充操作的时候，根据非零环绕规则来判断是否填充。具体怎么判断一块区域是否填充呢？1.从这个区域拉一条直线2.看和这条直线相交的轨迹3.如果是顺时针轨迹 +14.如果是逆时针轨迹 -15.所有的值相加6.如果是非0 那么就填充7.如果是0 那么就不填充具体示意图1：具体示意图2：简单案例：canvas描绘镂空正方形<!DOCTYPE html><html lang="en"><head>
2021-01-08 16:54:00
239
原创 前端基础学习之h5-dom操作、新增api（全屏操作、video多媒体、history、web存储等）
1.获取dom的方式H5 api有效选择器:在css当中能使用的都是有效选择器document.getElementsByClassName (‘class’);通过类名获取元素，以伪数组形式存在。document.querySelector(‘selector’);通过CSS选择器获取元素，符合匹配条件的第1个元素。document.querySelectorAll(‘selector’);通过CSS选择器获取元素，以伪数组形式存在。2.类操作H5 api 基于对象的classLis
2021-01-07 15:25:22
629
原创 前端-请求获取图片流下载图片、展示图片
请求时要设置responseType为"arraybuffer"； httpService.accessAPI({ apiObj:apiUrl.getQrCodePicture, responseType:"arraybuffer", query:{ qrCodeName:this.chooseItems[0]..
2020-12-14 11:18:16
2741
原创 vue 打包页面空白的问题
解决办法：1.配置文件中的publicPath改为"./"publicPath: "./",2.如果配置文件中的publicPath已经是"./"，打包出来的html还是空白，那么修改router的index.js文件中的mode值，由history改为hash
2020-11-17 09:58:51
251
原创 前端基础学习之css3-(border-image)实现边框图片自适应填充
border-image 属性允许在元素的边框上绘制图像。语法：/* border-image: image-source image-height image-width image-repeat */border-image: url("/images/border.png") 30 30 repeat;border-image: url("/images/border.png") 30 30 stretch;值描述border-image-source用在边框的图片
2020-11-06 14:37:50
2966
2
原创 前端基础学习之h5c3-购物车宣传页动画小练习
index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>购物车宣传页</title> <link rel="stylesheet" hre.
2020-11-06 09:48:08
1041
原创 前端基础学习之css-手写优惠券样式（radial-gradient）
最近组内设计师总喜欢设计类似优惠券内凹的样式UI。因此，从头开始捋一遍这种优惠券的样式。如下：1.linear-gradient 线性渐变线性渐变使用的频率要比径向渐变高的多，因此在学习径向渐变之前，可以先再熟悉一遍线性渐变，依次类推再看径向渐变就简单的多。linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从下到上渐变。使用方法：background-
2020-10-24 00:17:49
1274
2
原创 前端基础学习之js-正则表达式基本语法及练习
正则表达式:也叫规则表达式,按照一定的规则组成的一个表达式,这个表达式的作用主要是匹配字符串的.正则表达式的作用:匹配字符串的在大多数编程语言中都可以使用正则表达式的组成:是由元字符或者是限定符组成的一个式子(一) 元字符1.元字符 .. 表示任意一个除了\n以外的字符2.元字符 [][]表示任意的单个字符。[0] 就是0[0-9] 表示0-9之间的任意一个数字[a-z] 表示二十六个小写字母中任意一个字母[a-zA-Z] 表示二十六个大小写字母中的任意一个字母[0-9..
2020-09-15 14:56:12
578
原创 前端基础学习之js高级-函数（高阶函数、闭包、沙箱、递归）
(一) 创建函数的两种方式1.函数声明f1();//可以调用//函数声明function f1() { console.log("我是f1的函数内容");}2.函数表达式 f2();//报错//函数表达式 let f2=function () { console.log("我是f2的函数内容"); }因为预解析的原因，用函数声明的方式创建函数，在函数声明前也可以调用，而用函数表达式的时候则会报错。 if(true){ function f2() { console.l
2020-09-11 15:33:55
280
原创 前端基础学习之js高级-apply()、call()、bind()使用
1.函数简要说明首先简单说一下，对象中都有__ptoto__属性，而函数中也有__proto__，因此函数也是对象。函数其实是Function构造函数的实例对象。即：如下的addFun1的调用效果和addFun2的调用效果是一样的。addFun1:function add(num1,num2) { return num1+num2;}console.log(add(20,30))addFun2let f2=new Function("num1","num2","return num1+nu
2020-09-11 09:52:43
341
原创 前端基础学习之js高级-面向对象-实现继承的几种方式
首先简单说一下构造函数、实例对象、原型对象之间的关系：通过构造函数可以创建实例对象。构造函数中有一个prototype属性，这个属性指向构造函数的原型对象。通过构造函数创建的实例对象中有一个__proto__属性，这个属性指向这个实力对象对应的构造函数的原型对象。构造函数的原型对象中有一个constructor构造器属性，这个属性指向这个原型对象所在的构造函数。原型对象中的属性和方法可以被实例对象共享原型对象的作用：实现数据共享，节省内存空间；实现继承，节省内存空间构造函数的原型对象(pro
2020-09-10 15:51:55
263
原创 前端基础学习之js-贪吃蛇游戏（面向对象思维）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .map{ width: 800px; height: 600px; background-color: #ccc; position: relative; } </style><
2020-09-09 09:56:01
207
原创 vue cli3-项目打包页面浏览器缓存的问题
const Timestamp = new Date().getTime();module.exports = { // 将部署应用程序的基本URL // 默认情况下，Vue CLI假设您的应用程序将部署在域的根目录下。 publicPath: './', configureWebpack: { output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 filename: `static/js/[
2020-09-08 17:48:31
1269
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人