最近在弄关于ENS这类DID的东西，准备记录一下基础流程，为了记忆更深刻，顺便写一些文章。

文章会主要以前端视角对接合约的方式进行，从前端对接到合约代码，不是全合约代码解析。

ENS介绍

首先简单介绍一下ENS，ENS（Ethereum Name Service）是以太坊域名服务，是一个基于以太坊区块链的分布式、开放和可扩展的命名系统。ENS的主要作用就是将可读的域名如：marktang.eth 解析为可识别的标识符，比如钱包地址、元数据等。ENS还支持"反向解析"，也就可以让元数据和以太坊地址相关联成为可能。

ENS和DNS类似，但因为区块链的功能特点和限制条件，架构上有很大的不同。与DNS一样，ENS是一个层次结构的域名系统，不同层次域名之间以点作为分隔符，我们把层次的名称叫做域，一个域的所有者能够完全控制其子域。想了解更详细的可以去官网看看。

ENS架构

在ENS中解析一个域名需要两个步骤：首先，询问注册表是哪个解析器负责解析该域名，然后，向该解析器查询解析结果

接下来正式开始流程说明

注册

注册大致可以分为3个步骤

1. 获取凭证

2. 提交凭证

3. 注册

初始化

在说明获取凭证的步骤之前咱们需要先讲一下初始化，在注册操作还未发生时，我们需要预先获取一些东西：

• 获取当前域名的预估注册费用

• 获取minCommitmentAge，这个值在<提交凭证>时会用到，稍后说明

• 是否对Controller已Approve授权

• 生成 randomSecret，<获取凭证>时会用到

获取当前域名的预估注册费用

调用RegistrarController的rentPrice方法来获取预估注册费用，需要传入两个参数，一个是当前需要注册的域名，另一个是时长。

根据注册域名长度得到一个基础价格，然后通过ETH/USD Price Oracle得到当前的ETH价格算出最终的预估注册费用(ETH)

获取minCommitmentAge

获取最小时间间隔，这个比较简单，没什么可说明的

是否对Controller已Approve授权

这个也很简单，通过allowance方法判断一下，方便根据状态进行UI的一些操作更新

生成randomSecret

32随机字节，直接看代码

获取凭证

通过调用RegistrarController合约的makeCommitment方法来获取凭证，需要传递以下参数：

• name 域名

• owner 注册人地址

• duration 时长

• secret 之前在上一步<初始化>时生成的randomSecret

• resolver 解析器合约地址

• data 设置域名解析记录

• reverseRecord 是否反解析

• fuses 初始化的fuses

• wrapperExpiry fuses过期时间

返回 abi encode后的 keccak256 hash作为凭证

提交凭证

通过调用RegistrarController合约的commit方法来预提交，需要传入刚才<获取凭证>拿到的hash

然后来看合约代码，这里先对重复提交进行了验证，时间如果未超过最大时间间隔就不需要重新更新时间戳。通过验证则记录本次transaction的时间戳。

预提交的目的

现在来说明一下这个预提交的目的是什么，为什么不是直接就注册了？预提交的目的是为了防止抢跑，如果没有这部分，直接就是注册操作的话，在MEV里就可以监听注册域名的tx，然后用gasPrice去抢跑，这样就会造成一些有价值的域名被机器人抢走。有了预提交步骤后，机器人要抢跑域名注册就需要监听commit方法，但这个方法的参数是解读不出tx是要注册哪个域名的，从而防止了抢跑操作。

在commit之后必须要等待最小间隔时间后才能进行注册操作，当前是60秒。这里需要setTimeout 一个<初始化>时获取的minCommitmentAge * 1000 后再开始进行注册操作。

注册

在等待最小间隔时间后通过RegistrarController合约的register方法来注册，方法需要传入的参数同<获取凭证>的makeCommitment的方法一样。

然后一步一步来看看合约

1. 首先验证账户是否有足够币来支付注册费用

2. 消费commitment， 这里会检查是否满足最小间隔时间和是否超过最大间隔时间，验证当前域名是否可用、删除commitment，返还gas、时长不能小于最小时间(28天)

3. 获取registrar expiry 新名称在.eth注册商的到期时间

4. setRecords 设置域名解析记录，这里会对检查namehash做检查

5. 是否设置反向解析，反向解析就是用地址反向解析出ENS域名

6. 触发 NameRegistered Event，客户端可以监听该Event来实现一些后续操作

7. 扣钱，注册完成

Note: ENS域名也是ERC721的NFT，可以在各大市场进行交易，只是没有metadata。如果在市场交易成功后，新的owner需要调用一下reclaim方法重新认领才能管理自己的ENS域名。在域名过期后，设有90天的保护期，在保护期内owner是可以直接调用renew方法来续期的，过了保护期后就要重新commit去进行注册

目前先对注册流程进行了一个大体的整理，有空后下一篇会说明 地址/域名搜索、我拥有的域名列表、域名详情信息的流程。不知道具体会更新几篇，取决于之后我所了解到ENS功能的范围吧。

之后计划今年还会更新几篇最近在研究的前端可视化方面的文章、Web3项目前端主流技术栈中的一些package介绍、全栈写完一个完整的Web3项目(合约、前端、后端)能够完整体验整个流程，具体项目还在构思中，需要简单一点不会写太久又能体现每个部分的特点的。

Bye, All the best.

1. 什么是Layer1?

Layer1就是基础公链，现在大家所知的以太坊、比特币就是Layer1公链，现在我们看到的市面上的Layer2的网络，都是以Layer1为基础的

Layer1的问题

1. 拥堵

2. 交易费贵

不可能三角问题

传统货币理论中存在的"不可能三角"是一个国家无法同时实现货币政策的独立性、汇率稳定与资本自由流动，最多只能同时满足其中两个目标，而做取舍放弃另一个目标。

区块链技术的"不可能三角"主要是指无法同时达到可扩展性(Scalability) 、去中心化(Decentralization) 、安全(Security) ，只能同时满足其中两个目标。

问题的解决方案:

1. 建立Layer2

2. 升级Layer1

下面会讲一下这两种解决方案：

2.什么是Layer2?

Layer2是一个概括性的词语去描述以太坊的扩容解决方案。Layer1和Layer2是分开的，Layer2是独立的区块链，它扩展了以太坊并且继承了以太坊的安全性

两种roll up技术

什么是roll up?

Rollups是目前扩容以太坊的首选Layer2解决方案。通过使用Rollups，用户可以比Layer1减少高达100倍的gas费。

Rollups把在Layer1上的几百个交易都打包捆绑在一起变成一个交易，现在的Ethereum主网每秒只能处理15个交易，以目前Ethereum的用户量来看，这个量是完全不够的，从而导致拥堵和交易费高昂。而Rollups打包后的1个交易的交易费是平摊的，用户所需要支付的gas费更低。Rollups打包处理这些交易的时候是在Layer1之外进行的，但是交易数据会被发回到Layer1上，通过这个方式，Rollups继承了Ethereum的安全性。

目前有两种不同的Rollups技术, 一种叫Optimistic rollups，一种叫 Zero-knowledge rollups，它们的区别主要在于交易数据如何被发布到Layer1，这次先不详细展开讲了，下一次会专门一篇文章介绍两种技术。目前Layer2的公链：Polygon、Loopring、OMG Network、Skale、ZKSwap、Arbitrum One、Optimism、Boba Network.

接下来讲一下另一个解决方案: 升级Layer1 -> ETH2.0(有些朋友以为Layer2就是以太坊2.0，实际两者是没有关系的)

3. ETH2.0

以太坊2.0升级的三个部分:

1. beacon chain(is live)

2. Merge (2022第三季度)

3. Sharding (2023-2024)

接下来简单介绍一下各个部分的特点:

The Beacon Chain

目前已经在运行中

• Beacon Chain不会影响当前使用以太坊的任何东西

• 它将POS引入了以太坊

• 它将协调网络，充当共识层

• 它是未来扩展升级前的重要步骤

The Merge

2022第三季度执行

• 以太坊主网和Beacon Chain POS系统合并

• 以太坊POW的结束，向POS的全面过渡

• 为未来的扩展升级(Sharding)创造了条件

• 合并将使以太坊的能源消耗减少大约99.95%(共识算法改变的关系)

不了解POW和POS的可以查看：https://mirror.xyz/0xD5B12730F08472C471172B0a4DC8912965036b8d/ot9OyZjYYxEYqqZFyEmB6TPMVdcRvNOZYfYkBlZtZ3w

Sharding

2024年之前执行

• 分片是一个多阶段的升级，以提高Ethereum的可扩展性和容量

• 分片提供了数据存储需求的安全分布，使rollups的成本更低，并使节点更容易操作

• 使Layer2解决方案能够提供低交易费用，同时利用以太坊的安全性

• 该升级计划在主网与Beacon Chain合并后进行

世界状态 (world state)

Ether(以太币)记载在 世界状态(world state) 里

世界状态 = 每个人账户的状态的总集合

余额变化

Ether(以太币)余额因交易而变化

以太坊既可以看作静态的区块的串联， 也可以看作一个状态机， 随着用户不断地发起交易，促成这个状态机进行状态转移

账户状态

已执行交易总数

该值会随着用户不断发送交易而递增，保障用户发出的交易是按照顺序被收纳入最终的区块链。 因为在同一个账户中，已执行交易总数不可以在区块链中再次出现。 当用户创建智能合约时，要指定合约地址，该地址是由用户账户的已执行交易总数和用户账户地址联合计算而得出的。

代码区的哈希值

该值为 智能合约独有，外部账户不包含该值。 代码区即为智能合约代码本身。 在合约的生命周期中，该区域的内容是不可更改的 只读状态。 代码区存放于以太坊网络节点的硬盘中，当运行时被读入虚拟机执行。代码区的内容通过散列函数得出校验哈希值，该值即为代码区的哈希值。

公开地址从私钥派生逻辑

• 32字节私钥生成的长度为65字节的公钥

• 删除为首的一个字节0x04，还剩64字节

• 将其放入keccak256哈希算法，生成一个256位的哈希值

• 截取哈希值的最后20字节，既为所求的公开地址

• (可选)辅以0x的开头装饰，表明这是一个16进制的书面记录形式

EIP-55格式的账户地址

为了解决转账地址填错的问题，该提议按照一定逻辑，将地址中的部分字母大写，与剩余的小写字母来形成校验和，让地址拥有自校验的能力，具体的代码参考下方

const createKeccakHash = require('keccak')
​
function toChecksumAddress (address) {
  address = address.toLowerCase().replace('0x', '')
  var hash = createKeccakHash('keccak256').update(address).digest('hex')
  var ret = '0x'
​
  for (var i = 0; i < address.length; i++) {
    if (parseInt(hash[i], 16) >= 8) {
      ret += address[i].toUpperCase()
    } else {
      ret += address[i]
    }
  }
​
  return ret
}

交易(Transaction)

交易活动步骤：

1. 用户签名打包一条或多条消息，组装成一笔交易，发送到以太坊网络上

2. 该交易被矿工捕获，并收纳入某一个区块

3. 区块形成后，被矿工广播到节点网络中，最终加入区块链

交易与消息的区别

消息在账户与账户之间传递数据(data)与价值(value)，消息的具体表现形式如下：

• 数据：一个账户向另一个账户请求函数调用

• 价值：一个账户向另一个账户发送以太币

交易的特性

"原子性"

要么完全执行，要么完全不执行

"串行"执行

不会同时并行执行

"进入区块链的顺序不确定"

交易的结构

Web3.js代发的交易结构

{
  nonce: web3.toHex(10),
  GasPrice: web3.toHex(100000000000),
  Gas: web3.toHex(140000),
  from: '0x633296baebc20f33ac2e1c1b105d7cd1f6a0718b',
  to: '0xD1E1cdbCE15f1009B5A7874053E09C728Df91d47',
  value: web3.toHex(0),
  data: '0xcc9ab24952616d6100000000000000000000000000000000000000000000000000000000'
}

字段解释：

• nonce 该账户已发送交易数量，一个正整数

• GasPrice 和 Gas 与现实生活中的汽油费类似，用以支付交易费(交易费 = Gas x GasPrice)

汽油数量 *Gas *由用户指定，汽油单价 *GasPrice *由市场价格决定。运行交易后多余的 *Gas *会退还给用户(惩罚性虚拟机指令assert例外，会扣除所有的剩余未花费的 *Gas *) 。 *Gas *的数值人工预测并不准确，可以让客户端软件在签发交易时代为预测，无须自己手动填写。

• From 该笔交易的发送方

• To 该笔交易的接收方

若该交易为普通以太币转账交易，则接收方为受益人账户地址；若该交易为调用智能合约的交易，则接收方为智能合约的地址；若该交易为创建智能合约，则接收方地址可空缺。

• Value具体转移多少以太币到接收方

• Data数据字段

当若进行以太币纯转账交易时，该字段可空缺；若进行为智能合约调用，则该值包含编码后的函数名和参数的字节码；若为进行合约创建，则该值包含初始化合约的字节码。

交易的生命周期

• 客户端软件在收集完交易信息，组织成相应的结构体，需要使用用户的私钥来签名该交易。

• 交易后编码为一个公开消息，通过节点网络发出并逐渐扩散到网络中各个节点。

• 挖矿节点和众多其他普通节点同时收到该消息，矿工将其暂时缓存起来。

• 若矿工决定将该交易打包入某区块，则执行该消息内容并获得执行结果。

• 矿工把打包好的区块（包含该交易）广播到网络中，参与共识算法挑选。

• 区块进入最终的区块链被永久保存。

一笔交易在以太坊网络的节点间传播过程

以太坊上最常见的交易：

• 以太币转账

• 智能合约调用

• 智能合约创建

这三种交易在交易发送时经历的步骤是 *一模一样 *的，区别仅在于填写交易时选择传递数据 data 还是传递价值 value 。 传递数据的即为合约相关操作，传递价值即为转账操作。

共识与工作量证明

分布式系统的问题就在于如何协调各个节点步调一致、共同进退。这称之为“拜占庭将军问题”。

中心化支付系统与中心化支付系统的拓扑结构

数据结构

Radix树

Merkle树和Merkle证明

Merkle树是一个在密码学中常使用的树形结构，适用于解决数据完整性问题。 它的结构功能异常简单，通常我们用二叉树的形式来表示一棵 Merkle树， 它存在的作用是数据分组并保证数据在存储中的完整性。 例如一棵包含了数字 1 到 8 的 Merkle二叉树

如果碰上基础数据集不是偶数个元素（例如仅有7个数据），则复制一个元素，让它与自己的双胞胎做哈希运算

Merkle Patricia树

以太坊团队开创性地融合了Radix树和Merkle树的结构，并进一步优化该结构的存储性能，形成了实用的Merkle Patricia树

Merkle Patiricia树 (以下简称MPT树) 是一个可以存储键值对 (key-value pair) 的高效数据结构，键、值分别可以是任意的序列化过的字符串。它具有Merkle树的密码学安全校验功能，提供树中的数据完整性与存在性的 Merkle 证明。它具有强大的互动能力，在log(N)级别的时间内完成插入、删除、查询等操作。我们来循序渐进地查看如何构建一棵 MPT树。

状态树(以及存储树)

存储树，账户状态，世界状态的构成关系

根据以太坊黄皮书，账户若是一个智能合约账户，则必定包含了 *存储树 *（storageRoot）和 *代码存储 *（codeHash）

交易树

每个区块都有一棵独立的 交易树 (transactionsRoot)

单笔交易和交易树的构成

收据树

每个区块都有一棵独立的 收据树 (receiptsRoot)

从左到右：日志、交易收据、收据树的构成

区块

*区块头 *较为轻量级，包含了一系列的数值、引用的数值以及哈希值, 总长度在 508Byte 左右；

*区块体 *较为重量级，包含了该区块收纳的交易列表和叔块列表，长度视包含的交易多寡而定，目前在 20KB 左右 。

一个以太坊区块的示意图

术语解释

Provider: Provider 是一个为连接到以太坊网络提供抽象的类，提供对blockchain及其状态的只读访问

Signer: Signer是一个类，通常以某种方式直接或间接地接触到一个私钥，它可以签署消息和交易，以授权网络向你的账户收取以太坊来执行操作

Contract: Contract是一个抽象概念，它代表了与以太坊网络上特定合约的连接，因此，应用程序可以像普通的JavaScript对象一样使用它

连接方式及操作

Connecting to Ethereum: MetaMask

在Ethereum上进行实验和开始开发的最快速和最简单的方法是使用MetaMask，它是一个浏览器扩展

// Web3Provider包装了一个标准的Web3 provider，MetaMask为每个页面注入了window.ethereum
const provider = new ethers.providers.Web3Provider(window.ethereum);

// MetaMask Plugin 还允许签名transactions 来发送ether和支付以改变链上的状态，所以需要 signer
const signer = provider.getSigner();

Connecting to Ethereum: RPC

JSON-RPC API是另一种常用的与Ethereum交互的方式，在所有主要的以太坊节点实现(Geth, Parity)以及许多第三方网络服务(Infura)中都有

// 如果你不指定一个 url地址，会默认为: http://localhost:8545
const provider = new ethers.providers.JsonRpcProvider();

// 也允许签名transactions
const signer = provider.getSigner();

Querying the Blockchain

一旦你有了Provider，你就有了与Blockchain的只读连接，可以用它来查询当前状态，获取历史日志，查询部署的代码等等

// Look up the current block number
await provider.getBlockNumber(); // 137223

// Get the balance of an account (by address or ENS name, if supported by network)
balance = await provider.getBalance("ethers.eth"); 
// { BigNumber: "2337132817842795605" }

ethers.utils.formatEther(balance);
// '2.337132817842795605'

ethers.utils.parseEther("1.0");
// { BigNumber: "1000000000000000000" }

Note: ENS(Ethereum Name Service)之于以太坊就像是DNS对于因特网，ENS允许用户使用个性化的以太坊域名为自己注册，比如用“vitalik.eth”来替代密码地址‘0x32b724f073ec346edd64b0cc67757e4f6fe42950’。ENS一直在迭代开发中，ENS不仅仅用于以太坊地址，未来ENS将覆盖以太坊的各个方面

Writing to the Blockchain

// Send 1 ether to an ens name.
const tx = signer.sendTransaction({
    to: "marktang.firefly.eth",
    value: ethers.utils.parseEther("1.0")
});

Contracts

合约是在Ethereum blockchain上运行的代码的一种抽象

Contract类为了与链上合约进行通信，需要知道有哪些方法可以调用，这需要传入ABI文件

这个类是一个meta-class，在运行时构造的，传入ABI给构造函数时，它用ABI来决定要添加哪些方法

ABI由 Solidity或Vyper编译成，但你可以在代码中使用人类可读的ABI，如：

// You can also use an ENS name for the contract address
const daiAddress = "dai.tokens.ethers.eth";

// The ERC-20 Contract ABI, which is a common contract interface
// for tokens (this is the Human-Readable ABI format)
const daiAbi = [
  // Some details about the token
  "function name() view returns (string)",
  "function symbol() view returns (string)",

  // Get the account balance
  "function balanceOf(address) view returns (uint)",

  // Send some of your tokens to someone else
  "function transfer(address to, uint amount)",

  // An event triggered whenever anyone transfers to someone else
  "event Transfer(address indexed from, address indexed to, uint amount)"
];

// The Contract object
const daiContract = new ethers.Contract(daiAddress, daiAbi, provider);

Read-Only Methods

// Get the ERC-20 token name
await daiContract.name()
// 'Dai Stablecoin'

// Get the ERC-20 token symbol (for tickers and UIs)
await daiContract.symbol()
// 'DAI'

// Get the balance of an address
balance = await daiContract.balanceOf("ricmoo.firefly.eth")
// { BigNumber: "18190624174838529547383" }

// Format the DAI for displaying to the user
ethers.utils.formatUnits(balance, 18)
// '18190.624174838529547383'

State Changing Methods

// DAI 合约目前连接到Provider，但是Provider是 read-only的
// 需要连接到一个Signer，这样就可以付费发送一些改变状态的交易
const daiWithSigner = contract.connect(signer);

// Each DAI has 18 decimal places
const dai = ethers.utils.parseUnits("1.0", 18);

// Send 1 DAI to "ricmoo.firefly.eth"
tx = daiWithSigner.transfer("ricmoo.firefly.eth", dai);

Listening to Events

// Receive an event when ANY transfer occurs
daiContract.on("Transfer", (from, to, amount, event) => {
    console.log(`${ from } sent ${ formatEther(amount) } to ${ to}`);
    // 事件对象包含逐字记录数据、EventFragment和获取块、交易和接收的函数以及事件函数
});

// @Todo: I don't know if Can I get all transactions here.
// A filter for when a specific address receives tokens
myAddress = "0x8ba1f109551bD432803012645Ac136ddd64DBA72";
filter = daiContract.filters.Transfer(null, myAddress)
// {
//   address: 'dai.tokens.ethers.eth',
//   topics: [
//     '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
//     null,
//     '0x0000000000000000000000008ba1f109551bd432803012645ac136ddd64dba72'
//   ]
// }

// Receive an event when that filter occurs
daiContract.on(filter, (from, to, amount, event) => {
    // The to will always be "address"
    console.log(`I got ${ formatEther(amount) } from ${ from }.`);
});

Query Historic Events

// Get the address of the Signer
myAddress = await signer.getAddress()
// '0x8ba1f109551bD432803012645Ac136ddd64DBA72'

// Filter for all token transfers from me
filterFrom = daiContract.filters.Transfer(myAddress, null);
// {
//   address: 'dai.tokens.ethers.eth',
//   topics: [
//     '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
//     '0x0000000000000000000000008ba1f109551bd432803012645ac136ddd64dba72'
//   ]
// }

// Filter for all token transfers to me
filterTo = daiContract.filters.Transfer(null, myAddress);
// {
//   address: 'dai.tokens.ethers.eth',
//   topics: [
//     '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
//     null,
//     '0x0000000000000000000000008ba1f109551bd432803012645ac136ddd64dba72'
//   ]
// }

// List all transfers sent from me a specific block range
await daiContract.queryFilter(filterFrom, 9843470, 9843480)
// [
//   {
//     address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
//     args: [
//       '0x8ba1f109551bD432803012645Ac136ddd64DBA72',
//       '0x8B3765eDA5207fB21690874B722ae276B96260E0',
//       { BigNumber: "4750000000000000000" },
//       amount: { BigNumber: "4750000000000000000" },
//       from: '0x8ba1f109551bD432803012645Ac136ddd64DBA72',
//       to: '0x8B3765eDA5207fB21690874B722ae276B96260E0'
//     ],
//     blockHash: '0x8462eb2fbcef5aa4861266f59ad5f47b9aa6525d767d713920fdbdfb6b0c0b78',
//     blockNumber: 9843476,
//     data: '0x00000000000000000000000000000000000000000000000041eb63d55b1b0000',
//     decode: [Function],
//     event: 'Transfer',
//     eventSignature: 'Transfer(address,address,uint256)',
//     getBlock: [Function],
//     getTransaction: [Function],
//     getTransactionReceipt: [Function],
//     logIndex: 69,
//     removeListener: [Function],
//     removed: false,
//     topics: [
//       '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
//       '0x0000000000000000000000008ba1f109551bd432803012645ac136ddd64dba72',
//       '0x0000000000000000000000008b3765eda5207fb21690874b722ae276b96260e0'
//     ],
//     transactionHash: '0x1be23554545030e1ce47391a41098a46ff426382ed740db62d63d7676ff6fcf1',
//     transactionIndex: 81
//   },
//   {
//     address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
//     args: [
//       '0x8ba1f109551bD432803012645Ac136ddd64DBA72',
//       '0x00De4B13153673BCAE2616b67bf822500d325Fc3',
//       { BigNumber: "250000000000000000" },
//       amount: { BigNumber: "250000000000000000" },
//       from: '0x8ba1f109551bD432803012645Ac136ddd64DBA72',
//       to: '0x00De4B13153673BCAE2616b67bf822500d325Fc3'
//     ],
//     blockHash: '0x8462eb2fbcef5aa4861266f59ad5f47b9aa6525d767d713920fdbdfb6b0c0b78',
//     blockNumber: 9843476,
//     data: '0x00000000000000000000000000000000000000000000000003782dace9d90000',
//     decode: [Function],
//     event: 'Transfer',
//     eventSignature: 'Transfer(address,address,uint256)',
//     getBlock: [Function],
//     getTransaction: [Function],
//     getTransactionReceipt: [Function],
//     logIndex: 70,
//     removeListener: [Function],
//     removed: false,
//     topics: [
//       '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
//       '0x0000000000000000000000008ba1f109551bd432803012645ac136ddd64dba72',
//       '0x00000000000000000000000000de4b13153673bcae2616b67bf822500d325fc3'
//     ],
//     transactionHash: '0x1be23554545030e1ce47391a41098a46ff426382ed740db62d63d7676ff6fcf1',
//     transactionIndex: 81
//   }
// ]

// List all transfers sent in the last 10,000 blocks
await daiContract.queryFilter(filterFrom, -10000)

// List all transfers ever sent to me
await daiContract.queryFilter(filterTo)

Signing Messages

// To sign a simple string, which are used for
// logging into a service, such as CryptoKitties,
// pass the string in.
signature = await signer.signMessage("Hello World");
// '0x5a77beb84677b221d7110b08605a2658dd6c1e88a2ba9293436e587dbf6479d4798d0ca34ba2113bdb51ad97cd831975ccaccaf5f6fbd5d566fe662f11e2ca411b'

//
// A common case is also signing a hash, which is 32
// bytes. It is important to note, that to sign binary
// data it MUST be an Array (or TypedArray)
//

// This string is 66 characters long
message = "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef"

// This array representation is 32 bytes long
messageBytes = ethers.utils.arrayify(message);
// Uint8Array [ 221, 242, 82, 173, 27, 226, 200, 155, 105, 194, 176, 104, 252, 55, 141, 170, 149, 43, 167, 241, 99, 196, 161, 22, 40, 245, 90, 77, 245, 35, 179, 239 ]

// To sign a hash, you most often want to sign the bytes
signature = await signer.signMessage(messageBytes)
// '0xe099cce5e80dec1d8464d00c4156855d1c14cc4f83473deee7ab8e60be770f4b5ea04e90e7b7102ac5b493f7822b0ad10dc26bfda0761530a58e5f461f90b2fd1b'

• 匿名网络

• Tor 洋葱网络 - 暗网主流方案

• Nym (继承了匿名网络的同时，引入了区块链技术，解决了节点的激烈问题)

• Elixxer (继承了匿名网络的同时，引入了区块链技术，解决了节点的激烈问题)

区块链共识和扩容方案

基础概念

没有浮点数运算

为了弥补这个缺陷，如何表示带小数的数字呢？以太坊将自身的数切分为最小18位，我们称为wei，任何数字都是wei的整数倍

变量类型

智能合约的变量分为两种，存在区块链上的和不存在区块链上的。存在区块链上的我们称为状态变量（state variable）。这类变量将永久记录在区块链上，写入读取它们就仿佛操作一个数据库一样，修改和赋值都会造成巨额的开销。不存在于区块链上的变量则是程序中的内存变量（memory variable），程序运行完毕就从内存中释放，相对开销较小

internal/external修饰符

• internal修饰符可以让合约继承后子合约访问该函数

• external 修饰符让该函数只能被外部调用者调用

Solidity的函数也有修饰符，称为modifiers，这标明了函数可能对区块链状态有无修改/读取的标记。一般都会标记该值让编译器帮我们执行代码的优化

内置函数

• keccak256 散列函数算法，可以根据任意长度的明文产生固定长度256位的哈希值

数据结构：Map

映射数据结构：mapping

例如我们可以存储账号地址以及它对应的合约内的token数量的关系(假设是一个代币合约)

环境变量：msg.sender

当前合约调用者的地址

require / assert

在合约中进行权限检查或者条件满足检查

• require 条件检查语句如果不通过，则扣除运行到当前语句时，程序执行所话费的gas，终止程序执行，并返回

• assert 条件检查语句如果不通过，则视为严重错误，扣除所有的gas，终止程序执行，并返回

继承和引入

智能合约的代码可以来源于自身项目内，也可以来源于外部早已部署完毕的链上合约

内存变量

不同的存储类型，花费的gas数额不同。它们的最终存储地方也不同。有时候为了省钱，我们会把临时变量留在内存里，而不是保存在区块链上。随着程序执行，内存里的变量会消亡，而区块链上的会永存。由于没有改变区块链状态，内存变量(memory)的花费会比状态变量(storage)的花费少很多

接口与合约调用

合约的接口就是合约的抽象。我们可以通过定义合约接口，并指定合约地址，来调用另外一个在以太坊上早已经部署好的合约

多返回值

Ownable控制

Pausable控制

时间单位表示

这里now和5 minutes都属于时间表示，我们甚至可以直接将时间单位赋值给uint类型的变量。以下的语句是完全合法的。

uint lastUpdated = now;

  uint one_day = 1 days;
  uint five_minutes = 5 minutes;
  uint now_time = now;
  uint two_hours = 2 hours;

带参数的函数修饰符

// ID 和年龄的映射
mapping (uint => uint) public age;

// 一个函数修饰
modifier olderThan(uint _age, uint _userId) {
  require(age[_userId] >= _age);
  _;
}

// 限制年龄大于16岁才能开车
function driveCar(uint _userId) public olderThan(16, _userId) {

}

for循环

环在智能合约中使用范围不是很明显。因为循环消耗大量的计算步骤，智能合约编纂者都尽量减少循环次数，甚至从根本上避免循环的产生

function getOdds() pure external returns(uint[]) {
  uint[] memory odds = new uintUnsupported embed;

  uint counter = 0;

  for (uint i = 1; i <= 10; i++) {
    if (i % 2 != 0) {
      odds[counter] = i;
      counter++;
    }
  }
  return odds;
}

合约收款：payable修饰符

contract OnlineStore {
  function buySomething() external payable {
    // 查看付款金额
    require(msg.value == 0.001 ether);
    // 将对应金额的物品转移给调用方
    transferSomething(msg.sender);
  }
}

上面多了一个关键字payable和两个环境变量：msg.value和msg.sender。payable表示调用者可以在调用该方法时附上想发送的以太币数量；msg.value则表示实际使用中调用者支付的以太币，这里要和gas费用相区别，gas费用是付给矿工来执行合约的，而 msg.value则是直接付给智能合约的费用。在智能合约收到以太币后，可以直接调用其他函数进行等价交换。这种函数经常在ICO的代币发行中使用，让广大用户可以直接通过合约交换以太坊为代币，无需人工干预，公平、公正、公开

支付费用：transfer方法

智能合约的作者往往能获得报酬。怎么获得呢？就是通过用户不断向智能合约打入以太币，并积累在智能合约的balance余额中。当智能合约所有者想提取的时候，调用一个函数就可以执行

Truffle

Truffle内置了一个默认的测试底层网络实现 Ganache。Ganache 原名 Test-RPC，是以太坊开源项目中采用JavaScript编写的模拟区块链运行的节点。它本身并不联网产生区块，而是一个测试环境中的高度仿真模拟器。它的Web3命令支持丰富，紧跟社区的最新提案和开发进度，因为没有实际挖矿（仅仅模拟挖矿行为），所以它的运行速度是惊人的，非常利于测试环境下的高速使用，不需要等实际区块链的出块时间间隔

命令

$ mkdir truffle-project
$ cd truffle-project
$ truffle unbox metacoin

每个目录具体解释如下：

• contracts目录包含了主要的合约代码，示例中包含了MetaCoin.sol（主要合约），ConvertLib.sol （库文件）和部署时记录地址的合约 Migration.sol

• migrations目录包含了两个部署文件，先会部署Migration.sol, 再会链接ConvertLib.sol与MetaCoin.sol部署到链上，两者顺序不可颠倒。代码中aritfacts.require()函数相当于node.js中的require()函数，指明了我们希望引用哪个合约的抽象。这个引用名必须与合约中的类名相同

• test目录包含了两种不同的测试文件，智能合约可以通过sol结尾的合约进行测试写作，也可以通过js文件写作，两者功能几乎一致，笔者在开发组多时，考虑到语言的通用性与灵活程度，平时一直使用js的格式书写测试。Truffle的测试都是Mocha测试框架格式的语法

• truffle-config.js和truffle.js都保存了控制truffle行为定义的全局变量，当想调换测试网络时，可以编辑truffle.js指定网络和端口

ERC20合约

• Node.js是一个基于Chrome V8引擎的Javascript运行环境

• Node.js使用了一个事件驱动、非阻塞式I/O的模型，使其轻量又高效

Node.js适合的服务

• Web服务中间层(搜索引擎优化 + 首屏速度优化 = 服务端渲染)

• 构建工作流 - Gulp、Webpack

• 开发工具 - Visual Studio Code

• 游戏 - wayward(可扩展性 - 大型应用需要给使用者自定义模块的能力)

• 客户端应用 - twitch.tv(用Node.js客户端技术(Electron)实现，最大限度复用现有工程)

CommonJS模块规范

• commonJS模块被引用后，如果没有导出，默认是个空对象 {}

• 导出的引用与模块内部的exports引入是同一个，因此外部也可以修改模块的引用

• exports = module.exports

Node.js内置模块

利用EventEmitter实现观察者模式

事件循环(Event Loop)

libuv这个库提供两个最重要的东西是事件循环和线程池，两者共同构建了异步非阻塞I/O模型，而事件驱动只是在整个非阻塞I/O模型当中线程池通知事件循环它已经完成I/O操作的这样一种机制而已

• 每一个事件循环都是一个全新的调用栈

• 微任务

• 宏任务

Micro-Task and Macro-Task

Promise

Async/Await

• Async function 是Promise的语法糖封装

• 异步编程的终极方案 - 以同步的方式写异步

• await 关键字可以 “暂停” async function 的执行

  • await 关键字可以以同步的写法获取Promise的执行结果

  • try-catch 可以获取await 所得到的错误

Express

核心功能

• 路由

  • request/response

    • request: pathname, query等

    • response: send(), json(), jsonp()等

• 中间件 - 洋葱模型

Express洋葱模型不完善，有设计缺陷，所以作者新写了Koa

Koa

核心功能

• 中间件 - 洋葱模型

• Context - 将request和response整合进了context，使其更符合语义

• 中间件支持异步函数，可以使用 await next(); 阻塞住，不会出现express的异步调用缺陷

• Express vs Koa

  • Express 门槛更低，koa更强大优雅

  • Express 封装更多东西，开发更快速，koa可定制型更高

RPC调用

• Remote Procedure Call (远程过程调用)

• 和Ajax的相同点

  • 都是两个计算机之间的网络通信

  • 需要双方约定一个数据格式

• 和Ajax的不同点

  • 不一定使用DNS作为寻址服务

  • 应用层协议一般不使用HTTP

  • 基于TCP或UDP协议

• 寻址/负载均衡

  • Ajax: 使用DNS进行寻址

  • RPC: 使用特有服务进行寻址

• TCP通信方式

  • 单工通信

  • 半双工通信 (轮番单工通信)

  • 全双工通信

• 二进制协议

  • 更小的数据包体积

  • 更快的编解码速率

Buffer编解码二进制数据包

• Protocol buffer协议 Google提供

Node.js net模块

• 全双工的通信通道搭建

  • 关键在于应用层协议需要有标记包号的字段

  • 处理以下情况，需要有标记包长的字段

    • 粘包

    • 不完整包

  • 错误处理

API服务 - Restful

• 简单易懂

• 可以快速搭建

• 在数据的聚合方面有很大劣势

API服务 - GraphQL

• 专注数据聚合，前端要什么就返回什么

压测工具

• Ab (apache bench)

• webbench

• 找到性能瓶颈所在地

  • top

  • iostat

Node.js性能分析工具

• Chrome devtools

Node.js Cluster

动静分离

• 静态内容

  • 基本不会变动，也不会因为请求参数不同而变化

  • -> CDN分发，HTTP缓存等

• 动态内容

  • 各种因为请求参数不同而变动，且变种的数量几乎不可枚举

  • -> 用大量的源站机器承载，结合反向代理进行负载均衡

设计模式

学习设计模式最主要的不是学习模式，而是理解设计模式的原则，理解要怎么样才能做出架构优秀的程序

• 观察者模式

  • EventEmitter

  • DOM addEventListener

• 外观模式

  • jQuery

• 设计模式六大法则

  • 单一职责原则

    • 每个模块/类只做一件事情

    • 微服务

    • 方便重用

    • 解耦

  • 里氏替换原则

  • 依赖倒转原则

  • 接口隔离

  • 最小知晓原则

  • 开闭原则

    • 对扩展开放，对修改关闭

    • Webpack loader设计

    • 每一个模块都有明确的功能

    • 新增功能只需要新增模块，不需要修改原有部分

Serverless

• 云函数

  • 不用再因为运维、架构的事情操心

    • 缩短业务上线周期

    • 减少出错的概率

    • 业务开发的上手难度更低

  • 渐进式

• less

• 把能在多个业务复用的东西下沉，屏蔽细节

1. 史前壁画

画画的模式还是出于本能，本能地去画画、涂抹，这个阶段成为“像儿童一样画画”

2. 古希腊与古罗马

这两个时期的绘画就有些像刚刚学成的专业绘画者画的。古希腊关键词：尊重自然、信奉众神、黄金比例、公式化

古罗马关键词：比较务实、实用性很强

3. 中世纪

刻意模仿儿童画画时期 关键词：异教徒、基督教、圣经、镶嵌画、湿壁画、蛋彩、宗教、宗教内的神迹显现、以神为名义的征战

4. 文艺复兴

关键词：乔托、人文精神的复兴、技法的复兴、达芬奇、米开朗基罗、拉斐尔、巴洛克(胜利、权利和控制 人体的动作和姿势生动大胆、色彩明快、强调光影变化)、洛可可(奢华、浮夸、贝壳形的花纹、抽象的火焰形状、不对称的花边、生动、神奇、不纯洁、不道德)

5. 新古典主义与浪漫主义

关键词：画风细腻、过渡平和、颜色鲜艳和细节处理到位、强烈的感情、浪漫主义的创作重心是追求理想，爱好奇幻型的艺术形象，具有强烈的主观抒情色彩

6. 印象派和后印象派

关键词：不完整、更关注现实的光和色彩、印象派不刻意地追求象征意义，而是追求描绘自然的现代色彩写生、自我感受和主观感情

7. 20世纪后

关键词：野兽派、表现主义、立体主义、未来主义、达达主义、超现实主义、抽象主义、抽象性和表现性、从写实发展到写意、艺术家的自我意识的发展

一些使Javascript更加简洁的小技巧

清空或截断数组

const arr = [11, 22, 33, 44, 55, 66];

// truncanting

arr.length = 3;

console.log(arr); // => [11, 22, 33]

//clearing

arr.length = 0;

console.log(arr); // => []

console.log(arr[2]); // => undefined

几个面试题

1. JS中使用 typeof 能得到的哪些类型？ 考点：JS变量类型

2. 何时使用 === 何时使用 == ? 考点：强制类型转换

3. window.onload和DOMContentLoaded的区别? 考点：浏览器渲染过程

4. 用JS创建10个标签，点击的时候弹出来对应的序号 考点：作用域

   • 简述如何实现一个模块加载器，实现类似require.js的基本功能 考点：JS模块化

   • 实现数组的随机排序 考点：JS基础算法

5. 变量类型和计算

   题目

   1. JS中使用 typeof 能得到的哪些类型？ 考点：JS变量类型

   2. 何时使用 === 何时使用 == ? 考点：强制类型转换

   3. JS中有哪些内置函数

   4. JS变量按照存储方式区分为哪些类型，并描述其特点

   5. 如何理解JSON

   解答

   1. undefined、string、number、boolean、object、function

   2. obj.a == null 除了判断null和undefined外，都需要使用全等符

   3. 数据封装类对象- Object、Array、Boolean、Number、String、Function、Date、RegExp、Error

   4. 值类型、引用类型

   5. JSON 只不过是一个 JS 对象而已, 也是一个数据格式

   知识点

   1. 变量类型

   2. 变量计算

   变量类型

   • 值类型 vs 引用类型

   • typeof 运算符详解

   变量计算 - 强制类型转换

   • 字符串拼接

   • == 运算符

   • if语句

   • 逻辑运算

   原型和原型链

   题目

   • 如何准确判断一个变量是数组类型

   • 写一个原型链继承的例子

   • 描述new一个对象的过程

   • zepto(或其他框架) 源码中如何使用原型链

   解答

   • arr instanceof Array

   
   // 动物
   
   function Animal() {
   
   this.eat = function () {
   
   console.log('animal eat')
   
   }
   
   }
   
   // 狗
   
   function Dog() {
   
   this.bark = function () {
   
   console.log('dog bark')
   
   }
   
   }
   
   Dog.prototype = new Animal()
   
   // 哈士奇
   
   var hashiqi = new Dog()
   
   // 接下来代码演示时，会推荐更加贴近实战的原型继承示例！
   

   描述new 一个对象的过程

   1. 创建一个新对象

   2. this 指向这个新对象

   3. 执行代码，即对this 赋值

   4. 返回 this

   zepto (或其他框架) 源码中如何使用原型链

   • 阅读源码是高效提高技能的方式

   • 但不能 "埋头苦钻" 有技巧在其中

   • 慕课网搜索 "zepto设计和源码分析"

   知识点

   • 构造函数

   • 构造函数 - 扩展

   • 原型规则和示例

   • 原型链

   • instanceof

   原型规则和示例

   • 所有的引用类型(数组、对象、函数)，都具有对象特性，即可自由扩展属性(除了 "null" 以外)

   • 所有的引用(数组、对象、函数)，都有一个__proto__ (隐式原型)属性,属性值是一个普通的对象

   • 所有的函数，都有一个 prototype (显式原型) 属性，属性值也是一个普通对象

   • 所有的引用类型(数组、对象、函数), __ proto __ 属性值指向它的构造函数的 "prototype" 属性值

   
   var obj = {}; obj.a = 100;
   
   var arr = []; arr.a = 100;
   
   function fn () {}
   
   fn.a = 100;
   
   console.log(obj.__proto__);
   
   console.log(arr.__proto__);
   
   console.log(fn.__proto__);
   
   console.log(fn.prototype)
   
   console.log(obj.__proto__ === Object.prototype)
   

   • 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__ proto __ (即它的构造函数的 prototype) 中寻找。

   
   // 构造函数
   
   function Foo(name, age) {
   
   this.name = name;
   
   }
   
   Foo.prototype.alertName = function () {
   
   alert(this.name);
   
   }
   
   // 创建示例
   
   var f = new Foo('zhangsan')
   
   f.printName = function () {
   
   console.log(this.name);
   
   }
   
   // 测试
   
   f.printName(); // zhangsan
   
   f.alertName(); // zhangsan
   
   var item;
   
   for (item in f) {
   
   //高级浏览器已经在 for in 中屏蔽了来自原型的属性
   
   //但是这里建议大家还是加上这个判断，保证程序的健壮性
   
   if (f.hasOwnProperty(item)) {
   
   console.log(item)
   
   }
   
   }
   

   原型链

   
   //构造函数
   
   function Foo(name, age) {
   
   this.name = name;
   
   }
   
   Foo.prototype.alertName = function () {
   
   alert(this.name);
   
   }
   
   // 创建示例
   
   var f = new Foo('zhangsan')
   
   f.printName = function () {
   
   console.log(this.name)
   
   }
   
   // 测试
   
   f.printName()
   
   f.alertName()
   
   f.toString() // 要去 f.__proto__.__proto__中查找
   

   instanceof

   • 用于判断 引用类型 属于哪个 构造函数 的方法

   • f instanceof Foo 的判断逻辑是：

   • f的 __ proto __ 一层一层往上，能否对应到 Foo.prototype

   • 再试着判断 f instanceof Object

   作用域和闭包-执行上下文

   题目

   1. 说一下对变量提升的理解

   • 变量定义

   • 函数声明(注意和函数表达式的区别)

   1. 说明 this 几种不同的使用场景

   • 作为构造函数执行

   • 作为对象属性执行

   • 作为普通函数执行

   • call apply bind

   1. 创建10个标签，点击的时候弹出来对应的序号

   2. // 这是一个错误的写法!!! var i,a for (i = 0; i < 10; i++) { a = document.createElement('a') a.innerHTML = i + '<br>' a.addEventListener('click', function (e) { e.preventDefault() alert(i) }) document.body.appendChild(a) } // 这是正确的写法!!! var i for (i = 0; i < 10; i++) { (function(i){ var a = document.createElement('a') a.innerHTML = i + '<br>' a.addEventListener('click', function (e) { e.preventDefault() alert(i) }) document.body.appendChild(a) })(i) }

      1. 如何理解作用域

      • 自由变量

      • 作用域链，即自由变量的查找

      • 闭包的两个场景

      1. 实际开发中闭包的应用

      
      // 闭包实际应用中主要用于封装变量，收敛权限
      
      function isFirstLoad() {
      
      var _list = []
      
      return function (id) {
      
      if (_list.indexOf(id) >= 0) {
      
      return false
      
      } else {
      
      _list.push(id)
      
      return true
      
      }
      
      }
      
      }
      
      // 使用
      
      var firstLoad = isFirstLoad()
      
      firstLoad(10) // true
      
      firstLoad(10) // false
      
      firstLoad(20) // true
      

      知识点

      • 执行上下文

      • this

      • 作用域

      • 作用域链

      • 闭包

      执行上下文

      
      console.log(a) // undefined
      
      var a = 100
      
      fn('zhangsan') // 'zhangsan' 20
      
      function fn(name) {
      
      age = 20
      
      console.log(name, age)
      
      var age
      
      }
      

      • 范围:一段

        • 全局: 变量定义、函数声明 ==一段

          • 函数: 变量定义、函数声明、this、arguments ==函数==

          • PS：注意"函数声明"和"函数表达式"的区别

        this

        • this 要在执行时才能确认值，定义时无法确认

        
        var a = {
        
        name: 'A',
        
        fn: function () {
        
        console.log(this.name)
        
        }
        
        }
        
        a.fn() // this === a
        
        a.fn.call({name: 'B'}) // this === {name: 'B'}
        
        var fn1 = a.fn
        
        fn1() // this === window
        

        • 作为构造函数执行

        • 作为对象属性执行

        • 作为普通函数执行

        • call apply bind

        作用域

        • 没有块级作用域

        • 只有函数和全局作用域

        
        // 无块级作用域
        
        if (true) {
        
        var name = 'zhangsan'
        
        }
        
        console.log(name)
        
        // 函数和全局作用域
        
        var a = 100
        
        function fn() {
        
        var a = 200
        
        console.log('fn', a)
        
        }
        
        console.log('global', a)
        
        fn()
        

        
        //作用域链
        
        var a = 100
        
        function fn() {
        
        var b = 200
        
        // 当前作用域没有定义的变量，即 "自由变量"
        
        console.log(a)
        
        console.log(b)
        
        }
        
        fn()
        

        闭包

        
        function F1() {
        
        var a = 100
        
        // 返回一个函数 (函数作为返回值)
        
        return function () {
        
        console.log(a)
        
        }
        
        }
        
        // f1 得到一个函数
        
        var f1 = F1()
        
        var a = 200
        
        f1()
        

        • 函数作为返回值

        • 函数作为参数传递

        异步和单线程

        什么是异步

        题目

        1. 同步和异步的区别是什么？分别举一个同步和异步的例子

        • 同步会阻塞代码执行，而异步不会

        • alert是同步，setTimeout是异步

        1. 一个关于setTimeout的笔试题

        
        console.log(1)
        
        setTimeout(function () {
        
        console.log(2)
        
        }, 0)
        
        console.log(3)
        
        setTimeout(function () {
        
        console.log(4)
        
        }, 1000)
        
        console.log(5)
        

        1. 前端使用异步的场景有哪些

        • 定时任务：setTimeout, setInverval

        • 网络请求：ajax请求，动态加载

        • 事件绑定

        知识点

        • 什么是异步(对比同步)

        • 前端使用异步的场景

        • 异步和单线程

        
        // 异步-不阻塞
        
        console.log(100)
        
        setTimeout(function() {
        
        console.log(200)
        
        }, 1000)
        
        console.log(300)
        
        // 同步-阻塞
        
        console.log(100)
        
        alert(200)
        
        console.log(300)
        

        何时需要异步

        • 在可能发生等待的情况

        • 等待过程中不能像 alert 一样阻塞程序运行

        • 因此，所有的 "等待的情况" 都需要异步

        前端使用异步的场景

        • 定时任务：setTimeout, setInverval

        • 网络请求：ajax请求，动态加载

        • 事件绑定

        
        // ajax请求代码示例
        
        console.log('start')
        
        $.get('./data1.json', function(data1) {
        
        console.log(data1)
        
        })
        
        console.log('end')
        
        // <img>加载示例
        
        console.log('start')
        
        var img = document.createElement('img')
        
        img.onload = function(){
        
        console.log('loaded')
        
        }
        
        img.src = '/xxx.png'
        
        console.log('end')
        
        // 事件绑定示例
        
        console.log('start')
        
        document.getElementById('btn1').addEventListener('click', function() {
        
        alert('clicked')
        
        })
        
        console.log('end')
        

        单线程

        • 执行第一行，打印100

        • 执行setTimeout后，传入setTimeout的函数会被暂存起来，不会立即执行(单线程的特点,不能同时干两件事)

        • 执行最后一行，打印300

        • 待所有程序执行完，处于空闲状态时，会立马看有没有暂存起来的要执行。

        • 发现暂存起来的setTimeout中的函数无需等待时间，就立即拿过来执行

        其他知识

        题目

        1. 获取 2017-06-10 格式的日期

        
        function formatDate(dt) {
        
        if (!dt) {
        
        dt = new Date()
        
        }
        
        var year = dt.getFullYear()
        
        var month = dt.getMonth() + 1
        
        var date = dt.getDate()
        
        if (month < 10) {
        
        // 强制类型转换
        
        month = '0' + month
        
        }
        
        if (date < 10) {
        
        // 强制类型转换
        
        date = '0' + date
        
        }
        
        // 强制类型转换
        
        return year + '-' + month + '-' + date
        
        }
        
        var dt = new Date()
        
        var formatDate = formatDate(dt)
        
        console.log(formatDate)
        

        1. 获取随机数，要求是长度一致的字符串格式

        
        var random = Math.random()
        
        var random = random + '0000000000' // 后面加上10个零
        
        var random = random.slice(0, 10)
        
        console.log(random)
        

        1. 写一个能遍历对象和数组的通用forEach函数

        
        function forEach(obj, fn) {
        
        var key
        
        if (obj instanceof Array) {
        
        // 准确判断是不是数组
        
        obj.forEach(function (item, index) {
        
        fn(index, item)
        
        })
        
        } else {
        
        // 不是数组就是对象
        
        for (key in obj) {
        
        fn(key, obj[key])
        
        }
        
        }
        
        }
        
        var arr = [1,2,3]
        
        // 注意，这里参数的顺序换了，为了和对象的遍历格式一致
        
        forEach(arr, function (index, item) {
        
        console.log(index, item)
        
        })
        
        var obj = {x: 100, y: 200}
        
        forEach(obj, function (key, value) {
        
        console.log(key, value)
        
        })
        

        知识点

        • 日期

        • Math

        • 数组API

        • 对象API

        日期

        
        Date.now() // 获取当前时间毫秒数
        
        var dt = new Date()
        
        dt.getTime() // 获取毫秒数
        
        dt.getFullYear() //年
        
        dt.getMonth // 月 (0-11)
        
        dt.getDate() // 日 (0-31)
        
        dt.getHours() // 小时 (0-23)
        
        dt.getMinutes() // 分钟 (0-59)
        
        dt.getSeconds() // 秒 (0-59)
        

        Math

        • 获取随机数 Math.random()

        数组API

        • forEach 遍历所有元素

        • every 判断所有元素是否都符合条件

        • some 判断是否有至少一个元素符合条件

        • sort 排序

        • map 对元素重新组装，生成新数组

        • filter 过滤符合条件的元素

        forEach

        
        var arr = [1,2,3]
        
        arr.forEach(function (item, index) {
        
        // 遍历数组的所有元素
        
        console.log(index, item)
        
        })
        

        every

        
        var arr = [1,2,3]
        
        var result = arr.every(function (item, index) {
        
        // 用来判断所有的数组元素，都满足一个条件
        
        if (item < 4) {
        
        return true
        
        }
        
        })
        
        console.log(result)
        

        some

        
        var arr = [1,2,3]
        
        var result = arr.some(function (item, index) {
        
        // 用来判断所有的数组元素，只要有一个满足条件即可
        
        if (item < 2) {
        
        return true
        
        }
        
        })
        
        console.log(result)
        

        sort

        
        var arr = [1,4,2,3,5]
        
        var arr2 = arr.sort(function(a, b) {
        
        // 从小到大排序
        
        return a - b
        
        // 从大到小排序
        
        // return b - a
        
        })
        
        console.log(arr2)
        

        map

        
        var arr = [1,2,3,4]
        
        var arr2 = arr.map(function(item, index) {
        
        // 将元素重新组装，并返回
        
        return '<b>' + item + '</b>'
        
        })
        
        console.log(arr2)
        

        filter

        
        var arr = [1,2,3,4]
        
        var arr2 = arr.filter(function(item, index) {
        
        // 通过某一个条件过滤数组
        
        if (item >= 2) {
        
        return true
        
        }
        
        })
        
        console.log(arr2)
        

        对象API

        
        var obj = {
        
        x: 100,
        
        y: 200,
        
        z: 300
        
        }
        
        var key
        
        for (key in obj) {
        
        // 注意这里的 hasOwnProperty, 再讲原型链时候讲过了
        
        if (obj.hasOwnProperty(key)) {
        
        console.log(key, obj[key])
        
        }
        
        }
        

        JS-Web-API

        • JS基础知识: ECMA 262 标准

        • JS-Web-API: W3C 标准

        • W3C标准中关于JS的规定有：

        • DOM操作

        • BOM操作

        • 事件绑定

        • ajax请求(包括http协议)

        • 存储

        DOM操作

        题目

        1. DOM 是哪种基本的数据结构？

        • 树

        1. DOM 操作的常用API有哪些

        • 获取DOM节点，以及节点的property和Attribute

        • 获取父节点，

        • 新增节点，删除节点

        1. DOM 节点的Attribute 和 property有何区别

        • property 只是一个JS对象的属性的修改

        • Attribute 是对html标签属性的修改

        知识点

        • DOM本质

        • DOM节点操作

        • DOM结构操作

        DOM节点操作

        • 获取DOM节点

        • property

        • Attribute

        
        var div1 = document.getElementById('div1') // 元素
        
        var divList = document.getElementsByTagName('div') // 集合
        
        console.log(divList.length)
        
        console.log(divList[0])
        
        var containerList = document.getElementsByClassName('.container') // 集合
        
        var pList = document.querySelectorAll('p') // 集合
        

        
        // property
        
        var pList = document.querySelectorAll('p')
        
        var p = pList[0]
        
        console.log(p.style.width) // 获取样式
        
        p.style.width = '100px'
        
        console.log(p.className)
        
        p.className = 'p1'
        
        // 获取 nodeName 和 nodeType
        
        console.log(p.nodeName)
        
        console.log(p.nodeType)
        

        
        // Attribute
        
        var pList = document.querySelectorAll('p')
        
        var p = pList[0]
        
        p.getAttribute('data-name')
        
        p.setAttribute('data-name', 'sss')
        
        p.getAttribute('style')
        
        p.setAttribute('style', 'font-size:28px;')
        

        DOM结构操作

        • 新增节点

        • 获取父元素

        • 获取子元素

        • 删除节点

        
        // 新增节点
        
        var div1 = document.getElementById('div1')
        
        // 添加新节点
        
        var p1 = document.createElement('p')
        
        p1.innerHtml = 'this is p1'
        
        div1.appendChild(p1) // 添加新创建元素
        
        // 移动已有节点
        
        var p2 = document.getElementById('p2')
        
        div1.appendChild(p2)
        

        
        // 获取父元素和子元素
        
        var div1 = document.getElementById('div1')
        
        var parent = div1.parentElement
        
        var child = div1.childNodes
        
        div1.removeChild(child[0])
        

        BOM操作

        题目

        1. 如何检测浏览器的类型

        
        var ua = navigator.userAgent
        
        var isChrome = ua.indexOf('Chrome')
        
        console.log(isChrome)
        

        1. 拆解url的各部分

        
        location.href
        
        location.protocol
        
        location.pathname
        
        location.search
        
        location.hash
        

        知识点

        • navigator

        • screen

        • location

        • history

        
        // navigator
        
        var ua = navigator.userAgent
        
        var isChrome = ua.indexOf('Chrome')
        
        console.log(isChrome)
        
        // screen
        
        console.log(screen.width)
        
        console.log(screen.height)
        

        
        // location
        
        console.log(location.href)
        
        console.log(location.protocol) // 'http:' 'https:'
        
        console.log(location.pathname) // user/api
        
        console.log(location.search)
        
        console.log(location.hash)
        
        // history
        
        history.back()
        
        history.forward()
        

        事件

        题目

        1. 编写一个通用的事件监听函数

        2. 描述事件冒泡流程

        3. 对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

        知识点

        • 通用事件绑定

        • 事件冒泡

        • 代理

        通用事件绑定

        
        var btn = document.getElementById('btn1')
        
        btn.addEventListener('click', function (event) {
        
        console.log('clicked')
        
        })
        
        function bindEvent(elem, type, fn) {
        
        elem.addEventListener(type, fn)
        
        }
        
        var a = document.getElementById('link1')
        
        bindEvent(a, 'click', function(e) {
        
        e.preventDefault() // 阻止默认行为
        
        alert('clicked')
        
        })
        

        关于IE低版本的兼容性

        • IE低版本使用 attachEvent绑定事件，和W3C标准不一样

        • IE低版本使用量以非常少，很多网站都早已不支持

        • 建议对IE低版本的兼容性: 了解即可，无需深究

        • 如果遇到对IE低版本要求苛刻的面试，果断放弃

        代理

        
        var div1 = document.getElementById('div1')
        
        div1.addEventListener('click', function(e) {
        
        var target = e.target
        
        if (target.nodeName === 'A') {
        
        alert(target.innerHTML)
        
        }
        
        })
        

        完善通用绑定事件的函数

        
        function bindEvent(elem, type, selector, fn) {
        
        if (fn == null) {
        
        fn = selector
        
        selector = null
        
        }
        
        elem.addEventListener(type, function (e) {
        
        var target
        
        if (selector) {
        
        target = e.target
        
        if (target.matches(selector)) {
        
        fn.call(target, e)
        
        }
        
        } else {
        
        fn(e)
        
        }
        
        })
        
        }
        

        代理的好处

        • 代码简洁

        • 减少浏览器内存占用

        Ajax

        题目

        1. 手动编写一个ajax, 不依赖第三方库

        2. 跨域的几种实现方式

        知识点

        • XMLHttpRequest

        • 状态码说明

        • 跨域

        XMLHttpRequest

        
        var xhr = new XMLHttpRequest()
        
        xhr.open("GET", "/api", false)
        
        xhr.onreadystatechange = function () {
        
        // 这里的函数异步执行，可参考之前JS基础中的异步模块
        
        if (xhr.readyState == 4) {
        
        if (xhr.status == 200) {
        
        alert(xhr.responseText)
        
        }
        
        }
        
        }
        
        xhr.send(null)
        

        IE兼容性问题

        • IE低版本使用 ActiveXObject, 和W3C标准不一样

        • IE低版本使用量以非常少，很多网站都早已不支持

        • 建议对IE低版本的兼容性: 了解即可，无需深究

        • 如果遇到对IE低版本要求苛刻的面试，果断放弃

        readyState

        • 0 - (未初始化)还没有调用send()方法

        • 1 - (载入)已调用send()方法，正在发送请求

        • 2 - (载入完成)send()方法执行完成，已经接收到全部响应内容

        • 3 - (交互) 正在解析响应内容

        • 4 - (完成) 响应内容解析完成，可以在客户端调用了

        status

        • 2xx - 表示成功处理请求。如200

        • 3xx - 需要重定向，浏览器直接跳转

        • 4xx - 客户端请求错误，如404

        • 5xx - 服务器端错误

        跨域

        • 什么是跨域

        • JSONP

        • 服务器端设置 http header (cors)

        什么是跨域

        • 浏览器有同源策略，不允许ajax访问其他域接口

        • 跨域条件：协议、域名、端口、有一个不同就算跨域

        可以跨域的三个标签

        • 但是有三个标签允许跨域加载资源

        • 
          
        • 
          
        • 
          

        • 三个标签的场景

          • 用于打点统计，统计网站可能是其他域

          • 跨域注意事项

            • 所有的跨域请求都必须经过信息提供方允许

            • 如果未经允许即可获取，那是浏览器同源策略出现漏洞

            JSONP实现原理

            • 加载 http://coding.m.test.com/classindex.html

            • 不一定服务器端真正有一个 classindex.html 文件

            • 服务器可以根据请求，动态生成一个文件，返回

            • 同理于

            • 存储

              题目

              1. 请描述一下 cookie, sessionStorage 和 localStorage的区别？

              • 容量

              • 是否会携带到ajax中

              • API易用性

              知识点

              • cookie

              • localStorage 和 sessionStorage

              cookie

              • 本身用于客户端和服务器端通信

              • 但是它有本地存储的功能，于是就被 "借用"

              • 使用 document.cookie = .... 获取和修改即可

              cookie 用于存储的缺点

              • 存储量太小，只有4kb

              • 所有http请求都带着，会影响获取资源的效率

              • API简单，需要封装才能用 document.cookie = ....

              localStorage 和 sessionStorage

              • HTML5专门为存储而设计，最大容量5M

              • API简单易用

              • localStorage.setItem(key, value); localStorage.getItem(key);

              • IOS safari 隐藏模式下

              • localStorage.getItem 会报错

              • 建议统一使用 try-catch 封装

              关于开发环境

              • 面试官想通过开发环境了解面试者的经验

              • 开发环境，最能提现工作产出的效率

              模块化

              知识点

              • 不使用模块化的情况

              • 使用模块化

              • AMD

              • CommonJS

              运行环境

              页面加载 - 渲染过程

              题目

              1. 从输入url到得到html的详细过程

              2. window.onload 和 DOMContentLoaded的区别

              知识点

              • 加载资源的形式

              • 加载一个资源的过程

              • 浏览器渲染页面的过程

              加载资源的形式

              • 输入url(或跳转页面)加载html

              • http://coding.m.test.com

              • 加载html中的静态资源

              • 
                

              加载一个资源的过程

              1. 浏览器根据DNS服务器得到域名的IP地址

              2. 向这个IP的机器发送http 请求

              3. 服务器收到、处理并返回http 请求

              4. 浏览器得到返回内容

              浏览器渲染页面的过程

              答案

              1. 根据HTML结构生成DOM Tree

              2. 根据CSS生成 CSSOM

              3. 将DOM和CSSOM整合形成RenderTree

              4. 根据 RenderTree 开始渲染和展示

              5. 遇到

              6. window.onload // 页面的全部资源加载完才会执行，包括图片、视频等 DOMContentLoaded // DOM渲染完即可执行，此时图片、视频还可能没有加载完

                 性能优化

                 原则

                 • 多使用内存、缓存或者其他方法

                 • 减少CPU计算、减少网络

                 从哪里入手

                 • 加载页面和静态资源

                 • 页面渲染

                 加载资源优化

                 • 静态资源的压缩合并

                 • 静态资源缓存

                 • 使用CDN让资源加载更快

                 • 使用SSR后端渲染，数据直接输出到HTML中

                 渲染优化

                 • CSS放前面，JS放后面

                 • 懒加载(图片懒加载、下拉加载更多)

                 • 减少DOM查询，对DOM查询做缓存

                 • 减少DOM操作，多个操作尽量合并在一起执行

                 • 事件节流

                 • 尽早执行操作(如DOMContentLoaded)

                 合并DOM插入

                 
                 //合并DOM插入
                 
                 var listNode = document.getElementById('list')
                 
                 // 要插入10个 li 标签
                 
                 var frag = document.createDocumentFragment() // 不触发DOM操作
                 
                 var x, li;
                 
                 for (x = 0; x < 10; x++) {
                 
                 li = document.createElement("li")
                 
                 li.innerHTML = "list item " + x
                 
                 frag.appendChild(li)
                 
                 }
                 
                 listNode.appendChild(frag) //触发DOM操作
                 

                 事件节流

                 
                 var textarea = document.getElementById('text')
                 
                 var timeoutId
                 
                 textarea.addEventListener('keyup', function () {
                 
                 if (timeoutId) {
                 
                 clearTimeout(timeoutId)
                 
                 }
                 
                 timeoutId = setTimeout(function () {
                 
                 // 触发 change 事件
                 
                 }, 100)
                 
                 })
                 

                 安全性

                 知识点

                 • XSS跨站请求攻击

                 • XSRF 跨站请求伪造

                 XSS

                 • 在新浪博客写一篇文章，同时偷偷插入一段

                   • 攻击代码中，获取cookie, 发送自己的服务器

                   • 发布博客，有人查看博客内容

                   • 会把查看者的cookie发送到攻击者的服务器

                 • 预防

                   • 前端替换关键字，例如替换 为>

                     • 后端替换

                   • XSRF

                     • 你已登录一个购物网站，正在浏览器商品

                     • 该网站付费接口是xxx.com/pay?id=100 但是没有任何验证

                     • 然后你收到一封邮件，隐藏着 src=xxx.com/pay?id=100

                     • >

                   • 你查看邮件的时候，就悄悄付费。

                   预防

                   • 增加验证流程，如输入指纹、密码、短信验证码

                   浏览器中的线程

                   • GUI渲染线程

                   • javascript引擎线程

                   • HTTP请求线程

                   • 浏览器事件触发线程

                   异步API

                   • DOM Events

                   • XMLHttpRequest(ajax)

                   • fetch

                   • WebSockets

                   • Service Worker

                   • Timer

                   Promise

                   • 异步处理方案

                   • 异步数据的链式处理

                   • 异步代码同步化

                   • catch 获取异常

                   • then 正常结束

                   event-loop

                   事件轮巡

                   • 异步队列

                   jquery-deferred

                   • dtd的API可分成两类，用意不同

                   • 第一类：dtd.resolve dtd.reject

                   • 第二类：dtd.then dtd.done dtd.fail

                   • 这两类应该分开，否则后果严重

                   • 使用 返回dtd.promise() 解决随意在监听范围调用reject

                   async/await

                   ES7提案

                   • then 只是将 callback拆分了

                   • async/await 是最直接的同步写法

                   用法

                   • 使用 await , 函数必须用async标识

                   • await 后面跟的是一个Promise实例

                   • 需要babel-polyfill

                   虚拟dom Virtual Dom

                   问题

                   • v-dom 是什么？

                   • v-dom 如何运用？

                   • 介绍Diff算法

                   v-dom 是什么？

                   • 用js模拟dom结构

                   • 如果dom有变化，对比出变化的地方，只修改这个变化的地方

                   • 提高重绘性能

                   • JS是前端中唯一:图灵完备语言

                   • 将DOM对比操作放在JS层，提高效率

                   遇到的问题

                   • DOM操作是 "昂贵"的，js运行效率高

                   • 尽量减少DOM操作，而不是 "推倒重来"

                   • 项目越复杂，影响越严重

                   • vdom即可解决这个问题

                   snabbdom

                   • 实现vdom的开源库

                   • vue2.0借用了snabbdom

                   • h函数、patch函数

                   • h函数返回v-node

                   • patch函数将vnode patch到一个真实的dom容器中

                   Diff算法

                   问题

                   • 什么是diff算法?

                   • vdom为何用diff算法?

                   • diff算法的实现过程

                   vdom为何使用diff算法

                   答案:

                   • DOM操作是 "昂贵"的，因此尽量减少DOM操作

                   • 找出本次DOM必须更新的节点来更新，其他的不更新

                   • 这个 "找出" 的过程，就需要diff算法

                   diff算法的实现过程

                   • patch(container, vnode)

                   • patch(vnode, newVnode)

                   什么是diff算法？

                   • 是linux的基础命令 diff git diff

                   
                   {
                   
                   tag: 'ul',
                   
                   attrs: {
                   
                   id: 'list'
                   
                   },
                   
                   children: [
                   
                   {
                   
                   tag: 'li',
                   
                   attrs: {
                   
                   className: 'item'
                   
                   },
                   
                   children: ['Item 1']
                   
                   }
                   
                   ]
                   
                   }
                   

                   MVVM

                   问题

                   • 如何理解MVVM？

                   • 如何实现MVVM？

                   • 是否解读过vue的源码?

                   题目

                   • 说一下使用jQuery和使用框架的区别？

                   • 说一下对MVVM的理解？

                   • vue中如何实现响应式？

                   • vue中如何解析模板？

                   • vue的整个实现流程？

                   从jQuery到框架

                   • 数据和视图的分离,解耦(开放封闭原则)

                   • 以数据驱动视图，只关心数据变化，DOM操作被封装

                   如何理解 MVVM

                   • MVVM - Model View ViewModel

                   • 三者之间的联系，以及如何对应到各段代码

                   • ViewModel的理解，联系View和Model

                   vue三要素

                   • 响应式：vue如何监听到data的每个属性变化？

                   • 模板引擎：vue的模板如何被解析，指令如何处理？

                   • 渲染：vue的模板如何被渲染成html?以及渲染过程

                   vue中如何实现响应式

                   • 什么是响应式

                   • Object.defineProperty

                   • 模拟

                   什么是响应式

                   • 修改data属性之后，vue立刻监听到

                   • data属性被代理到vm上

                   问题解答

                   • 关键是理解 Object.defineProperty

                   • 将data的属性代理到vm上

                   vue中如何解析模板

                   • 模板是什么

                   • render函数

                   • render函数与vdom

                   模板是什么？

                   • 本质：字符串

                   • 有逻辑，如v-if v-for等

                   • 与html格式很像，但有很大区别

                   • 最终还要转换为html来显示

                   • 模板最终必须转换成JS代码，因为：

                   • 有逻辑(v-if v-for),必须用JS才能实现(图灵完备)

                   • 转换为html渲染页面，必须用JS才能实现

                   • 因此，模板最终要转换成一个JS函数(render函数)

                   render 函数 - with的用法

                   
                   var obj = {
                   
                   name: 'zhangsan',
                   
                   age: 20,
                   
                   getAddress: function () {
                   
                   alert('beijing')
                   
                   }
                   
                   }
                   
                   function fn() {
                   
                   with(obj){
                   
                   console.log(name)
                   
                   console.log(age)
                   
                   getAddress()
                   
                   }
                   
                   }
                   

                   • 从哪里可以看到render函数？

                   • 复杂一点的例子，render函数是什么样子的？

                   • v-if v-for v-on 都是怎么处理的？

                   • vm._c其实就是snabbvdom的h

                   解答

                   • 模板：字符串，有逻辑，嵌入JS变量.....

                   • 模板必须转换为JS代码(有逻辑、渲染html、JS变量)

                   • render函数是什么样子的

                   • render函数执行是返回vnode

                   • updateComponent

                   • 模板中的所有信息都被render函数包含

                   vue的整个实现流程

                   • 第一步：解析模板成render函数

                   • 第二步：响应式开始监听

                   • 第三步：首次渲染，显示页面，且绑定依赖

                   1. 初次渲染，执行updateComponent,执行vm._render()

                   2. 执行render函数，会访问到vm.list和vm.title

                   3. 会被响应式的get方法监听到

                   4. 执行updateComponent，会走到vdom的patch方法

                   5. patch将vnode渲染成DOM，初次渲染完成

                   6. 为何要监听get，直接监听set不行吗？

                   7. data中有很多属性，有些被用到，有些可能不被用到

                   8. 被用到的会走到get,没用到就不会走get

                   • 第四步：data属性变化，触发re-render

                   组件化

                   题目

                   • 说一下对组件化的理解

                   • JSX本质是什么？

                   • JSX和vdom的关系

                   • 说一下setState的过程

                   • 阐述自己对React和Vue的认识

                   说一下对组件化的理解

                   • 组件的封装

                   • 组件的复用

                   组件的封装

                   • 视图

                   • 数据

                   • 变化逻辑(数据驱动视图变化)

                   组件的复用

                   • props传递

                   解答

                   • 组件的封装: 封装视图、数据、变化逻辑

                   • 组件的复用： props传递、复用

                   JSX本质是什么？

                   • JSX语法

                   • JSX解析成JS

                   • 独立的标准

                   JSX语法

                   • html形式

                   • 引入JS变量和表达式

                   • if...else

                   • 循环

                   • style和className

                   • 事件

                   • JSX语法根本无法被浏览器所解析

                   • 那么它如何在浏览器运行？

                   JSX 解析

                   • JSX其实是语法糖

                   • 开发环境会将JSX编译成JS代码

                   • JSX的写法大大降低了学习成本和编码工作量

                   • 同时，JSX也会增加debug成本

                   JSX独立的标准

                   • JSX是React引入的，但不是React独有的

                   • React已经将它作为一个独立标准开放，其他项目也可用

                   • React.createElement 是可以自定义修改的

                   • 说明：本身功能已经完备；和其他标准兼容和扩展性没问题

                   • 另：有机会录制>,就用JSX标准

                   • 问题解答

                     • JSX语法(标签、JS表达式、判断、循环、事件绑定)

                     • JSX是语法糖，需被解析成JS才能运行

                     • JSX是独立的标准，可被其他项目使用

                     JSX和vdom的关系

                     • 分析：为何需要vdom

                     • React.createElement和h

                     • 何时patch?

                     • 自定义组件的解析

                     为何需要vdom

                     • vdom 是 React初次推广开来的，结合JSX

                     • JSX就是模板，最终要渲染成html

                     • 初次渲染 + 修改 state 后的 re-render

                     • 正好符号vdom的应用场景

                     React.createElement和h

                     • 初次渲染 - ReactDOM.render(,container)

                     • 会触发patch(container,vnode)

                     • re-render - setState

                     • 会触发patch(vnode,newVnode)

                     自定义组件的解析

                     • 'div' - 直接渲染

                       即可,vdom可以做到

                       • Input和List,是自定义组件(class),vdom默认不认识

                       • 因此Input和List定义的时候必须声明render函数

                       • 根据props初始化实例，然后执行实例的render函数

                       • render函数返回的还是vnode对象

                     • 问题解答

                       • 为何需要vdom: JSX需要渲染成html,数据驱动视图

                       • React.createElement和h,都生成vnode

                       • 何时patch: ReactDOM.render(...) 和 setState

                       • 自定义组件的解析：初始化实例，然后执行render

                       说一下 React setState 的过程

                       • setState的异步

                       • vue修改属性也是异步

                       • setState的过程

                       setState的异步

                       
                       addTitle(title) {
                       
                       const currentList = this.state.list
                       
                       console.log(this.state.list) // ['a', 'b']
                       
                       this.setState({
                       
                       list:currentList.concat(title) // 'c'
                       
                       })
                       
                       console.log(this.state.list) // ['a', 'b']
                       
                       }
                       

                       setState 为何需要异步？

                       • 可能会一次执行多次 setState

                       • 你无法规定、限制用户如何使用setState

                       • 没必要每次setState 都重新渲染，考虑性能

                       • 即便是每次重新渲染，用户也看不到中间的效果

                       vue修改属性也是异步

                       • 效果、原因和setState一样

                       setState的过程

                       答案:

                       • 每个组件实例，都有renderComponent方法

                       • 执行renderComponent会重新执行实例的render

                       • render函数返回newVnode,然后拿到preVnode

                       • 执行patch(preVnode,newVnode)

                       问题解答

                       • setState的异步：效果、原因

                       • vue修改属性也是异步：效果、原因

                       • setState的过程：最终走到patch(preVnode,newVnode)

                       React vs Vue

                       • 两者的本质区别

                       • 看模板和组件化的区别

                       • 两者共同点

                       • 总结问题答案

                       前言

                       • 文无第一武无第二，技术选型没有绝对的对与错

                       • 技术选型要考虑的因素非常多

                       • 作为面试者，要有自己的主见

                       • 和面试官的观点不一致没关系，只要能说出理由

                       两者的本质区别

                       • vue - 本质是MVVM框架，由MVC发展而来

                       • React - 本质是前端组件化框架，由后端组件化发展而来

                       • 但这并不妨碍他们两者都能实现相同的功能

                       模板的区别

                       • vue - 使用模板 (最初由 angular 提出)

                       • React - 使用JSX

                       • 模板语法上，我更加倾向于JSX

                       • 模板分离上，我更加倾向于vue

                       组件化的区别

                       • React本身就是组件化，没有组件化就不是React

                       • vue也支持组件化，不过是在MVVM上的扩展

                       • 查阅vue组件化的文档，洋洋洒洒很多(侧面反映)

                       • 对于组件化，我更加倾向于React,更加清晰

                       两者共同点

                       • 都支持组件化

                       • 都是数据驱动视图

                       问题解答

                       • 国内使用，首推vue。文档更易读、易学、社区够大

                       • 如果团队水平较高，推荐使用React。组件化和JSX

                       hybrid

                       • 移动端占大部分流量，已经远远超过PC

                       • 一线互联网公司都有自己的App

                       • 这些App中有很大比例的前端代码(不要惊讶)

                       • 拿微信举例，你每天浏览微信的内容，多少是前端？

                       题目

                       • hybrid是什么，为何用hybrid？

                       • 介绍一下hybrid更新和上线的流程？

                       • hybrid和h5的主要区别

                       • 前端JS和客户端如何通讯？

                       hybrid是什么，为何会用hybrid?

                       • hybrid 文字解释

                       • 存在价值，为何会用hybrid

                       • webview

                       • file:// 协议

                       • hybrid实现流程

                       hybrid 文字解释

                       • hybrid 即 "混合"，即前端和客户端的混合开发

                       • 需前端开发人员和客户端开发人员配合完成

                       • 某些环节也可能涉及到server端

                       • PS:不要以为自己是前端就可以不理会客户端的知识

                       hybrid存在价值

                       • 可以快速迭代更新「关键」(无需app审核，思考为何？)

                       • 体验流畅(和NA的体验基本类似)

                       • 减少开发和沟通成本，双端公用一套代码

                       webview

                       • 是app中的一个组件(app 可以有webview,也可以没有)

                       • 用于加载H5页面，即一个小型的浏览器内核

                       file:// 协议

                       • 其实在一开始接触html开发，就已经使用了file协议

                       • 只不过你当时没有 "协议" "标准"等这些概念

                       • 再次强调 "协议" "标准"的重要性！！！

                       • file协议: 本地文件，快

                       • http(s)协议: 网络加载，慢

                       hrbrid 具体实现

                       • 不是所有场景都适合使用hybrid:

                       • 使用NA: 体验要求极致，变化不频繁 (如头条的首页)

                       • 使用hybrid: 体验要求高，变化频繁 (如头条的新闻详情页)

                       • 使用h5: 体验无要求， 不常用 (如举报、反馈等页面)

                       实现

                       • 前端做好静态页面 (html js css), 将文件交给客户端

                       • 客户端拿到前端静态页面，以文件形式存储在app中

                       • 客户端在一个webview中，通过file协议加载前端文件(html js css)

                       具体实现 - 遗留问题

                       • app发布之后，静态文件如何实时更新？

                       • 静态页面如何获取内容？

                       问题解答

                       • hybrid 是客户端和前端的混合开发

                       • hybrid 存在的核心意义在于快速迭代，无需审核

                       • hybrid实现流程(图)，以及webview和file协议

                       hybrid 更新上线流程

                       思考 (目的，可行途径)

                       • 要替换每个客户端的静态文件

                       • 只能客户端来做 (客户端是我们开发的)

                       • 客户端去server下载最新的静态文件

                       • 我们维护server的静态文件

                       完整流程

                       • 分版本，有版本号， 如201803211015

                       • 将静态文件压缩成zip包，上传到服务端

                       • 客户端每次启动，都去服务端检查版本号

                       • 如果服务端版本号大于客户端版本号，就去下载最新的zip包

                       • 下载完之后解压包，然后将现有文件覆盖

                       问题解答

                       • 掌握流程图

                       • 要点1：服务端的版本和zip包维护

                       • 要点2：更新zip包之前，先对比版本号

                       • 要点3：zip下载解压和覆盖

                       hybrid和h5的比较

                       优点

                       • 体验更好，跟NA体验基本一致

                       • 可快速迭代，无需审核

                       缺点

                       • 开发成本高。联调、测试、查bug都比较麻烦

                       • 运维成本高。参考此前讲过的更新上线的流程

                       适用的场景

                       • hybrid: 产品的稳定功能，体验要求高，迭代频繁

                       • h5: 单次的运营活动(如 xx 红包) 或不常用功能

                       问题解答

                       • 优点：体验好，可快速迭代

                       • 缺点：开发成本高，运维成本高

                       • 适用的场景：hybrid适合产品型，h5适合运营型

                       JS和客户端通讯

                       • 回顾之前遗留的问题

                       • JS和客户端通讯的基本形式

                       • schema协议简介和使用

                       • schema使用的封装

                       • 内置上线

                       之前遗留的问题

                       • 新闻详情页适用hybrid,前端如何获取新闻内容？

                       • 不能用ajax获取。第一 跨域，第二 速度慢

                       • 客户端获取新闻内容，然后JS通讯拿到内容，再渲染

                       JS和客户端通讯的基本形式

                       • JS访问客户端能力，传递参数和回调函数

                       • 客户端通过回调函数返回内容

                       schema 协议简介和使用

                       • 之前介绍了http(s) 和 file协议

                       • schema协议 - 前端和客户端通讯的约定

                       
                       /* 网上搜的微信的部分 schema 协议 */
                       
                       weixin://dl/scan 扫一扫
                       
                       weixin://dl/feedback 反馈
                       
                       weixin://dl/moments 朋友圈
                       
                       weixin://dl/settings 设置
                       

                       内置上线

                       • 将以上封装的代码打包，叫做invoke.js 内置到客户端

                       • 客户端每次启动webview,都默认执行invoke.js

                       • 本地加载，免去网络加载的时间，更快。

                       • 本地加载，没有网络请求，黑客看不到schema协议，更安全

                       问题解答

                       • 通讯的基本形式：调用能力，传递参数，监听回调

                       • 对schema协议的理解和使用

                       • 调用schema代码的封装

                       • 内置上线的好处：更快、更安全

                       如何热爱编程？

                       • 热爱！

                       • 怎么证明？

                       如何证明你热爱编程？

                       • 看书

                       • 写博客

                       • 做开源

                       看书 - 手下不离书

                       • 构建知识体系的最好方式

                       • 自己买书，不要借书

                       • 看书有技巧

                       博客 - 合格程序员的必备

                       开源 - github 的 star 是硬通货

加密密钥: 123456 (存在本地加密)

加密方式: AES

模式: CBC

填充补全码: Pkcs7

密文编码: Base64

iv偏移量: 123456 (跟密钥相同)

token请求头字段名: Access-Token

加密流程

1. 获取服务器当前时间时间戳

2. 时间戳转成字节数组

3. 分组密钥

4. 获取密钥块长度，利用需要加密的内容的字节数组+密钥块长度 Pkcs7方式生成补全码

5. 利用 分组密钥+iv偏移量 创建CBC加密模式

6. 创建补全码长度的 字节数组用于待会儿保存加密后字节数组

7. 利用补全码进行CBC加密，加密字节保存到上方创建的字节数组中

8. 对字节数组密文进行base64编码，将该字符串存入请求头(Headers)的Access-Token中

例:

1. 生成根证书私钥 root-key.key

2. 生成根证书请求文件 根据root-key.key -> root-req.csr

3. 自签根证书 根据root-req.csr、root-key.key -> root-cert.cer (设置过期时间365)

4. 生成p12格式根证书 根据root-cert.cer、root-key.key -> root.p12

5. 生成服务端证书私钥 server-key.key

6. 生成服务端证书请求文件 根据server-key.key -> server-req.csr (绑定服务端域名)

7. 生成服务端证书 (root证书(root-cert.cer)、rootKey(root-key.key)、服务端Key(server-key.key)、服务端请求文件(server-req.csr)，用这4个文件生成服务端证书) -> server-cert.cer

8. 生成客户端证书私钥 client-key.key

9. 生成客户端证书请求文件 根据client-key.key -> client-req.csr

10. 生成客户端证书 (root证书(root-cert.cer)、rootKey(root-key.key)、客户端Key(client-key.key)、客户端请求文件(client-req.csr), 用这4个文件生成客户端证书) -> client-cert.cer

11. 生成客户端p12格式根证书 根据client-cert.cer、client-key.key -> client.p12

目前写代码的主力编辑器是NeoVim和SpaceMacs，VsCode也主要是用Vim插件。整理的命令做一下记录，方便查漏补缺

基本命令行命令

• ":q!": 退出vim

• ":wq": 存盘退出

• ":s": 执行替换

• ":!": 执行外部命令

• ":edit"(缩写":e"): 编辑文件

• ":w": 写文件

• ":r": 读文件

• ":help": 查看帮助

• 使用Ctrl-D 和 Tab (选项卡) 来进行命令行补全

a i w搭配使用演示

Forward Backward (落后) (落后) 半翻页 返回到上一个位置 前进到下一个位置 zz 将当前光标画面移到屏幕中央 数字+G 跳转到指定行 数字+| 跳转到指定列 H(High) 移动到当前屏幕的顶部位置 M(middle) 移动到当前屏幕的中部位置 L(low) 移动到当前屏幕的底部位置 移动屏幕，不移动光标 zt、zz、zb 移动当前行到顶部、中部、底部 05C5F9D0-2703-4017-BA14-5D9FEDC23A4A.png VIM删除操作大全 :%s/r//g                    删除DOS方式的回车^M  :%s= *$==                   删除行尾空白  ​ :%s/^(.*)n1/1$/               删除重复行  ​ :%s/^.{-}pdf/new.pdf/         只是删除第一个pdf  ​ :%s/<!--_.{-}-->//           又是删除多行注释（咦？为什么要说「又」呢？）  ​ :g/s*^$/d                    删除所有空行 ：这个好用有没有人用过还有其他的方法吗？ :g!/^dd/d                     删除不含字符串'dd'的行  :v/^dd/d                     同上 （译释：v ==&nbspg!，就是不匹配！）  ​ :g/str1/,/str2/d              删除所有第一个含str1到第一个含str2之间的行  ​ ​ :v/./.,/./-1join                压缩空行  :g/^$/,/./-j                  压缩空行  ​ ndw 或&nbspndW              删除光标处开始及其后的&nbspn-1 个字符。  d0                          删至行首。  d$                          删至行尾。  ndd                         删除当前行及其后&nbspn-1 行。  x 或&nbspX                  删除一个字符。  Ctrl+u                      删除输入方式下所输入的文本。  ^R                          恢复u的操作  J                           把下一行合并到当前行尾  V                           选择一行  ^V                          按下^V后即可进行矩形的选择了  aw                          选择单词  iw                          内部单词(无空格)  as                          选择句子  is                          选择句子(无空格)  ap                          选择段落  ip                          选择段落(无空格)  D                           删除到行尾  x,y                         删除与复制包含高亮区  ​ dl                          删除当前字符（与x命令功能相同）  d0                          删除到某一行的开始位置  d^                          删除到某一行的第一个字符位置（不包括空格或TAB字符）  dw                          删除到某个单词的结尾位置  d3w                         删除到第三个单词的结尾位置  db                          删除到某个单词的开始位置  dW                          删除到某个以空格作为分隔符的单词的结尾位置  dB                          删除到某个以空格作为分隔符的单词的开始位置  d7B                         删除到前面7个以空格作为分隔符的单词的开始位置  d）                         删除到某个语句的结尾位置  d4）                        删除到第四个语句的结尾位置  d（                         删除到某个语句的开始位置  d）                         删除到某个段落的结尾位置  d{                          删除到某个段落的开始位置  d7{                         删除到当前段落起始位置之前的第7个段落位置  dd                         删除当前行  d/text                     删除从文本中出现“text”中所指定字样的位置， 一直向前直到下一个该字样所出现的位置（但不包括该字样）之间的内容  dfc                        删除从文本中出现字符“c”的位置，一直向前直到下一个该字符所出现的位置（包括该字符）之间的内容  dtc                        删除当前行直到下一个字符“c”所出现位置之间的内容  D                          删除到某一行的结尾  d$                         删除到某一行的结尾  5dd                        删除从当前行所开始的5行内容  dL                         删除直到屏幕上最后一行的内容  dH                         删除直到屏幕上第一行的内容  dG                         删除直到工作缓存区结尾的内容  d1G                        删除直到工作缓存区开始的内容   多文件操作 13F418FB-98CC-407F-BFED-85A401BD2184 31F41D6E-8CA5-482C-B3B5-8D9172AFF54B 缓冲区 1BA24765-CA60-460E-AA5B-9D2C4FF14863 多窗口编辑 3955D74D-F4C8-4DC8-A905-C98E64D2CC0A 双窗口比较 788B4619-C3CA-44E5-ABBF-933C6CF07E0C 多标签页 952CA83A-5243-477D-9B3B-BB47DC6A9C3A 6A6B0536-C2B1-4226-B221-4AAEF07FCBF9 NERDTree F403123E-0A03-4F39-9593-88CE719D4D60 正则表达式搜索 B4BBDF1B-B711-4045-960B-7C8B525FB70E F90DBE74-28D8-4098-83C0-31D4BD10CD66 DD1D8DA3-9560-4A51-A8F6-4D2F0867639A

最近被周围人安利Rust比较有趣，想玩儿一玩儿，去官网看了一下环境的安装方法

一行命令就搞定了

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

由于众所周知的原因，网络情况不好的话，可能会一直卡在这个画面20分钟都没什么反应(可以试一下手机热点，一般能成功)

然后一种安装方式是用brew来安装，几乎都能成功

然后试了一下HelloWorld，完全没问题，可以很好运行。但是有一个问题，这样安装的话是不带 rustup的

后来找到了一个方式，brew 安装，也带rustup

brew install rustup-init
// 安装完成后执行
rustup-init

大功告成!