- 博客(44)
- 收藏
- 关注
RSS订阅原创 vue3路由
2：传递params参数时，需要提前在规则中占位。1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。作用：让路由组件更方便的收到参数（可以将路由参数作为props传给组件）优点：URL更加美观，不带有#，更接近传统的网站URL。优点：兼容性更好，因为不需要服务器端处理路径。作用：控制路由跳转时操作浏览器历史记录的模式。作用：将特定的路径，重新定向到已有路由。路由组件：靠路由规则渲染出来的。
2024-07-19 15:27:02
127
原创 vue3语法
setup是Vue3中一个新的配置项，值是一个函数，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在beforeCreate(设置生命周期)之前调用，它是“领先”所有钩子执行的。姓名：{{name}}年龄：{{age}}
2024-07-19 10:02:14
528
原创 构建工具webpack&vite
3.webpack是打包工具是给node看的，配置文件(webpack.config.js)这里要遵循。本质上 Vite 和 Webpack 是打包工具，只是 Webpack 比较底层，需要自己手动去配置。2.yarn add -D webpack-dev-server安装webpack的一个开发服务器。4.webpack会遍历代码判断代码会不会执行，只有会执行的代码才会被打包进main.js。1.开发时，并不对代码打包，而是直接采用**ESM（ES模块）**的方式来运行项目。
2024-07-11 18:26:02
596
原创 js高级—基础深入总结
存储在内存中代表特定信息的东西，本质上是0101二进制数据特点：可传递、可运算内存条通电后产生的可存储数据的空间（临时的），而硬盘的空间是持久的内存产生和死亡:内存条(电路版)=>通电=>产生内存空间=>存储数据=>处理数据=>断电=>内存空间和数据都消失释放内存:清空内存中的数据,标识内存可以再分配使用(内存不释放就不能复用)自动释放:栈空间的局部变量垃圾回调器回调:堆空间的垃圾对象（没有一个指针指向的时候就是垃圾对象）栈：全局变量/局部变量堆：对象。
2024-05-31 08:20:09
871
原创 axios
json-server可以快速搭建一个http服务，可以替我们完成完全模拟请求以及请求回来的过程的工具。只需要提供一个json文件，或者写几行简单的js脚本就可以模拟出RESTful API的接口。使用：2.创建db.json 在一个文件夹下新建一个db.json文件3.启动json-server 在当前文件夹下输入如下命令：（这里启动的工作目录一定要在db.json文件所在的文件夹下）1.基于 xhr + promise 的异步 ajax 请求库2.浏览器端、node端都可以使用。
2024-05-27 17:06:28
1583
原创 bind/apply/call区别、var/const/let区别
这里的this指向的是window对象，因为在这里say()是用作回调函数来执行的，传的只是这个函数的引用，没有保留这个函数所属的对象。函数里面的this取决于调用时的执行上下文，在setTimeout里没有指定执行上下文，就默认在全局的执行环境中，指向的就是window。在变量提升方面，都被提升到了作用域的顶部。1.与前两种最大区别是bind返回值是一个新的函数，并不会直接执行这个函数。变量提升： 在代码执行之前,将变量声明和函数声明提升到当前作用域的顶部。，这里的this指向的是它的调用者obj。
2024-05-18 21:49:31
319
原创 AJAX、
Ajax全称为Asynchronous Javascript And XML，即异步JS和XMLAJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式通过Ajax可以在浏览器中向服务器发送异步请求无刷新获取数据，先展示页面，需要时获取数据XML：可扩展标记语言，被设计用来传输和存储数据XML和HTML类似，不同点：HTML中都是预定义标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据现在已被JSON取代。
2024-05-16 15:44:27
1708
原创 接口、会话控制
接口是前后端通信的桥梁简单理解:一个接口就是服务中的一个路由规则,根据请求响应结果接口的英文单词是API(Application Program Interface),所以有时也称之为API接口。这里的接口指的是[数据接口],与编程语言(Java, Go等)中的接口语法不同接口的作用：实现前后端通信接口的开发与调用 大多数接口都是由后端工程师开发的,开发语言不限一般情况下接口都是由前端工程师调用的,但有时后端工程师也会调用接口,比如短信接口,支付接口等。
2024-05-14 22:11:26
815
原创 express框架
express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架，官方网址：https://www.expressjs.com.cn/简单来说，express 是一个封装好的工具包，封装了很多功能，便于我们开发 WEB 应用（HTTP 服务）express本身是一个npm包，所以可以通过npm安装：npm init整个express的入口文件在bin下的www文件//1. 导入 express//2. 创建应用对象//3. 创建路由规则});
2024-05-10 22:09:59
816
原创 mongoDB
MongoDB是一个基于分布式文件存储的数据库,官方地址https://www.mongodb.com（Mongodb操作语法与JavaScript类似，容易上手，学习成本低）数据库(DataBase)是按照数据结构来组织、存储和管理数据的应用程序数据库的主要作用就是管理数据,对数据进行增(c)、删(d)、改(u)、查(r)数据库管理数据的特点：（相比于纯文件管理数据）1.速度更快2.扩展性更强3.安全性更强三个重要概念。
2024-05-06 18:27:41
684
原创 包管理工具npm、cnpm、yarn、NVM
包]英文单词是package,代表了一组特定功能的源码集合包管理工具：管理[包]的应用软件,可以对[包]进行下载安装,更新,删除,上传等操作借助包管理工具,可以快速开发项目,提升开发效率包管理工具是一个通用的概念,很多编程语言都有包管理工具,所以掌握好包管理工具非常重要前端常用的包管理工具npm、yarn、cnpm。
2024-05-06 18:27:16
847
原创 HTTP、模块化
1.模块化是一个将一个复杂的程序文件依据一定规则(规范)拆分成多个文件的过程其中拆分出的每个文件就是一个模块，模块的内部数据是私有的,不过模块可以暴露内部数据以便其他模块使用2.模块化项目：编码时是按照模块一个一个编码的,整个项目就是一个模块化的项目3.模块化的一些好处:减少命名冲突、高复用性、高维护性。
2024-04-27 17:04:24
542
原创 Buffer/fs模块/path模块
Node.js中创建Buffer的方式主要如下几种://创建了一个长度为10字节的Buffer,相当于申请了10字节的内存空间,每个字节的值为0//结果为//创建了一个长度为10字节的Buffer, buffer中可能存在旧的数据,可能会影响执行结果,所以叫 unsafelet//通过字符串创建Buffer//通过数组创建Buffer//十进制转化为二进制给机器看，在终端显示的是十六进制方便人看。
2024-04-27 17:04:01
602
原创 ES13：类的新增特性、最外层的await、at...
Error对象多了一个cause属性来指明错误出现的原因。这个属性可以帮助我们为错误添加更多的上下文信息,从而帮助使用者们更好地定位错误。这是因为CommonjS模块的require()是同步加载,如果有顶层await,就没法处理加载了。ES13允许在类中通过static关键字定义一系列静态代码块,这些代码块。一起按照定义的顺序在类初始化的时候执行一次。顶层await只能用在ES6模块,不能用在CommonJ。,这些代码块会和穿插在它们之间的。await协程的一种方案。一个类可以定义任意多的。
2024-04-10 20:27:46
298
原创 ES11-12
2.Promise.any()跟Promise.race()方法很像,只有一点不同,就是Promise.any()不会因为某个Promise变成rejected状态而结束,必须等到所有参数Promise变成rejected状态才会结束。Promise.allSettled0)方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise,并带有一个对象数组,每个对象表示对应的promise结果。时，其返回右侧的操作数，否则返回左侧的操作数。
2024-04-10 20:26:03
2276
原创 ES7-10:async和await、异步迭代..
先写异步生成器把9个任务放到yield后，再写一个异步方法，里面for循环9次调用g.next()后在for await里按照顺序依次执行。// 简单理解就是yield返回的是一个遍历器对象，所以用for of遍历的时候由于await，就等元素自己遍历完，再下一个元素，就是异步了。面试题：几个异步任务放在一个数组中，写一个方法用for循环按照任务顺序依次执行（浏览器中用的少，node，js中用的多）对象的剩余参数：传参和赋值的时候都可以把剩余的属性和属性值放在一个新的对象中。(取出Symbol里面的值)
2024-04-10 20:25:15
820
原创 ES6-2:Iterator、Proxy、Promise、生成器函数...
Proxy的作用是在对象和和对象的属性值之间设置一个代理,获取或设置该对象的值,以及实例化等多种操作,都会被拦截住,经过这一层我们可以统一处理,我们可以认为它就是”代理器”Reflect可以用于获取目标对象的行为,它与Object类似,但是更易读,为操作对象提供了一种更优雅的方式。它的方法与Proxy是对应的。类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。看第一个.then返回的结果，如果是非promise对象，会自动转换为fulfilled对象。
2024-04-08 21:11:36
968
原创 ES6-数组、对象、函数扩展、Symbol
*/1.如果里面没有别的执行代码，只有return可以更简化：2.如果返回的是一个对象需要用括号包起来（防止浏览器解析成作用域）age:100})3.如果只有一个参数 可以省略（）${} */ 1. 如果里面没有别的执行代码，只有 return 可以更简化： let test =() => "111" 2. 如果返回的是一个对象需要用括号包起来（防止浏览器解析成作用域） let test =() =>({
2024-04-08 21:09:46
347
原创 PC端、移动端网页特效
offset系列 经常用于获得元素位置 offsetLeft offsetTopclient 经常用于获取元素大小 clientWidth clientHeightscroll 经常用于获取滚动距离 scrollTop scrollLeft注意页面滚动的距离通过 window.pageXOffset 获得1.插件的使用：1. 引入 js 插件文件。2. 按照规定语法使用。2.Swiper插件的使用：中文官网地址： https://www.swiper.com.cn/
2024-03-26 20:12:53
947
原创 事件高级、
不要给每个子节点单独设置事件监听器，而是事件监听器在其父节点上，利用冒泡原理影响设置每个子节点（重点）当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。事件冒泡是向上，给父节点添加了事件监听器后其中的子节点也会跟着触发，父节点以上的不受影响。事件捕获是向下，子节点添加监听器后其以上所有父节点会跟着触发，子节点以上不受影响。this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）e.target 是事件触发的元素。1.禁止鼠标右键菜单。
2024-03-19 19:05:46
551
原创 DOM、操作元素、节点操作
文档对象模型，是W3C组织推荐的处理可扩展标己语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。*实际开发中主要用来操作元素DOM树* {margin: 0;padding: 0;
2024-03-17 10:56:01
807
原创 JS第一阶段2
Math 对象不是构造函数，不需要new来调用，直接使用属性和方法，跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用， Date 实例用来处理日期和时间。在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1。
2024-03-16 10:22:46
851
原创 JS第一阶段1
利用函数关键字 function 自定义函数方式// 声明定义方式// 调用fn();因为有名字，所以也被称为命名函数调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面。
2024-03-12 19:51:30
870
1
原创 移动端常见布局
数值越小，排列越靠前，默认为0。注意：和 z-index 不一样。（index控制的是叠罗汉的效果，order是左右上下）.item {--要求当前网页使用IE浏览器最高版本的内核来渲染--> < meta http-equiv = " X-UA-Compatible " content = " IE=edge " > <!
2024-03-05 19:52:15
929
原创 移动端基础
视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口layout viewport、视觉视口visual viewport和理想视口ideal viewport。官网地址： http://necolas.github.io/normalize.css/ Normalize.css：保护了有价值的默认值。 Normalize.css：修复了浏览器的bug。 Normalize.css：拥有详细的文档。 Normalize.css：是模块化的。
2024-02-28 19:44:03
353
1
原创 CSS的2D、3D、浏览器私有前缀
转换transform 我们简单理解就是变形 有2D 和 3D 之分我们暂且学了三个 分别是 位移 旋转 和 缩放2D 移动 translate(x, y) 最大的优势是不影响其他盒子， 里面参数用%，是相对于自身宽度和高度来计算的可以分开写比如 translateX(x) 和 translateY(y)2D 旋转 rotate(度数) 可以实现旋转元素 度数的单位是deg2D 缩放 sacle(x,y) 里面参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子。
2024-02-21 17:36:54
1014
原创 HTML5、CSS新特性
在实际工作中，字体图标基本上都是用伪元素来实现的，好处在于我们不需要在结构中额外去定义字体图标的标签，通过content属性来设置字体图标的 编码。由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可。由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可。结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素。属性选择器，按照字面意思，都是根据标签中的属性来选择元素。/* 这个content是必须要写的 */
2024-02-19 21:37:30
793
1
原创 品优购案例
1.品优购项目规划1.1项目整体介绍1.2学习目的1.3开发工具以及技术栈1.4品优购搭建工作有些网站初始化的不太提倡 * { margin: 0; padding: 0; }比如新浪： html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0} 1.5 网站favicon图标favicon.ico 一般作用于作为缩略图的网站标志，它显示在浏览
2024-02-10 12:33:52
833
1
原创 vertical-align属性应用、常见布局技巧、CSS 初始化
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。微软雅黑 \5FAE\8F6F\96C5\9ED1。
2024-01-29 16:21:39
912
原创 精灵图、字体图标、css三角和用户界面样式
1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
2024-01-29 15:56:23
997
原创 web前端学习笔记2
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。选择器 { float: 属性值;为什么需要清除浮动？父级没高度。子盒子浮动了。影响下面布局了，我们就应该清除浮动了。
2023-12-21 19:58:23
962
原创 web前端学习笔记1
1.HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。2.HTML 不是一种编程语言，而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)。网页的总结：1.网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)2.网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页.
2023-12-16 15:33:03
114
1
原创 冒泡排序，选择排序，二分查找
1.冒泡排序是比较相邻位置的两个数，选择排序是按顺序比较，找最大值或者最小值;2.冒泡排序每一轮比较后，都需要换位置；选择排序每一轮比较都只需要换一次位置;3.冒泡排序是通过数去找位置，选择排序是给定位置去找数;1.优点:比较简单,空间复杂度较低，是稳定的;1.优点:一轮比较只需要换一次位置;前提条件：数组中的数据必须是有序的。2.缺点:效率低，不稳定。
2023-12-07 17:51:05
23
1
原创 方法递归、字符、IO流
InputStreamReader（字符输入转换流）对原始流进行包装，以提高原始流读写数据的性能。流使用完毕后，必须关闭，释放系统资源。推荐用2.4方式提高字节流读写性能。不支持追加，包装成低级流可以。不同编码读取时会乱码。
2023-12-02 15:33:59
28
1
原创 11.11考核总结
（4）成员变量如果没有被赋初值,则会自动以类型的默认值赋值(有一种情况例外,被final修饰但没有被static修饰的成员变量必须显式地赋值);（1）从语法形式上看,成员变量是属于类的而局部变量是在方法中定义的变量或是方法的参数;（3）从变量在内存中的生存时间上看,成员变量是对象的一部分,它随着对象的创建而存在,而局部变量随着方法的调用而产生,随着方法调用的结束而自动消失。（2）从变量在内存中的存储方式上看,成员变量是对象的一部分,而对象是存在于堆内存的,而局部变量是存在于栈内存的。（进行车顶状态的判断）
2023-11-18 21:21:13
46
1
原创 Arrays，简化代码，算法，正则表达式，异常
使用场景：如果某个Lambda表达式里只是调用一个实例方法，并且前面参数列表中的第一个参数是作为方法主调，后面的所以参数都是作为该实例方法的入参的。使用场景：如果某个Lambda表达式里只是调用一个静态方法，并且前后参数的形式一致，就可以用静态方法引用。使用场景：如果某个Lambda表达式里只是调用一个实例方法，并且前后参数的形式一致，就可以用实例方法引用。使用场景：如果某个Lambda表达式里只是在创建对象，并且前后参数情况一致，就可以用构造器引用。throws：用在方法上，抛出方法内部的异常。
2023-11-18 21:17:39
35
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人