网上面试题学习总结201912/10

Q1:.viewpoint是什么？

没找到准确的解释意思，大概是自适应移动端（第一道题就卡住了）

Q2：解释Flex布局，为什么要确定主轴方向，缩小倍数有什么用？

弹性布局中元素的大小是高度依赖父容器的大小的。它所具有的“伸缩性”，目标就是为了撑满父元素。重新定义浏览器“书写方式”。为了可以简便的从上到下写。从左到右换行。缩小倍数防止溢出父元素。flex还可以实现一侧固定一侧自适应。例如左侧写出width=100px，右侧可以设置成flex：1自适应。

Q3：怎么理解CSS剩余空间？

比如父盒子是100%高度，子元素A在上面高度50px，但是要子元素B填充满剩下的剩余空间不可以用height=100%的方式，如果添加也需要加上top=50px;bottom=0

Q4：盒模型？

盒模型的组成大家肯定都懂，由里向外content,padding,border,margin.

盒模型是有两种标准的，一个是标准模型，一个是IE模型。从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高，而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。
这里用到了CSS3 的属性 box-sizing
/* 标准模型 */
box-sizing:content-box;
/IE模型/
box-sizing:border-box;

Q5：将一个数字比如100000000展示为100，000，000，有几种解法？

方法一：

var str = "100000000000";
var reg = /(?=(\B)(\d{3})+$)/g;
console.log(str.replace(reg,"."));

方法二
用js拆分添加.生成

Q6：怎么自己实现Promise，以及Promise.race，Promise.all

摘选自：https://www.jianshu.com/p/7e60fc1be1b2

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

let p3 = Promse.reject('失败')

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了，打出 '失败'
})

Promse.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。

let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒来`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {
  console.log(error)
})

需要特别注意的是，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。
Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

Q7:怎么自己实现一个generator

摘选自：https://www.jianshu.com/p/83da0901166f
Generator 是 ES6 中新增的语法，和 Promise 一样，都可以用来异步编程

Q8:Express从安装到运行，到项目如何使用的详细步骤?

npm install express --save

Express的使用需要我们安装node.js环境，请大家在开始之前确认安装了node.js。我们新建一个目录用来保存我们的应用程序，并且将其设置为工作目录。使用命令行创建一个项目：npm init

Q9:模块化的理解，怎么自己实现模块化?

摘选添加链接描述
模块化开发，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。
模块化开发的4点好处：

1. 避免变量污染，命名冲突
2. 提高代码复用率
3. 提高维护性
4. 依赖关系的管理
   怎么自己实现模块化？
   一、 函数封装
   我们在讲到函数逻辑的时候提到过，函数一个功能就是实现特定逻辑的一组语句打包，在一个文件里面编写几个相关函数就是最开始的模块了
   二、 对象
   为了解决这个问题，有了新方法，将所有模块成员封装在一个对象中

Q10:怎么解决模块循环引用的问题?

Q11:webpack打包优化?

Q12:怎么解决react首页过大的问题?