Record

Record copied to clipboard

知识扩展-Rancher前端服务发布

1

项目中用到rancher发布前端代码，我自己参与了一次构建，遇到了很多的问题，不过一一解决了，用闲暇的时间，将遇到的问题记下来，也算是一次复盘了。 rancher是一个开源的企业级容器管理平台，重点“容器管理”，可以极大的简化容器管理的复杂度（相对于K8s）,它是对于k8s容器引擎的封装，有兴趣可以看看官方文档。 ### 上传镜像 需要先**安装docker**，确保docker是可以使用的。下面是`Dockerfile`文件和`default.conf`文件 ```dockerfile FROM nginx COPY ./build /usr/share/nginx/html/ COPY ./default.conf /etc/nginx/conf.d/ EXPOSE 80 ``` `Dockerfile`文件主要用于docker镜像的创建；`FROM nginx`：FROM指令初始化一个新的构建阶段，并为后续指令设置[基础镜像](https://docs.docker.com/glossary/#base_image)，这里的基础镜像是nginx；`COPY ./build /usr/share/nginx/html/`：`./build`是前端打包之后的文件地址，将它复制到nginx的html目录下；`COPY ./default.conf /etc/nginx/conf.d/`：`./default.conf`是nginx配置文件, 将它复制到nginx的conf.d目录下；`EXPOSE 80`：监听80端口； 通过如下命令行打包代码（实际代码根据自己项目而定）： ```shell // 前端本地打包 $...

HerryLo

React Class组件中的`createRef`，与React Hooks函数组件中的`useRef`相对应。在说useRef之前，就不得不先看下`createRef`这个API的目的，它是为了解决什么问题？这样我们才能更加的了解 `useRef` API。 ## 了解 createRef API React.createRef 可以很好的帮助开发者，获取到**DOM元素节点**实例，也可以帮助我们**获取Class组件的组件实例**。对于 `createRef` API 适用情况，在官方文档中已有给出： > 下面是几个适合使用 refs 的情况： > - 管理焦点，文本选择或媒体播放。 > - 触发强制动画。 > - 集成第三方 DOM 库。 >...

HerryLo

## react解析: render的FiberRoot(三) > 感谢 [yck: 剖析 React 源码解析](https://github.com/KieSun/Dream/issues/19)，本篇文章是在读完他的文章的基础上，将他的文章进行拆解和加工，加入我自己的一下理解和例子，便于大家理解。觉得[yck](https://github.com/KieSun)写的真的很棒 。**React 版本为 16.8.6**，关于源码的阅读，可以移步到[yck react源码解析](https://github.com/KieSun/react-interpretation) > 本文永久有效链接: [react解析 render的FiberRoot(三)](https://github.com/AttemptWeb/Record/issues/9) 下面将会说到 ```ReactDOM.render``` 在ReactDOM中的调用流程，实际就是分析下面代码： ```javascript ReactDOM.render(, document.getElementById('app')) ``` 实际代码： ```javascript ReactDOM.render(React.createElement(APP, null), document.getElementById('app')); ```...

HerryLo

## react解析 React.Children(二) > 感谢 [yck: 剖剖析 React 源码解析](https://github.com/KieSun/Dream/issues/18)，本篇文章是在读完他的文章的基础上，将他的文章进行拆解和加工，加入我自己的一下理解和例子，便于大家理解。觉得[yck](https://github.com/KieSun)写的真的很棒 。**React 版本为 16.8.6**，关于源码的阅读，可以移步到[yck react源码解析](https://github.com/KieSun/react-interpretation) > 本文永久有效链接: [react解析 React.Children(二)](https://github.com/AttemptWeb/Record/issues/8) 在React实际开发中, ```React.Children``` 这个API我们虽然使用的比较少, 但是我们通过这个API可以操作```children```, 可以查看[文档](https://reactjs.org/docs/react-api.html#reactchildren) 我们来看下这个API的神奇用法 ```javascript React.Children.map(this.props.children, c => [[c, c]]) ```...

HerryLo

react解析 React.createElement(一)

3

## react解析 React.createElement(一) > 感谢 [yck: 剖剖析 React 源码解析](https://github.com/KieSun/Dream/issues/18)，本篇文章是在读完他的文章的基础上，将他的文章进行拆解和加工，加入我自己的一下理解和例子，便于大家理解。觉得[yck](https://github.com/KieSun)写的真的很棒 。**React 版本为 16.8.6**，关于源码的阅读，可以移步到[yck react源码解析](https://github.com/KieSun/react-interpretation) > 本文永久有效链接：[react解析: React.createElement(一)](https://github.com/AttemptWeb/Record/issues/7) 在我们使用React开发项目的过程中，react的引入是必不可少的，因为babel会将JSX语法编译为React.createElement，如下  现在可以定位到ReactElement.js ,[查看代码](https://github.com/KieSun/react-interpretation/blob/master/packages/react/src/ReactElement.js), 文件阅读 createElement 函数的实现 createElement接受三个参数： ```javascript export function createElement(type, config, children)...

HerryLo

[作者：HerryLo](https://github.com/HerryLo) [原文永久链接： https://github.com/AttemptWeb/Record...](https://github.com/AttemptWeb/Record/issues/6) **TCP/IP协议**， 你一定常常听到，其中**TCP（Transmission Control Protocol）称为 传输控制协议，IP（Internet Protocol） 称为网际协议**。  事实上TCP/IP协议，是一个协议族，是一个协议的集合。 TCP/IP协议，定义了一整套规则。**它定义整个互联网如何连接，如何通信，如何协商的最基础规则**。 **TCP/IP协议分为五层，分别是应用层、传输层、网络层、数据链路层、物理层**。每层都有对应的相关协议，其中TCP和UDP是传输层的两个协议。 ### 理解TCP和UDP  既然他们是**传输层**的协议，那么他们的作用当然就是用来负责传输数据了。 我们想象一个场景，网络中随意的两端要通信，会采取什么传输方式呢？ 可以先想象一下人类之间的通信。 **第一种**是打电话。我拨通电话你的电话，直到你回答“你好”，我听到声音之后，我们之间才继续进行交谈。 **另一个**是发短信。我给你的手机号发送一条短信，无法知道你是否收到，然后我就只能等待你的回复了。 其中第一种方式对应TCP，而第二种对应UDP。TCP是需要对方确认的，也就是传输之前需要进行三次握手（传输的两端需要经过三次握手，才开始通信）。UDP着比较粗暴，不论对方什么情况，直接发送，不需要确认过程。 而上图中的看到的，TCP是可靠的，UDP是不可靠的，就是这个意思。 可靠的连接带来的是效率的下降。比如一次网络请求，很大一部分时间其实都是浪费在互相确认的过程当中，资源消耗比较多，保证了数据传输是可靠的，而且传输数据是有序的。不可靠的连接带来的是效率的提升，但可能服务质量有下降。 要摆脱一种人为的误区，不要以为UDP不可靠，就没有应用场景。据说QQ发送数据就是靠UDP发送的，尽管是不可靠的连接，可是还是用了非常多的校验算法保证了数据质量稳定，同也保证了效率。TCP尽管耗时，可是对于稳定性优先的场景，还是应该有限选用TCP，比方浏览器中访问网页用的就是TCP。此外在一些长连接系统里面，比方微信，连接通道应该也是用TCP建立的，由于要维持一条稳定的信息传输通道。 协议是怎么控制，数据包是怎么传输，怎么校验数据的正确性，还有重传特性。这些都是协议中重要的控制过程，在这里不做详解，因为对于实际的产品并没有太大的用。至于如何选定传输数据方式，应该依据场景而定。 **安全的东西往往不快，反之亦然**。而TCP和UCD之间也是这样： ### TCP(传输控制协议)...

HerryLo

原文永久链接：[https://github.com/AttemptWeb/Record/issues/10](https://github.com/AttemptWeb/Record/issues/10) 上面有一篇专门介绍过[TCP和UCP协议](./2019-08-02)，其中只是粗略的提到TCP协议的三次握手，而四次挥手完全没有说到，所以这次专门总结了这篇文章，专门讲讲**三次握手和四次挥手**。 **备注：(下文中提到的专业术语)** > ack —— 确认号码 > seq —— 顺序号码 > ISN —— 初始序列号 > ACK —— 确认，使得确认号有效（握手使用） > SYN —— 用于初始化一个连接的序列号，建立联机 > FIN —— 该报文的发送方已经结束向对方发送数据 ## TCP的三次握手 三次握手...

HerryLo

图解javascript原型链

4

# 图解javascript原型链 作者: [HerryLo](https://github.com/HerryLo) [本文永久有效链接: https://github.com/AttemptWeb......](https://github.com/AttemptWeb/Record/issues/11) 原型链和原型对象是js的核心，js以原型链的形式，保证函数或对象中的方法、属性可以让向下传递，按照面向对象的说法，这就是继承。而js通过原型链才得以实现函数或对象的继承，那么下面我们就来聊一聊js中的原型链。以下图居多，请放心食用。 ## prototype和contructor **prototype指向函数的原型对象，这是一个显式原型属性，只有函数才拥有该属性**。**contructor**指向原型对象的构造函数。 ```javascript // 可以思考一下的打印结果，它们分别指向谁 function Foo() {} console.log(Foo.prototype) console.log(Foo.prototype.contructor) console.log(Foo.__proto__) console.log(Foo.prototype.__proto__) ``` 下面来看看各个构造函数与它自己原型对象之间的关系：  ## proto 每个对象都有```_proto_```，它是隐式原型属性，指向了创建该对象的构造函数原型。由于js中是没有类的概念，而为了实现继承，通过 ```_proto_``` 将对象和原型联系起来组成原型链，就可以让对象访问到不属于自己的属性。 ### 函数和对象之间的关系...

HerryLo

图解javascript的this指向

3

# 图解javascript的this指向 作者: [HerryLo](https://github.com/HerryLo) [本文永久有效链接: https://github.com/AttemptWeb......](https://github.com/AttemptWeb/Record/issues/12) 以下就只有两张图，请放心食用！！ ## 简版this指向  ## 升级版this指向  ### **解释：** 这里的上下文对象如下： ```javascript function fn() {console.log('this指向：', this);} let Obj = { fn: fn } window.fn(); //...

HerryLo

作者：[Dmitri Pavlutin](https://dmitripavlutin.com/orthogonal-react-components/) [原文链接](https://dmitripavlutin.com/orthogonal-react-components/) > **正交性**是几何学中的术语，互为直角的直角坐标系就具有正交性；**在计算技术中表示不依赖性或解耦性**。非正交的系统意味着系统中各组件互相高度依赖，这类系统中是不再有局部修正的情况了。 ## 1. 为什么好的系统设计是重要的？ 在5年前，我正在为一家欧洲初创公司开发跨平台移动应用。初期的功能是易于实现的，进展顺利。 6个月过去，需要不断的在现有功能上添加新的功能，随着时间的推移，对现有模块的更改越来越困难。 在部分需求上，开始拒绝某些新的功能和更新，因为它们将需要太多的时间实施。这个故事以移动应用程序完全重写为原生应用而告终，主要是因为进一步的维护非常的困难。 我将上述问题归咎于跨平台框架中的错误，归咎于客户端需求变更。但这不是主要问题，我没有意识到一点，我一直在于高度耦合的模块组件做战，就像堂吉柯德大战风车一样。 我忽略了组件易于更改的特性。我未遵循良好的设计原则，没有赋予组件适应潜在的变化的特性。学习设计原则，一个特别有影响力的正交原理，它可以隔离由于不同原因而变化的事物。 ## 2. 正交组件 如果A和B正交的，则更改A不会更改B（反之亦然）。这就是正交性的概念。在广播设备中，音量和电台选择控件是正交的。音量控制仅更改音量，而电台选择控件仅更改接收到的电台。  想象一下广播设备坏了，音量控制可更改音量，但也可修改选定的广播电台。音量控制和电台选择控制不是正交的：音量控制会产生副作用。当你尝试向紧密耦合的组件中添加更改时，也会发生相同的情况：你不得不面对更改产生的副作用。 如果一个组件的更改不影响其他组件，则两个或多个组件正交。例如，显示文章列表的组件应与获取文章的逻辑正交。 一个好的React应用程序设计是正交的： * UI元素 * 全局状态管理 * 持久性逻辑（本地存储，cookie） * 获取数据 （fetch...

HerryLo