学习Web全栈体系记录

这些概念涉及JavaScript中的核心编程思想与设计模式，下面我会详细解释每个重点和应用，并给出实际的代码示例和应用场景。

1. 高阶函数与函数抽象

重点：

JavaScript的原始类型和引用类型：
- 原始类型（Primitive Types）：包括 string, number, boolean, undefined, null, symbol 和 bigint。这些类型的变量存储的是值，赋值时会创建新的副本。
- 引用类型（Reference Types）：包括 object, array, function 等。这些类型的变量存储的是内存地址，赋值时只是复制了地址，所以修改一个变量会影响其他引用它的变量。
浅拷贝与深拷贝：
- 浅拷贝：只复制对象的引用，嵌套对象的引用不会被复制，只是引用相同的内存地址。
```
let a = { x: 1, y: [1, 2] };
let b = { ...a };
b.y.push(3);
console.log(a.y);  // [1, 2, 3], a 和 b 的 y 引用了同一数组
```
- 深拷贝：会递归地复制对象及其所有嵌套对象，完全独立于原始对象。
```
let a = { x: 1, y: [1, 2] };
let b = JSON.parse(JSON.stringify(a));
b.y.push(3);
console.log(a.y);  // [1, 2], a 和 b 的 y 是独立的
```
可变性与不可变性：
- 可变性：对象的属性可以被修改。JavaScript中的对象默认是可变的。
- 不可变性：创建一个对象后，无法改变它的状态或属性。通过使用 Object.freeze() 或 Immutable.js 等库来实现不可变对象。
纯函数与高阶函数：
- 纯函数：相同输入总是产生相同输出，并且没有副作用（不修改外部变量）。
```
const add = (a, b) => a + b;
```
- 高阶函数：接收函数作为参数或返回一个函数。常见的高阶函数有 map, filter, reduce。
```
const map = (arr, fn) => arr.map(fn);
const result = map([1, 2, 3], x => x * 2);  // [2, 4, 6]
```

应用：

Shallow Copy => React 性能优化：
在React中，通过避免直接修改state对象来提高性能，React使用浅拷贝来判断组件是否需要重新渲染。例如，使用 setState 时，React会通过浅比较判断对象是否发生变化。
```
this.setState(prevState => ({ items: [...prevState.items, newItem] }));
```

Compose => Redux Middleware：
compose 函数通常用于函数组合，使多个函数的调用更简洁。它常见于Redux中的middleware链条。

const compose = (...fns) => (arg) => fns.reduceRight((acc, fn) => fn(acc), arg);
const logger = store => next => action => {
  console.log('dispatching', action);
  return next(action);
};
const composed = compose(logger, otherMiddleware)(store);

2. 异步编程模式

重点：

EventLoop与宏队列、微任务队列：
JavaScript的执行机制是单线程的，EventLoop是核心。代码中的异步操作（如setTimeout, Promise, async/await）会被放入不同的队列。
- 宏任务队列（Macrotasks）：setTimeout, setInterval, I/O 操作。
- 微任务队列（Microtasks）：Promise 的 .then 或 catch，async/await。
执行顺序是：首先执行栈中的同步任务，然后执行微任务队列中的任务，最后执行宏任务队列中的任务。
```
console.log('Start');
setTimeout(() => console.log('Timeout'), 0);  // 宏任务
Promise.resolve().then(() => console.log('Promise'));  // 微任务
console.log('End');
// 输出顺序：Start -> End -> Promise -> Timeout
```

Promise和Async/Await的原理：

Promise：用于处理异步操作，resolve 和 reject 方法触发Promise的状态变化。

Async/Await：基于Promise的语法糖，简化了异步代码的写法。

// Promise
new Promise((resolve, reject) => setTimeout(resolve, 1000))
  .then(() => console.log('Done'));

// Async/Await
const asyncFunc = async () => {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('Done');
};
asyncFunc();

应用：

MicroTasks => Vue.$nextTick()：
Vue.$nextTick() 是一个微任务，确保在DOM更新后执行回调。Vue在更新DOM时将异步任务放入微任务队列，$nextTick 用于在DOM渲染完成后执行。
```
Vue.nextTick(() => {
  console.log('DOM updated');
});
```
单线程 => Vue依赖跟踪：
Vue采用了单线程的事件循环机制，通过观察者模式进行依赖收集。在数据变化时，它会通过微任务队列来异步更新DOM，确保界面及时更新。
```
// Vue的数据响应式机制
const vm = new Vue({
  data: { message: 'Hello' },
  watch: {
    message(newVal, oldVal) {
      console.log('Message changed:', oldVal, '->', newVal);
    }
  }
});
```

3. JavaScript设计模式

重点：

理解各个设计模式的使用场景：
设计模式帮助开发者解决常见的编程问题。JavaScript中常用的设计模式包括：观察者模式、订阅发布模式、中介者模式等。
观察者模式与发布订阅模式：
- 观察者模式：对象间的一种一对多的依赖关系。当一个对象的状态发生变化时，所有依赖它的对象都会收到通知。
- 发布订阅模式：发布者发布消息，订阅者订阅消息，解耦了发布者和订阅者。常见于事件系统。

应用：

订阅发布模式 => Vuex：
Vuex 使用发布订阅模式来管理状态。组件订阅状态变化，当状态发生变化时，所有相关组件会自动更新。
```
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});
```

中间件模式 => Koa：
Koa框架通过中间件模式处理HTTP请求。每个中间件负责处理请求的一个特定部分，组合起来形成完整的请求处理流程。

const Koa = require('koa');
const app = new Koa();

app.use(async (ctx, next) => {
  console.log('Request received');
  await next();
});

app.use(async ctx => {
  ctx.body = 'Hello, World!';
});

app.listen(3000);

总结

这些概念和设计模式是理解JavaScript及其生态系统的基础。掌握它们能帮助你在开发中做出更清晰、可维护、性能优越的决策，特别是在现代前端框架如React、Vue和Node.js中，这些模式和思想得到了广泛应用。

posted @ 2024-12-19 17:58 AdolK 阅读(29) 评论(0) 收藏举报

刷新页面返回顶部

adolk

学习Web全栈体系记录

1. 高阶函数与函数抽象

2. 异步编程模式

3. JavaScript设计模式

总结

公告