阿里飞猪前端面经

一面:实习有什么产出，提升？
vue响应式原理
如何判断一个变量是数组，array.isarray,object.prototype.tostring.call各自原理，原型链讲一下

引用变量和基础变量区别

在编程中，"引用变量"和"基础变量"通常是指不同类型的数据存储方式，有时也称为"引用类型"和"基本类型"。

基础变量（基本类型）：
- 基础变量存储的是简单的数据值，如数字、字符串、布尔值等。
- 基础变量在内存中存储在栈内存中，并且它们的值直接存储在变量的位置。
- 对基础变量进行赋值、传递参数等操作时，是将值本身进行复制或传递。

let num1 = 10; // 基础类型变量
let str1 = "Hello"; // 基础类型变量

引用变量（引用类型）：
- 引用变量存储的是对象的引用（内存地址），对象可以是数组、对象、函数等复杂的数据结构。
- 引用变量在内存中存储在堆内存中，变量本身存储的是对象的引用。
- 对引用变量进行赋值、传递参数等操作时，是将对象的引用进行复制或传递，多个变量可以引用同一个对象。

let arr1 = [1, 2, 3]; // 引用类型变量，引用了数组对象
let obj1 = { name: "John", age: 30 }; // 引用类型变量，引用了对象

区别总结：

基础变量存储简单数据值，而引用变量存储对象的引用（内存地址）。
基础变量的值直接存储在变量中，而引用变量存储的是对象的引用。
对基础变量的操作会直接影响其值，而对引用变量的操作会影响引用的对象。

原生js如何获取dom元素，如何监听dom元素全部加载出来，如何监听图片css也加载出来

在原生JavaScript中，获取DOM元素、监听DOM元素全部加载出来以及监听图片和CSS加载完成可以使用以下方法：

获取DOM元素：
- 使用document.getElementById(id)：通过元素的id属性获取DOM元素。
- 使用document.querySelector(selector)：通过CSS选择器获取匹配的第一个DOM元素。
- 使用document.querySelectorAll(selector)：通过CSS选择器获取所有匹配的DOM元素。
监听DOM元素全部加载出来：
- 使用DOMContentLoaded事件：该事件在DOM树加载完成后触发，可以监听该事件来执行相关操作。
```
document.addEventListener('DOMContentLoaded', function() {
    // 执行操作，DOM元素已全部加载
});
```

监听图片和CSS加载完成：

使用load事件：对于图片和CSS文件，可以监听它们的load事件来判断加载状态。

const image = document.querySelector('img');
image.addEventListener('load', function() {
    // 图片加载完成
});

const link = document.querySelector('link[rel="stylesheet"]');
link.addEventListener('load', function() {
    // CSS文件加载完成
});

需要注意的是，对于已经缓存的图片和CSS文件，load事件可能不会触发。在这种情况下，可以使用complete属性来检查加载状态：

const image = document.querySelector('img');
if (image.complete) {
    // 图片已加载完成
}

综上所述，以上方法可以帮助你获取DOM元素、监听DOM元素全部加载出来以及监听图片和CSS加载完成的状态。

元素垂直居中方法

在网页设计中，垂直居中元素是一个常见的需求。以下是几种常用的元素垂直居中方法：

使用Flexbox布局：使用Flexbox布局是最简单和常用的方法之一，只需将父容器设置为display: flex;，并添加align-items: center;属性即可使子元素垂直居中。
```
.container {
    display: flex;
    align-items: center; /* 垂直居中 */
}
```
使用Grid布局：类似Flexbox布局，Grid布局也可以轻松实现元素的垂直居中，只需将父容器设置为display: grid;，并添加align-items: center;属性。
```
.container {
    display: grid;
    align-items: center; /* 垂直居中 */
}
```
使用定位和变换：通过将子元素设置为绝对定位，并将top和left属性设置为50%，再结合使用CSS3的transform属性将元素向上移动自身高度的一半，实现垂直居中。
```
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
```
使用表格布局：将父容器设置为display: table;，并将子元素设置为display: table-cell;，再结合使用vertical-align: middle;属性实现垂直居中。
```
.container {
    display: table;
}
.child {
    display: table-cell;
    vertical-align: middle; /* 垂直居中 */
}
```
使用自适应的上下外边距：如果知道子元素的高度，可以通过给子元素设置上下外边距为auto，将元素垂直居中。
```
.child {
    margin: auto 0; /* 上下外边距为auto */
}
```

这些方法都可以实现元素的垂直居中，具体选择哪种方法取决于实际需求和布局结构。

设计模式

作者：已坠机
链接：www.nowcoder.com/discuss/551…
来源：牛客网

来源：牛客网

前端面试题详解整理84|元素垂直居中,引用变量和基础变量区别 ,原生js如何获取dom元素，如何监听dom元素全部加载出来，如何监听图片css也加载

阿里飞猪前端面经

引用变量和基础变量区别

原生js如何获取dom元素，如何监听dom元素全部加载出来，如何监听图片css也加载出来

元素垂直居中方法