学习Web全栈体系记录

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

1. 高阶函数与函数抽象

重点：

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 等库来实现不可变对象。

2. 纯函数与高阶函数：

   • 纯函数：相同输入总是产生相同输出，并且没有副作用（不修改外部变量）。

     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]
     

应用：

1. Shallow Copy => React 性能优化：
   在React中，通过避免直接修改state对象来提高性能，React使用浅拷贝来判断组件是否需要重新渲染。例如，使用 setState 时，React会通过浅比较判断对象是否发生变化。

   this.setState(prevState => ({ items: [...prevState.items, newItem] }));
   

2. 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. 异步编程模式

重点：

1. 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
   

2. 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();
     

应用：

1. MicroTasks => Vue.$nextTick()：
   Vue.$nextTick() 是一个微任务，确保在DOM更新后执行回调。Vue在更新DOM时将异步任务放入微任务队列，$nextTick 用于在DOM渲染完成后执行。

   Vue.nextTick(() => {
     console.log('DOM updated');
   });
   

2. 单线程 => Vue依赖跟踪：
   Vue采用了单线程的事件循环机制，通过观察者模式进行依赖收集。在数据变化时，它会通过微任务队列来异步更新DOM，确保界面及时更新。

   // Vue的数据响应式机制
   const vm = new Vue({
     data: { message: 'Hello' },
     watch: {
       message(newVal, oldVal) {
         console.log('Message changed:', oldVal, '->', newVal);
       }
     }
   });
   

3. JavaScript设计模式

重点：

1. 理解各个设计模式的使用场景：
   设计模式帮助开发者解决常见的编程问题。JavaScript中常用的设计模式包括：观察者模式、订阅发布模式、中介者模式等。

2. 观察者模式与发布订阅模式：

   • 观察者模式：对象间的一种一对多的依赖关系。当一个对象的状态发生变化时，所有依赖它的对象都会收到通知。
   • 发布订阅模式：发布者发布消息，订阅者订阅消息，解耦了发布者和订阅者。常见于事件系统。

应用：

1. 订阅发布模式 => Vuex：
   Vuex 使用发布订阅模式来管理状态。组件订阅状态变化，当状态发生变化时，所有相关组件会自动更新。

   const store = new Vuex.Store({
     state: { count: 0 },
     mutations: {
       increment(state) {
         state.count++;
       }
     }
   });
   

2. 中间件模式 => 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中，这些模式和思想得到了广泛应用。