前端学习第一周总结笔记

Author： Dracowyn
发布时间：October 1, 2023
317 views
5290 words
Categories：笔记

最近我一直在找实习，但是无论是投简历还是面试，往往都没有得到回复或者只是被标记了感兴趣，之后也没有了下文。~~前程堪忧~~

为了提升自己的能力，我开始了一个为期约六个月的前端强化学习计划，当然算法也是很重要的，会在后边跟进推进。作为一个工科出身的学生，在学习前端方面并没有遇到太多的难题，而且也学得很快。希望我能够继续保持这种状态，不断提高自己的技能水平。UwU

# HTML与CSS篇

## 相对定位和绝对定位

相对定位和绝对定位是前端布局中常用的两种方式。

### 相对定位

相对定位是相对于元素原本所在的位置进行定位。通过设置`position:relative`和top、bottom、left、right属性，可以使元素相对于原本位置进行移动。

### 绝对定位

绝对定位是相对于其父元素或者根元素进行定位。通过设置`position:absolute`和top、bottom、left、right属性，可以使元素相对于其父元素或者根元素进行移动。

## 弹性布局

弹性布局是一种响应式的布局方式，可以根据不同的设备和屏幕大小，自动调整页面布局。通过设置`display:flex`和`flex`属性，可以实现页面元素的自适应。
因为有之前写响应式登录注册页面的一些小小的经验，在大多数练习当中我都是使用弹性布局去实现的，**只要不是元素重叠在一起的情况几乎都能做。**

## 布局设计

栅格布局：通过使用栅格系统将页面分成若干列，使页面更加整齐和有序。

弹性布局：通过使用弹性布局实现自适应布局，适应不同设备和屏幕大小。

流式布局：通过使用百分比和最大宽度等属性，实现页面元素的自动调整。

## 动画效果

### transition

transition 是一种 CSS3 动画效果，用于实现元素从一种状态到另一种状态的平滑过渡。通过设置 transition 属性和相应的属性值，可以定义元素的过渡效果。

常见的 transition 属性包括：

* transition-property：定义过渡效果的 CSS 属性名称。
* transition-duration：定义过渡效果的持续时间。
* transition-timing-function：定义过渡效果的时间函数。
* transition-delay：定义过渡效果的延迟时间。

### transform

transform 是一种 CSS3 属性，用于对元素进行变形操作。通过设置 transform 属性和相应的属性值，可以实现元素的平移、旋转、缩放、倾斜等操作。

常见的 transform 属性包括：

* translate：用于实现元素的平移操作。
* rotate：用于实现元素的旋转操作。
* scale：用于实现元素的缩放操作。
* skew：用于实现元素的倾斜操作。

### 3D 效果

在 CSS3 中，可以使用 transform 和 perspective 属性实现各种 3D 效果。常见的 3D 效果包括：

* 立方体效果：通过 transform 和 perspective 属性实现。
* 翻转效果：通过 transform 属性实现元素的翻转。
* 旋转效果：通过 transform 属性实现元素的旋转。
* 平移效果：通过 transform 属性实现元素的平移。

3D 图片展示效果Example：

```html
<style>
        * {
            margin: 0;
            padding: 0;
        }

.box {
            margin-top: 50px;
            margin-left: 100px;
            display: flex;
        }

.pic {
            /*使被转换的子元素保留其 3D 转换*/
            transform-style: preserve-3d;
            /*设置元素被查看位置的视图：元素距离视图的距离，以像素计。*/
            perspective: 500px;
            width: 300px;
            height: 400px;
            border-radius: 25px;
            margin-left: -100px;
            position: relative;
            z-index: 1;
        }

.pic img {
            border-radius: 25px;
            object-fit: cover;
            object-position: center;
            height: 100%;
            width: 100%;
            /*沿着Y轴旋转*/
            transform: rotateY(45deg);
            transition: 1s;
        }

.pic:hover  img{
            transform: rotateY(0deg) translateZ(20vh);
        }

.pic:hover {
            z-index: 2;
        }

</style>
</head>
<body>

<div class="main">
    <div class="box">
        <div class="pic">
            <img src="11.png" alt="" style="">
        </div>
        <div class="pic">
            <img src="2.png" alt="" style="">
        </div>
        <div class="pic">
            <img src="1.png" alt="" style="">
        </div>
        <div class="pic">
            <img src="Screen_06-02-2022_21-40-32.png" alt="" style="">
        </div>
        <div class="pic">
            <img src="Screen_06-02-2022_21-40-32.png" alt="" style="">
        </div>
    </div>
</div>
```

# JavaScript篇

这一部分我学习的暂时是纯理论，尚未进行实践。尽管JavaScript与其他编程语言有一些相似之处，但是打好基础才能更好的深入学习。

## 作用域

**静态作用域和动态作用域是指变量作用域的规则，而全局作用域和局部作用域是指变量作用域的范围。**
作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。
JavaScript 采用的是静态作用域，，也称为 **词法作用域 (lexical scoping)**。函数的作用域在函数的定义时就已经确定了，而不是在函数的调用时才确定。

### 全局作用域和局部作用域

全局作用域和局部作用域是指变量作用域的范围。**全局作用域是指在程序的任何地方都可以访问到的变量，而局部作用域是指在函数内部定义的变量，只能在函数内部访问。**

### 静态作用域和动态作用域

静态作用域（也称**词法作用域**）和动态作用域是变量作用域的规则。**静态作用域在代码编写期间就已经确定，而动态作用域在代码运行期间才能确定。**

JavaScript 中的变量作用域由函数嵌套关系决定，而不是由函数调用关系决定。在函数内部可以访问自己的变量，也可以访问它被嵌套的函数的变量。而在函数外部无法访问函数内部的变量，除非将这些变量作为函数的返回值或者通过闭包的方式将其传递出来。

```javascript
let a = 1;

function foo() {
	let b = 2;
	console.log(a); // 1
	console.log(b); // 2
}

foo();

console.log(a); // 1
console.log(b); // b is not defined
```

变量 a 可以在函数内外访问。而变量 b 是在函数内部定义的局部变量，只能在函数内部访问，函数外部无法访问。

## 闭包

函数内部创建并返回另一个函数，这个内部函数可以访问外部函数的变量和参数，即使外部函数已经执行完毕，这些**变量和参数依然保存在内存中，不会被销毁**。闭包可以用来实现**封装、模块化、缓存**等功能。

具体来说，闭包是指一个函数可以访问它定义时所在的词法作用域中的变量和参数，即使这个函数被传递到了其他地方，并在其他地方调用。这是因为在 JavaScript 中，**函数在定义时会创建一个闭包，保存着函数所在的词法作用域，闭包会保存这些变量和参数，使得这些变量和参数在函数执行时仍然可用**。

### 利用闭包突破作用域

函数作为返回值：

```javascript
function mail() {
	let content = '信';

return function() {
		console.log(content);
	}
}
const envelop = mail();
envelop();
```

## this 指针

this 指针是一个特殊的变量，它始终指向当前函数的执行环境。
**this 上下文的值取决于函数的调用方式。**

### 全局上下文

**函数直接调用 - this指向是window**

```javascript
function test() {
	console.log(this);
}

test(); // 输出 window
```

### 对象上下文

**当函数作为对象的方法被调用时，this的指向是调用堆栈的上一级。**

```javascript
const obj = {
	foo: function() {
		console.log(this);
	}
};
obj.foo(); // 输出 obj 对象
```

### 作为构造函数调用

**当函数作为构造函数调用时，this指向新创建的对象。**

```javascript
function Person(name) {
	this.name = name;
	console.log(this);
}
let person = new Person('Tom'); // 输出新创建的 person 对象
```

### 显式绑定（bind ｜ apply ｜ call)

call() 和 apply() 的作用相同，都是用来改变函数的执行上下文。它们的区别在于传递参数的方式不同。**call() 方法是将参数依次传入，而 apply() 方法是将参数封装在数组中传入。**

bind() 的作用是创建一个新的函数，并将原函数的执行上下文绑定到指定的对象上。它不会立即执行函数，而是返回一个新的函数，可以在稍后的时间点执行。与 call() 和 apply() 不同，bind() 方法不会立即执行函数。

```javascript
function sayHello(firstName, lastName) {
	console.log(`Hello, ${firstName} ${lastName}!`);
}

// 使用 call() 方法传递参数
sayHello.call(null, 'John', 'Doe');
// 使用 apply() 方法传递参数
sayHello.apply(null, ['John', 'Doe']);
// 使用 bind() 方法创建一个新的函数
const sayHelloToJohn = sayHello.bind(null, 'John');

// 调用函数
// 输出 "Hello, John Doe!"
sayHello.call(null, 'John', 'Doe'); 
sayHello.apply(null, ['John', 'Doe']);
sayHelloToJohn('Doe');
```

Last modification：October 1, 2023

If you think my article is useful to you, please feel free to appreciate

前端学习第一周总结笔记

Dracowyn • 2023 年 10 月 01 日

最近我一直在找实习，但是无论是投简历还是面试，往往都没有得到回复或者只是被标记了感兴趣，之后也没有了下文。~~前程堪忧~~

# HTML与CSS篇

## 相对定位和绝对定位

相对定位和绝对定位是前端布局中常用的两种方式。

### 相对定位

相对定位是相对于元素原本所在的位置进行定位。通过设置`position:relative`和top、bottom、left、right属性，可以使元素相对于原本位置进行移动。

### 绝对定位

## 弹性布局

## 布局设计

栅格布局：通过使用栅格系统将页面分成若干列，使页面更加整齐和有序。

弹性布局：通过使用弹性布局实现自适应布局，适应不同设备和屏幕大小。

流式布局：通过使用百分比和最大宽度等属性，实现页面元素的自动调整。

## 动画效果

### transition

transition 是一种 CSS3 动画效果，用于实现元素从一种状态到另一种状态的平滑过渡。通过设置 transition 属性和相应的属性值，可以定义元素的过渡效果。

常见的 transition 属性包括：

### transform

transform 是一种 CSS3 属性，用于对元素进行变形操作。通过设置 transform 属性和相应的属性值，可以实现元素的平移、旋转、缩放、倾斜等操作。

常见的 transform 属性包括：

* translate：用于实现元素的平移操作。
* rotate：用于实现元素的旋转操作。
* scale：用于实现元素的缩放操作。
* skew：用于实现元素的倾斜操作。

### 3D 效果

在 CSS3 中，可以使用 transform 和 perspective 属性实现各种 3D 效果。常见的 3D 效果包括：

3D 图片展示效果Example：

```html
<style>
        * {
            margin: 0;
            padding: 0;
        }

.box {
            margin-top: 50px;
            margin-left: 100px;
            display: flex;
        }

.pic:hover  img{
            transform: rotateY(0deg) translateZ(20vh);
        }

.pic:hover {
            z-index: 2;
        }

</style>
</head>
<body>

# JavaScript篇

这一部分我学习的暂时是纯理论，尚未进行实践。尽管JavaScript与其他编程语言有一些相似之处，但是打好基础才能更好的深入学习。

## 作用域

### 全局作用域和局部作用域

### 静态作用域和动态作用域

```javascript
let a = 1;

function foo() {
	let b = 2;
	console.log(a); // 1
	console.log(b); // 2
}

foo();

console.log(a); // 1
console.log(b); // b is not defined
```

变量 a 可以在函数内外访问。而变量 b 是在函数内部定义的局部变量，只能在函数内部访问，函数外部无法访问。

## 闭包

### 利用闭包突破作用域

函数作为返回值：

```javascript
function mail() {
	let content = '信';

return function() {
		console.log(content);
	}
}
const envelop = mail();
envelop();
```

## this 指针

this 指针是一个特殊的变量，它始终指向当前函数的执行环境。
**this 上下文的值取决于函数的调用方式。**

### 全局上下文

**函数直接调用 - this指向是window**

```javascript
function test() {
	console.log(this);
}

test(); // 输出 window
```

### 对象上下文

**当函数作为对象的方法被调用时，this的指向是调用堆栈的上一级。**

```javascript
const obj = {
	foo: function() {
		console.log(this);
	}
};
obj.foo(); // 输出 obj 对象
```

### 作为构造函数调用

**当函数作为构造函数调用时，this指向新创建的对象。**

```javascript
function Person(name) {
	this.name = name;
	console.log(this);
}
let person = new Person('Tom'); // 输出新创建的 person 对象
```

### 显式绑定（bind ｜ apply ｜ call)

```javascript
function sayHello(firstName, lastName) {
	console.log(`Hello, ${firstName} ${lastName}!`);
}

// 调用函数
// 输出 "Hello, John Doe!"
sayHello.call(null, 'John', 'Doe'); 
sayHello.apply(null, ['John', 'Doe']);
sayHelloToJohn('Doe');
```

前端学习第一周总结笔记

Discuz!X3使用UTF8MB4+Inoodb的一些研究

完美解决Discuz!X手机版提示“您访问的页面无手机页面,是否进一步访问电脑版?”的问题

CentOS 7 安装OpenStack教程

宝塔Nginx搭建Nextcloud教程

CentOS/Redhat 升级OpenSSH教程

自设：幻羽

完美解决Discuz!X手机版提示“您访问的页面无手机页面,是否进一步访问电脑版?”的问题

ThinkPHP8+Vue3的传奇装备查询系统

Vue基础笔记

JavaScript的作用域+上下文理解笔记

前端学习第一周总结笔记