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等设计软件，对设计原则和视觉规范有一定的理解。