WEB面试题

1.基础 Web 技术:

1.1 h5

行内元素和块级元素

行内元素不会独占一行,高度和宽度由内容决定,不能单独设置宽高,

不能设置上下的margin和padding,只能设置左右的margin和padding;

行内元素:a、span、sub、sup、br、strong、b、em、i、label

块级元素会独占一行,高度和宽度可以单独设置,可以设置上下左右的margin和padding;

块级元素:div、ul、dl、ol、li、table、h1-h6、p、form、hr

行内块元素: <img />、<input />、<td>

转换为行内元素:display:inline; 转换为行内块元素:display:inline-block; 2.块元素:display:block;

1.2 h5的新特性

新标签:header、footer、section、nav

如何区别HTML和HTML5?

用 DOCTYPE声明新增的结构元素和功能元素来区别它们。

1.3 请描述一下 sessionStorage和 localStorage、 cookie的区别是什么。

sessionStorage用于在本地存储一个会话中的数据,这些数据只有同一个会话中的页面才能访问,当会话结束后,数据也随之销毀。因此 sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

而 localstorage用于持久化本地存储,除非主动删除数据,否则数据是永远不会过期的。

localStorage的概念和cookie相似,区别是 localStorage是为了更大容量的存储设计的。cookie的大小是受限的,并且每次请求一个新页面时, cookie都会被发送过去,这样无形中浪费了带宽。另外, cookie还需要指定作用域,不可以跨域调用。

cookie的作用是与服务器进行交互,并且还是HTP规范的一部分,

而 localStorage仅因为是为了在本地"存储"数据而已,无法跨浏览器使用。

1.4 CSS选择器有哪些?优先级顺序?哪些属性可以继承?

CSS选择器:

id选择器(#myid)、

类选择器(.myclassname)、

标签选择器(div, h1, p)、

相邻选择器(h1 + p)、

子选择器(ul > li)、

后代选择器(li a)、

通配符选择器(*)、

属性选择器(a[rel="external"])、

伪类选择器(a:hover, li:nth-child)

CSS选择器优先级顺序:

-!important > 行内样式(比重1000)> ID 选择器(比重100) > 类选择器(比重10) > 标签(比重1) > 通配符 > 继承 > 浏览器默认属性

1.5 js基本数据类型

Number:表示任何数值,可以是整数、浮点数,还包括特殊值 NaN(Not-a-Number)和正负无穷大。

String:用于表示文本,是由零个或多个16位Unicode字符组成的字符序列。可以用单引号 ' 或双引号 " 来创建字符串。

Boolean只有两个可能的值:true 和 false,代表逻辑真和假。

Undefined:当变量声明但未初始化时,或者访问不存在的对象属性时,其值为 undefined。

Null:表示一个空或无对象的指针,只有一个值 null,它与 undefined 类似,但含义不同,null 是一种明确的空值或无意义值的表示。

Object(引用类型):包括数组 (Array)、函数 (Function)、日期 (Date)、正则表达式 (RegExp) 等在内的所有非基本类型的值都是对象,它们存储的是引用地址而非实际值。

Symbol(ES6新增):一种唯一且不可变的数据类型,用来创建唯一的标识符。

BigInt(ES2020新增):用来表示大于 Number.MAX_SAFE_INTEGER 的整数,用 n 后缀表示,如 9007199254740991n。

1.6简单交互逻辑

if for

1.5DOM 操作的能力

获取元素:document.getElementBy(Id,ClassName,Name,TagName)

操作元素:innerText(只操作获取到的元素内的文字),innerHTML(可以操作html标签),style(修改样式)

onclick、onchange(失去焦点时,判断是否改变,改变触发函数)、oninput(只要改变就会触发函数)onfocus(获取焦点),onblur(失去焦点)

2 jQuery,VUE,UNIAPP,Node.JS

2.1 jQuery

2.1.1 jQuery中常见的几种函数以及他们的含义是什么

在 jQuery中,$ 仅仅是用来简写 jQuery 对象以及 jQuery() 函数。

get():取得所有匹配的DOM元素集合

get(index):取得其中一个匹配的元素.index表示取得第几个匹配的元素

append(content):向每个匹配的元素内部追加内容

after(content):在每个匹配的元素之后插入内容

html()/html(var):取得或设置匹配元素的html内容

find(expr):搜索所有与指定表达式匹配的元素

bind(type,[data],fn):为每个匹配元素的特定事件绑定事件处理函数

empty():删除匹配的元素集合中所有的子节点

hover(over,out):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法

attr(name):取得第一个匹配元素的属性值

addClass(class) 和 removeClass(class) 为指定的元素添加或移除样式

css(name):访问第一个匹配元素的样式属性

ajax([options]):通过HTTP请求加载远程数据

get(url,[data],[callback],[type]):通过远程HTTP GET请求载入信息

post(url,[data],[callback],[type]):通过远程HTTP POST请求载入信息

load(url,[data],[callback]):载入远程HTML文件代码并插入至DOM中

2.1.2body中的onload()函数和jQuery中的document.ready()有什么区别?

onload()和document.ready()的区别有以下两点:

1、我们可以在页面中使用多个document.ready(),但只能使用一次onload()。

2、document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要在所有的关联资源(包括图像、音频)加载完毕后才会调用。

JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间,用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

另一方面,jQuery ready() 函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它,浏览器会按它们在 HTML 页面里出现的顺序执行它们,相反对于 onload 技术而言,只能在单一函数里使用。鉴于这个好处,用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。

2.1.3 $(document).ready() 是个什么函数?为什么要用它?

ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载(例如HTML被完全解析DOM树构建完成时),jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器.

$(this) 和 this 关键字在 jQuery 中有何不同?(答案如下)

$(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法,比如用 text() 获取文本,用val() 获取值等等。而 this 代表当前元素。

它是 JavaScript 关键词中的一个,表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法,直到它被 $() 函数包裹,例如 $(this)

2.1.4jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?

ajax() 方法更强大,更具可配置性, 让你可以指定等待多久,以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。

2.2 VUE

2.2.1 生命周期

生命周期:

VUE2:

创建之前==》调用brforeCreate()函数

创建完毕==》调用created()函数

挂载之前==》调用beforeMount()函数

挂在完毕==》调用mounted()函数==================》【重要的钩子】

更新之前==》调用beforeUpdate()函数

更新完毕==》调用updateed()函数

销毁之前==》调用beforeDestory()函数==============》【重要的钩子】

销毁完毕==》调用destoryed()函数

激活之前==》调用activated()函数

失活之前==》调用deactivated()函数

下次更新后执行==》nextTick()

VUE3:与VUE2相同,但是销毁前beforeDestory:销毁后destoryed,

改成卸载前beforeUnmount :卸载后unmounted。

如果在setup()内写就用后面的组合式API,如果不在setup()内写,就写前面的

beforeCreate ===> setup()

created ===> setup()

beforemount ===> onBeforeMount

mounted ===> onMounted

befoerUpdate ===> onBeforeUpdate

updated ===> onUpdated

beforeUnmount ===> onBeforeUnmount

unmounted ===> onUnmounted

(1)setup执行时机在beforeCreate之前,且只执行一次,this是undefined。

(2)setup的参数:

(2.1)props:值对象,包含:组件外传递过来的,且组件内部生命接受了的属性。

(2.2)context:上下文对象:

(2.2.1)attrs:值对象,外部传递进来,但props未接收的属性(this.$attrs)。

(2.2.2)slots:收到的插槽内容,相当于this.$slots。(最好用v-slot命名)。

(2.2.3)emit:分发自定义事件的函数(this.$emit)。

2.2.2 数据代理

VUE2:

对象类型:通过Object.defineProperty()对属性的读取,修改进行拦截(数据劫持)。

数组类型:通过重写数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)

VUE3:

从定义角度相比:

ref:用来定义基本数据类型。

reactive:用来定义对象或数组类型数据。

从原理角度相比:

ref:通过Object.defineProperty()的get和set来实现响应式(数据劫持)。

reactive:通过Proxy来实现响应式(数据劫持),并通过Reflect操作源对象内数据。

从使用角度相比:

ref:操作数据需要用xxx.value,读取时不需要xxx.value。

reactive:操作和读取数据都不用xxx.value

代理:目标对象与代理对象:在创建Proxy时,会创建一个新的对象作为代理对象,并将其内部的[[Target]]属性指向目标对象。这意味着所有的操作实际上都是对目标对象进行的,只是通过代理对象来间接访问。

反射:Reflect 对象的一些方法在执行时会捕获并处理异常。例如,Reflect.get() 和 Reflect.set() 方法会在访问或修改属性时捕获可能发生的错误。

这背后的原理是:这些方法使用了 JavaScript 的内部操作来执行任务,而这些内部操作可能会抛出异常。为了确保这些异常能够被用户代码正确地捕获和处理,Reflect 方法通常会包含一个 try-catch 块来捕获这些异常,并将其作为方法的返回值之一。

解 uni-app 框架,能够独立开发移动端项目。

悉 Node.js 并具有全栈开发能力,处理跨域问题。

r esponse.setHeader("Access-Control-Allow-Origin","*");

response.setHeader ("Access-Control-Allow-Methods","POST");

response.setHeader("Access-Control-Allow-Headers","x-requested-with, content-type");

熟练使用 npm/cnpm 等包管理工具进行依赖安装与版本管理。

熟练配置和使用 Http 请求库 Axios,及Ajax进行数据交互,并掌握请求及响应拦截器的设置方法。

3.样式处理与组件库:

掌握 Sass 或 Less 等 CSS 预处理器的使用,提高代码可维护性。

熟悉 element UI、iviewUI 等常用 UI 组件库的使用和定制化。

理解 Bootstrap 的响应式原理,能够创建基于该框架的响应式网站布局。

4.数据库技术:

具备 MongoDB 数据库的操作能力,使用 Node.js 实现数据的 CRUD 功能。

熟悉 uni-app 中云函数与云数据库的基本操作,实现移动应用的数据存储与访问。

5.开发工具:

熟练使用 Hbuilder、HbuilderX、VSCode、WebStorm 等前端开发工具进行高效开发。

能够使用 Dreamweaver 编辑器编辑和优化网站代码。

6.其他技能与素质:

学习能力强,能够快速掌握新的前端技术和框架,并持续关注行业前沿动态。

能够阅读和解析后端 API 文档,与后端团队协作完成前后端数据接口对接工作。

具备一定的源码阅读能力,通过 debug 工具快速定位和解决问题。

熟练利用浏览器开发者工具中的 Network 面板调试,ApiPost等工具完成前后端对接。

熟练利用AI等工具完成代码纠错及优化,提高开发效率。

熟练运用 Photoshop等设计软件,对设计原则和视觉规范有一定的理解。

相关推荐
昨天;明天。今天。4 小时前
案例-表白墙简单实现
前端·javascript·css
金灰10 小时前
CSS3练习--电商web
前端·css·css3
TonyH200211 小时前
webpack 4 的 30 个步骤构建 react 开发环境
前端·css·react.js·webpack·postcss·打包
王小二(海阔天空)11 小时前
个人文章合集 - 前端相关
前端·css·vue·jquery
吕永强11 小时前
CSS相关属性和显示模式
前端·css·css3
赵锦川11 小时前
css三角形:css画箭头向下的三角形
前端·css
小白求学114 小时前
CSS计数器
前端·css
吕永强19 小时前
CSS概述
前端·css·css3
yqcoder1 天前
css 选择除第一个子元素之外的所有子元素
前端·css
blaizeer1 天前
深入浅出 CSS 定位:全面解析与实战指南
前端·css