前端进阶技术文档

Nash

• 3 min read

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 代码组织

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

4.2 性能优化

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

4.3 开发流程

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

4.4 安全考虑

  1. XSS 防护
  2. CSRF 防护
  3. 输入验证
  4. 安全的依赖管理

5. 调试和工具

5.1 开发工具

  1. Chrome DevTools
  2. VS Code
  3. 包管理器（npm/yarn）
  4. 构建工具（webpack/vite）

5.2 调试技巧

  1. 断点调试
  2. 网络请求分析
  3. 性能分析
  4. 内存泄漏检测

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

苏ICP备2025153828号