前端基础

博主： admin
发布时间：2023 年 02 月 23 日
2396 次浏览
2 条评论
6939字数
分类：默认分类

## 1.跨域的定义，解决办法

跨域定义：浏览器不能执行域名、端口、协议不同，即非同源网站的脚本

解决方式： 通过jsonp跨域，CORS 跨域资源分享Cross-Origin Resource Sharing，服务器端返回带有Access-Control-Allow-Origin标识的Response header，在服务器响应客户端的时候，带上Access-Control-Allow-Origin头信息。

服务器代理

## 2.css权重

```
一个元素有多个css,权重高的那条样式起作用，权重相同的，后写的样式会覆盖前面写的样式

css权重计算规则，important权重10000，内联样式1000，id选择器权重100, class选择器、属性选择器、伪类选择器、标签选择器权重10，标签、伪类选择器权重1，

通配符选择器忽略不计
```

## 3.css BFC模式

```
Block fomatting context：块级格式化上下文。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

如何创建？

float的值不为none

position的值不为static或者relative

display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个

overflow的值不为visible，最常见的为 hidden

BFC布局规则

1、内部的Box会在垂直方向，一个接一个地放置。

2、Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠

3、BFC的区域不会与float box重叠

4、计算BFC的高度时，浮动元素也参与计算

应用场景

1.利用BFC阻止文本换行

2.清除浮动，容纳浮动元素

3.放置垂直margin重叠

4.自适应双栏布局
```

## 4.组件 父子传值 不同组件通信

```
父子

props

emit

$refs
```

v-model

.sync

```
    provide父组件提供变量/inject后代组件注入变量

$attrs/$listeners

不同组件

eventBus

vuex
```

## 5.异步变同步

```
promise、async await

可以在函数外加async

在这个函数中，promise函数前加上await，promise函数返回才会执行下一行命令，

即实现了异步变同步

async Initial() {

await this.testdata2();

this.testdata1();

testdata1() {

console.log("testdata1");

testdata2() {

return new Promise((resolve, reject) => {

setTimeout(() => {

console.log("testdata2");

resolve("resolved");

}, 2000);

});

},
```

## 6.路由模式和区别

```
hash模式

即地址栏 URL 中的 # 符号,这个#就是hash符号，中文名哈希符或锚点

hash路由是依据‘#’后的地址进行监听跳转的，通过location.hash来获取当前的hash值，通过hashchange事件进行监听，相同的hash地址不会触发该事件。

它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history模式

该模式是利用h5新增的pushstate和replacestate将地址直接压入历史记录栈中，通过popstate进行监听实现页面跳转

该模式如果访问的相同的地址会导致404报错，需要后端进行相应的配置

区别：
```

hash模式使用onhashchange

history模式不带#号。

```
    history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，
```

## 7.css 如何定义宽高 变成一个整体宽度为50%的正方形

```
width=50vw height=50vw
```

## 8.css 居中的几种方法

```
text-align:center

margin:0 auto

display: table-cell;

vertical-align: middle;

text-align: center;

position: fixed,absoulute, left:50%,top:50%,margin自身的一半/transform:translateX,Y -50%；

position: absolute;top: 0; left: 0; bottom: 0; right: 0;

display: flex,align-items:center,justify-content:center
```

## 9.数组去重的方法

```
定义一个新组数，遍历需要去重的数组，新组数不includes这项，就push这项到新数组，新数组就是去重后的数组
```

## 作用域链

```
在javascript中，每个函数都有自己的执行上下文环境，函数执行时需要变量会从函数内部一层一层往外找，直到找到变量
```

## 闭包

```
闭包就是能够读取其他函数内部变量的函数

由于其他函数内部变量被闭包引用，javascript垃圾回收机制不会回收，

因此，闭包会比其它函数多占用些内存空间，过度的使用可能会导致内存占用的增加。

闭包可以读取函数内部的变量

让这些变量的值始终保持在内存中，不会被自动回收
```

## nextTick作用

$nextTick(fun)里的fun就是异步回调，在这里操作可以保证dom已经更新完毕

## MVVM的理解

分为三个部分：分别是Model，模型层 ，View，视图层，ViewModel，V与M连接的桥梁，控制器

MVVM支持双向绑定，ViewModel层会监听model层的变化，引起view层的变化，反之一样

## Object.defineProperty？

定义新属性或修改原有的属性；vue的数据双向绑定的原理就是用的Object.defineProperty,修改触发set方法赋值，获取触发get方法取值

## 双向数据绑定底层实现？

？

vuex

state、存储变量,

getters、获取state中的变量，并return，类似computed计算属性

mutations、修改state中的变量，vuex中修改state的唯一方法

actions、请求接口数据，并commit触发mutations中的方法，从而修改state变量

module，可以模块化vuex，便于维护，rootState可以访问其它模块的变量

## vue中的key

vue在更新数据时更块找到变化，高效更新dom

## mixins

是混入，多个页面有相同的方法，属性时，可以采用混入，将公共方法，属性写在mixins中，需要的页面引入

## 遇到哪些坑，怎么解决

* 列表页跳转详情页，无法保持滚动条，使用keepalive，页面跳转时存储滚动条的scrolltop,在activated时对列表的scrolltop赋值
* 表格数据过长时页面卡顿，虚拟dom解决

## 数组和对象的浅拷贝，深拷贝

### 浅拷贝

=赋值

Object.assign()方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

### 数组深拷贝

arr.slice(0)

arr.concat([])

es6扩展运算符:[...arr]

### 对象

{...obj}

JSON.parse(JSON.stringify(obj))

拷贝一个字符串

0.1+0.8，取整？tofixed对吗？tofixed输出字符串，需要转数字

parseFloat((0.1+0.2).toFixed(2))

## 数字和字符串转换

parseInt,parseFloat,Number

true === 'true'

NaN === NaN false

## js数据类型

8种基本类型：

空（Null）、未定义（Undefined）、字符串（String）、数字(Number)、布尔(Boolean)、Object、Symbol、bigInt(大整数，1234n)。

引用数据类型：数组(Array)、函数(Function)。

JS 数据类型分为两大类，九个数据类型：

原始类型

对象类型

其中原始类型又分为七种类型，分别为：

boolean

number

string

undefined

null

symbol

bigint

对象类型分为两种，分别为：

Object

Function

其中 Object 中又包含了很多子类型，比如 Array、RegExp、Math、Map、Set 等等，也就不一一列出了。作者：yck链接：https://juejin.cn/post/6947860760840110088

var const let

判断是否为数组

Array.isArray(data)

[1] instanceof Array

Object.prototype.toString.call([1,2])

[1].constructor === Array

Array.prototype.isPrototypeOf([1])

## 宏任务，微任务

js事件循环https://juejin.cn/post/6844903512845860872

[https://blog.csdn.net/lc237423551/article/details/79902106](https://blog.csdn.net/lc237423551/article/details/79902106)

### Promise与process.nextTick(callback)

传统的定时器我们已经研究过了，接着我们探究 `Promise`与 `process.nextTick(callback)`的表现。

`Promise`的定义和功能本文不再赘述，不了解的读者可以学习一下阮一峰老师的[Promise](https://link.juejin.cn/?target=http%3A%2F%2Fes6.ruanyifeng.com%2F%23docs%2Fpromise)。而 `process.nextTick(callback)`类似node.js版的"setTimeout"，在事件循环的下一次循环中调用 callback 回调函数。

我们进入正题，除了广义的同步任务和异步任务，我们对任务有更精细的定义：

* macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
* micro-task(微任务)：Promise，process.nextTick

因为node中的event loop和浏览器中的event loop运行方式不一样。
浏览器中的机制就像作者说的那样：一个宏，所有微；再一个宏，再所有微 这样的去执行事件循环（也可以理解为微任务在宏任务之间的间隙去执行）。
而node中，是一类一系列这样子去执行的。是一类宏，然后本次循环所有微；再一类宏，所有微 这样子的。
然后题中两个setTimeout属于一类，即使他们每个宏中又各自有微，也是先执行完这一类所有setTimeout之后才执行本次剩下的微任务的。所以是这个结果。当然，node中nextTick的执行优先级高于then的。

es6

https://es6.ruanyifeng.com/#docs/promise

await ?

掘金面试题

https://juejin.cn/post/6947860760840110088

https://juejin.cn/post/6844904029340827656

cdn缓存，Content Delivery Network，即内容分发网络

第一次加载慢

区别:

传统访问：用户在浏览器输入域名发送请求-解析域名获取服务器IP地址-根据IP地址找到对应的服务器-服务器响应并返回数据

使用CDN访问：用户发送请求-智能DNS的解析(根据IP判断地理位置、接入网类型、选择路由最短和负载最轻的服务器)-取得缓存服务器IP-把内容返回给用户(如果缓存中有)-向源站发起请求-将结果返

回给用户-将结果存入缓存服务器

缓存问题导致看不到最新效果，在src后面添加随机数即可

## 手写mvvm

## 浏览器工作原理和web性能优化

switch循环

function getVal(val) {

let result = '';

switch(val) {

case 'aaa':

result = 'aaa';

break;

case 'bbb':

result = 'bbb';

break;

default:

result = 'defaultValue';

}

return result

}

function getVal(val) {

switch(val) {

case 'aaa':

return 'aaa';

case 'bbb':

return 'bbb';

default:

return 'defaultValue';

}

## 比较相等

es5:相等运算符==：会自动转换数据类型，严格相等运算符===：NaN === NaN false,+0 === -0 true

es6:Object.is()类似于===，不同之处只有2个，NaN === NaN true,+0 === -0 false

=== 和 Object.is(a, b)

同：比较值是否严格相等

异：===判断不出+0，-0，Object.is判断不出NaN,返回true

## 遇到的难题，怎么解决

1.无锡项目web，数据弹窗截图

父元素的初始宽度需要写死，折叠时加collapsed样式，width:unset.

不能在子元素加:class，使其width：200px，处理器慢时，会有图层滞留，导致截图htmltocanvs被偏移。

## typeof 和 instanceof的区别？

typeof返回字符串，用来检测数据类型，对于 Array, Null 等特殊对象使用 typeof 一律返回 object， 这正是 typeof 的局限性。

instanceof返回布尔值，用来检测变量是否为某种对象的实例

最后修改：2023 年 02 月 23 日

如果觉得我的文章对你有用，请随意赞赏

2 条评论

赤子之心
December 14th, 2023 at 03:41 pm

good

回复
admin
December 14th, 2023 at 03:39 pm

回复

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

前端基础

admin • 2023 年 02 月 23 日

## 1.跨域的定义，解决办法

跨域定义：浏览器不能执行域名、端口、协议不同，即非同源网站的脚本

服务器代理

## 2.css权重

```
一个元素有多个css,权重高的那条样式起作用，权重相同的，后写的样式会覆盖前面写的样式

通配符选择器忽略不计
```

## 3.css BFC模式

```
Block fomatting context：块级格式化上下文。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

如何创建？

float的值不为none

position的值不为static或者relative

display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个

overflow的值不为visible，最常见的为 hidden

BFC布局规则

1、内部的Box会在垂直方向，一个接一个地放置。

2、Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠

3、BFC的区域不会与float box重叠

4、计算BFC的高度时，浮动元素也参与计算

应用场景

1.利用BFC阻止文本换行

2.清除浮动，容纳浮动元素

3.放置垂直margin重叠

4.自适应双栏布局
```

## 4.组件 父子传值 不同组件通信

```
父子

props

emit

$refs
```

v-model

.sync

```
    provide父组件提供变量/inject后代组件注入变量

$attrs/$listeners

不同组件

eventBus

vuex
```

## 5.异步变同步

```
promise、async await

可以在函数外加async

在这个函数中，promise函数前加上await，promise函数返回才会执行下一行命令，

即实现了异步变同步

async Initial() {

await this.testdata2();

this.testdata1();

testdata1() {

console.log("testdata1");

testdata2() {

return new Promise((resolve, reject) => {

setTimeout(() => {

console.log("testdata2");

resolve("resolved");

}, 2000);

});

},
```

## 6.路由模式和区别

```
hash模式

即地址栏 URL 中的 # 符号,这个#就是hash符号，中文名哈希符或锚点

hash路由是依据‘#’后的地址进行监听跳转的，通过location.hash来获取当前的hash值，通过hashchange事件进行监听，相同的hash地址不会触发该事件。

它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history模式

该模式是利用h5新增的pushstate和replacestate将地址直接压入历史记录栈中，通过popstate进行监听实现页面跳转

该模式如果访问的相同的地址会导致404报错，需要后端进行相应的配置

区别：
```

hash模式使用onhashchange

history模式不带#号。

```
    history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，
```

## 7.css 如何定义宽高 变成一个整体宽度为50%的正方形

```
width=50vw height=50vw
```

## 8.css 居中的几种方法

```
text-align:center

margin:0 auto

display: table-cell;

vertical-align: middle;

text-align: center;

position: fixed,absoulute, left:50%,top:50%,margin自身的一半/transform:translateX,Y -50%；

position: absolute;top: 0; left: 0; bottom: 0; right: 0;

display: flex,align-items:center,justify-content:center
```

## 9.数组去重的方法

```
定义一个新组数，遍历需要去重的数组，新组数不includes这项，就push这项到新数组，新数组就是去重后的数组
```

## 作用域链

```
在javascript中，每个函数都有自己的执行上下文环境，函数执行时需要变量会从函数内部一层一层往外找，直到找到变量
```

## 闭包

```
闭包就是能够读取其他函数内部变量的函数

由于其他函数内部变量被闭包引用，javascript垃圾回收机制不会回收，

因此，闭包会比其它函数多占用些内存空间，过度的使用可能会导致内存占用的增加。

闭包可以读取函数内部的变量

让这些变量的值始终保持在内存中，不会被自动回收
```

## nextTick作用

$nextTick(fun)里的fun就是异步回调，在这里操作可以保证dom已经更新完毕

## MVVM的理解

分为三个部分：分别是Model，模型层 ，View，视图层，ViewModel，V与M连接的桥梁，控制器

MVVM支持双向绑定，ViewModel层会监听model层的变化，引起view层的变化，反之一样

## Object.defineProperty？

定义新属性或修改原有的属性；vue的数据双向绑定的原理就是用的Object.defineProperty,修改触发set方法赋值，获取触发get方法取值

## 双向数据绑定底层实现？

？

vuex

state、存储变量,

getters、获取state中的变量，并return，类似computed计算属性

mutations、修改state中的变量，vuex中修改state的唯一方法

actions、请求接口数据，并commit触发mutations中的方法，从而修改state变量

module，可以模块化vuex，便于维护，rootState可以访问其它模块的变量

## vue中的key

vue在更新数据时更块找到变化，高效更新dom

## mixins

是混入，多个页面有相同的方法，属性时，可以采用混入，将公共方法，属性写在mixins中，需要的页面引入

## 遇到哪些坑，怎么解决

## 数组和对象的浅拷贝，深拷贝

### 浅拷贝

=赋值

Object.assign()方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

### 数组深拷贝

arr.slice(0)

arr.concat([])

es6扩展运算符:[...arr]

### 对象

{...obj}

JSON.parse(JSON.stringify(obj))

拷贝一个字符串

0.1+0.8，取整？tofixed对吗？tofixed输出字符串，需要转数字

parseFloat((0.1+0.2).toFixed(2))

## 数字和字符串转换

parseInt,parseFloat,Number

true === 'true'

NaN === NaN false

## js数据类型

8种基本类型：

空（Null）、未定义（Undefined）、字符串（String）、数字(Number)、布尔(Boolean)、Object、Symbol、bigInt(大整数，1234n)。

引用数据类型：数组(Array)、函数(Function)。

JS 数据类型分为两大类，九个数据类型：

原始类型

对象类型

其中原始类型又分为七种类型，分别为：

boolean

number

string

undefined

null

symbol

bigint

对象类型分为两种，分别为：

Object

Function

其中 Object 中又包含了很多子类型，比如 Array、RegExp、Math、Map、Set 等等，也就不一一列出了。作者：yck链接：https://juejin.cn/post/6947860760840110088

var const let

判断是否为数组

Array.isArray(data)

[1] instanceof Array

Object.prototype.toString.call([1,2])

[1].constructor === Array

Array.prototype.isPrototypeOf([1])

## 宏任务，微任务

js事件循环https://juejin.cn/post/6844903512845860872

[https://blog.csdn.net/lc237423551/article/details/79902106](https://blog.csdn.net/lc237423551/article/details/79902106)

### Promise与process.nextTick(callback)

传统的定时器我们已经研究过了，接着我们探究 `Promise`与 `process.nextTick(callback)`的表现。

我们进入正题，除了广义的同步任务和异步任务，我们对任务有更精细的定义：

* macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
* micro-task(微任务)：Promise，process.nextTick

es6

https://es6.ruanyifeng.com/#docs/promise

await ?

掘金面试题

https://juejin.cn/post/6947860760840110088

https://juejin.cn/post/6844904029340827656

cdn缓存，Content Delivery Network，即内容分发网络

第一次加载慢

区别:

传统访问：用户在浏览器输入域名发送请求-解析域名获取服务器IP地址-根据IP地址找到对应的服务器-服务器响应并返回数据

回给用户-将结果存入缓存服务器

缓存问题导致看不到最新效果，在src后面添加随机数即可

## 手写mvvm

## 浏览器工作原理和web性能优化

switch循环

function getVal(val) {

let result = '';

switch(val) {

case 'aaa':

result = 'aaa';

break;

case 'bbb':

result = 'bbb';

break;

default:

result = 'defaultValue';

}

return result

}

function getVal(val) {

switch(val) {

case 'aaa':

return 'aaa';

case 'bbb':

return 'bbb';

default:

return 'defaultValue';

}

## 比较相等

es5:相等运算符==：会自动转换数据类型，严格相等运算符===：NaN === NaN false,+0 === -0 true

es6:Object.is()类似于===，不同之处只有2个，NaN === NaN true,+0 === -0 false

=== 和 Object.is(a, b)

同：比较值是否严格相等

异：===判断不出+0，-0，Object.is判断不出NaN,返回true

## 遇到的难题，怎么解决

1.无锡项目web，数据弹窗截图

父元素的初始宽度需要写死，折叠时加collapsed样式，width:unset.

不能在子元素加:class，使其width：200px，处理器慢时，会有图层滞留，导致截图htmltocanvs被偏移。

## typeof 和 instanceof的区别？

typeof返回字符串，用来检测数据类型，对于 Array, Null 等特殊对象使用 typeof 一律返回 object， 这正是 typeof 的局限性。

instanceof返回布尔值，用来检测变量是否为某种对象的实例

前端基础

2 条评论

发表评论取消回复

轻风BMS-注册使用手册

前端基础

我的加密文章

vue中destroyed生命周期不触发

轻风BMS-用户服务协议

vue中destroyed生命周期不触发

前端基础

轻风BMS-用户服务协议

我的加密文章

轻风BMS-注册使用手册

前端基础

2 条评论

发表评论 取消回复

前端基础

发表评论取消回复