- 博客(86)
- 收藏
- 关注
原创 响应式布局的5种实现方案
1、子元素的 top 和 bottom 如果设置百分比,则相对于直接非 static 定位(默认定位)的父元素的高度,同样,子元素的 left 和 right 如果设置百分比,则相对于直接非 static 定位(默认定位的)父元素的宽度。比如,当浏览器的宽度或者高度发生变化时,通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。如果移动端有 5 个不同的视口宽尺寸 750 ,640,480,375,320,则在不同尺寸下,对应的 1vw 的 px 值如下表。
2023-12-01 12:01:33 169
原创 几种前端数据存储方式(记录)
1. cookiecookie生成cookie是存在客户端,session存在服务器端。在cookie当用户第一次访问网页时,服务器会给客户端返回一个cookie,在cookie中保存着服务器端session文件的位置信息,用户第一次访问服务器,服务器就会为它创建一个session文件,并将session的标识保存在cookie中发给它。在这之后,通过为每个请求添加 Cookie HTTP 头将信息发送回服务器。cookie访问和设置在 JavaScript 中可以通过 document.cookie
2021-07-22 15:05:18 3487
原创 Vue中使用keep alive做缓存,组件中含多个iframe每次加载如何做到缓存问题
问题场景:1.一个公共组件包含多个iframe嵌套页面,希望是每次激活的iframe页面能做到缓存内容;2.这个公共组件注册共享一个路由;原先解决思路:使用keep-alive标签做缓存,结果公共组件是缓存了,但每次切换加载iframe页面都被刷新了。最后借鉴了位仁兄的解决思路(https://blog.csdn.net/saowen163/article/details/106318374?utm_medium=distribute.pc_aggpage_search_result.non
2020-08-31 09:30:14 4676 5
原创 JQ写的雪花飘飘
//飘雪$(function() { var minSnow = 5; var MaxSnow = 100; var speed = 900; //毫秒 var windowwidth = $(document).width(); var endheight = $(document).height(); var falt = $('#snow').html("❄"); $(function() { task(); .
2020-05-15 23:00:19 121
原创 JavaScript 全局属性/函数
JavaScript 全局属性属性 描述 Infinity 代表正的无穷大的数值。 NaN 指示某个值是不是数字值。 undefined 指示未定义的值。 JavaScript 全局函数函数 描述 decodeURI() 解码某个编码的 URI。 decodeURIComponent() 解码一个编码的 URI 组件。 encodeURI() 把字符串编码为 URI。 encodeURIComponent() 把字
2024-04-12 09:00:00 221
原创 JavaScript Math 对象
Math 对象用于执行数学任务。Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math()。
2024-04-11 21:44:59 533
原创 代码使用了 any 类型,如何才能让ESLint不告警
如果你确实需要在某些情况下绕过类型检查,你可以使用类型守卫或类型断言,但这应该谨慎使用,并带有充分的注释说明为什么需要这样做。:如果你知道 value 可能具有哪些属性或方法,你可以使用接口或类型别名来定义这些属性或方法的类型。:如果你发现自己在多个地方使用相似的结构,并希望避免 any,你可以创建更具体的类型来替代它。:如果 value 的类型不固定,并且你希望保持灵活性,你可以使用泛型来定义你的类型。:如果 value 有特定的类型,那么你应该使用那个类型替代 any。
2024-03-30 09:00:00 264
原创 Typescript语法总结
Typescript本质上是在 JavaScript 上增加一套静态类型系统(编译时进行类型分析),强调静态类型系统是为了和运行时的类型检查机制做区分,TypeScript 的代码最终会被编译为 JavaScript。实现可选参数的功能。一个类只能允许继承一个父类,但是可以实现多个接口,在定义的时候,使用implement语句来声明类所实现的接口,如果是实现多个接口的话,就使用逗号分开。类的静态成员不属于某个实例,而是类的本身,静态成员是通过static关键字来定义的,只能通过类名来访问。
2024-03-27 09:01:53 703
原创 vue3之路由导航故障
通常一个导航守卫函数中会发生三件事:1.通过调用 return false 中断了这次导航2.通过返回一个新的位置,重定向到其他地方 (例如,return ‘/login’)3.抛出了一个 Error。
2024-03-23 23:09:49 185
原创 vue3 导航守卫
Vue 3 的导航守卫与 Vue 2 相比,在 API 和使用方式上并没有太大的变化,但 Vue 3 的响应式系统和 Composition API 为导航守卫提供了更多的灵活性。
2024-03-20 21:55:27 266
原创 vue3之声明式和编程式导航
在组件内部,可以使用router属性访问路由,例如this如果使用组合式 API,你可以通过调用 useRouter() 来访问路由器,导入后赋值给变量就行了,如:const router = useRouter();
2024-03-19 09:06:13 464
原创 Vue 3 之 嵌套路由
在用Vue 3 构建复杂的单页面应用(SPA)时,需要创建出多层次的页面结构,这时候嵌套路由允许你在一个路由内部定义另一个路由,这非常有用。
2024-03-18 09:15:38 272
原创 javascript的动态作用域和静态作用域
当一个函数内部使用某个变量时,会先在当前函数的作用域内查找该变量,如果找不到,则会在上级作用域中查找,直至找到全局作用域。词法作用域让foo()中的a通过RHS(Right-Hand Side 赋值表达式中的右侧部分)引用带了全局作用域中的a,因此会输出2。
2024-03-17 09:00:00 174
原创 vue3之带参数的动态路由
/ 引入 Vue 和 Vue Router// 引入组件path: '/',},path: '/user/:id', // 这里是带参数的动态路由routes});
2024-03-16 22:43:08 287
原创 vue3之异步组件(defineAsyncComponent)
Suspense>-- 具有深层异步依赖的组件 -->-- 异步组件加载没成功之前,在 #fallback 插槽中显示 “正在加载中” -->Loading...//或者...-- 主要内容 -->-- 加载中状态 -->正在加载...常常会将 和 、 等组件结合。要保证这些组件都能正常工作,嵌套的顺序非常重要。
2024-03-13 09:29:01 442
原创 vue3依赖注入(provide 和 inject)
依赖注入(provide 和 inject),解决Prop 逐级透传问题。跨多组件转递参数,避免使用Prop 逐级透传。
2024-03-12 09:08:10 459
原创 vue3插槽 Slots
Vue插槽(Slot)的本质是。插槽允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽,可以将其视为组件封装期间为用户预留的内容占位符。插槽的显示与否以及具体如何显示,是由父组件来决定的,而插槽显示的位置则由子组件自身决定。官方给了一个理解插槽的例子:和avaScript 函数作类比,其概念是类似。${:父组件模板中的表达式只能访问父组件的作用域;子组件模板中的表达式只能访问子组件的作用域。这和 JavaScript 的词法作用域规则是一致的。
2024-03-09 23:15:37 395
原创 详解vue3的组件 v-model
通过 modelValue 作为 prop 和 update:modelValue 作为事件来实现的。这意味着你可以自定义 v-model 的行为和绑定的属性。v-model 是 Vue.js 中一个非常实用的指令,它简化了双向数据绑定的过程。
2024-03-08 09:55:56 361
原创 vue3 的defineEmits()高级用法
在 Vue 3 中,defineEmits 是用于定义组件可以触发的自定义事件的函数。它是 Vue 3 的 Composition API 的一部分,用于替代 Vue 2 选项式 API 中的 emits 选项。
2024-03-07 09:27:33 517
原创 JavaScript 中闭包小结
在 JavaScript 中,闭包(Closure)是一个非常重要的概念,也是其功能强大的原因之一。闭包可以简单理解为一个能访问和操作其外部词法环境(lexical environment)的函数。这意味着(或称为内嵌函数)。这是因为闭包可以维持一个到其外部作用域的引用。
2024-03-05 09:19:38 420
原创 javascript 的eval()和with是干嘛的
它接收一个字符串参数,并将其作为 JavaScript 代码来解析和执行。这意味着你可以使用 eval() 动态地执行任何 JavaScript 代码。
2024-03-03 19:54:16 521
原创 javascript中使用‘use strict’和不使用的区别
严格模式使得 JavaScript 对某些可能的问题抛出错误,而在非严格模式下,这些问题可能会被忽略。例如,未声明的变量(即全局变量)在非严格模式下会被隐式地创建为全局变量,而在严格模式下会抛出错误。在严格模式下,this 关键字的值在函数调用时始终为 undefined(除非该函数是对象的方法)。在严格模式下,eval() 函数的作用域限制在调用它的函数内部,而不是全局作用域。这有助于防止使用未声明的变量,从而减少潜在的错误(例子如下:)在严格模式下,函数声明必须在代码块的顶部,否则会导致语法错误。
2024-03-01 16:17:38 201 1
原创 WebSocket详解
Sec-WebSocket-Accept字段是服务器在浏览器提供的Sec-WebSocket-Key字符串后面,添加 RFC6456 标准规定的“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”字符串,然后再取 SHA-1 的哈希值。WebSocket 的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。(6)协议标识符是ws(如果加密,则为wss,对应 HTTPS 协议),服务器网址就是 URL。
2023-12-17 13:36:52 258
原创 vue2学习笔记(高阶)
abstract 模式针对的是没有浏览器环境的情况,比如 Weex 客户端开发,内部是没有浏览器 API 的,那么 Vue-Router 自身会对环境做校验,强制切换到 abstract 模式,如果默认在 Vue-Router 的配置项中不写 mode 的值,在浏览器环境下会默认启用 Hash 模式,在移动客户端下使用 abstract 模式。由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。
2023-12-01 11:59:28 732
原创 如何实现多任务管理
分配任务出去,需要在收任务之前的一天或一个星期,提醒一下对方提交时间快到了,避免到规定时间还没有完成,造成措手不及。- 这个任务有没有必要 ---存在是否多余。- 这个目标是否重要 ---重要性。- 为什么出现这个任务 ---原因。- 对每项细项工作,需要什么样的技能或素质,谁是最合适的负责人?有什么样的质量要求?- 这个任务是为了实现什么目标 ---目的。- 实现这个目标,需要什么资源?
2023-09-08 23:16:22 189
原创 koa2快速2分钟搭建web服务器
koa不在内核方法中绑定任何中间件,它仅仅是一个轻量级的函数库,几乎所有功能都必须通过第三方插件来实现。项目基本依赖配置package.json,使用此配置可直接npm install下一个应用运行起来。koa2依赖Node.js 7.6.0或者更高版本。,Koa2更加的便利,所以默认选用Koa2。Koa是一个基于Node的web服务。7、封装lowdb插件,用于数据存储。Koa1它的主要特点是,使用了。是koa2实现异步是通过。,koa1实现异步是通过。3、koa请求跨域配置。6、post方法请求接口。
2023-09-05 10:36:40 286 1
原创 webpack学习笔记
但是我们的项目中可能存在大量的非JavaScript文件,如HTML、CSS、Typescript、txt,图片文件等,他们可能就被js文件依赖,这时候就很难打包上他们。热更新模块监测到文件名变化后,会通过websocket将这个新的文件发送到浏览器,浏览器重新执行该文件,完成局部更新。解决这个问题,我们需要一些额外的代码帮助webpack识别js文件中的嵌套依赖。nodejs使用一个清单文件来记录当前所有的资源文件,这个清单文件也正是热更新模块的监测对象。多页面应用打包产生的输出,结果也会有很多个。
2023-08-26 17:32:03 938
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人