Javascript 中的数组实际上是对象的一个子类型

1
2

new Array instanceof Array  // true
new Array instanceof Object // true

Array.prototype.slice() VS Array.prototype.splice()

Array.prototype.slice() 语法

1
2
3
4
5
6
7
8

array.slice();
// [0, end] -> 可用来实现数组⚠️浅拷贝⚠️

array.slice(start);
// [start, end]

array.slice(start, end);
// [start, end) -> 包含 start，但不包含 end

Array.prototype.splice() 语法

1
2
3
4
5
6
7
8

array.splice(start);
// 从 start 位置开始删除 [start, end] 的元素

array.splice(start, deleteCount);
// 从 start 位置开始删除 [start, Count] 的元素

array.splice(start, 0, item1, item2, ...);
// 从 start 位置开始添加 item1, item2, ... 元素

当初开始学习使用 Flexbox 就是从🍭FLEXBOX FROGGY这个小游戏开始的
另外，还有关于 Grid 布局的孪生兄弟游戏：🍭GRID GARDEN

CSS 中的布局模式

CSS 布局可以由 table、float、position、display 等方式实现，但是这些布局在使用中往往也会伴随一些副作用，想要实现一个比较「复杂」的布局也往往要花费比较大的精力

CSS2.1 中定义了四种布局模式，由一个盒与其兄弟、祖先盒的关系决定其尺寸与位置的算法

• 块布局： 呈现文档的布局模式
• 行内布局： 呈现文本的布局模式
• 表格布局： 用表格呈现 2D 数据的布局模式
• 定位布局： 能够直接地定位元素的布局模式，定位元素基本与其他元素没有任何关系

CSS3 引入的 Flexbox （伸缩）布局模式，主要思想是让容器由有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳方式填充可用空间

Next.js 教程

🍭zeit/next.js || 🍭learnnextjs.com 给出了相对比较完整的 Next.js 使用教程。

引入样式文件

刚刚接触 Next.js，还不是十分了解，第一个遇到的就是样式文件引入的问题，Next.js 支持样式文件引入，包括 .css、.less、.styl、.scss，如果仅需引入一种文件，可以 🍭戳这里或者下面列出的模块，亲测可以解决样式引入的问题

• 🍭@zeit/next-css
• 🍭@zeit/next-sass
• 🍭@zeit/next-less
• 🍭@zeit/next-stylus

多种样式文件引入

由于项目是团队开发，每个人的代码习惯会有所不同，那么，如果想引入多种文件就比较麻烦，另外 CSS Modueles 也无法支持
我将以上模块进行了合并：

同步 & 异步

• 单线程同步编程：每个任务按照先后顺序依次执行（阻塞）
• 多线程模型：每一个任务由独立的线程控制，这些线程由操作系统管理。在一个多处理器或多核环境中可以真正实现多线程；在单处理器中，通过任务交替执行实现并发（非阻塞）

由于一些比较古老的原因，Javascript 是单线程的，也就是说在同一时刻，浏览器进程中只有一个 Javascript 的线程在执行，并且阻塞其他任务执行
为什么 Javascript 是单线程的：

• 轻量
• 简化并发模型，无死锁
• 没有线程切换开销

但是如果碰到耗时比较长的任务，比如读取文件内容，会导致后面的任务无法继续进行下去。Javascript 在后期的发展中采用异步非阻塞编程模式解决多线程并行的问题，一个异步过程可以表述如下：

• 主线程发起一个异步请求，相应的 Worker 接收请求并告知主线程已收到请求（异步函数返回）
• 主线程可以继续执行后面的代码，同时 Worker 执行异步任务
• Worker 完成工作后，通知主线程
• 主线程收到通知后，执行一定的动作（调用回调函数）

多进程模型

Node.js 如何榨干服务器资源享受多核 CPU？

• Node.js 是运行在单线程上的，因此也就表示 Node.js 只能运行在一个 CPU 上
• 为了利用多核系统, Node.js 官方提供 🍭Cluster 模块 作为解决方案

Cluster 是什么？

• 在服务器上同时启动多个进程
• 每个进程里都跑的是同一份源代码
• 这些进程可以同时监听一个端口

其中

• 负责启动其他进程的模块叫做 Master 进程，Master 只负责启动（child_process.fork() 方法）其他进程，不负责具体工作
• 其他被启动的进程称为 Worker 进程，负责接受请求，对外提供服务
• Worker 数量一般由 CPU 核数确定，从而完美利用多核资源

防止 margin 重叠（塌陷）

相邻 Box 垂直重叠

1
2
3
4

<div class="vertical-wrap">
    <p>BOX 1</p>
    <p>BOX 2</p>
</div>

BFC（Block Formatting Context）：块级格式化上下文

BFC 是一个独立渲染区域，只有 Block-Level Box 参与，规定了 Block-Level Box 内部区域如何布局

BFC 的生成

满足下列条件之一，会生成 BFC

Update to Webpack 4

yarn upgrade webpack

同时升级相关 loader 依赖

（or）Install Webpack 4

yarn add webpack webapck-dev-server webpack-merge webpack -cli

nrm —— 快速切换 NPM 源

npm install -g nrm

1
2
3
4
5
6
7

* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - http://registry.npm.taobao.org/
  eu ----- http://registry.npmjs.eu/
  au ----- http://registry.npmjs.org.au/
  sl ----- http://npm.strongloop.com/
  nj ----- https://registry.nodejitsu.com/

创建 Dockerfile

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

# 设置基础镜像,如果本地没有该镜像，会从Docker.io服务器pull镜像
FROM node

# 创建app目录,保存我们的代码
RUN mkdir -p /

# 设置工作目录
WORKDIR /

# 复制所有文件到 工作目录。
COPY . /

# 编译运行node项目，使用npm安装程序的所有依赖,利用taobao的npm安装，可省略
RUN npm install --registry=https://registry.npm.taobao.org

# 暴露container的端口
EXPOSE 8888

# 运行命令
CMD ["npm", "start"]

构建 Image

1

docker build -t image_name .

运行镜像

1

docker run -d --name container_name -p 8888:8888 image_name:latest