- 博客(60)
- 收藏
- 关注
RSS订阅
原创 Vite首次启动慢的问题
众所周知，通常情况下Vite要比Webpack快，但经过实际感受，默认情况下，Vite项目的启动速度确实很快，但如果某个界面是第一次进入，且依赖比较多或者比较复杂的话，就会很慢，这篇博客来讨论一下这个问题（Vite2.x版本）。
2023-08-03 00:03:04
1813
1
原创 原型和原型链
:: tip JS原型的概念javascript常被描述为一种基于原型的语言(每个对象都拥有一个原型对象)当访问一个对象的属性时，它不仅在该对象上寻找，还会寻找该对象的原型，以及该对象原型的原型，层层向上，直到找到或者到达原型链的末尾函数可以有属性。每个函数都有一个特殊的属性叫作原型prototype// 控制台输出 /* {}}*/上面这个对象，就是大家常说的原型对象可以看到，原型对象有一个自有属性::: tip 原型链的概念。...
2022-08-05 20:09:27
205
原创 函数柯里化
*函数柯里化(**curry)是函数式编程中的概念。函数柯里化是指每次调用函数时，先接收部分参数，并返回一个函数，然后传递剩下的一部分参数，再返回一个函数，直到传递完所有参数为止，通俗的讲，函数柯里化就是固定部分参数，返回一个接受剩余参数的函数，也称为部分计算函数，目的是为了缩小适用范围，创建一个针对性更强的函数。...
2022-07-26 21:21:31
581
原创 Pinia状态持久化
在vue3中，常用Pinia代替Vuex来进行状态管理。这里贴上Pinia的官网，有兴趣的可以去了解一下。Pinia🍍其他过程就省略了，今天在vue3中实现一个最简单的Pinia持久化插件,后续可能会进一步封装createApp,toRaw}from'vue'importAppfrom'./App.vue'//引入piniaimport{key?string}//默认的keyconst__piniaKey__${?.??}${.}${?.??}${.}...
2022-07-26 21:19:21
1744
原创 前端项目总结：客运互联网售票平台
对前一段时间完成的客运互联网售票平台前端项目，进行简单的整理，本篇文章只对总体需求梳理一下，有些重复或者过简单的部分就跳过了，后面会再补充几篇关于项目中的问题和解决方法的文章。
2022-06-01 18:14:58
1483
4
原创 Vue-CLI3项目部署
::: tip 前言自己在部署Vue项目到服务器上后，遇到刷新页面出现404的问题(history模式)，而路由如果使用hash模式，则不会出现问题，这篇文章主要整理一下出现问题的原因以及解决办法:::为什么history模式下有问题🎉Vue是属于单页面应用，也就是SPASPA是一种网络应用程序，所有与用户交互都是动态重写当前页面来实现页面变化的，这也就是为什么不管我们应用有多少页面，打包之后都只会产出一个index.html现在，先来看一下nginx的配置server { liste
2022-05-03 17:11:16
1796
原创 Javascript队列和双端队列
1. 创建队列🎉声明自己的类，表示一个队列class Queue { constructor() { this.count = 0; this.lowestCount = 0; this.items = {}; }}::: tip首先是需要存储队列中元素，也就是上面的items,我们可以用一个数组,但是为了在获取元素的时候更加高效，选择用一个对象来存储更好。count是用来控制队列的大小。有时候，我们还需要从队列前端移除元
2022-05-03 17:10:46
603
原创 NProgress的简单使用
1.安装NProgressNPMnpm install --save nprogressYarnyarn add nprogress2.引入可以直接引入js、css或者通过cdn引入<script src='nprogress.js'></script><link rel='stylesheet' href='nprogress.css'/>Vue项目中// 引入NProgressimport NProgress from 'nprogress
2022-05-03 17:10:18
2256
原创 手写节流和防抖函数
1. debounce()防抖函数🍊某个函数在短时间内只执行最后一次。function debounce(fn,delay = 200) { if(typeof fn !== 'function'){ return TypeError('fn is not a function') } let lastfn = null return function(...args) { if(lastfn){ clearT
2022-05-03 17:09:40
389
原创 手写Promise
1. Promise声明🍒class MyPromise { // 构造器 constructor(executor) { // 成功 let resolve = () => {}; // 失败 let reject = () => {}; // 立即执行 executor(resolve,reject); }}2. 定义基本状态🍒class MyPromise { // 构造器
2022-05-03 17:08:57
238
原创 Vue组件中scoped的原理
一、使用场景🌊::: tip在编写Vue组件时，我们通常希望一些样式只作用于这一个组件，而不影响全局，此时只需要在style标签后加上一个scoped就可以了，但它是怎么做到的呢？当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。如果你善于观察，应该会发现，渲染后的dom元素上有很多 data-v-xxxxx 这样的标识，其实这就是秘密所在.:::二、实现原理🌊scoped属性的效果主要是通过PostCss实现的
2022-05-03 17:08:26
1604
原创 手写call,apply,bind方法
一、如何改变js中this指向问题？🌊1. 通过ES6的箭头函数(指向函数定义时的this)2. 通过call,bind,apply改变this指向二、call,bind,apply三者的主要区别🌊call,bind,apply这三个方法的第一个参数都是 this的指向对象第二个参数： call和bind都是接收参数列表，apply接收的是一个包含多个参数的数组（也可以是类数组）bind方法不会立即执行，而是返回一个新的函数，调用新函数的时候才会执行目标函数三、手动实现
2022-05-03 17:07:52
698
原创 【看完还不会过来打我】详解Vue数据双向绑定原理
前言整理一下自己在学习之后，对Vue数据双向绑定原理的理解，顺便感叹 尤雨溪大神太强了，如果有错误，欢迎各位指正。一、基础知识复习1.1 利用reduce方法链式获取 属性值如果 reduce 方法还不会使用的小伙伴赶快去复习！首先声明一个对象供我们使用：let obj = { name: 'zs', info: { age: 19, address: { location: '西安' } }
2021-11-26 00:32:07
1123
4
原创 前端项目开发总结：电商后台管理系统
前言：这篇文章主要总结自己在学习黑马的电商后台管理系统中遇到的问题及其解决方法，和学到的知识；页面样式之类的就不做整理了注：很多模块的添加，编辑删除等功能实现都比较相似，在弹窗之前 调用相应的api拿到数据渲染就行了，就不进行整理了涉及的前端技术栈：VueVue-routerElement-UIAxiosEcharts一、项目主要功能模块划分项目初始化登录/退出功能主页布局用户管理模块权限管理模块分类管理模块参数管理模块商品列表模块订单管理模块数据统计
2021-11-21 15:25:00
13166
21
原创 对JavaScript事件循环机制的理解
前言：这次主要整理一下自己对 Js事件循环机制，同步，异步任务，宏任务，微任务的理解，大概率暂时还有些偏差或者错误。如果有，十分欢迎各位纠正我的错误！一、事件循环和任务队列产生的原因：首先，JS是单线程,这样设计也是具有合理性的，试想如果一边进行dom的删除，另一边又进行dom的添加，浏览器该如何处理？引用：“单线程即任务是串行的，后一个任务需要等待前一个任务的执行，这就可能出现长时间的等待。但由于类似ajax网络请求、setTimeout时间延迟、DOM事件的用户交互等，这些任务并不消
2021-11-16 01:52:07
8865
3
原创 关于Js中创建二维数组的坑
Js中二维数组的创建:首先JavaScript只支持 一维数组 ，但我们可以通过一些方法实现矩阵以及多维数组其中普通的创建方法并不会出现什么问题：(1) 利用一维数组嵌套一维数组的方式创建二维数组：let arr = [] ;a[0] = [1,2,3,4,5,6];a[1] = [10,20,30,40,50,60]然后使用一个 双层for循环 就可以迭代这个二维数组中的元素所以用这种方法创建多维数组，不管有几个维度，都可以通过嵌套循环来遍历遇到问题的方法: ![请添加图片描
2021-11-15 20:04:04
1061
原创 Vue2.js——插槽
一、插槽在2.6.0中,具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。1.插槽内容：它允许你像这样合成组件（组件已经注册过）:<navigation-link url="/profile"> Your Profile</navigation-link>然后，你可以在 navigation-link 组件的template中使用
2021-11-10 18:32:18
404
原创 树——哈夫曼编译码
题目：假设某通信报文的字符集由A,B,C,D,E,F这6个字符组成，它们在报文中出现的频度（频度均为整数值）。 (1)构造一棵哈弗曼树，依次给出各字符编码结果。 (2)给字符串进行编码。 (3)给编码串进行译码。 规定： 构建哈弗曼树时：左子树根结点权值小于等于右子树根结点权值。 生成编码时：左分支标0，右分支标1。输入：第一行：依次输入6个整数，依次代表A,B,C,D,E,F的频度，用空格隔开。 第二行：待编码的字符串 第三行：待译码的编码串输出：前6行依次输出各个字符及其对应编码，格
2021-11-04 08:39:42
741
原创 03-字符串的扩展以及新增方法
一、字符串的扩展1、字符串的遍历器接口ES6 为字符串 添加了遍历器接口 所以字符串可以被 for...of循环遍历let text = String.fromCodePoint(0x20BB7);for (let i = 0; i < text.length; i++) { console.log(text[i]);}// " "// " "for (let i of text) { console.log(i);}// "????"上面代码中，字符串tex
2021-11-03 23:34:51
370
原创 02-变量解构赋值
一、变量的解构赋值1.数组的解构赋值：以前为变量赋值：let a = 1;let b = 2;let c = 3;ES6允许写成下面这样：let [a, b, c] = [1, 2, 3];这种写法表示，从数组中提取值，按照对应位置，对变量赋值再来看更多例子：let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3let [ , , third] = ["foo", "bar", "baz"];t
2021-11-03 00:16:56
108
原创 01-let和const命令
一.let：let用法和var类似，但是所声明的变量，只在let命令所在的代码块中有效{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1应用：1> 例如for循环的计数器，就适合用let命令for (let i = 0; i < 10; i++) { // ...}console.log(i);// ReferenceError: i is not defined
2021-11-02 01:04:15
122
原创 二叉树的创建及其基本操作
一、给出按照 先序遍历序列 创建二叉树的例子 且 使用顺序栈和循环队列1.代码如下©：#include<stdio.h>#include<stdlib.h>#define MAXSIZE 100005 //注意栈不能太小，假如有树有n个结点（包括非空） 则需要2^n 的长度 typedef char DataType; // 定义二叉链表结点结构typedef struct Node { DataType data; // 树中结点数据 struc
2021-10-31 19:32:28
623
1
原创 2021-09-03 前端小组考核试题
一、简答题1.Vue全家桶有哪些？Vue-CLI(脚手架)Vue-RouterVuexaxios搭配UI框架，如elementUI等2.描述下你对Vue生命周期的理解。vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。3.Vue组件之间的通信方式有哪些？4.描述下你对SPA和MPA的理解。他们的优缺点是什么？5.描述下你对webpack的理解？解决了什么问题？6.描述下Vue的响应式原理
2021-09-04 17:00:44
442
原创 有关Vue-loader的相关知识
什么是Vue-loader?官方文档中具有专业的解释，个人理解，用里面的一句话来总结就是，webpack 和 Vue Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Vue.js 应用一、处理资源路径当 Vue Loader 编译单文件组件中的 <template> 块时，它也会将所有遇到的资源 URL 转换为 webpack 模块请求。例如：<img src="../image.png">将会被编译为一个 模块请求：createEle
2021-09-02 21:50:00
5108
原创 Vue中父子组件之间的通信（传递数据）以及父子组件的相互访问
一、父组件向子组件传递父组件向子组件传递数据，可以通过props属性来实现：1.1 第一种写法：使用数组类型 <script src="../JS/vue.js"></script> <script> const app = new Vue({ el: '#app', //父组件中要传递的数据： data: { me
2021-09-01 20:05:03
533
原创 Vue生命周期
一、什么是Vue的生命周期？vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，==这就是一个组件所谓的生命周期。二、Vue的生命周期：首先做的的事情就是实例化vue对象，也就是创建一个vue实例，紧接着 初始化事件以及生命周期；触发 beforCreate，是创建实例之前执行的钩子事件，此事件执行完成后进行初始化注入；触发created,是创建实例之后执行的钩子事件 ；然后Vue会判断，是否含有"el"选项，如果没有，则使用vm.$
2021-09-01 19:00:14
123
原创 2021-06-06 前端小组考核试题整理
前端测试题一、选择题1.下面哪种说法是正确的？（B）A. jQuery 是 JSON 库B. jQuery 是 JavaScript 库2.3+2+“7”=？答：“57”※3.写出下列代码的输出结果console.log([ ]==false); console.log(![ ]==false)输出结果：true,true解析：首先，[ ]是一个空数组，也就是一个Object类型，既然是一个Object，那么作判断条件时就会转换为true其次要注意！当空数组和布尔值作比较时，会
2021-06-07 15:54:49
829
1
原创 【关于JS中的闭包问题】
闭包：1.什么是闭包？闭包其实就是指有权访问另一个函数作用域中变量的函数2.创建闭包的常见方式？创建闭包的最常见方式就是在一个函数的内部创建另一个函数3.闭包现象：eg：function Outfunc(propertyName) { return function (obj1,obj2) { //*********** var value1 = obj1[propertyName]; var value2 = obj2[propertyName];
2021-05-10 20:55:09
150
原创 Javascript基础学习——周总结（二）
Javascript基础学习——周总结（二）:1. 有关a索引问题：var allA = document.getElementsByTagName("a");for(var i=0;i<allA.length;i++){ allA[i].onclick = function(){ alert(allA[i]); return false; }}注意：for循环会在页面加载完成后立即执行，而这段代码中给a绑定的单击响应函数，在单机时才会执行。2. 操作内联样式：通过JS修改
2021-05-05 21:34:20
150
原创 第八周算法题整理【动态规划，dfs】
题目：A–三值排序排序是一种很频繁的计算任务。一个实际的例子是，当我们给某项竞赛的优胜者按金银铜牌排序的时候。在这个任务中可能的值只有三种1，2和3。我们用交换的方法把他排成升序的。写一个程序计算出，计算出的一个包括1、2、3三种值的数字序列，排成升序所需的最少交换次数。输入第1行为类别的数量N（1≤N≤1000）输入第2行到第N+1行，每行包括一个数字（1或2或3）。输出包含一行，为排成升序所需的最少交换次数。Sample Input9221333231Samp
2021-04-25 22:35:08
330
原创 Javascript 基础学习——周总结
Javascript 基础学习——周总结：1.tostring()方法：我们在页面中打印一个函数对象时，输出的其实是该对象 tostring()方法的返回值如果想要输出指定对象的具体属性，可以修改该对象的原型对象中的string（）方法，利用this输出对象所包含的属性2.有关JS中数组的基本知识和操作方法：2.3数组简介数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 “object”因此，数组中的元素可以使 任意数据类型，可以是一个函数，乃至一个
2021-04-25 00:05:01
403
原创 第六周算法整理【动态规划、前缀和】
A - 放苹果：题目：小蒜想知道把 MMM 个同样的苹果放在 NNN 个同样的盘子里，允许有的盘子空着不放，共有多少种不同的分法？（用 KKK 表示）555，111，111 和 111，555，111 是同一种分法。输入格式：第一行是测试数据的数目 t(0≤t≤20)t(0 \le t \le 20)t(0≤t≤20)。以下每行均包含两个整数 MMM 和 NNN，以空格分开。1≤M,N≤101 \le M, N \le 101≤M,N≤10。输出格式:对输入的每组数据 MMM 和 NNN，用
2021-04-08 00:06:53
348
原创 循环结构简单题之分硬币
题目现有1分，2分，5分的硬币一共60枚，请输出可以让所有硬币之和为1元的分法。（每种分法都必须含有所有面值的硬币）PS：三重循环的枚举太过繁琐而且比较简单就不整理了1.两重循环题解：#include<stdio.h>int main(void){ int i,j,k;//一分、二分、五分 for(i=1;i<60;i++) { for(j=1;j<50;j++) { k=60-i-j; if((i+2*j+5*k)==100) pri
2021-03-29 19:17:28
217
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人