前端进阶技术文档

1. JavaScript 高级特性

1.1 作用域与闭包

// 函数作用域
function outer() {
    let a = 1;
    function inner() {
        console.log(a); // 可以访问外部作用域的变量
    }
    inner();
}

// 块级作用域
{
    let x = 1;
    const y = 2;
}
// console.log(x); // 错误：x未定义

// 闭包示例
function createCounter() {
    let count = 0;
    return {
        increment: () => ++count,
        getCount: () => count
    };
}

const counter = createCounter();
console.log(counter.increment()); // 1

1.2 异步编程

// Promise
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({ data: 'success' });
        }, 1000);
    });
}

// Promise链式调用
fetchData()
    .then(result => console.log(result))
    .catch(error => console.error(error));

// async/await
async function getData() {
    try {
        const result = await fetchData();
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

// Promise.all示例
const promises = [fetchData(), fetchData()];
Promise.all(promises)
    .then(results => console.log(results));

1.3 错误处理

try {
    // 可能抛出错误的代码
    throw new Error('自定义错误');
} catch (error) {
    console.error(error.message);
} finally {
    // 总是执行的代码
}

// 自定义错误类
class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = 'ValidationError';
    }
}

1.4 ES6+ 特性

// 解构赋值
const { name, age } = person;
const [first, ...rest] = array;

// 模板字符串
const greeting = `Hello, ${name}!`;

// 箭头函数
const add = (a, b) => a + b;

// 类和继承
class Animal {
    constructor(name) {
        this.name = name;
    }
    
    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

// 模块化
// module.js
export const helper = () => {};
export default class MainClass {}

// main.js
import MainClass, { helper } from './module.js';

2. CSS 进阶

2.1 Flexbox 布局

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.item {
    flex: 1;
    /* 或使用具体值 */
    flex: 0 1 200px;
}

2.2 Grid 布局

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
}

.grid-item {
    grid-column: span 2;
    grid-row: span 2;
}

2.3 动画和过渡

/* 过渡 */
.element {
    transition: all 0.3s ease-in-out;
}

/* 变换 */
.element:hover {
    transform: scale(1.1) rotate(10deg);
}

/* 关键帧动画 */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.animated {
    animation: slideIn 0.5s ease-out;
}

2.4 Sass 预处理器

// 变量
$primary-color: #007bff;
$spacing: 20px;

// 混入
@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

// 嵌套规则
.container {
    padding: $spacing;
    
    .header {
        color: $primary-color;
        
        &:hover {
            opacity: 0.8;
        }
    }
}

// 函数
@function calculate-width($n) {
    @return $n * 100px;
}

2.5 响应式设计

/* 基础媒体查询 */
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

/* 响应式图片 */
.responsive-image {
    max-width: 100%;
    height: auto;
}

/* 响应式字体 */
html {
    font-size: calc(16px + 0.5vw);
}

3. Git 版本控制

3.1 基础命令

# 初始化仓库
git init

# 添加文件到暂存区
git add <file>
git add .

# 提交更改
git commit -m "commit message"

# 查看状态
git status

# 查看提交历史
git log

# 创建分支
git branch feature-branch

# 切换分支
git checkout feature-branch
# 或
git switch feature-branch

# 合并分支
git merge feature-branch

3.2 远程仓库操作

# 添加远程仓库
git remote add origin <repository-url>

# 推送到远程仓库
git push origin master

# 拉取远程更新
git pull origin master

# 克隆仓库
git clone <repository-url>

3.3 高级 Git 操作

# 交互式变基
git rebase -i HEAD~3

# 储藏更改
git stash
git stash pop

# 标签管理
git tag v1.0.0
git push origin v1.0.0

# 撤销提交
git reset --soft HEAD^
git reset --hard HEAD^

4. 最佳实践

4.1 代码组织

模块化开发
组件化思维
遵循 DRY 原则（Don't Repeat Yourself）
使用适当的设计模式

4.2 性能优化

代码分割和懒加载
缓存策略
资源压缩
图片优化
减少 DOM 操作

4.3 开发流程

使用 ESLint 和 Prettier 保持代码风格一致
编写单元测试
进行代码审查
持续集成/持续部署 (CI/CD)

4.4 安全考虑

XSS 防护
CSRF 防护
输入验证
安全的依赖管理

5. 调试和工具

5.1 开发工具

Chrome DevTools
VS Code
包管理器（npm/yarn）
构建工具（webpack/vite）

5.2 调试技巧

断点调试
网络请求分析
性能分析
内存泄漏检测

这份文档涵盖了前端开发的进阶知识，建议根据实际项目需求深入学习相关主题。持续学习和实践是提高技能的关键。