前端学习
文章平均质量分 59
周万宁.FoBJ
不辜负生活中的每一份热爱
展开
-
关于我在vue3中使用swiper的使用碰到swiper-slide的width特别大的这件事儿
在加上其他的一些样式会将swiper撑开,swiper大小变化后影响后面slide的width的计算.swiper大小可变, 内部的slides的width是根据swiper的大小进行计算的,因为内部的。还要注意swiper可变的情况,要么对slide大小进行控制,要么对swiper进行控制, 可以使用。非常大, 奇怪的是我没有设置任何的行内样式啊。所以在使用swiper的时候除了注意。自己在写样式的时候设置为。属性对最大宽度进行限制。原创 2024-07-17 01:05:54 · 867 阅读 · 0 评论 -
ES6 Promise的使用
如果说,当我们需要发送多个异步异步请求,并且每个请求之间需要相互依赖,那这个时候,我们只能以嵌套的方式来解决 形成" 回调地狱"//每个请求之间需要相互依赖...})})})代码逻辑书写顺序与执行顺序不一致,不利于阅读与维护异步操作的顺序变更时,需要大规模的代码重构回调函数基本都是匿名函数,bug追踪困难。原创 2022-10-17 11:06:48 · 199 阅读 · 0 评论 -
ES6解构赋值
解构赋值语法是一种 Javascript 表达式。通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量。原创 2022-10-12 22:33:28 · 197 阅读 · 0 评论 -
let,const,var的三者的异同(特点与区别)
var,const,let都可以的声明变量,例如。原创 2022-10-12 13:48:47 · 200 阅读 · 0 评论 -
前端发送请求的几种方式
Asynchronous JavaScript + XML(异步 JavaScript 和 XML), 其本身不是一种新技术,而是一个在 2005 年被 Jesse James Garrett 提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括:HTML 或 XHTML, CSS, JavaScript, DOM, XML (en-US), XSLT, 以及最重要的 XMLHttpRequest。原创 2022-10-09 00:11:33 · 3536 阅读 · 0 评论 -
原型和原型链
所有函数都有一个prototype(原型)属性新建对象的时候都会默认调用构造器方法,构造函数里有prototype(原型)属性,而对象中的_proto_属性指向的是他的构造函数的prototype也就是说一个对象的_proto_(隐式原型)===其构造函数的prototype_proto_已被弃用,但是现在目前常见的浏览器仍旧支持,可以使用Object.getPrototypeOf(obj)获得原型//1)所有引用类型都有一个_proto_(隐式原型)属性,属性值是一个普通的对象或null。原创 2022-10-07 00:08:01 · 99 阅读 · 0 评论 -
事件流 & 事件的执行过程
事件流描述的就是从页面中接受事件的顺序,而早期的IE和Netspace提出了完全相反的事件流的概念,IE事件流是事件冒泡,而Netspace的事件流就是事件捕获。IE提出的事件流就是事件冒泡,几从下至上,从目标触发的元素逐级向上传播,直到window对象。2)处于目标阶段:事件目标阶段(对真正用户发生交互的标签进行触发事件),事件目标就指的该标签。而Netspace的事件流就是事件捕获,即从document逐级向下传播到目标元素,3)事件冒泡阶段冒泡阶段(执行一次完整的冒泡)二.事件冒泡事件捕获。原创 2022-10-05 10:55:01 · 357 阅读 · 0 评论 -
js事件的执行机制
同步和异步任务分别进入不同的执行"场所",同步的直接进入主线程,异步任务进入 Event Table(事件表)并注册函数。js是一门单线程语言,js任务是一个一个顺序执行的,就像是只有一个核酸窗口,做核酸的人需要一个一个排队做核酸。2.主线程提取并执行事件队列的所有微任务,并注册微任务中的异步任务到事件队列中,同样,js任务也要一个一个顺序执行,如果一个任务耗时过长,那么后一个任务也必须要等着。3.执行事件队列中所有的微任务,并将微任务中的异步任务到事件队列中。异步任务分为 宏任务 与 微任务。原创 2022-10-03 23:46:40 · 151 阅读 · 0 评论 -
0022.JSON与js对象的相互转换
JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,所以JSON本质是一个字符串,通过JSON调用相应的方法,JSON和JS对象可以互相转换。原创 2022-10-02 15:48:14 · 194 阅读 · 0 评论 -
如何根据地理位置获取城市编码 / (高德地图) 获取城市编码API / 经纬度获取城市or城市编码
2022年9月29日,今天在做搜索天气的页面的时候遇到了这个问题,刚开始想用导入json文件的方法来去弄这个,有些json文件并没有做到那个精确,假如用到的地理位置是某个县,有可能就无法获取到城市编码.还需要自己去写方法,来截取存取地理位置的字符串.这里提供一个简单的方法,我们可以去使用某些地图平台的API(当然需要联网的情况下),去获取城市编码,比如百度地图或者高德地图.这里我使用的是高德地图.在文章的结尾我会附上原平台链接.代表的参数包括必填参数和可选参数。下面的列表枚举了这些参数及其使用规则。原创 2022-09-29 14:51:06 · 7337 阅读 · 1 评论 -
get和post请求的区别
HTTP定义了与服务器进行交互的不同方法,常用的有四种:GET,POST,PUT,DELETE其中,GET和POST最常用GET一般用来获取资源,他只是获取,查询数据,不会修改服务器数据,从这点来讲,他是安全的.由于他是读取的,因此可以对GET请求的数据进行缓存POST一般向服务器发送修改请求,进行数据的修改。原创 2022-09-28 22:29:51 · 102 阅读 · 1 评论 -
css中@font-face的使用
format]定义字体的格式,用来帮助浏览器识别字体,主要有以下这些格式:[truetype(.ttf)、opentype(.otf)、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)]font-face是css3中允许使用自定义字体的一个模块,它主要是把自己定义的web字体嵌入网页中。src:[url]加载字体可以是相对路径,可以是绝对路径,也可以是网络地址。font-weight:定义加粗样式。font-style:定义字体样式。原创 2022-09-26 22:22:35 · 1623 阅读 · 1 评论 -
JavaScript动画和CSS3动画的区别
如果动画只是简单的状态切换,不需要中间过程控制,这种情况下,CSS动画是优选方案,它可以让你将动画逻辑放在样式文件里,而不会让你的页面充斥JavaScript库,然而如果你在设计很复杂的客户端界面或者开发一个有着复杂UI状态的APP,那么你应该使用JS动画,这样你的动画可以保持高效,并且你的工作流也更可控,所以再实现一些小的交互动画的时候,就多考虑CSS动画,对于一些复杂控制的动画,使用JavaScript比较可靠。原创 2022-09-24 15:14:03 · 339 阅读 · 1 评论 -
JS判断一个值是什么类型
判断js数据类型有很多方法,我这里介绍以下三种常见的方法1.typeof运算符typeod是最常见的,使用它会返回一个字符串,设置函数对象和基本类型(js中的基本类型:number,string,boolean,null,undefined,object 还有ES6新增 symbol)的判断2.instanceof操作符(基于原型链)obj instanceof Object实质就是:instanceof操作符判断做操作数对象的圆形链上是否有右边这个构造函数的prototype属性,也就是说原创 2022-09-24 14:36:37 · 278 阅读 · 0 评论 -
JavaScript 中的作用域、预解析与变量声明提升
ES6之前 JavaScript 采用的是函数作用域 + 词法作用域 ES6 js采用的是块级作用域+词法作用域。局部作用域一般只在固定的代码片段内可以访问到,而对于函数外部都是无法访问的,最常见的例如函数内部,变量提升:定义变量的时候,变量的声明会被提升到作用域的最上面,变量的赋值不会提升。在ES6之前,只有函数可以划分变量的作用域,所以在函数外面无法访问函数内的变量。凡是代码块就可以划分变量的作用域,这种作用域的规则就叫块级作用域,块级作用域和函数作用域描述的是,什么东西可以划分变量的作用域。原创 2022-09-23 20:07:48 · 250 阅读 · 0 评论 -
浅谈数组与伪数组的区别
数组相信大家已经很熟悉了,那么这篇文章讲讲什么是伪数组以及数组与伪数组的区别伪数组的定义拥有length属性,其他属性(索引)为非负整数不具有数组所具有的方法常见的伪数组有:函数参数arguments,DOM对象列表;jQuery中的$(' ')等伪数组与数组的区别索引(index)和长度(length)伪数组的索引,就是那些键值对的key,没有真正的顺序,长度是手动设置的属性数组的索引和长度是内置属性Array.prototype伪数组没有Array.prototype,它只是原创 2022-09-23 11:06:13 · 200 阅读 · 0 评论 -
浅谈媒体查询
在不同的设备中,浏览器的窗口尺寸可能是不同的,如果只针对某种窗口尺寸来制作网页,在其他设备中呈现改网页时就会产生很多entire,如果针对不同的窗口尺寸制作不同的网页,则要制作的网页就会太多,为了解决这个问题,CSS3中单独增加了Media Queries模块,使用这个模块,网页制作者只需要针对不同的浏览器窗口尺寸来编写不同的样式,然后让浏览器根据不同的窗口尺寸来选择不同的样式即可目前问题市场上主流浏览器都支持Media Queries模块。原创 2022-09-22 19:17:56 · 65 阅读 · 0 评论 -
雪碧图 or 精灵图 ?
就是把网站上用到的一些图片整合到一张单独的图片中,从而减少网站的HTTP请求次数,该图片使用css background和background-position属性渲染,这也就意为着你的标签变得更复杂了,图片是在css中定义,并非在标签中。4.精灵图不能随意改变大小和颜色,改变大小会失真模糊,降低用户体验,css新属性可以改变精灵图颜色,但是比较麻烦,并且新属性有兼容为题,现在一般用字体图标代替精灵图。4.更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。原创 2022-09-22 18:30:47 · 390 阅读 · 0 评论 -
浅谈flex布局
CSS flel布局(弹性布局/弹性盒子)1.基本概念Flex是Flexible Box的缩写,意为"弹性布局"或者"弹性盒子",是CSS3中的一种新的布局模式,可以简便 完整 响应式地实现各种页面布局,当页面需要适配不同的屏幕大小以及设备类型时非常使用,目前,几乎所有的浏览器都支持Flex布局可以通过将元素的display属性设置为flex(生成块级flex容器)或inline-flex(生成类似inline-block的行内快级flex容器),当一个元素设置flex布局以后,其子元素的float原创 2022-09-22 18:16:07 · 243 阅读 · 0 评论 -
CSS中的长度单位
css不同长度单位,css不同长度的区别,css中rem,em的却别, css px单位css有几种表示长度的不同的单位许多CSS属性接受 长度 值,如 width margin padding font-size等在使用这些CSS属性时要注意数字和数字之间不能出现空格,但是如果值为0,则可以省略单位对于某些CSS属性,允许使用负的长度长度单位有两种类型: 绝对单位和相对单位绝对长度绝对长度单位时固定的,用任何一个绝对产犊表示的长度都将恰好为这个尺寸不建议在屏幕上使用绝对长度单位,因为屏幕原创 2022-08-10 19:24:00 · 171 阅读 · 0 评论 -
css的盒子模型
盒子模型(Box Modle) 可以用来对元素进行布局,由外到内分别为 外边距(margin) 边框(border) 内边距(padding) 和实际内容(content) 如图所示:盒子模型分为两种第一种是 W3C标准 盒子模型又称 标准盒模型第二种是 IE标准 的盒子模型又称 怪异盒模型标准盒模型与怪异盒模型的表现效果的区别之处:1.标准盒模型中width指的是内容区content的宽度height指的是内容区content的高度标准盒模型的盒子宽高 = content( width..原创 2022-08-09 19:48:56 · 128 阅读 · 0 评论 -
浅谈常见浏览器缓存方法(前端缓存)
浏览器缓存时浏览器保存数据用于快速读取或避免请求重复资源,提升网页加载速度. 前端缓存可分为两大类:http缓存和浏览器缓存一.http缓存 http缓存指的是:当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有"要求资源"的副本,就可以直接从浏览器缓存中提取,而不是从原始服务器中提取这个资源常见的htttp缓存只能缓存get请求响应的资源,对于其他类型的响应则无能为力,http缓存都是从第二次请求开始的,第一次请求资源时,服务器返回资源,并在respone hearder头中回传资源的原创 2022-08-02 20:26:21 · 6584 阅读 · 1 评论 -
浅谈cookie sessionStorage和localStorage
在HTMLs之前,开发人员一般是通过Cookie在客户端保存一些简单的信息,在HTML5发布后,提供了一种新的客户端本地保存数据的方法,那就是WebStorage,它分为LocalStorage和SessionStorage,它允许通过JavaScript在Wev浏览器中以键值对的形式保存数据.而相比Cookie有如下优点1).拥有更大的存储容量,Cookie是4k,WebStorage为5M2).操作数据相比Cookie更简单3).不会随着每次请求发送到服务端没有敏感数据数据尺寸小于5MB。...原创 2022-08-01 20:18:18 · 216 阅读 · 0 评论 -
HTML5的新特性
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如:图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个API拖放元素,定位,包括网页,应用程序缓存,存储,网络工作者等。HTML5的十大新特性1)语义化标签语义化标签使得页面的内容结构化,见名知义标签描述 定义类文档的头部区域 定义了文档的尾部区域 定义了文档的导航...原创 2022-07-23 19:31:27 · 367 阅读 · 0 评论 -
网页布局分布
网页布局分布原创 2022-07-20 18:51:57 · 2203 阅读 · 0 评论 -
vscode html 英文感叹号(!+ tap)快速模板 骨架 无法使用 替代办法
vscode html 感叹号(!)模板无法使用 替代办法原创 2022-07-08 20:20:51 · 611 阅读 · 1 评论