entry

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/**
 * @param {String} - String 时 打包为一个文件，默认包名 main.js
 * @param {Array} - Array 时 webpack会把数组里所有文件打包成一个js文件
 * @param {Object} - Object 时 webpack会把对象里的文件分别打包成多个文件
 *
 */
module.exports = {
  entry: './index.js',

  entry: ['./index.js', './about.js'],

  entry: {
    app: './index.js',
    about: './about.js'
  },

  entry: {
    app: './index.js',
    vendors: ['jquery'] // 分离第三方库
  }
}

什么是 webpack

webpack 可以看做是模块打包机：他做的事情是，分析你的项目结构，找到 JavaScript 模块以及其他的一些浏览器不能直接运行的扩展语言（Scss、TypeScript 等），将其打包为合适的格式以供浏览器使用

构建就是把源代码转换成发布到线上可执行的 JavaScript、CSS、HTML 代码，包括以下内容：

• 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
• 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等
• 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
• 模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
• 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
• 代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
• 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

构建其实是工程化、自动化思想在前端开发中的体现。把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。

Javascript

正则

• 匹配整数

1
2
3
4
5
6
7

var str = '102'
// 1.  ^(-|\+) 以 - 或者 + 开头
// 2. ? 表示出现或者不出现
// 3. [1-9] 取值范围，也是首字符的取值范围
// 4. \d*$ ：* 等价于{0,}，表示出现任意次，有可能不出现。
var reg = /^(-|\+)?[1-9]\d*$/
reg.test(str)

• 用正则把[1,2,3,4]转换成 '1', '2', '3', '4'

提取 get 请求参数

有这样一个 URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如`{a:'1', b:’2’, c:’’, d:’xxx’, e:undefined}`。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

let str = 'http://item.taobao.com/item.html?a=1&b=2&c=&d=xxx&e&a=2'

function test(str) {
  let params = {}
  const paramsStr = str.replace(/.*\?/, '') // 提取参数字符串

  // [ 'a=1', 'b=2', 'c=', 'd=xxx', 'e' ]
  paramsStr.split('&').forEach(v => {
    d = v.split('=') // [a, 1] [b, 2] [c, ''] [d, xxx] [e]
    if (d[0] in params) {
      Array.isArray(params[d[0]]) ? params[d[0]].push(d[1]) : (params[d[0]] = [params[d[0]], d[1]])
    } else {
      params[d[0]] = d[1]
    }
  })
  return params
}

console.log(test(str)) // { a: [ '1', '2' ], b: '2', c: '', d: 'xxx', e: undefined }

数组降维

重绘 redraw & 重排 reflow

浏览器运行机制图：

浏览器的运行机制

1.构建DOM树（parse）： 渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；
2.构建渲染树（construct）：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如），构建渲染树（Rendering Tree/Frame Tree）；
3.布局渲染树（reflow/layout）：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；
4.绘制渲染树（paint/repaint）：遍历渲染树，使用UI后端层来绘制每个节点。

TCP 的三次握手

HTTP 请求与 TCP 链接之间的关系，在客户端向服务端请求和返回的过程中，是需要去创建一个 TCP connection，因为 HTTP 是不存在链接这样一个概念的，它只有请求和响应这样一个概念，请求和响应都是一个数据包，中间要通过一个传输通道，这个传输通道就是在 TCP 里面创建了一个从客户端发起和服务端接收的一个链接，TCP 链接在创建的时候是有一个三次握手(三次网络传输)这样一个消耗在的。

下面是 TCP 报文格式图：

↓↓↓↓

有几个字段需要重点介绍下：

1. Seq 序号: sequeence number，用来标识从 TCP 源端向目的端发送的字节流，发起方发送数据时对此进行标记。
2. 确认序号：acknowledgment number，只有 ACK 标志位为 1 时，确认序号字段才有效，Ack=Seq+1。
3. 标志位：共 6 个，即 URG、ACK、PSH、RST、SYN、FIN 等，具体含义如下：
   • URG：紧急指针（urgent pointer）有效。
   • ACK：确认序号有效。
   • PSH：接收方应该尽快将这个报文交给应用层。
   • RST：重置连接。
   • SYN：发起一个新连接。
   • FIN：释放一个连接。

Babel 是一个让我们能够使用 ES 新特性的 JS 编译工具，我们可以在 webpack 中配置 Babel，以便使用 ES6、ES7 标准来编写 JS 代码。

本文以当前最新版本的 babel - 7.10 为例， 做 babel 的配置. 相关版本号如下

1
2
3
4
5
6
7
8
9
10
11
12

{
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-decorators": "^7.1.6",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/runtime": "^7.1.5",
    "babel-loader": "^8.0.4",
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2"
  }
}