- 博客(49)
- 收藏
- 关注
RSS订阅原创 H5都有那些事件？
onkeypress： 当按下并松开按键时运行脚本 (必须经历按下 、松开这一过程才触发)onkeydown： 当按下按键时运行脚本 (还没松开时就触发)onkeyup： 当松开按键时运行脚本 (松开时即触发)onmousedown： 当按下鼠标按钮时运行脚本。ondrop： 当被拖动元素正在被拖放时运行脚本。oninput： 当元素获得用户输入时运行脚本。onmouseup： 当松开鼠标按钮时运行脚本。onchange： 当元素改变时运行脚本。onload： 当加载时运行脚本。
2024-08-17 20:28:43
422
原创 什么是渐进增强和优雅降级?它们有什么不同？
优雅降级和渐进增强印象中是随着 CSS3 流出来的一个概念。由于低级浏览器不支持 CSS3， 但 CSS3 的效果又太优秀不忍放弃， 所以在高级浏览中使用 CSS3 而低级浏览器 保证最基本的功能。关键的区别 是他们所侧重的内容，以及这种不同造成的工作流程的差异。
2024-08-17 20:25:57
402
原创 css如何使一个盒子水平垂直居中
方法三：利用 display：flex;方法二：利用 margin:auto;方法一：利用定位(常用方法,推荐）方法四：利用 transform。
2024-08-15 17:16:33
890
原创 让Chrome支持小于12px的文字方式有哪些
针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行放缩。zoom的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸。该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小。zoom:50%，表示缩小到原来的一半。zoom:0.5，表示缩小到原来的一半。
2024-08-13 17:04:27
587
原创 Css预编语言的理解？有哪些区别?
Css作为一门标记性语言，语法相对简单，但同时也带来一些问题。需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，Css预处理器便是针对上述问题的解决方案。Css 预编译器把变量赋予作用域，也就是存在生命周期。就像 js一样，它会先从局部作用域查找变量，依次向上级作用域查找。less声明的变量必须以@开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开。Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。：模块化就是将Css代码分成一个个模块。
2024-08-13 17:03:50
717
原创 transform， transition， animation 的作用
2、transition 样式过渡， 从一种效果逐渐改变为另一种效果 transition 是一个合写属性 Transition:transition-property transition-duration transition-timing-function transition-delay 从左到右分别是： css 属性、 过渡效果花费时间 、速度曲线、 过渡开始的延迟时间 transition 通常和 hover 等事件配合使用， 需要由事件来触发过渡。
2024-08-12 17:32:20
473
原创 Localstorage 、sessionStorage 、cookie 的区别
1 、cookie 数据始终在同源的 http 请求中携带 (即使不需要)， 即 cookie 在浏览器和服务 器间来回传递， 而 sessionStorage 和 localStorage 不会自动把数据发送给服务器， 仅在本 地保存。2、存储大小限制也不同， cookie 数据不能超过 4K，同时因为每次 http 请求都会携带 cookie 、所以 cookie 只适合保存很小的数据，如会话标识。4、作用域不同， sessionStorage 不在不同的浏览器窗口中共享， 即使是同一个页面；
2024-08-12 17:31:05
513
原创 js函数的arguments 对象
它是⼀个类似数组的对象，因为它有⼀个length属性， 我们可以使⽤数组索引表示法arguments[1]来访问单个值，但它没有数组中的内置⽅法， 如：forEach、reduce、filter和map。我们可以使⽤Array.prototype.slice将arguments对象转换成⼀个数组。arguments对象是函数中传递的参数值的集合。或者使用es6的语法扩展运算符。
2024-08-11 17:27:58
428
原创 js的原理(运⾏机制)
在执⾏同步代码的时候，如果遇到了异步事件，js引擎并不会⼀直等待其返回结果，⽽是会将这个事件挂起，继续执⾏ 执⾏栈中的其他任务 所有任务可以分成两种，⼀种是同步任务（synchronous），另⼀种是异步任务（asynchronous）。异步任务指的是，不进⼊主线程、⽽进⼊"任务队列"（task queue）的任务，只有等主线程任务执⾏完毕，"任务队 列"开始通知主线程，请求执⾏任务，该任务才会进⼊主线程执⾏。同步任务指的是，在主线程上排队执⾏的任务，只有前⼀个任务执⾏完毕，才能执⾏后⼀个任务；
2024-08-11 17:23:55
477
原创 我们在本地工程常会修改一些配置文件， 这些文件不需要被提交， 而我们又不想每次执行 git status 时都让这些文件显示出来， 我们该如何操作
注意：忽略/target/class 文件夹下所有后缀名为.settings， .imp 的文件， 忽略所有后缀名 为.ini 的文件。首先利用命令 touch .gitignore 新建文件 $ touch .gitignore ,然后往文件中添加需要忽略哪些文件夹下的什么类型的文件。
2024-08-10 17:28:44
311
原创 Get 和 Post 的区别？什么情况下用到
3、POST比 GET 安全， 因为数据在地址栏上不可见 最本质的区别 Get 是用来从服务器上获得数据， 而 post 是用来向服务器上传递数据。2 、GET 的 URL 会有长度上的限制， 则 POST 的数据则可以非常大。3 、收集的数据及 html 表单内的输入字段名称的总长不超过 1024 个字。2、若使用 get 方法， 则表单上收集的数据可能让 URL 过长。1 、请求的结果有持续性的作用， 例如： 数据库内添加新的数据行。1 、请求是为了查找资源， html 表单数据仅用来搜索。
2024-08-10 17:23:23
414
原创 ES6 的导入导出模
/使用 export default 时，对应的 import 语句不需要使用大括号。//不使用 export default 时，对应的 import 语句需要使用大括号。//也可以使用大括号指定所要输出的一组变量。导出通过 export 关键字。通过 import 关键字。
2024-08-07 20:15:25
504
原创 ES6对数据类型都做了那些优化
ES5 函数里的 this 总是指向函数执行时所在的对象， 这使得在很多情况下this 的 指 向变得很 难理解， 尤其是非严格模式情况下， this 有时候会指向全局对象， 这甚至也 可以归结为语言 层面的 bug 之一。ES6 的箭头函数优化了这一点，它的内部没有 自 己的 this,这也就导致了this 总是指向上一层的 this，如果上一层还是箭头函数， 则 继 续向上指，直到指向到有自己this 的函数为止， 并作为自己的this。ES6 以更 简 洁更明确的方式进行函数默认赋值。
2024-08-07 20:08:37
683
原创 浏览器的缓存机制，强缓存与协商缓存
但缓存也可能导致问题，例如当服务器上的资源已更新但浏览器仍然使用旧版本的资源时，可能导致页面不一致或错误。开发者可以通过适当配置HTTP缓存头部和使用Web存储来控制浏览器缓存的行为，以满足特定的需求和业务逻辑。协商缓存：如果资源在缓存有效期内过期，浏览器会向服务器发送请求，但不会要求服务器返回整个资源。服务器会检查资源的修改日期或标识等信息，并根据情况返回新资源或告诉浏览器继续使用缓存。强缓存：浏览器在请求资源之前会首先检查本地缓存，并根据缓存的有效期来决定是否使用缓存。
2024-08-06 21:18:51
339
原创 se6的set和map是什么？有什么方法？
set(key, value)：set 方法设置 key 所对应的键值，然后返回整个 Map 结构。如果删除失败，则返回 false。get( key)：get 方法读取 key 对应的键值，如果找不到 key，则返回 undefined。特点： Set 中的元素是无序的，没有索引，因此不能像数组一样通过索引访问元素，它本身是一个构造函数。常见用法：1.存储和检索与某个键相关联的数据，例如存储用户信息，其中键是用户名，值是用户对象。set：用来存储一组唯一的值，它确保其中的每个值都是唯一的，不会出现重复。
2024-08-06 21:17:23
493
原创 前端new操作符的实现原理
（4）判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。（3）让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性）（2）设置原型，将对象的原型设置为函数的 prototype 对象。（1）首先创建了一个新的空对象。
2024-08-05 20:06:09
329
原创 js代码输出的结果，任务队列知识点
5遇到timer2，它是一个宏任务，将其加入宏任务队列，此时宏任务队列有两个任务，分别是timer1、timer2；4这样第一轮宏任务就执行完了，开始执行微任务Promise.resolve().then，打印出promise1。6这样第一轮微任务就执行完了，开始执行第二轮宏任务，首先执行定时器timer1，打印timer1；7遇到Promise.resolve().then，它是一个微任务，加入微任务队列。1首先，Promise.resolve().then是一个微任务，加入微任务队列。
2024-08-05 20:02:59
362
原创 怎样理解Vue 的单向数据流
3 、所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop 的更新会向下流动到子组件中，但是反过来则不行，这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。4、每次父级组件发生更新时，子组件中所有的prop都将会刷新为最新的值， 这意味着你不应该在一个子组件内部改变prop。5、子组件想修改时， 只能通过$emit派发一个自定义事件，父组件接收到后，由父组件修改。2、子组件内部不能直接修改从父级传递过来的数据。1、数据从父级组件传递给子组件，只能单向绑定。
2024-08-03 12:00:00
482
原创 js的几大设计模式
1.1如何实现：设置一个变量, 通过变量来判断当前的类有没有实例化, 如果已经实例化了,不再实例化,直接返回实例对象。保证一个类只能产生一个实例，使用构造函数实例化的时候，不管实例化多少次，都是同一个对象，也就是一个构造函数一生只能 new 出一个对象。当需要改变一个程序的功能或者给这个程序增加新功能的时候，可以使用增加代码的方式，但是不允许改动程序的源代码。组合模式就是用小的子对象来构建更大的对象，而这些小的子对象本身也许是由更小的“孙对象”构成的。封闭：封闭的是函数(封装的源代码)(不能改动)
2024-08-03 11:30:00
536
原创 Vue的路由实现模式：hash模式和history模式
1、hash模式：在浏览器中符号“#”， #以及#后面的字符称之为hash， 用window.location.hash读取。特点：hash虽然在URL中， 但不被包括在HTTP请求中；用来 指导浏览器动作，对服务端安全无用， hash不会重加载页面。2.2) replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
2024-08-02 17:06:05
563
原创 router-link组件中的属性——active-class
因为to="/" 引起的， active-class选择样式时根据路由中的路径去匹配， 然后显示， 例如在my页面中， 路由为localhost:8081/#/my，那么to="/”和to="/my"都可以匹配到， 所 有都会激活选中样式。
2024-08-02 17:03:03
810
原创 vuex全局状态管理，解决了什么问题
Vuex 是 Vue.js 官方提供的状态管理库，用于管理应用程序中的共享状态解决的问题：1.在项目中，多个组件可能需要共享一个状态，vuex提供一个全局的状态管理机制，使得多个组件可以直接访问和修改共享的状态2.状态的响应式更新，当全局状态发生变化时，所有使用该状态的组件都会对应的更新。
2024-07-31 13:51:21
545
原创 vue的路由守卫
在某些应用中，不同用户可能具有不同的权限级别，前置守卫可用于检查用户的权限，并根据其 权限级别允许或拒绝访问某些路由。：如果用户正在编辑表单而尚未保存更改，前置守卫可以用于显示警告消息，以确保用户不 会离开页面而不保存更改。beforeResolve：全局解析守卫，和 beforeEach 类似但是调用时机不同。afterEach: 全局的后置守卫，跳转到页面路由之后调用的函数，做标题配置。beforeEach：全局前置守卫，可以做路由权限（跳转之前被调用）1.beforeEnter 路由前置独享守卫。
2024-07-31 13:49:38
421
原创 $route 和$router 的区别是什么
router为VueRouter的实例， 相当于一个全局的路由器对象， 里面含有很多属性和子对 象， 例如history对象， 经常用的跳转链接就可以用this.router.push会往history栈中添加一个 新的记录。返回上一个history也是使用$router.go方法。$route是“路由信息对象”， 包括path， params， hash， query， fulPath， matched， name等路由信息参数。
2024-07-30 10:24:08
500
原创 vue中v-show和v-if指令的共同点和不同点
如果要频繁切换某节点时，使用v-show (无论true或者false初始都会进行渲染， 此 后通过css来控制显示隐藏， 因此切换开销比较小， 初始开销较大)，如果不需要频繁切换某 节点时，使用v-if (因为懒加载， 初始为false时，不会渲染， 但是因为它是通过添加和删除 dom元素来控制显示和隐藏的， 因此初始渲染开销较小， 切换开销比较大)2.4) 性能比较 v-show只编译一次，后面其实就是控制css， 而v-if不停的销毁和创建， 故v show性能更好一。
2024-07-30 10:21:57
422
原创 vue中，当数据更之后，视图没有对应的更新
Vue.js中对数据的更改是异步的，当你修改数据时，Vue并不会立即更新DOM，而是将更改放入一个队列中，然后在下一个事件循环中才会更新视图。如果在同一个事件循环中进行多次数据修改，Vue可能会合并这些修改，只执行一次更新。如果你通过赋值方式新增了一个属性，Vue并不会触发视图更新。来确保在DOM更新后执行代码，或者使用Vue提供的响应式方法。解决方法：确保在数据变更后使用set方法来添加新属性。：确保你的数据是响应式的，即通过Vue的。中，Vue将无法追踪这个数据的变化。解决方法：你可以使用。
2024-07-29 17:22:27
661
原创 vue的nextTick的作用
当我们需要在DOM更新完成后执行一些操作时，可以使用nextTick来确保操作在DOM更新之后执行，获取更新后的 DOM。异步更新：nextTick能够将回调函数推迟到DOM更新之后执行，确保操作在下次DOM更新周期之后执行，避免直接操作DOM时出现的问题。异步DOM操作：当需要在DOM更新之后执行一些DOM操作时，可以使用nextTick确保操作在下一个更新周期执行。监听DOM更新：可以使用nextTick来监听DOM的更新状态，执行一些需要在DOM更新后进行的操作。
2024-07-29 17:19:36
487
原创 vue项目的路由如何传参，应用场景
路由传参方法一： params1. 在路由的配置中 path: ''url':proid' 先在配置中添加2. 跳转页面的时候携带拼接参数 router.push('url' + proid)3. 在进入的页面通过 useRoute 进行接收路由传参方法二：query1. 通过 router.push({query:{}}) 传递对象的方式进行传参2. query 是一个对象，我们可以在对象中添加多个参数进行传递3. 在进入的页面中可以通过 useRoute 进行接收。
2024-07-27 16:13:25
715
原创 vue的虚拟Dom和diff算法
当响应式数据变化时，Vue 会生成一个新的虚拟 DOM 树，表示更新后的页面状态，再通过diff算法比较新旧dom，找出变化的部分。Vue的diff算法是用于比较虚拟DOM树的差异，并且有针对性的差异应用到真实DOM上的一种算法。减少实际DOM操作次数：通过比较新旧虚拟DOM树的差异，Vue可以精确地知道哪些地方需要进行修改，从而减少了不必要的DOM操作次数。最小化DOM操作的复杂度：Vue的diff算法会根据节点的类型、属性、位置等信息进行判断和优化，以尽量减少DOM操作的复杂度。
2024-07-27 16:12:10
414
原创 常用的正则表达式有哪些？正则有哪些方法？
2.exec()方法用于在字符串中执行一个搜索匹配。如果找到了匹配，exec()方法返回一个数组，其中存放匹配的结果，如果没有找到匹配，则返回null。3.match()方法用于在字符串中查找一个或多个与正则表达式匹配的字符串。它返回一个数组，其中存放匹配的结果，或者在没有找到匹配时返回null。1.test()方法用于检测一个字符串是否匹配某个正则表达式。它返回一个布尔值，表示是否匹配。4.replace()方法用于将字符串中匹配正则表达式的部分替换为新的子串。
2024-07-26 20:23:18
461
原创 ES6中模板语法与字符串处理
存在性判定：在过去，当判断一个字符/字符串是否在某字符串中时，只能用 indexOf > -1 来做。现在 ES6 提供了includes方法：它会返回一个布尔值来告诉你是否存在。字符串不仅更容易拼了，也更易读了，代码整体的质量都变高了。这就是模板字符串的第一个优势——允许用${}的方式嵌入变量。ES6 提出了“模板语法”的概念。●模板字符串完全支持“运算”式的表达式，可以在${}里完成一些计算。基于第二点，可以把一些简单的计算和调用丢进 ${} 来做。●在模板字符串中，空格、缩进、换行都会被保留。
2024-07-26 20:12:40
397
原创 Vue 的父子组件生命周期钩子函数执行顺序
Vue 的父子组件钩子函数的执行顺序可以归类为4个 部分：第一部分：首次加载渲染 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted第二部分：父组件修改子组件的props值时： 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated。
2024-07-25 16:01:43
646
原创 Vue常用的指令都有哪些？都有什么作用？什么是自定义指令？
5、v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if默认值为false) v else-if 必须和 v-if 连用v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误。2、v-for格式： v-for="字段名in(of)数组json"循环数组或json(同angular中的ng repeat),需要注意从vue2开始取消了$index。4、v-hide 隐藏内容 (同angular中的ng-hide) 显示内容 (同angular中的ng-show)
2024-07-25 14:30:15
559
原创 什么是JSON，对JSON的理解
因为 JSON 的语法是基于 js 的，因此很容易将 JSON 和 js 中的对象弄混，但是应该注意的是 JSON 和 js 中的对象不是一回事，JSON 中对象格式更加严格，比如说在 JSON 中属性值不能为函数，不能出现 NaN 这样的属性值等，因此大多数的 js 对象是不符合 JSON 对象的格式的。在前端通过将一个符合 JSON 格式的数据结构转为JSON 字符串，然后将它传递到后端，后端通过 JSON 格式的字符串解析后生成对应的数据结构，以此来实现前后端数据的一个传递。
2024-07-24 21:24:57
351
原创 什么是js内存泄漏？哪些操作会造成内存泄漏？
1、垃圾回收器定期扫描对象， 并计算引用了每个对象的其他对象的数量。如果一个对象 的引用数量为0 (没有其他对象引用过该对象)， 或对该对象的惟一引用是循环的，那么该对 象的内存即可回收。3、闭包、控制台日志、循环 (在两个对象彼此引用且彼此保留时， 就会产生一个循环)2、setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。哪些操作会造成内存泄漏？
2024-07-24 21:16:52
430
原创 浏览器的缓存有哪些 ?什么时候使用强制缓存 ? 什么时候使用协商缓存 ?
浏览器缓存分为强缓存和协商缓存，当存在缓存时，客户端第一次向服务器请求数据时，客 户端会缓存到内存或者硬盘当中，当第二次获取相同的资源，强缓存和协商缓存的应对方式 有所不同。协商缓存：当客户端第二次向服务器请求相同的资源时，先向服务器发送请求"询问"该请求 的文件缓存在与服务器相比是否更改，如果更改，则更新文件，如果没有就从内存/硬盘中 读取。强缓存：当客户端第二次向服务器请求相同的资源时，不会向服务器发送请求，而是直接从 内存/硬盘中间读取。
2024-07-23 15:46:53
786
原创 js的懒加载和预加载
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一 般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。懒加载也叫延迟加载，延迟加载网络资源或符合某些条件时才加载资源。常见的就 是图片延时加载。1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.懒加载的意义：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
2024-07-23 15:45:34
423
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人