公告通知
    数据正在加载...
小伙伴们,登录后还可以管理自己的书签收藏夹哦。
  • 【好句分享】 攀峰之高险,岂有崖颠;搏海之明辉,何来彼岸?前进不止,奋斗不息。 查看更多
  • 【用户动态】 @王现松 于2024年6月1日发布了一条内容 。 查看更多

常见的Plugin和它们解决问题说明

标签:Plugin打包

HtmlWbpackPlugin:自动在打包结束后生成html文件,并引入bundle.js。

cleanwebPackPlugin:打包自动删除上次打包文件。

define-plugin:定义环境变量。

commons-chunk-plugin:提取公共代码。

uglifyjs-webpack-plugin:通过UglifyES压缩ES6代码。

胡学长 2024-07-09 分类:Javascript 0

NodeJS的应用领域?

1、实时网络应用程序。

2、网络应用。

3、分布式系统

4、通用应用。

胡学长 2024-07-09 分类:nodeJs 0

rgba()和opacity的透明效果有什么不同?

标签:opacityrgba

opacity作用于元素,以及元素内的所有内容的透明度,rgba()只作用于元素的颜色或其背景色。

设置rgba透明的元素的子元素不会继承透明效果!

胡学长 2024-07-09 分类:CSS3 0

CSS3新特性有哪些?

标签:新特性CSS3

1、CSS3实现圆角(border-radius)

2、阴影(box-shadow)

3、对文字加特效(text-shadow)text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色

4、线性渐变(gradient)

5、变形(transform)

6、增加了更多的CSS选择器 多背景 rgba

7、在CSS3中唯一引入的伪元素是::selection

8、媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性

9、多栏布局

10、word-wrap(对长的不可分割单词换行)word-wrap:break-word

11、font-face属性:定义自己的字体

12、边框图片:border-image: url(border.png) 30 30 round

东江哥 2024-07-09 分类:CSS3 0

简单阐述浏览器内核

浏览器内核主要分成两部分:渲染引擎js引擎

渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。

js引擎:解析和执行JavaScript来实现网页的动态效果。

说明:现在JS引擎越来越独立,所以内核就倾向于只指渲染引擎。

秋林 2024-07-09 分类:HTML5 0

网页制作会用到的图片格式有哪些?

Webp:WebP格式,由谷歌开发的一种旨在加快图片加载速度的图片格式。它能节省大量的服务器带宽资源和数据空间。

Apng:是PNG的位图动画扩展,可以实现png格式的动态图片效果。

现松 2024-07-09 分类:HTML5 0

NodeJS是如何工作的?

1、Node.js 是一个使用 JavaScript 作为脚本语言并在 v8 环境中运行的虚拟机。

2、处理更多并发请求: 它在单线程事件循环和非阻塞 I/O 上提供高速率工作。

3、通过使用“HTTP”模块,Node.js 可以在任何独立的 Web 服务器上运行。

现松 2024-07-09 分类:nodeJs 0

NodeJS的单线程模型?

Node.js 使用单线程模型来支持异步处理。通过异步处理,应用程序可以在 Web 负载下性能更好并且更具可扩展性。因此,Node.js 使用单线程模型方法而不是典型的基于线程的实现。

现松 2024-07-09 分类:nodeJs 0

Canvas是什么?怎样写Canvas?

Canvas是HTML5的一个元素,它使用JavaScript可以在网页上绘制图形。

Canvas是一个矩形区域。它的每一个像素都可以由HTML5语言来控制,使用Canvas绘制路径、框、圆、字符和添加图像有几种方法。

如果要在我们的HTML文档中添加Canvas标签,我们需要ID、宽度和高度。下面是如何将基本Canvas标签写入HTML文档的示例。

<canvas id="myFirstCanvas" width="100" height="100">

东江哥 2024-07-09 分类:HTML5 0

HTML5中新的输入类型属性

search:用于搜索域,比如站点搜索或 Google 搜索,域显示为常规的文本域。

url:用于应该包含 URL 地址的输入域在提交表单时,会自动验证 url 域的值。

email:用于应该包含 e-mail 地址的输入域,在提交表单时,会自动验证 email 域的值。

datetime:选取时间、日、月、年(UTC 时间)

date:选取日、月、年

month:选取月、年

week:选取周和年

time:选取时间(小时和分钟)

datetime-local:选取时间、日、月、年(本地时间)

number:用于应该包含数值的输入域,您还能够设定对所接受的数字的限定。

range:用于应该包含一定范围内数字值的输入域,类型显示为滑动条。

东江哥 2024-07-09 分类:HTML5 0

video 标签的几个属性方法

标签:video视频

src:视频的URL

poster:视频封面,没有播放时显示的图片

preload:预加载

autoplay:自动播放

loop:循环播放

controls:浏览器自带的控制条

width:视频宽度

height:视频高度

胡学长 2024-07-09 分类:HTML5 0

简单阐述 NodeJS 的优势

快速:Node.js 建立在 Google Chrome 的 V8 JavaScript 引擎之上,这使得它的库在代码执行方面非常快。

异步:基于 Node.js 的服务器从不等待 API 返回数据的异步 HTTP 请求,从而使其异步。

可扩展:它是高度可扩展的,因为它的事件机制可以帮助服务器以非阻塞方式响应。

开源:Node.js 拥有一个广泛的开源社区,该社区贡献了一些优秀的模块来为 Node.js 应用程序添加附加功能。

无缓冲:Node.js 应用程序只是以块的形式输出数据,从不缓冲任何数据。

胡学长 2024-07-09 分类:Javascript 0

什么是bundle,什么是chunk,什么是module

标签:webpackbundle

bundle:是由webpack打包出来的文件

chunk:是指webpack在进行模块依赖分析的时候,代码分割出来的代码块

module:是开发中的单个模块

现松 2024-07-09 分类:Javascript 0

标签上title属性与alt属性的区别

标签:titlealt

1、alt属性是当图像不能正常展示的时候提供文字说明。

2、title属性为设置该属性的元素提供建议性的信息。

在alt和title同时设置的时候,alt作为图片的替代文字出现,title是图片的解释文字。

可以理解title 指图片的信息、alt 指图片不显示时显示的文字

秋林 2024-07-09 分类:HTML5 0

HTML结构中 meta 标签的 name 属性值

标签:meta关键字

meta有两个属性namecontent

1、name 属性主要用于描述网页。它有几个参数

1)Keywords(关键字)说明: keywords用来告诉搜索引擎你网页的关键字是什么。

2)description(网站内容描述) 说明:description用来告诉搜索引擎你的网站主要内容。

3)robots(机器人向导)说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。

4)viewport(响应式设计)

2、content中的内容主要是用于搜索引擎机器人查找信息和分类信息。

格式:<meta name="参数" content="具体的参数值">

秋林 2024-07-09 分类:HTML5 0

什么是NodeJS?

概念:nodeJs 是在Chrome 的 V8 JavaScript 引擎上开发一个框架(轻量级框架)。

作用:将 JavaScript 直接编译为原生机器码【F附加:也是JavaScript代码运行的环境】。

使用:用于创建服务器端 Web 应用程序并扩展 JavaScript API 以提供常用的服务器端功能。

场景:它通常用于大型应用程序开发,特别是视频流站点、单页应用程序和其他 Web 应用程序。

东江哥 2024-07-09 分类:nodeJs 0

如何区分 JavaScript 和 Node.js?

JavaScript

1、编程语言

2、用于 Web 应用程序的任何客户端

3、蜘蛛猴 (FireFox)、JavaScript Core (Safari)、V8 (Google Chrome) 等

nodeJs

1、JavaScript 的解释器和环境

2、用于访问或执行任何操作系统的任何非阻塞操作

3、V8 (Google Chrome)

东江哥 2024-07-09 分类:nodeJs 0

a标签中 如何禁用href 跳转页面 或 定位链接

1、禁用href 跳转设置阻止元素默认事件:e.preventDefault();

2、定位链接设置href值:href="javascript:void(0);

秋林 2024-07-09 分类:HTML5 0

HTML与XHTML二者有什么区别

标签:XHTML嵌套

1、XHTML 元素必须被正确地嵌套。

2、XHTML 元素必须被关闭。

3、标签名必须用小写字母。

4、XHTML 文档必须拥有根元素。

胡学长 2024-07-09 分类:HTML5 0

position的值, relative和absolute分别是相对于谁进行定位的?

absolute:绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位

fixed:绝对定位的元素,相对于浏览器窗口进行定位。 (IE6不支持)

relative:相对定位的元素,相对于其在普通流中的位置进行定位

static:默认值。没有定位,元素出现在正常的流中

秋林 2024-07-09 分类:CSS3 0

position的absolute与fixed共同点与不同点

标签:positionfixed

相同:

1、改变行内元素的呈现方式,display被置为block

2、让元素脱离普通流,不占据空间

3、默认会覆盖到非定位元素上

区别:

absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。

当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。

秋林 2024-07-09 分类:CSS3 0

手机端上 图片长时间点击会选中图片,如何处理?

设置onselect事件返回值为false

onselect=function() {
  return false
}
东江哥 2024-07-09 分类:HTML5 0

CSS中 link 和@import 的区别是什么?

标签:link@import

说明:link属于HTML标签,而@import是CSS提供的,且只能加载 CSS

加载:页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载

兼容:import只在IE5以上才能识别,而link是HTML标签,无兼容问题

权重:link方式的样式的权重 高于@import的权重

设置:当使用 Javascript 控制 DOM 去改变样式的时候,只能使用 link 方式,因为 @import 眼里只有 CSS ,不是 DOM 可以控制。

现松 2024-07-09 分类:CSS3 0

webpack 中 Plugin(插件)的作用是什么?

标签:Plugin插件

作用:Plugin 是用来扩展 Webpack 功能的,通过在构建流程里注入钩子实现,它给 Webpack 带来了很大的灵活性。

配置:通过plugins属性来配置需要使用的插件列表的。plugins属性是一个数组,里面的每一项都是插件的一个实例,在实例化一个组件时可以通过构造函数传入这个组件支持的配置属性。

胡学长 2024-07-09 分类:Javascript 0

webpack 常用 loader 及说明

标签:loaderwebpack

css-loader 读取 合并CSS 文件

style-loader 把 CSS 内容注入到 JavaScript 里

sass-loader 解析sass文件(安装sass-loader,node-sass)

postcss-loader 自动添加浏览器兼容前缀(postcss.config配置)

url-loader 将文件转换为base64 URI。

vue-loader 处理vue文件。

file-loader 把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件

source-map-loader 加载额外的 Source Map 文件,以方便断点调试

image-loader 加载并且压缩图片文件

babel-loader 把 ES6 转换成 ES5

eslint-loader 通过 ESLint 检查 JavaScript 代码

胡学长 2024-07-09 分类:Javascript 0

前端为什么要进行打包和构建?

标签:打包构建

代码层面:

1、体积更小(Tree-shaking、压缩、合并),加载更快

2、编译高级语言和语法(TS、ES6、模块化、scss)

3、兼容性和错误检查(polyfill,postcss,eslint)

研发流程层面:

1、统一、高效的开发环境

2、统一的构建流程和产出标准

3、集成公司构建规范(提测、上线)

秋林 2024-07-08 分类:Javascript 0

关于a标签中 active hover link visited 的顺序

标签:描点

a:link

a:visited

a:hover

a:active

东江哥 2024-07-08 分类:HTML5 0

在CSS样式中常使用px、em,各有什么优劣,在表现上有什么区别?

px:是相对长度单位,相对于显示器屏幕分辨率。

em:是相对长度单位,相对于当前对象内文本的字体尺寸。

px:定义的字体,无法用浏览器字体放大功能。

em:的值并不是固定的,会继承父级元素的字体大小,1 ÷ 父元素的font-size × 需要转换的像素值 = em值。

胡学长 2024-07-08 分类:CSS3 0

使用 Node.js 创建第一个应用

Node.js 应用是由哪几部分组成的:

1、require 指令:在 Node.js 中,使用 require 指令来加载和引入模块,引入的模块可以是内置模块,也可以是第三方模块或自定义模块。

2、创建服务器:服务器可以监听客户端的请求,类似于 Apache 、Nginx 等 HTTP 服务器。

3、接收请求与响应请求 服务器很容易创建,客户端可以使用浏览器或终端发送 HTTP 请求,服务器接收请求后返回响应数据。

步骤一、使用 require 指令来加载和引入模块

格式:const module = require('module-name');

1、module-name 可以是一个文件路径(相对或绝对路径),也可以是一个模块名称,如果是一个模块名称,Node.js 会自动从 node_modules 目录中查找该模块。

2、require 指令会返回被加载的模块的导出对象,可以通过该对象来访问模块中定义的属性和方法,如果模块中有多个导出对象,则可以使用解构赋值的方式来获取它们。

示例:

var http = require("http");

步骤二、创建服务器

使用 http.createServer() 方法创建服务器,并使用 listen 方法绑定 8888 端口。 函数通过 request, response 参数来接收和响应数据。

现松 2024-07-08 分类:nodeJs 0

简单阐述 src 属性 与 href 属性 的区别

标签:srchref

src 用于替换当前元素;href 用于在当前文档和引用资源之间确立联系。

src 是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置

href 是 Hypertext Reference 的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接

现松 2024-07-08 分类:HTML5 0

webpack是解决什么问题而生的?

标签:ES6webpack

如果像以前开发时一个html文件可能会引用十几个js文件,而且顺序还不能乱,因为它们存在依赖关系,同时对于ES6+等新的语法,less, sassCSS预处理都不能很好的解决……,此时就需要一个处理这些问题的工具。

东江哥 2024-07-08 分类:Javascript 0

Webpack的基本功能有哪些?

代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等

文件优化:压缩 JavaScript、CSS、html 代码,压缩合并图片等

代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载

模块合并:在采用模块化的项目有很多模块和文件,需要构建功能把模块分类合并成一个文件

自动刷新:监听本地源代码的变化,自动构建,刷新浏览器

代码校验:在代码被提交到仓库前需要检测代码是否符合规范,以及单元测试是否通过

自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。

东江哥 2024-07-08 分类:Javascript 0

HTML5 关于 viewport 所有属性

width: 设置layout viewport的宽度,为一个正整数,或字符串'device-width';

height: 设置layout viewport的高度。

initial-scale: 设置页面的初始缩放值,为一个数字,可以带小数。

minimum-scale: 允许用户的最小缩放值,为一个数字,可以带小数。

maximum-scale: 允许用户的最大缩放值,为一个数字,可以带小数。

user-scalable: 是否允许用户进行缩放,值为‘no’或者‘yes’。

target-densitydpi: 表示目标设备的密度等级,作用是决定css中的1px 代表多少物理像素。它的值可以为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

胡学长 2024-07-07 分类:HTML5 0

简单简述CSS的权重规则

一个元素设置样式的方法有如下:

1、行内样式

2、id样式

3、类样式[属性选择器 > class类 > 伪类选择器]

4、标签样式

5、伪元素样式

含!important:最高权重,一个行内样式+1000,一个id+100,一个属性选择器/class类/伪类选择器+10,一个元素名/伪对象选择器+1。

1、!important声明的样式优先级最高,如果冲突再进行计算。

2、如果优先级相同,则选择最后出现的样式。

3、继承得到的样式的优先级最低。

关系选择器将拆分为两个选择器再计算。

现松 2024-07-07 分类:CSS3 0

CSS伪类与CSS伪对象的区别

CSS 引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西。

根本区别在于:它们是否创造了新的元素(抽象)

伪类:一开始用来表示一些元素的动态状态,随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类

伪对象:代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中

现松 2024-07-07 分类:CSS3 0

webpack的核心概念

标签:webpackEntry

Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。告诉webpack要使用哪个模块作为构建项目的起点,默认为./src/index.js

output:出口,告诉webpack在哪里输出它打包好的代码以及如何命名,默认为./dist

Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。

Loader:模块转换器,用于把模块原内容按照需求转换成新内容。

Plugin:扩展插件,在 Webpack 构建流程中的特定时机会广播出对应的事件,插件可以监听这些事件的发生,在特定时机做对应的事情。

秋林 2024-07-07 分类:Javascript 0

浏览器页面有哪三层构成,分别是什么,作用是什么?

浏览器页面构成:结构层表示层行为层

它们分别是:HTMLCSSJavaScript

作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。

秋林 2024-07-07 分类:HTML5 0

简单的简述CSS样式表继承

CSS样式表继承是指特定的CSS属性向下传递到子孙元素。

文本相关:font-family,font-size, font-style,font-variant,font-weight, font,letter-spacing,line-height,color

列表相关:list-style-image,list-style-position,list-style-type, list-style 和 border, padding, margin, width, height

东江哥 2024-07-07 分类:CSS3 0

HTML5 的 form 表单关闭自动完成功能

HTML输入框有自动完成功能,当往输入框输入内容的时候,浏览器会从以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面。

但有时候我们希望关闭输入框的自动完成功能,例如当用户输入内容的时候,我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。

方法:

1、在IE的internet选项菜单中里的自动完成里面设置

2、设置form输入框的autocomplete值为off来关闭输入框的自动完成功能,on为开启。

现松 2024-07-07 分类:HTML5 0

div与css的网页布局有优点有

1、改版的时候更方便 只要改css文件。

2、页面加载速度更快、结构化清晰、页面显示简洁。表现与结构相分离。

3、易于优化(seo)搜索引擎更友好,排名更容易靠前。

胡学长 2024-07-07 分类:CSS3 0

webpack打包原理

1、模块化:不管是 css、JS、Image 还是 html 都视为模块。

2、打包【追踪、处理、打包】:通过定义 entry.js,对所有依赖的文件进行跟踪,将各个模块通过 loader 和 plugins 处理,然后打包在一起。

3、按需加载(步骤):

1)打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks。

2)将重复的部分单独提取出来作为 commonChunk,从而实现按需加载。

3)把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载。

秋林 2024-07-07 分类:Javascript 0

CSS选择器简单说明

元素选择器:* 、E、 E#id、 E.class

关系选择器:E、F、E>F、E+F、E~F

属性选择器:E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]

伪类选择器:E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-child等

伪对象选择器:E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection

附加说明:

相邻选择器表示:(h1 + p)

子选择器表示(ul > li)

后代选择器表示(li a)

现松 2024-07-07 分类:CSS3 0

CSS3样式让一段文本中的所有英文单词的首字母大写

设置 text-transform 属性

1、none | capitalize(将每个单词的第一个字母转换成大写)

2、uppercase(将每个单词转换成大写)

3、lowercase(将每个单词转换成小写)

现松 2024-07-07 分类:CSS3 0

关于 nodeJs 的简单介绍

1、Node.js 就是运行在服务端的 JavaScript。

2、基于 Chrome JavaScript 运行时建立的一个平台。

3、是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好。

查看当前的 Node 版本

node -v

脚本模式:通过创建helloworld.js文件,通过 node 命令来执行:node helloworld.js。此时就会在终端输出结果。

交互模式:打开终端,键入node进入命令交互模式,可以输入一条代码语句后立即执行并显示结果。

胡学长 2024-07-07 分类:nodeJs 0

HTML代码中几种隐藏元素的方法

1、visibility: hidden 简单的隐藏某个元素,但是元素占用的空间任然存在。

附加说明:只会导致浏览器重绘而不会重排,元素无法触发其点击事件。

2、opacity: 0 设置0可以使一个元素完全透明,制作出和visibility一样的效果。

3、position: absolute 使元素脱离文档流,处于普通文档之上,给它设置一个很大的left负值定位,使元素定位在可见区域之外。

4、display: none;元素会变得不可见,并且不会再占用文档的空间。

附加说明:会导致浏览器的重排重绘。

5、transform: scale(0);将一个元素设置为无限小,这个元素将不可见。这个元素原来所在的位置将被保留。

6、height: 0; overflow: hidden;将元素在垂直方向上收缩为0,使元素消失。

7、filter: blur(0);将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中。

8、HTML5 hidden attribute;hidden属性的效果和display:none;相同,这个属性用于记录一个元素的状态

胡学长 2024-07-07 分类:HTML5 0

webpack的工作原理

分析项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换打包为合适的格式供浏览器使用。

秋林 2024-07-07 分类:Javascript 0

关于页面元素 label 标签的作用和使用说明

作用(语义化):去掉或丢失样式的时候能够让页面呈现出清晰的结构。

使用说明:

1、label标签用来定义表单控件间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。

2、label 有 FOR和ACCESSKEY 两个属性。

FOR属性功能:表示label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点。

示例:<Label FOR="InputBox">姓名<input ID="InputBox" type="text">

秋林 2024-07-07 分类:HTML5 0

CSS3几种可以清除浮动的方法

1、添加额外标签:设置clear:both

2、父元素设置:overflow:hidden

3、父元素设置 overflow:auto

4、父元素也设置浮动

5、父元素设置display:table

6、使用:after 伪元素

秋林 2024-07-07 分类:CSS3 0

关于 iframe 标签的优点和缺点

优点:

1、加载:解决加载缓慢的第三方内容如图标和广告等的加载问题

2、上传:iframe无刷新文件上传

3、通信:iframe跨域通信

缺点:

1、iframe会阻塞主页面的Onload事件

2、无法被一些搜索引擎索引到

3、页面会增加服务器的http请求

4、会产生很多页面,不容易管理。

现松 2024-07-07 分类:HTML5 0

请说说你对标签语义化的理解?

1、去掉或者丢失样式时,也能够让页面呈现出清晰的结构。

2、有利于SEO搜索引擎优化。和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

3、方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

4、便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

现松 2024-07-07 分类:HTML5 0

HTML移除的元素

标签:元素dom

纯表现的元素,包括 basefont、big、 center、font、s, strike,t、u

对可用性产生负面影响的元素,包括 frame、 frameset、 Noframes

现松 2024-07-07 分类:HTML5 0

html5有哪些新特性?

标签:图像位置

HTML5增加了关于图像,位置,存储,多任务等功能。

1、拖拽释放(Drag and drop) API

2、语义化更好的内容标签(header,nav,footer,aside,article,section)

3、音频视频API(audio,video)

4、画布 (Canvas)API

5、地理(Geolocation) API

6、本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失

7、sessionStorage 的数据在页面会话结束时会被清除

8、表单控件,calendar、date、time、email、url、search

9、新的技术webworker, websocket

东江哥 2024-07-07 分类:HTML5 0

Doctype作用?标准模式与混杂模式如何区分?

作用:!DOCTYPE告诉浏览器使用哪个版本的html规范来渲染文档。

混杂模式:中页面是一种比较宽松的向后兼容的方式显示。

标准模式:以浏览器支持的最高标准运行。

当DOCTYPE不存在或形式不正确会导致html文档以混杂模式呈现。

东江哥 2024-07-07 分类:HTML5 0

内元素和块级元素的区别?

行内元素:

1、不会独立占领一行,使用的时候后面不会有换行符的元素。eg:

2、这些元素,默认的高宽,总是其内容的高宽。

3、设置margin和padding值时,只有左右有效。

常见元素有:span, strong, img, a 等。

块级元素:

1、会独立占领一行,他们后面会自动带有换行符。eg:

2、在没有设置宽度的情况下,默认宽度总是其父元素的宽度。

3、设置margin和padding值时,只有有效。

常见元素有:div , p ,form , ul , li , ol , dl 等。

行内元素转换成块元素,只要设置其display属性为block即可,display:block; 。

块元素转换成行内元素,只要将其display属性设置为inline即可,display:inline;。

东江哥 2024-07-06 分类:HTML5 0

什么是作用域和作用域链?

作用域是指变量和函数在代码中的可访问范围

作用域链是指在代码中查找变量和函数的过程,当一个变量或函数在当前作用域中找不到时,它会向上层作用域继续查找,直到找到为止,这种层层嵌套的查找关系形成了作用域链。

胡学长 2024-05-19 分类:Javascript 0 0

创建一个空数组/空对象有哪些方式?

创建空对象

1.通过字面量: {}

2.通过Object

new Object()

3.通过函数

function a() {
   this.b = 2
}
let c = new a()

4.通过Object.create

Object.create()

创建空数组

1.通过字面量:[]

2.通过Array

new Array()

3.通过Object.create

Object.create(Array.prototype)
胡学长 2024-05-19 分类:Javascript 0 0

实现水平垂直居中的方式?

1、通过绝对定位的方式 absolute 负margin

2、absolute transform (过渡)

3、absolute margin auto

4、使用flex布局设置居中

5、给容器加给伪元素line-height

6、tabel-cell实现垂直居中

现松 2024-05-19 分类:HTML5 0 2

javascript合并对象的几种方法

1、使用Object.assign()方法

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

2、使用展开运算符...(ES6语法)

对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。

3、使用for...in循环(递归赋值)

4、使用lodash的merge方法(如果已经在项目中使用了lodash)

5、jquery中的extend()

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

现松 2024-05-19 分类:Javascript 0 1

css样式中:link和@import的区别

标签:样式表css3

两者都是外部引用css的方式。但是有一定的区别:

1. 从属关系:

link是一个xhtml标签,除了加载css外,还可以定义 RSS、rel 连接属性等;

@import属于css范畴,只能加载css。

2. 加载顺序:

link引用css的时候,在页面载入的同时加载;

@import需要页面完全载入以后才加载。

3.兼容性:

link是xhtml标签,无兼容问题;

@import是在css2.1提出的,只可在 ie5 才能识别,低版本的浏览器不支持。

4.DOM可控制性:

link支持使用javascript控制dom去改变样式;

@import不支持。

现松 2024-05-19 分类:CSS3 0 2

v-for循环为什么一定要绑定key?

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

1、vue更新已渲染过的元素时,默认使用就地复用策略(如果该元素dom未修改,则复用之前的元素,否则重新渲染这一项)。

2、key的作用是唯一标识组件元素,辅助判断新旧vdom节点在逻辑上是不是同一个对象,是否有更新

vue是通过比对组件自身新旧vdom进行更新的。

东江哥 2024-05-19 分类:Vue 0 2

什么是window对象? 什么是document对象?

标签:window对象

window对象是指浏览器打开的窗口。是 JavaScript 中的全局对象,在浏览器环境中始终存在且可直接访问。

document对象是Document对象(HTML 文档对象)的一个只读引用,window对象的一个属性。

东江哥 2024-05-19 分类:Javascript 0 1

vue中$route和$router的区别

标签:路由vue

1、$router是用来操作路由,$router是VueRouter的一个实例,他包含了所有的路由,包括路由的跳转方法,钩子函数等,也包含一些子对象(例如history)。

2、$route是用来获取路由信息,$route是一个跳转的路由对象(路由信息对象),每一个路由都会有一个$route对象,是一个局部的对象。包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。

秋林 2024-05-19 分类:Vue 0 1

JavaScript 运行机制以及Event Loop(事件循环)

JavaScript执行机制通常指的是它的单线程事件循环任务队列

单线程:

JavaScript在浏览器中是单线程的,意味着同一时间只能执行一个任务,后续的任务必须排队等候。

事件循环:

JavaScript执行时,会形成一个执行栈和一个任务队列。当执行栈为空时,会从任务队列中取出任务执行。

任务队列:

任务队列通常包括宏任务和微任务。宏任务(Macro Task)如setTimeout、setInterval、I/O操作、UI渲染等;微任务(Micro Task)如Promise、MutationObserver等。

秋林 2024-05-19 分类:Javascript 0 0

JS中事件处理机制包含事件委托、事件捕获和事件冒泡

1、事件委托(Event Delegation)

事件委托是一种利用事件冒泡机制的技术,它允许我们将事件处理程序绑定到父元素上,而不是在每个子元素上都绑定事件处理程序。 当一个事件发生在子元素上时,它会冒泡到父元素,然后由父元素上的事件处理程序来处理。这样做的好处是减少了事件处理程序的数量,尤其适用于动态生成的内容。 举例来说,如果有一个列表,我们希望对列表中的每个项都执行相同的操作,那么我们可以将点击事件处理程序绑定到整个列表的父元素上,而不是在每个列表项上都绑定。

2、事件捕获(Event Capturing)

事件捕获是事件处理的第一个阶段,在事件到达目标元素之前发生。 当一个事件发生时,它会从文档树的根节点开始向下传播至目标元素。在这个过程中,如果某个元素在捕获阶段上绑定了事件处理程序,那么这些事件处理程序会按照捕获的顺序被依次执行。 事件捕获阶段很少被使用,因为它相对不常见,而且大多数情况下我们更关心事件的冒泡阶段。

3、事件冒泡(Event Bubbling)

事件冒泡是事件处理的第二个阶段,在事件到达目标元素之后发生。 当一个事件发生时,它会从目标元素开始向上冒泡至文档树的根节点。在这个过程中,如果某个元素或者它的祖先元素上绑定了事件处理程序,那么这些事件处理程序会按照冒泡的顺序被依次执行。 事件冒泡是 JavaScript 中最常用的事件处理机制,因为它使得我们可以在较高级别的元素上捕获事件,并且更容易管理事件处理程序。

秋林 2024-05-19 分类:Javascript 0 0

JS中数组去重的方法都有哪些?

1、使用 Set 去重(ES6 中最常用)

2、使用 indexOf()

3、使用includes()方法

4、使用双重for循环

5、使用单重for循环

6、使用filter()方法

7、使用reduce()方法

8、使用Map对象

胡学长 2024-05-19 分类:Javascript 0 3

移动端如何适配不同屏幕尺寸

1、使用响应式布局:使用CSS媒体查询和弹性布局来根据屏幕尺寸调整页面布局和元素大小。通过设置百分比、em或rem单位来实现元素的相对大小。

2、使用Viewport:通过设置Viewport元标签来控制页面在移动设备上的显示。可以使用来设置Viewport的宽度为设备宽度,并且禁用缩放。

3、使用CSS Flexbox或Grid布局:这些布局技术可以帮助您更轻松地创建自适应的布局,使元素在不同屏幕尺寸下自动调整位置和大小。

4、使用CSS媒体查询:通过使用@media规则,可以根据不同的屏幕尺寸应用不同的CSS样式。您可以根据需要设置不同的断点,并在不同的屏幕尺寸下应用不同的样式。

5、使用流式布局:使用百分比单位和自适应容器来创建流式布局,使页面元素根据屏幕尺寸自动调整大小。

6、使用图片适配:使用srcset和sizes属性来为不同屏幕尺寸提供不同大小的图片,以减少加载时间和带宽消耗。

7、使用JavaScript库:例如,使用Bootstrap或Foundation等前端框架,它们提供了一些内置的响应式布局和组件,可以帮助您更轻松地实现移动端适配。

胡学长 2024-05-19 分类:HTML5 0 0

关于弹性布局flex:1的三种属性

flex: 1 是一个简写的 CSS 声明,它包含三个属性:flex-grow、flex-shrink 和 flex-basis。它们分别代表:

flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不会放大。

flex-shrink:定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size),默认值为auto,即项目的本来大小。

简写为 flex: 1 实际上相当于 flex: 1 1 auto。

例如,在一个 flex 容器中,如果你想让一个子元素占据剩余空间的全部,你可以这样设置:

秋林 2024-05-19 分类:CSS3 0 0

vue3.0和vue2.0的区别

标签:vue2vue3

Vue.js是一款流行的用于构建用户界面的开源JavaScript框架。Vue.js库的最新版本是Vue3.0,它相较于之前的版本(如Vue2.0)有许多新的特性和改进。

1、响应式系统升级

2、更小的体积

3、更好的性能

4、Composition API

5、TypeScript支持

6更强大的工具链

秋林 2024-05-19 分类:Vue 0 1

HTML与CSS3伪元素和伪类详解

一、伪类(pseudo classes)

  用于已有元素处于某种状态时为其添加对应的样式,但是通过DOM树又无法表示这种状态,就可以通过伪类来为其添加样式。

例如:当用户悬停在指定元素时,可以通过:hover来描述这个元素的状态,虽然它和一般CSS相似,可以为已有元素添加样式,但是它只有处于DOM树无法描述的状态下才能为元素添加样式。

二、伪元素(pseudo elements)

  用于创建一些不在DOM树中的元素,并为其添加样式。

  例如:我们可以通过:before来在一个元素之前添加一些文本,并为这些文本添加样式,虽然用户可以看见这些文本,但是它实际上并不在DOM文档中。

现松 2024-05-19 分类:CSS3 0 0

操作数组的方式有哪些?

标签:数组方法

1、 push (将指定的元素添加到数组的末尾,并返回新的数组长度)

2、pop (从数组中删除最后一个元素,并返回该元素的值)

3、shift (从数组中删除第一个元素,并返回该元素的值)

4、unshift (向数组首位添加一个或多个元素,并返回新的数组长度)

5、concat (合并多个数组或值,返回一个新的数组)

6、slice (截取数组的一部分,返回一个新的数组)

7、splice (删除、替换或添加数组的元素,并返回被删除的元素)

8、filter (过滤数组中的元素,返回一个新的数组)

9、map (对数组中的每个元素进行操作,返回一个新的数组)

10、sort (对数组进行排序)

11、reverse (翻转数组中的元素)

12、indexOf (查找数组中指定元素的索引)

13、find (查找数组中符合条件的第一个元素)

14、findIndex (查找数组中符合条件的第一个元素的索引)

15、includes (判断一个数组是否包含一个指定的值)

16、every (判断数组内的所有元素是否都能通过指定函数的测试)

17、some(判断数组中是否至少有一个元素通过了指定函数的测试)

18、join (将一个数组的所有元素连接成一个字符串并返回这个字符串)

19、reduce (计算数组所有元素的总和)

20、forEach(数组循环遍历)

现松 2024-05-19 分类:Javascript 0 0

vue-router有哪几种导航钩子?

vue-router有3导航钩子分别是:全局导航钩子、组件内的导航钩子、路由独享钩子。

1、全局导航钩子

作用:路由跳转前触发,跳转前进行判断拦截

组件内的导航钩子

1)beforeRouteEnter 在进入当前组件对应的路由前调用

2)beforeRouteUpdate 在当前路由改变,但是该组件被复用时调用

路由独享钩子

可以在路由配置上直接定义 beforeEnter

3)beforeRouteLeave 在离开当前组件对应的路由前调用

现松 2024-05-19 分类:Vue 0 0

delete和Vue.$delete删除数组的区别

在Vue.js中,delete操作符和Vue.$delete方法都用于删除数组中的元素,但它们之间有一个关键的区别:

delete操作符:这是JavaScript的原生操作符,用于删除对象的属性。当使用它来删除数组中的元素时,它不会触发Vue的响应式更新机制。也就是说,数组的长度并不会改变,如果后续继续访问已删除元素的索引,会得到undefined。

Vue.$delete方法:这是Vue实例提供的一个方法,用于删除数组中的元素,并确保更新视图。这是一个Vue 2.x的方法,在Vue 3.x中应使用Vue.delete。

总结:

delete 数组自带的方法,删除后对应值变为 empty/undefined,数组长度不变,键值不变。

vue.$delete 会删除数组的键值对,数组长度变化。

东江哥 2024-05-19 分类:Vue 0 0

vue-router路由模式有几种,它们有什么区别??

VueRouter的路由模式有三种:hash模式、history模式和abstract模式。

1:Hash 模式(默认):

在URL中的路径部分以 # 符号开头。

比如:http://www.xxx.com/#/home。

在hash模式下,URL的hash部分的改变不会导致浏览器向服务器发送请求,可以通过监听hashchange事件来触发相应的路由变化。

2:History 模式:

通过使用HTML5的pushState和replaceState方法来改变URL,不再使用hash作为URL的一部分。

比如:http://www.xxx.com/home。

在history模式下,URL的改变会导致浏览器向服务器发送请求,因此需要服务器的支持来处理这些URL。

3:Abstract 模式:

在无法使用浏览器的history模式和hash模式时,可以选择使用abstract模式。在abstract模式下,只会改变应用的内存状态,并不会改变URL。这种模式适合于在非浏览器环境中使用VueRouter,比如在Node.js中渲染Vue应用。

东江哥 2024-05-19 分类:Vue 0 1

vuex是什么?怎么使用?哪种功能场景使用它?它有哪几种属性?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是:应用遇到多个组件共享状态时,使用vuex。

场景:多个组件共享数据或者是跨组件传递数据时

vuex有5种属性分别是State , Getter , Mutation , Action , Module (就是mapAction)

东江哥 2024-05-19 分类:Vue 0 1

Vue请求初始化数据放在Created还是Mounted?

mounted

  如果把所有请求放在created里面的话,请求过多会,加载太慢会导致页面出现短暂的白屏情况,一般上我写的话,接口不复杂会放created里面,接口多复杂的话会放在mounted里面.

mounted

  created 是加载DOM,html之后 就马上执行, 比如初始化,获取屏幕高度调整,赋值等等,而mounted就是执行包括js之后,准备开始调用方法,也就是说 类似传统开发那样,先加载jquery 再调用插件

胡学长 2024-05-18 分类:Vue 0 0

vue中的$nextTick的作用及使用场景

一、$nextTick的作用

$nextTick() 是 Vue 提供的一个异步方法,用于在 DOM 更新之后执行回调函数。在 Vue 中,DOM 的更新是异步的,即 Vue 异步执行更新队列,而不是直接操作 DOM。

$nextTick() 主要用于确保在 DOM 更新完成后执行一些操作,例如在更新后操作 DOM 元素、获取更新后的元素尺寸等。

二、特点和用途

$nextTick() 会在 Vue.js 更新队列完成之后,DOM 更新之前调用传入的回调函数。 主要用于确保在 DOM 更新之后执行一些操作,以避免直接操作未更新的 DOM。 通常用于处理需要等待 DOM 更新的情况,比如在修改数据后立即获取更新后的 DOM 元素。

三、使用场景:

1、在执行mounted中方法修改了 data 的值,然后通过 $nextTick 来确保在 DOM 更新后执行回调函数。这样可以保证在回调函数中获取到最新的 DOM 内容。

胡学长 2024-05-18 分类:Vue 0 0

v-if和v-for这两个指令谁的优先级高

标签:指令v-if

在vue2中,v-for的优先级高于v-if;

在vue3中,v-if的优先级高于v-for。

在vue中,永远不要把v-if和v-for同时用在同一个元素上,会带来性能方面的浪费(每次渲染都会先循环再进行条件判断);想要避免出现这种情况,可在外层嵌套template(页面渲染不生成dom节点),在这一层进行v-if判断,然后在内部进行v-for循环。

如果v-if依赖于v-for中的某一个数据,可以用computed计算属性和filter来实现。

胡学长 2024-05-18 分类:Vue 0 0

vue父组件调用子组件中的方法和值的几种方式

1. ref

直接在父组件内部给子组件标签添加ref属性,然后通过ref属性来调用子组件的方法。

2. $children

在父组件的方法中,通过 $children 属性来访问子组件实例,并调用子组件的方法,返回的是一个存放所有子组件的数组。

3. $emit $on

子组件向父组件$emit消息发送和父组件$on监听

胡学长 2024-05-18 分类:Vue 0 1

Vue中keep-alive组件作用详解

Vue中keep-alive组件作用是保留组件状态或避免重新渲染(缓存的作用)。

Vue中keep-alive组件有两个属性include与exclude:

include:字符串或者正则表达式。只有匹配的组件会被缓存

exclude:字符串或者正则表达式。任何匹配的组件都不会被缓存。

keep-alive提供了两个生命钩子,分别是activated与deactivated。因为keep-alive会将组件保存在内存中,并不会销毁以及重新创建,所以不会重新调用组件的created、mounted这些函数。

被 keep-alive 包裹的组件被缓存之后有两个独有的生命周期: activated 和 deactivated。activated 生命周期在组件激活时调用、deactivated 生命周期在组件停用时调用。

现松 2024-05-18 分类:Vue 0 1

Vue 的父组件和子组件生命周期钩子函数执行顺序

加载渲染过程:

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程:

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程:

父 beforeUpdate -> 父 updated

销毁过程:

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

现松 2024-05-18 分类:Vue 0 0

computed 和 watch 的区别和运用的场景?

computed和watch的区别

1、computed是计算属性;watch是监听,监听data中的数据变化。

2、computed支持缓存,当其依赖的属性的值发生变化时,计算属性会重新计算,反之,则使用缓存中的属性值;watch不支持缓存,当对应属性发生变化的时候,响应执行。

3、computed不支持异步,有异步操作时无法监听数据变化;watch支持异步操作。

4、computed第一次加载时就监听;watch默认第一次加载时不监听。

5、computed中的函数必须调用return;watch不是。

6、使用场景:

computed:一个属性受到多个属性影响,如:购物车商品结算。

watch:一个数据影响多条数据,如:搜索数据。 数据变化响应,执行异步操作,或高性能消耗的操作,watch为最佳选择。

现松 2024-05-18 分类:Vue 0 1

v-show 与 v-if 有什么区别?

标签:指令v-show

设置DOM元素显示隐藏有v-show指令和v-if指令两种。

相同点:两者都是达到显示隐藏的功能

不同点:v-show指令通过修改元素的display属性让其显示或者隐藏,v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果.

秋林 2024-05-18 分类:Vue 0 0

vue组件slot 插槽有哪些,如何使用?

标签:插槽slot

slot 插槽,可以理解为slot在组件模板中提前占据了位置。当复用组件时,使用相关的slot标签时,标签里的内容就会自动替换组件模板中对应slot标签的位置,作为承载分发内容的出口。

主要作用是复用和扩展组件,做一些定制化组件的处理。

插槽主要有3种

1)默认插槽

2)具名插槽

3)作用域插槽

秋林 2024-05-18 分类:Vue 0 0

class 与 style 如何动态绑定

vue组件中class 和 style 可以通过对象语法和数组语法进行动态绑定

对象写法

<template>
<div :class="{ active: isActive }"></div>
<div :style="{ fontSize: fontSize }">
</template>
<script>
export default {
data() {
  return {
    isActive: true,
    fontSize: 30
  }
}
}

数组写法

<template>
<div :class="[activeClass]"></div>
<div :style="[styleFontSize]">
</template>
<script>
export default {
data() {
  return {
    activeClass: 'active',
    styleFontSize: {
      fontSize: '12px'
    }
  }
}
}
</script>
秋林 2024-05-18 分类:CSS3 0 1

vue中常用的修饰符哪些?

表单修饰符

lazy: 失去焦点后同步信息

trim: 自动过滤首尾空格

number: 输入值转为数值类型

事件修饰符

stop:阻止冒泡

prevent:阻止默认行为

self:仅绑定元素自身触发

once:只触发一次

鼠标按钮修饰符

left:鼠标左键

right:鼠标右键

middle:鼠标中间键

东江哥 2024-05-18 分类:Vue 0 1

router-link上事件无效解决方法

内置组件router-link不生效的原因:router-link会阻止click事件,为决绝这一问题我们在事件绑定上加个native事件修饰符如:

使用@click.native。

.native指直接监听一个原生事件。

东江哥 2024-05-18 分类:Vue 0 0

vue指令v-model的原理如何实现?

标签:指令v-model

v-model原理:

原生 input 元素若是text/textarea类型,使用 value 属性和 input 事件。

原生 input 元素若是radio/checkbox类型,使用 checked属性和 change 事件。

原生 select 元素,使用 value 属性和 change 事件。

input 元素上使用 v-model 等价于

<input :value="message" @input="message = $event.target.value" />
东江哥 2024-05-18 分类:Vue 0 1

js中数组合并的方法有哪些

1、 concat关键字 arr.concat(arr2, arr3, ······)

2、 es6 展开运算符(…) […arr1, …arr2,······]

3、 push() push(…arr)

通过push合并数组有以下2中形式

1)使用es6扩展运算符合并

2)结合for循环,遍历一个数组,然后push到另一个数组中。

现松 2024-05-17 分类:Javascript 0 0

什么是内存泄漏,内存泄漏的原因是什么,应该如何优化?

内存泄露

内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。

可能出现内存泄漏的原因

1、 意外的全局变量

2、 DOM元素清空时,还存在引用

3、 闭包

4、 遗忘的定时器

内存泄漏优化方法

1、 全局变量先声明在使用

2、 避免过多使用闭包。

3、 注意清除定时器和事件监听器。

现松 2024-05-17 分类:Javascript 0 0

get请求和post请求区别和使用方式

标签:get请求get

关于接口获取数据get请求和post请求区别和使用方式。

特性 get post
参数位置 参数拼接到URL后面 参数在请求体中
参数大小 受限于浏览器url大小,一般不超过32K 1G
安全性 参数暴露在URL中,安全性低 相对get安全性更高些
适用场景 从服务器端获取数据 从服务器端获取数据
缓存 在浏览器中可缓存 不可以缓存
胡学长 2024-05-17 分类:Javascript 0 1

关于LocalStorage、SessionStorage、Cookie 之间的区别和共同点

localStorage:

localStorage.setItem(key, value)
localStorage.getItem(key)
localStorage.removeItem(key)
localStorage.clear()

sessionStorage:

sessionStorage.setItem(key, value)
sessionStorage.getItem(key)
sessionStorage.removeItem(key)
sessionStorage.clear()
特性 LocalStorage SessionStorage Cookie
存放数据大小 LocalStorage 的存储容量为5MB/10MB SessionStorage 的存储容量为5MB Cookies的存储容量为4KB
数据生命周期 由于它不是基于会话的,因此必须通过 javascript 或手动删除 它是基于会话的,可以按窗口或选项卡工作。这意味着数据仅在会话期间存储,即直到浏览器(或选项卡)关闭 Cookies 根据选项卡和窗口的设置和工作过期
存储方式 客户端只能读取本地存储 客户端只能读取本地存储 客户端和服务器都可以读取和写入 cookie
向服务器传输数据 没有向服务器传输数据 没有向服务器传输数据 存在到服务器的数据传输
浏览器兼容性 支持它的旧浏览器较少 支持它的旧浏览器较少 所有浏览器都支持它,包括旧版浏览器
共同点 都是保存在浏览器端 都是保存在浏览器端 都是保存在浏览器端
胡学长 2024-05-17 分类:Javascript 0 1

用户长时间不操作退出到登录页

出于安全考虑,用户长时间不操作,就会自动退出。关于用户自动退出有前端控制和后端控制两种方式来实现。

1、前端控制

记录用户事件操作的时间,判断这次操作时间和上一次操作时间的时间差是否超出规定的时间范围。如果是,那么用户就自动退出,并跳转到登录页面。

2后端控制

后端控制主要是根据接口请求时记录请求时间,将请求时间存储到session中或者数据库中,在下一次接口请求时判断当前请求时间和上一次记录的时间是否超出规定的时间范围如果是,那么就返回用户退出登录信息,并清除所有session信息。前端根据接口返回的信息跳转到登录页面。

胡学长 2024-05-17 分类:功能原理 0 1

CSS 单位: %, em, rem, px, vh, vw

% – %单位用于设置相对于当前字体大小的字体大小。

em -相对于当前对象内文本的字体尺寸(参考物是父元素的font-size)

注意:这里的 2em 表示当前字体大小的 2 倍。

rem – rem是相对于HTML根元素的字体大小(font-size)来计算的长度单位

px -相对于显示器屏幕分辨率

vh - 相对于视口高度的 1%。

vw – 相对于视口宽度的 1%

东江哥 2024-05-17 分类:CSS3 0 0

map 和 forEach 的都可以用来遍历,它们有什么区别

map 和 forEach 的区别是map返回一个新的数组,forEach返回undefined。

使用场景:修改或返回新数组使用map,相反只是做遍历循环时用foreach 或 for

const array = [1, 2, 3, 4, 5]
const arr = array.forEach(x => x * x)
const arr2 = array.map(x => x * x)
console.log(array)  // [1, 2, 3, 4, 5]
console.log(arr)  // undefined
console.log(arr2)  //[1, 4, 9, 16, 25]
东江哥 2024-05-17 分类:Javascript 0 0

什么是跨域?跨域解决方法有哪些?

跨域是指当请求非同源的URL链接,简单说就是协议,域名,端口中存在有和当前Url不同的就是跨域

跨域解决方法

1)cors:后端服务器设置

2)nginx反向代理

3)jsonp

由于script的src不受同源策略限制,我们可以通过src访问服务器上的脚本进行数据回调 (动态创建script标签,回调函数)

东江哥 2024-05-17 分类:Javascript 0 0

什么是同源策略,非同源浏览器会有哪些限制

同源策略指的是:协议,域名,端口三者一致

同源策略的目的:是为了保证用户信息的安全,防止恶意的网站窃取数据

如果非同源,浏览器会进行什么限制?

Cookie,LocalStorage和IndexDB 无法读取

Dom不能获得

ajax请求不能发送

东江哥 2024-05-17 分类:Javascript 0 1
在线留言