4月24日 web学习笔记

一、CSS 高级技巧与最佳实践
CSS 高级选择器与伪类
属性选择器：根据元素属性选择。
伪类：:hover、:active、:focus、:nth-child。
示例：
css

/* 属性选择器 */
input[type="text"] {
padding: 8px;
border: 1px solid #ddd;
}

/* 伪类 */
button:hover {
background-color: #3498db;
}

button:active {
background-color: #2980b9;
}

input:focus {
outline: 2px solid #3498db;
}

.grid-item:nth-child(odd) {
background-color: #f4f4f4;
}
CSS 动画与过渡
过渡：平滑过渡效果。
动画：使用 @keyframes 定义动画。
示例：
css

/* 过渡效果 */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.fade-in {
animation: fadeIn 1s ease-in-out;
}
CSS Grid 布局高级用法
命名网格区域：使用 grid-template-areas。
网格间距：grid-gap 或 gap。
示例：
css

.dashboard {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas:
"header header header"
"sidebar main content"
"footer footer footer";
gap: 20px;
}

.header { grid-area: header; background: #3498db; color: white; }
.sidebar { grid-area: sidebar; background: #2ecc71; }
.main { grid-area: main; background: #f4f4f4; }
.footer { grid-area: footer; background: #34495e; color: white; }
CSS 变量（自定义属性）
定义与使用：在 :root 中定义全局变量。
示例：
css

:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--text-color: #333;
--border-radius: 4px;
}

.button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px 20px;
border-radius: var(--border-radius);
cursor: pointer;
}

.button.secondary {
background-color: var(--secondary-color);
}
响应式设计与媒体查询
移动端优先：从移动端布局开始，逐步扩展到桌面端。
媒体查询：
css

/* 平板设备 */
@media (min-width: 768px) {
.container {
max-width: 750px;
margin: 0 auto;
}
}

/* 桌面设备 */
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
二、JavaScript 高级技巧与最佳实践
Promise 的高级用法
Promise.all：并行执行多个 Promise。
Promise.race：返回最先完成的 Promise。
Promise.allSettled：等待所有 Promise 结束。
示例：
JavaScript

const promise1 = Promise.resolve(1);
const promise2 = new Promise(resolve => setTimeout(() => resolve(2), 1000));
const promise3 = Promise.reject(3);

Promise.all([promise1, promise2, promise3])
.then(results => console.log(results))
.catch(error => console.error(error));

Promise.allSettled([promise1, promise2, promise3])
.then(results => console.log(results));
异步迭代器与生成器
异步迭代器：处理异步数据流。
生成器：使用 function* 和 yield。
示例：
JavaScript

// 异步迭代器
const asyncIterable = {
async *Symbol.asyncIterator {
yield 1;
await new Promise(resolve => setTimeout(resolve, 1000));
yield 2;
}
};

(async () => {
for await (const value of asyncIterable) {
console.log(value);
}
})();

// 生成器
function* generatorFunction() {
yield 1;
yield 2;
return 3;
}

const generator = generatorFunction();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3
装饰器模式
定义：动态扩展对象功能。
示例：
JavaScript

function logger(target, name, descriptor) {
const originalMethod = descriptor.value;

descriptor.value = function(...args) {
    console.log(`Calling ${name} with`, args);
    const result = originalMethod.apply(this, args);
    console.log(`Result of ${name}:`, result);
    return result;
};

return descriptor;

}

class MathOperations {
@logger
add(a, b) {
return a + b;
}
}

const math = new MathOperations();
math.add(2, 3);
Proxy 与 Reflect
Proxy：创建对象的代理。
Reflect：提供操作对象的方法。
示例：
JavaScript

const target = {
name: '张三',
age: 25,
};

const handler = {
get: (obj, prop) => {
console.log(Getting ${prop});
return Reflect.get(obj, prop);
},
set: (obj, prop, value) => {
console.log(Setting ${prop} to ${value});
return Reflect.set(obj, prop, value);
}
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 输出：Getting name
proxy.age = 26; // 输出：Setting age to 26
三、实战练习
CSS 动画与过渡
创建一个包含悬停效果和动画的网页组件。
使用 CSS 变量统一管理样式。
JavaScript 异步编程
使用 Promise.all 并行加载多个 API 数据。
创建一个异步迭代器处理数据流。
装饰器与 Proxy
使用装饰器增强类方法的日志功能。
使用 Proxy 创建一个对象的代理，监控属性访问。