11-20

0 《从url输入到页面呈现发生的过程》

背景：我认为学习知识是需要脉络的，从一个一个零散的知识点学起，并不太适合我。所以我更加喜欢一种 自顶向下 的学习方式，形成框架，逐步向外延伸。

浏览器

DNS

CDN

介绍：缓存就是将内容储存在本地，以便将来可以更快地访问数据请求。缓存有如下几种：

Web 服务器：使用共享缓存（适用于多个用户）。
内容分发网络（Content Delivery Network）：使用共享缓存（适用于多个用户）。
Internet 服务提供商 (ISP)：使用共享缓存（适用于多个用户）。
Web 浏览器：使用专用缓存（适用于一个用户）。

CDN，即Content Delivery Network，内容分发网络。

问题一：CDN原理是什么？

没有CDN的情况（图片来源[1]）：

引入CND后（图片来源[1]）：

[1] 浅析CDN原理.https://segmentfault.com/a/1190000039045541

4 HTTP

5 Nginx

1 深入理解JavaScript

背景：

计划：应该以《从url输入到页面呈现发生的过程》为主线，逐步向外延伸学习。

2 JavaScript深入

背景：

内容：

[1] 冴羽的博客.https://github.com/mqyqingfeng/Blog

3 《中文技术文档的写作规范》

[1] 中文技术文档的写作规范.https://github.com/mqyqingfeng/Blog/issues/17

4 如何禁用 Chrome for OS X 的双指前进、后退操作？

设置-> 触摸板-> 将页面扫动关闭

[1] 如何禁用 Chrome for OS X 的双指前进、后退操作？.https://www.zhihu.com/question/20572174

参考：

IT视频教程.https://www.itspjc.com/
天下无鱼.https://shikey.com/tag/%e6%9e%81%e5%ae%a2%e6%97%b6%e9%97%b4/page/2
毕方铺.https://www.iizhi.cn/

6 Mac下载bilibili视频

TODO

通过downie下载

[1][必看!!]mac苹果系统如何下载b站视频,超级简单!.https://www.bilibili.com/video/BV1Gi4y1G79X

7 几个国内源

：yarn, npm, brew, alpine,

yarn：一步

# 更换国内源
yarn config set registry https://registry.npm.taobao.org/

# 查询是否生效
yarn config get registry

npm：一步

# 更换国内源
npm config set registry https://registry.npm.taobao.org/

# 查询是否生效
npm config get registry

brew：三步

# 修改 brew.git 为阿里源
git -C "$(brew --repo)" remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git

# 修改 homebrew-core.git 为阿里源
git -C "$(brew --repo homebrew/core)" remote set-url origin https://mirrors.aliyun.com/homebrew/homebrew-core.git

# bash 替换 brew bintray 镜像
echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles' >> ~/.bash_profile

alpine

sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories

[1] npm，yarn使用以及更换国内镜像源.https://blog.csdn.net/qq_36651686/article/details/116536156

[2] Mac 下 brew 切换为国内源.https://cloud.tencent.com/developer/article/1614039

[3] alpine linux更新国内源.https://blog.csdn.net/vah101/article/details/108602970

docker

https://yeasy.gitbook.io/docker_practice/install/mirror

8 空数组

问题一：if([]) 成立吗？

if([]) console.log(123)
=>>123

问题二：[] == true 成立吗？

[] == true
=>>false

问题三：![] 结果是什么？

![]
=>>false

综合以上三个问题，得到两种情况，

第一：[] 转化为boolean类型，为true。具体场景为 if判断 !运算符 等

第二：[] 转化为number类型，为NaN，所以不与任何数相等。具体场景为 两个值进行比较 的时候

扩展：js中两个值比较，分为几种情况

分为两种情况：1有数字；2无数字

有数字，则将另外一个值转化为数字进行比较（通过Number转化）

无数字，则根据ASCII 码进行比较，而且是一位一位比较

1>1
=>>false
1>'1'
=>>false

1>0.9
=>>true
1>'0.9'
=>>true //这里可以说明是根据Number进行转化的，而非parseInt

'b'>'a'
=>>相当于98>97
=>>true

'azzzzzzzzzzzzzzzzzzz'>'b'
=>>false //按位比较，a<b，所以永远为false

⚠️ 这里说的数字，指的是number类型

10 MomentJs的增减与差值

moment().add(1, 'minutes') //加一分钟
moment().subtract(1, 'minutes') //减一分钟

moment().diff(moment('2021-11-25 09:44:38'), 'minuts') //计算差值

[1] Moment.js中文文档系列之三日期时间的加减等操作（Manipulate）.https://itbilu.com/nodejs/npm/EJlmbFhgg.html

11 常用sol函数

common.sol

pragma solidity >0.6.0;

interface v3{
  function stake (uint256 num) external;

  function approve (address owner, uint256 num) external;

  function balanceOf (address account) external view returns(uint256);
  function earned (address account) external view returns(uint256);

  function allowance (address owner,address spender) external view returns(uint256);

  function reservoirAddress() external view returns(address);
  function rewardToken() external view returns(address);
  function lpToken() external view returns(address);
  function feeManager() external view returns(address);
}

[1] 中文在线remix.http://remix.app.hubwiz.com/

13 RangeBox案例

如何实现这样的功能：鼠标放上去，向右展开内容

开始状态：

结束状态：

难点：如何知道展开的具体宽度呢？

使用 width:fit-content; 吗？❌
动态计算内容宽度？✅
在React中，通过ref拿到实例后，获取其 clientWidth ，再动态传递给样式即可
注意外界更新后，要重绘此组件

以下是 React 中封装的一个RangeBox：

import React, { useEffect, useRef, useState } from 'react'
import styled from 'styled-components/macro'

const RangeBoxWrapper = styled.div<{ size: number; clientWidth?: number; padding: number }>`
  position: absolute;
  top: 0;
  left: 0;

  /* puls padding is for padding offset */
  width: ${({ size, padding }) => size + 2 * padding + 'px'};
  background-color: ${({ theme }) => theme.bg3};
  border-radius: 0px 10px 10px 0px;
  padding-top: ${({ padding }) => (padding - 4 < 0 ? padding - 4 + 'px' : 0)};
  padding-bottom: ${({ padding }) => (padding - 4 < 0 ? padding - 4 + 'px' : 0)};
  padding-left: ${({ padding }) => padding + 'px'};
  padding-right: ${({ padding }) => padding + 'px'};

  overflow: hidden;
  transition: width 0.3s linear;

  cursor: pointer;

  :hover {
    width: ${({ clientWidth, padding }) => (clientWidth ? clientWidth + 2 * padding + 'px' : 'unset')};
  }
`

const RangeContent = styled.div`
  width: fit-content;
`

export default function RangeBox({
  children,
  size = 24,
  padding = 4,
  refresh,
  style,
}: {
  children: React.ReactNode
  size?: number
  padding?: number

  // refresh this component for recompute the width
  // any value is ok, but it must be dynamic（动态的）
  refresh?: any
  style?: any
}) {
  const ref = useRef<HTMLDivElement>(null)

  const [rangeBoxClientWidth, setRangeBoxClientWidth] = useState<number | undefined>(undefined)
  useEffect(() => {
    const clientWidth = ref.current?.clientWidth
    if (!clientWidth) return

    setRangeBoxClientWidth((prev) => {
      if (clientWidth !== prev) return clientWidth

      return prev
    })
  }, [refresh])

  return (
    <RangeBoxWrapper size={size} clientWidth={rangeBoxClientWidth} padding={padding} style={style}>
      <RangeContent ref={ref}>{children}</RangeContent>
    </RangeBoxWrapper>
  )
}

14 React中如何引用组件-hooks？

const ref = useRef(null)

<input ref={ref} />

16 Js中获取正则匹配第一个内容

const matched = /a/.match('(a)')

//注意：RegExp.$1是非标准的，生产模式不要使用
console.log(RegExp.$1)

17 Set与WeakSet

区别：

WeakSet中只能存放对象
WeakSet中的对象为弱引用对象，如果该对象在外界没有被引用，那么会被回收

所以WeakSet适用于处理大量，可能存在循环引用的对象

同理，Map和WeakMap，WeakMap其键必须是对象，而值可以是任意的。

[1] WeakSet.https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakSet

[2] WeakMap.https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap

18 2021年魔都20+公司前端面经

[1] 2021年魔都20+公司前端面经.https://juejin.cn/post/6951374685489594381

19 如何在browser端利用solc编译合约

https://solc-bin.ethereum.org/bin/soljson-v0.8.8+commit.dddeac2f.js

https://solc-bin.ethereum.org/bin/soljson-v0.7.1+commit.f4a555be.js

https://solc-bin.ethereum.org/bin/soljson-v0.4.6+commit.2dabbdf0.js

目的：在浏览器端，利用solc编译合约

20 如何发布一个npm包

发多数发包软件的思路都类似，建项目-> 登录-> 发布

[1] 一分钟教你发布npm包.https://segmentfault.com/a/1190000023075167

21 合约助手

功能：

创建常用方法，可搜索
输入合约地址，调用合约方法
记录调用历史

22 数据库表名规范

命名规范：

模块_+功能点示例：alllive_log alllive_category
功能点示例：live message
通用表示例：all_user

[1] 数据库表名规范.https://blog.csdn.net/lijinzhou2017/article/details/108533932

23 登链社区-文档

https://learnblockchain.cn/manuals

24 浏览器存储

BrowserFS v1.4.3.https://www.npmjs.com/package/browserfs

25 在react中使用web-worker

createReactApp需要配置webpack

//config-overrides.js
config.module.rules = [
  ...config.module.rules,
  {
    test: /\.worker\.(ts|js)$/,
    // test: /\.worker\.ts$/,
    use: { loader: "worker-loader" },
  },
]

[1] worker-loader.https://github.com/webpack-contrib/worker-loader

26 Js中使用模块？

[1] 在浏览器中使用原生 JavaScript 模块（译）.https://segmentfault.com/a/1190000015378176

27 在前端React中使用solc-js

⚠️ 注意：在solc的新版本中无法直接在main线程中运行（包太大了，阻塞了），所以需要用web worker进行操作

分为三步：1配置webpack，让其支持worker 2书写worker文件 3发送消息，执行sokc.compile

TODO写一个示例项目

如果用CreactReactApp创建的项目，则需要引入 react-app-rewired 和 customize-cra，具体见 react-app-rewired

"dependencies": {
  "customize-cra": "^1.0.0",
  "react-app-rewired": "2.1.8",
}

[1] solc-js.https://github.com/ethereum/solc-js

28 将滚动条始终保持在底部

思想：将scroolTop设置scrollHeight即可

scroolTop：属性可以获取或设置一个元素的内容垂直滚动的像素数。
scrollHeight：这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中 不可见内容。

问题一：react中如何使用ref引用元素？

const elRef = useRef<HTMLDivElement | null>(null)

useEffect(()=>{
  const el = elRef?.current
  if(!el) return
  
  el.scrollTop = el.scrollHeight
}, [elRef])

return (
    <Wrapper ref={elRef} />
)

[1] 将滚动条（scrollbar）保持在最底部的方法.https://segmentfault.com/a/1190000007235847

29 学习使用npm的package

TODO

想法：一个项目中包含多个小项目，这样每次不用去建立仓库，也不用重新安装包

原理：node在解析包的时候是按目录层次寻找的，

//当前执行路径为：/Users/jiangjin/Documents/016.admin/worker
console.log(module.paths);

[
  '/Users/jiangjin/Documents/016.admin/worker/repl/node_modules',
  '/Users/jiangjin/Documents/016.admin/worker/node_modules',
  '/Users/jiangjin/Documents/016.admin/node_modules',
  '/Users/jiangjin/Documents/node_modules',
  '/Users/jiangjin/node_modules',
  '/Users/node_modules',
  '/node_modules',
  '/Users/jiangjin/.node_modules',
  '/Users/jiangjin/.node_libraries',
  '/Users/jiangjin/.nvm/versions/node/v14.17.4/lib/node'
]

30 如何形成自己的工具链？

TODO

31 Solidity Remix方法传递数组参数

直接像数组一样传递即可，但要注意加引号

["0x",123]

[1] Solidity Remix方法传递数组参数.https://www.choupangxia.com/2019/08/31/solidity-remix%E6%96%B9%E6%B3%95%E4%BC%A0%E9%80%92%E6%95%B0%E7%BB%84%E5%8F%82%E6%95%B0/

32 Remix快速导入本地文件夹

分为三步：1下载remixd 2运行remixd 3链接remixd

第一步：下载

yarn global add @remix-project/remixd

第二步：运行

remixd -s /Users/jiangjin/Documents/00.convert/mulsign-master/contracts --remix-ide https://remix.ethereum.org/

第三步：登录remix.ethereum.org/，选择连接本地即可

[1] Remix快速导入本地文件夹.https://blog.csdn.net/z_xuewen/article/details/119712575

33 在服务器搭建一个remix

需求度：⭐

0 《从url输入到页面呈现发生的过程》​

浏览器​

DNS​

CDN​

问题一：CDN原理是什么？​

4 HTTP​

5 Nginx​

1 深入理解JavaScript​

2 JavaScript深入​

3 《中文技术文档的写作规范》​

4 如何禁用 Chrome for OS X 的双指前进、后退操作？​

6 Mac下载bilibili视频​

7 几个国内源​

yarn：一步​

npm：一步​

brew：三步​

alpine​

docker​

8 空数组​

扩展：js中两个值比较，分为几种情况​

10 MomentJs的增减与差值​

11 常用sol函数​

13 RangeBox案例​

难点：如何知道展开的具体宽度呢？​

14 React中如何引用组件-hooks？​

16 Js中获取正则匹配第一个内容​

17 Set与WeakSet​

18 2021年魔都20+公司前端面经​

19 如何在browser端利用solc编译合约​

20 如何发布一个npm包​

21 合约助手​

22 数据库表名规范​

23 登链社区-文档​

24 浏览器存储​

25 在react中使用web-worker​

26 Js中使用模块？​

27 在前端React中使用solc-js​

28 将滚动条始终保持在底部​

29 学习使用npm的package​

30 如何形成自己的工具链？​

31 Solidity Remix方法传递数组参数​

32 Remix快速导入本地文件夹​

第一步：下载​

第二步：运行​

第三步：登录remix.ethereum.org/，选择连接本地即可​

33 在服务器搭建一个remix​

0 《从url输入到页面呈现发生的过程》

浏览器

DNS

CDN

问题一：CDN原理是什么？

4 HTTP

5 Nginx

1 深入理解JavaScript

2 JavaScript深入

3 《中文技术文档的写作规范》

4 如何禁用 Chrome for OS X 的双指前进、后退操作？

6 Mac下载bilibili视频

7 几个国内源

yarn：一步

npm：一步

brew：三步

alpine

docker

8 空数组

扩展：js中两个值比较，分为几种情况

10 MomentJs的增减与差值

11 常用sol函数

13 RangeBox案例

难点：如何知道展开的具体宽度呢？

14 React中如何引用组件-hooks？

16 Js中获取正则匹配第一个内容

17 Set与WeakSet

18 2021年魔都20+公司前端面经

19 如何在browser端利用solc编译合约

20 如何发布一个npm包

21 合约助手

22 数据库表名规范

23 登链社区-文档

24 浏览器存储

25 在react中使用web-worker

26 Js中使用模块？

27 在前端React中使用solc-js

28 将滚动条始终保持在底部

29 学习使用npm的package

30 如何形成自己的工具链？

31 Solidity Remix方法传递数组参数

32 Remix快速导入本地文件夹

第一步：下载

第二步：运行

第三步：登录remix.ethereum.org/，选择连接本地即可

33 在服务器搭建一个remix