你知道 - 前端｜面试进阶之道
说一下 JavaScript 的执行流程
2022-09-28JavaScript00

前言

我们来看下面这一段代码。

print();
console.log(str);
var str = "hello world!";
function print() {
  console.log(str);
}

如果你写过 js，那就知道，这段代码不会报错，会正常输出 undefined undefined。

如果不能理解，不要着急，我们删除 var str = 'hello world'，再执行：

print();
console.log(str);
function print() {
  console.log(str);
}

现在就会报错了，str is not defined。这是为什么呢？如果不知道不要紧，下边我们就来了解下，要了解 JavaScript 的运行方式，我们就要先了解下变量提升。

变量提升(Hosting)

在介绍变量提升之前，我们先通过以下两个例子来讲解 JS 中的声明和赋值。

在 es6 之前，JS 都是通过 var 来声明变量。

var str = "hello word";

这一句等价于

var str; // 变量声明
str = "hello world!"; // 赋值

下面这段代码是一个完整的函数声明，没毛病。

var print = function () {
  console.log(str);
};

这段代码是一个声明变量和赋值的过程，相当于

var print; // 变量声明
print = function () {
  // 赋值
  console.log(str);
};

所谓的变量提升，是指 JavaScript 在执行的过程中，JavaScript 引擎把变量提升和函数的声明部分提升到代码开头的“行为”。变量被提升后，会给变量设置值为 undefined。

阅读全文
关于AMD、CMD规范区别说法正确的是？
2022-09-27JavaScript00

问题

关于AMD、CMD规范区别说法正确的是？（多选）

  • A.AMD规范：是 RequireJS在推广过程中对模块定义的规范化产出的
  • B.CMD规范：是SeaJS 在推广过程中对模块定义的规范化产出的
  • C.CMD 推崇依赖前置;AMD 推崇依赖就近
  • D.CMD 是提前执行;AMD 是延迟执行
  • E.AMD性能好,因为只有用户需要的时候才执行;CMD用户体验好,因为没有延迟,依赖模块提前执行了

答案

答案 A B

解析 C.CMD 推崇依赖就近;AMD 推崇依赖前置 D.CMD 是延迟执行;AMD 是提前执行 E.CMD性能好,因为只有用户需要的时候才执行;AMD用户体验好,因为没有延迟,依赖模块提前执行了

阅读全文
node 中间层怎样做的请求合并转发
2022-09-27Node.js00

1） 什么是中间层

  • 就是前端---请求---> nodejs ----请求---->后端 ----响应--->nodejs--数据处理---响应---->前端。这么一个流程，这个流程的好处就是当业务逻辑过多，或者业务需求在不断变更的时候，前端不需要过多当去改变业务逻辑，与后端低耦合。前端即显示，渲染。后端获取和存储数据。中间层处理数据结构，返回给前端可用可渲染的数据结构。
  • nodejs是起中间层的作用，即根据客户端不同请求来做相应的处理或渲染页面，处理时可以是把获取的数据做简单的处理交由底层java那边做真正的数据持久化或数据更新，也可以是从底层获取数据做简单的处理返回给客户端。
  • 通常我们把Web领域分为客户端和服务端，也就是前端和后端，这里的后端就包含了网关，静态资源，接口，缓存，数据库等。而中间层呢，就是在后端这里再抽离一层出来，在业务上处理和客户端衔接更紧密的部分，比如页面渲染（SSR），数据聚合，接口转发等等。
  • 以SSR来说，在服务端将页面渲染好，可以加快用户的首屏加载速度，避免请求时白屏，还有利于网站做SEO，他的好处是比较好理解的。

2）中间层可以做的事情

  • 代理：在开发环境下，我们可以利用代理来，解决最常见的跨域问题；在线上环境下，我们可以利用代理，转发请求到多个服务端。
  • 缓存：缓存其实是更靠近前端的需求，用户的动作触发数据的更新，node中间层可以直接处理一部分缓存需求。
  • 限流：node中间层，可以针对接口或者路由做响应的限流。
  • 日志：相比其他服务端语言，node中间层的日志记录，能更方便快捷的定位问题（是在浏览器端还是服务端）。
  • 监控：擅长高并发的请求处理，做监控也是合适的选项。
  • 鉴权：有一个中间层去鉴权，也是一种单一职责的实现。
  • 路由：前端更需要掌握页面路由的权限和逻辑。
  • 服务端渲染：node中间层的解决方案更灵活，比如SSR、模板直出、利用一些JS库做预渲染等等。

3）node转发API（node中间层）的优势

  • 可以在中间层把java|php的数据，处理成对前端更友好的格式
  • 可以解决前端的跨域问题，因为服务器端的请求是不涉及跨域的，跨域是浏览器的同源策略导致的
  • 可以将多个请求在通过中间层合并，减少前端的请求
阅读全文
介绍下 promise 的特性、优缺点，内部是如何实现的，动手实现 Promise
2022-09-27JavaScript00

1）Promise基本特性

  • 1、Promise有三种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)
  • 2、Promise对象接受一个回调函数作为参数, 该回调函数接受两个参数，分别是成功时的回调resolve和失败时的回调reject；另外resolve的参数除了正常值以外， 还可能是一个Promise对象的实例；reject的参数通常是一个Error对象的实例。
  • 3、then方法返回一个新的Promise实例，并接收两个参数onResolved(fulfilled状态的回调)；onRejected(rejected状态的回调，该参数可选)
  • 4、catch方法返回一个新的Promise实例
  • 5、finally方法不管Promise状态如何都会执行，该方法的回调函数不接受任何参数
  • 6、Promise.all()方法将多个多个Promise实例，包装成一个新的Promise实例，该方法接受一个由Promise对象组成的数组作为参数(Promise.all()方法的参数可以不是数组，但必须具有Iterator接口，且返回的每个成员都是Promise实例)，注意参数中只要有一个实例触发catch方法，都会触发Promise.all()方法返回的新的实例的catch方法，如果参数中的某个实例本身调用了catch方法，将不会触发Promise.all()方法返回的新实例的catch方法
  • 7、Promise.race()方法的参数与Promise.all方法一样，参数中的实例只要有一个率先改变状态就会将该实例的状态传给Promise.race()方法，并将返回值作为Promise.race()方法产生的Promise实例的返回值
  • 8、Promise.resolve()将现有对象转为Promise对象，如果该方法的参数为一个Promise对象，Promise.resolve()将不做任何处理；如果参数thenable对象(即具有then方法)，Promise.resolve()将该对象转为Promise对象并立即执行then方法；如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为fulfilled，其参数将会作为then方法中onResolved回调函数的参数，如果Promise.resolve方法不带参数，会直接返回一个fulfilled状态的 Promise 对象。需要注意的是，立即resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而不是在下一轮“事件循环”的开始时。
  • 9、Promise.reject()同样返回一个新的Promise对象，状态为rejected，无论传入任何参数都将作为reject()的参数

2）Promise优点

  • ①统一异步 API

    • Promise 的一个重要优点是它将逐渐被用作浏览器的异步 API ，统一现在各种各样的 API ，以及不兼容的模式和手法。

  • ②Promise 与事件对比

    • 和事件相比较， Promise 更适合处理一次性的结果。在结果计算出来之前或之后注册回调函数都是可以的，都可以拿到正确的值。 Promise 的这个优点很自然。但是，不能使用 Promise 处理多次触发的事件。链式处理是 Promise 的又一优点，但是事件却不能这样链式处理。

  • ③Promise 与回调对比

    • 解决了回调地狱的问题，将异步操作以同步操作的流程表达出来。

  • ④Promise 带来的额外好处是包含了更好的错误处理方式（包含了异常处理），并且写起来很轻松（因为可以重用一些同步的工具，比如 Array.prototype.map() ）。

阅读全文
redux-saga 和 mobx 的比较
2022-09-27React00

1）状态管理

  • redux-sage 是 redux 的一个异步处理的中间件。
  • mobx 是数据管理库，和 redux 一样。

2）设计思想

  • redux-sage 属于 flux 体系， 函数式编程思想。
  • mobx 不属于 flux 体系，面向对象编程和响应式编程。

3）主要特点

  • redux-sage 因为是中间件，更关注异步处理的，通过 Generator 函数来将异步变为同步，使代码可读性高，结构清晰。action 也不是 action creator 而是 pure action，
  • 在 Generator 函数中通过 call 或者 put 方法直接声明式调用，并自带一些方法，如 takeEvery，takeLast，race等，控制多个异步操作，让多个异步更简单。
  • mobx 是更简单更方便更灵活的处理数据。 Store 是包含了 state 和 action。state 包装成一个可被观察的对象， action 可以直接修改 state，之后通过 Computed values 将依赖 state 的计算属性更新 ，之后触发 Reactions 响应依赖 state 的变更，输出相应的副作用 ，但不生成新的 state。

4）数据可变性

  • redux-sage 强调 state 不可变，不能直接操作 state，通过 action 和 reducer 在原来的 state 的基础上返回一个新的 state 达到改变 state 的目的。
  • mobx 直接在方法中更改 state，同时所有使用的 state 都发生变化，不生成新的 state。

5）写法难易度

  • redux-sage 比 redux 在 action 和 reducer 上要简单一些。需要用 dispatch 触发 state 的改变，需要 mapStateToProps 订阅 state。
  • mobx 在非严格模式下不用 action 和 reducer，在严格模式下需要在 action 中修改 state，并且自动触发相关依赖的更新。

6）使用场景

  • redux-sage 很好的解决了 redux 关于异步处理时的复杂度和代码冗余的问题，数据流向比较好追踪。但是 redux 的学习成本比 较高，代码比较冗余，不是特别需要状态管理，最好用别 的方式代替。
  • mobx 学习成本低，能快速上手，代码比较简洁。但是可能因为代码编写的原因和数据更新时相对黑盒，导致数据流向不利于追踪。
阅读全文