Commit d44389cd authored by liyan's avatar liyan
parents a129d300 5e35a443
Pipeline #16377 failed with stage
...@@ -11,7 +11,7 @@ author: 方玉新 ...@@ -11,7 +11,7 @@ author: 方玉新
## 使用Hooks时的疑惑 ## 使用Hooks时的疑惑
Hooks的出现让我们对`Function Component`逐步拥有了对标 `Class Component`的特性,比如私有状态以及生命周期函数等。`useState``useReducer`这两个`Hooks`让我们可以在`Function Component`里使用到私有状态。而`useState`其实相当于简化版的`useReducer`,下面就将这两个放到一起简单介绍下。 Hooks的出现让我们对`Function Component`逐步拥有了对标 `Class Component`的特性,比如私有状态以及生命周期函数等。`useState``useReducer`这两个`Hooks`让我们可以在`Function Component`里使用到私有状态。而`useState`其实相当于简化版的`useReducer`,下面就将这两个放到一起简单介绍下。
<!-- more -->
#### 1、useState使用示例 #### 1、useState使用示例
```javascript ```javascript
function PersionInfo ({initialAge,initialName}) { function PersionInfo ({initialAge,initialName}) {
......
---
title: Docker 基础使用介绍
date: 2022/05/30 9:25:23
updated: 2022/05/30 9:25:23
tags:
- docker
- 容器
- 虚拟化
author: 蔡海飞
---
> Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接口(类似 iPhone 的 app),更重要的是容器性能开销极低。我们可以通过将开发代码打包到docker 镜像中,上传到docker hub中,待发布时通过拉取docker hub镜像启动docker 容器,实现代码运行环境的高度一致,并提高部署效率。
![docker运行系统图](/yifu-study-front-share/images/docker-system.png)
本篇文章就我们较为常用的docker 命令使用通过场景使用的不同来简单介绍。
<!-- more -->
### Docker 安装与镜像加速
#### Docker安装
docker 提供了各种不同系统的安装方式,因为我们常用的正式部署环境使用centos的缘故,我这里只介绍centos里如何安装docker以及如何配置docker国内镜像加速。
1. 使用官方提供的脚本自动安装
```
$ curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun
```
2. 手动命令行安装
```
# 先卸载旧版本的docker安装包,后安装新版
$ sudo yum remove docker \
docker-client \
docker-client-latest \
docker-common \
docker-latest \
docker-latest-logrotate \
docker-logrotate \
docker-engine
$ sudo yum install -y yum-utils \
device-mapper-persistent-data \
lvm2
```
#### 镜像加速
1. 阿里云
```
$ sudo yum-config-manager \
--add-repo \
http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
```
2. 清华大学源
```
$ sudo yum-config-manager \
--add-repo \
https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/centos/docker-ce.repo
```
3. 腾讯源
```
$ sudo yum-config-manager \
--add-repo \
https://mirror.ccs.tencentyun.com/docker-ce/linux/centos/docker-ce.repo
```
#### 启动docker 服务
```
$ sudo systemctl restart docker
```
### Docker 核心概念
![docker-system.jpeg](/yifu-study-front-share/images/docker-system.jpeg)
#### 镜像
Docker镜像是由文件系统叠加而成。一个镜像可以多个中间层组成,多个镜像可以共享同一中间层,我们也可以通过在镜像添加多一层来生成一个新的镜像。镜像在构建完成之后,便不可以再修改,而上面我们所说的添加一层构建新的镜像,这中间实际是通过创建一个临时的容器,在容器上增加或删除文件,从而形成新的镜像,因为容器是可以动态改变的。整理可以得出镜像的两个特点:
- 镜像是分层的
- 镜像是只读的
![docker-image.png](/yifu-study-front-share/images/docker-image.png)
1. 常用命令
```shell
$ docker image ls # 枚举本地主机中的docker镜像
$ docker image inspect nginx:latest # 获取nginx:latest镜像的层数据和元数据
$ docker rmi nginx:latest # 删除本地的nginx:latest,需要先删除应用该镜像的容器
$ docker tag nginx:latest nginx:test # 给本地nginx:latest镜像添加标签nginx:test
$ docker commit -a a404c6c174a2 mymysql:v1 # 基于当前容器a404c6c174a2创建新的镜像mymysql:v1
$ docker build -f Dockerfile -t myimage:0.0.1 . # 基于Dockerfile文件制作镜像myimage:0.0.1
```
#### 容器
容器是镜像的运行时实例。正如从虚拟机模板上启动 VM 一样,用户也同样可以从单个镜像上启动一个或多个容器。虚拟机和容器最大的区别是容器更快并且更轻量级——与虚拟机运行在完整的操作系统之上相比,容器会共享其所在主机的操作系统/内核。
Docker 容器是一个开源的应用容器引擎,让开发者可以以统一的方式打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何安装了docker引擎的服务器上(包括流行的Linux机器、windows机器),也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接口(类似 iPhone 的 app)。几乎没有性能开销,可以很容易地在机器和数据中心中运行。最重要的是,他们不依赖于任何语言、框架包括系统。
1. 常用命令
```shell
$ docker ps -a # 列出当前主机中所有的docker容器
$ docker run -it nginx /bin/bash # 基于nginx镜像启动一个docker容器
$ docker pause containername # 暂停docker 容器
$ docker start containername # 启动docker容器
$ docker stop containername # 停止docker容器
$ docker restart containername # 重启docker容器
$ docker attach -it containername /bin/bash # 进入docker 容器,此种方式进入退出后会使得docker容器停止
$ docker exec -it containername /bin/bash # 进入docker 容器,此种方式进入退出后不会使得docker容器停止
$ docker export containername > containername.tar # 导出docker容器快照
$ docker rm containername # 删除docker 容器
$ docker logs -f containername # 持续输出docker容器的日志信息
$ docker cp containerID:container_path host_path # 复制主机文件到对应docker容器的地址
```
#### 仓库
Docker 仓库是用来包含镜像的位置。Docker提供一个注册服务器(Register)来保存多个仓库,每个仓库又可以包含多个具备不同tag的镜像。Docker运行中使用的默认仓库是 Docker Hub 公共仓库。
![docker-hub.png](/yifu-study-front-share/images/docker-hub.png)
1. 常用命令
```shell
$ docker pull nginx:latest # 从镜像仓库拉取nginx:latest镜像
$ docker search nginx # 搜索镜像库的nginx相关镜像
$ docker push nginx:0.0.1 # 提交本地镜像nginx:0.0.1到当前登录的镜像仓库
```
### 一个简单的docker 使用示例
1. 制作Dockerfile文件
```shell
# Dockerfile 文件
FROM nginx:alpine
ADD deploy/qas/default.conf /etc/nginx/conf.d
ADD dist /home/html/app/
# deploy/qas/default.conf
server{
listen 8080;
location ^~ /proxy-path/ {
#自定义头信息传递
proxy_pass http://****/;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_http_version 1.1;
}
location / {
#配置代理参数
proxy_redirect off;
proxy_set_header X-Forwarded-Host $host:$server_port;
proxy_set_header X-Forwarded-Server $host:$server_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host:$server_port;#这里是重点,这样配置才不会丢失端口
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
root /home/html/app/;
index index.html;
try_files $uri /index.html;
}
}
# dist为打包文件
```
2. 制作Docker镜像
```shell
$ docker build -f ./deploy/qas/Dockerfile -t website:0.0.1 .
```
3. 上传Docker镜像
```shell
$ docker tag website:0.0.1 website/test
$ docker images
$ docker push website/test
```
4. 启动docker 容器
```shell
$ docker pull website/test
$ docker run -it --name website-test -p 80:80 -d website/tes
```
5. 查看docker 容器运行状态
```shell
$ docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
90cdb9ad1ae1 website/tes "nginx -g 'daemon of…" a minute ago Up a minute 0.0.0.0:80->80/tcp website-test
```
\ No newline at end of file
---
title: jQuery从$开始
date: 2022/05/31 16:25:23
updated: 2022/05/31 16:25:23
tags:
- 前端
- JQuery
- 设计模式
author: 王许晓
---
**设计模式(Design pattern)** 是解决软件开发某些特定问题而提出的一些解决方案也可以理解成解决问题的一些思路。通过设计模式可以帮助我们增强代码的可重用性、可扩充性、 可维护性、灵活性好。我们使用设计模式最终的目的是实现代码的 **高内聚****低耦合**
<!-- more -->
适配器模式将一个类的接口转换成客户希望的另一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。
主要解决在软件系统中,常常要将一些‘现存的对象’放到新的环境中,而新环境要求的接口是现对象不能满足的。
优点:1、可以让任何两个没有关联的类一起运行。2、提高了复用、灵活性好。
缺点:过多使用适配器会让系统非常混乱。适配器解决已经完成继续增加内容
的实用场景。
在jQuery中使用的适配器的例子:
jQuery.fn.css(),这个方法帮助规范了不同浏览器之间样式的应用方式,使我们使用简单的语法,这些语法被适配成为浏览器背后真正支持的语法
```
// 下面的例子将返回首个匹配元素的 background-color 值
$("p").css("background-color");
```
```
// 设置指定的 CSS 属性
$("p").css("background-color","yellow");
```
```
// 设置多个 CSS 属性
$("p").css({"background-color":"yellow","font-size":"16px"});
```
```
css: function( name, value ) {
return access( this, function( elem, name, value ) {
var styles, len,
map = {},
i = 0;
if ( Array.isArray( name ) ) {
styles = getStyles( elem );
len = name.length;
for ( ; i < len; i++ ) {
map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles );
}
return map;
}
return value !== undefined ?
jQuery.style( elem, name, value ) :
jQuery.css( elem, name );
}, name, value, arguments.length > 1 );
}
```
# 外观模式
外观模式为子系统中的一组接口提供一个一致的界面,外观模式定义了一个高层接口,这个接口使得这一子系统更加容易使用。
解决问题:降低访问复杂系统的内部子系统的负责度,简化客户端之间的接口。
优点:1、减少系统相互依赖。2、提高灵活性。3、提高安全性。
缺点:不符合开闭原则,如果要改东西很麻烦。
# 观察者模式
在观察者模式下,系统中的对象可以在关注的事件发生的时候给其他对象发送消息,可以被其他对象所通知。
解决问题:一个对象状态改变给其他对象通知的问题,而且要考虑到易用和低耦合,保证高度的写作。
优点:观察者和被观察者是抽象耦合的。
缺点:如果一个被观察者对象有很多的直接和间接的观察者,将所有的观察者都通知到会话费很多时间。2、如果观察者和被观察着之间有循环依赖的话,观察目标会触发他们之间进行循环调用,可能导致系统崩溃。
## 附录
开闭原则:对扩展开放,对修改关闭。在程序需要进行扩展的时候,不能去修改原有的代码,实现一个热插拔的效果。简言之,是为了使程序的扩展性好,易于维护和升级。
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_01.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_02.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_03.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_04.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_05.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_06.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_07.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_08.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_09.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_10.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_11.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_12.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_13.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_14.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_15.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_16.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_17.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_18.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_19.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_20.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_21.jpg)
![docker-system.jpeg](/yifu-study-front-share/images/wxx/JQuery中的设计模式_22.jpg)
...@@ -20,7 +20,7 @@ preload和prefetch的出现为我们提供了可以更加细粒度地控制浏 ...@@ -20,7 +20,7 @@ preload和prefetch的出现为我们提供了可以更加细粒度地控制浏
<link ref='preload'> <link ref='preload'>
<link ref='prefetch'> <link ref='prefetch'>
``` ```
<!-- more -->
#### preload特点 #### preload特点
- preload加载的资源是在浏览器渲染机制之前进行处理的,并且不会阻塞onload事件; - preload加载的资源是在浏览器渲染机制之前进行处理的,并且不会阻塞onload事件;
- preload可以支持加载多种类型的资源,并且可以加载跨域资源; - preload可以支持加载多种类型的资源,并且可以加载跨域资源;
......
--- ---
title: TypeScript泛型 title: TypeScript泛型
date: 2022/5/10 16:00:00 date: 2022/5/10 16:00:00
tags: tags:
- 前端 - 前端
- typescript - typescript
author: 杨靖 author: 杨靖
--- ---
## 泛型 ## 泛型
泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。 泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。
...@@ -27,6 +28,7 @@ createArray(3, 'x'); // ['x', 'x', 'x'] ...@@ -27,6 +28,7 @@ createArray(3, 'x'); // ['x', 'x', 'x']
这段代码编译不会报错,但是一个显而易见的缺陷是,它并没有准确的定义返回值的类型: 这段代码编译不会报错,但是一个显而易见的缺陷是,它并没有准确的定义返回值的类型:
Array<any> 允许数组的每一项都为任意类型。但是我们预期的是,数组中每一项都应该是输入的 value 的类型。 Array<any> 允许数组的每一项都为任意类型。但是我们预期的是,数组中每一项都应该是输入的 value 的类型。
这时候,泛型就派上用场了: 这时候,泛型就派上用场了:
<!-- more -->
```typescript ```typescript
function createArray<T>(length: number, value: T): Array<T> { function createArray<T>(length: number, value: T): Array<T> {
......
## 路由懒加载 ---
title: 性能优化--通过优化首屏加载速度实现
date: 2022/5/24 14:30
tags:
- 前端
- 路由懒加载
- 性能优化
author: 刘磊
---
#### 什么是路由懒加载 #### 什么是路由懒加载
路由懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。在单页面应用中浏览器默认会将所有的资源全部下载下来,这可能会导致首屏加载的时间过长。路由懒加载可以做到点击对应的路由再加载对应的文件资源 路由懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。在单页面应用中浏览器默认会将所有的资源全部下载下来,这可能会导致首屏加载的时间过长。路由懒加载可以做到点击对应的路由再加载对应的文件资源
#### 路由懒加载的三种写法 (推荐用法:es6的import) #### 路由懒加载的三种写法 (推荐用法:es6的import)
...@@ -14,7 +25,7 @@ ...@@ -14,7 +25,7 @@
``` ```
configplugins.delete(prefetch) configplugins.delete(prefetch)
``` ```
<!-- more -->
- 在引用时配置 - 在引用时配置
``` ```
import(<!--webpackChunkName:'[...]',webpackPrefetch:false-->) import(<!--webpackChunkName:'[...]',webpackPrefetch:false-->)
......
This diff is collapsed.
---
title: 浅谈TypeScript命名空间
date: 2022/6/20 15:00:00
tags:
- 前端
- typescript
author: 杨靖
---
***命名空间简介***
命名空间(在早期版本的 TypeScript 中称为“内部模块”)是一种用于组织和分类代码的 TypeScript 特定方式,使你能够将相关代码组合在一起。 命名空间允许将与业务规则相关的变量、函数、接口或类分组到一个命名空间,将安全性分组到另一个命名空间。
命名空间内的代码将从全局范围拉入到命名空间范围。 这种布局有助于避免全局命名空间中组件之间的命名冲突,并且在与可能使用类似组件名称的分布式开发团队合作时也会有好处。
***命名空间特点***
- 减少全局范围内的代码量,限制“全局范围污染”。
- 为名称提供上下文,有助于减少命名冲突。
- 提高可重用性。
TypeScript 中命名空间使用 namespace 来定义,例如:
```typescript
namespace namespaceA{
export interface interfaceA{}
export class classA{}
function getUserInfo() {
let name = getName()
return console.log(name + ',I am 26 years old')
}
function getName() {
return 'my name is Yj'
}
}
interfaceA // false,没有添加命名空间名称前缀namespaceA
namespaceA.interfaceA // true
namespaceA.classA // true
namespaceA.getName // false,没有export关键字
namespaceA.getUserInfo // 'my name is Yj, I am 26 years old'
```
以上定义了一个命名空间 namespaceA,如果我们需要在外部可以调用 namespaceA中的类和接口,则需要在类和接口添加 export 关键字。命名空间中定义的所有组件的作用域都限定为命名空间,并从全局范围中删除
***使用嵌套命名空间组织代码***
在命名空间中嵌套命名空间,从而提供更多的选项来组织代码,个人理解类似于在一个对象里面找对象属性的属性。
```typescript
namespace namespaceA{
export namespaceB{
export functionA() {
namespaceC.functionB
}
}
export namespaceC{
export functionB() {
return console.log('这是命名空间c里面的函数b!')
}
export functionC() {
return console.log('这是命名空间C里面的函数C!')
}
}
}
namespaceA.namespaceB.functionA // 这是命名空间c里面的函数b!
namespaceA.namespaceC.functionC // 这是命名空间C里面的函数C!
```
***定义命名空间别名***
TypeScript 创建一个易于导航的嵌套命名空间层次结构。 但是,随着嵌套命名空间变得越来越复杂,你可能需要创建一个别名来缩短和简化代码。 为此,请使用 **import** 关键字。
```typescript
//namespaceA 和 namespaceB来自上面的代码
import nameA = namespaceA.namespaceB;
nameA.functionA(); // '这是命名空间c里面的函数b!'
```
***编译单一文件命名空间***
编译单一文件命名空间的方式与编译任何其他 TypeScript 文件的方式相同。 因为命名空间是一个只包含 TypeScript 的构造,所以会从生成的 JavaScript 代码中删除它们,并将其转换为必要时嵌套的变量,以形成类似命名空间的对象。
如果一个命名空间在一个单独的 TypeScript 文件中,则应使用三斜杠 /// 引用它,语法格式如下:
```typescript
/// <reference path = "SomeFileName.ts" />
```
***使用多文件命名空间来组织代码***
可以通过跨多个 TypeScript 文件共享命名空间来扩展它们。 如果在多个文件中具有彼此相关的命名空间,则必须添加 reference 标记,使 TypeScript 编译器知道文件之间的关系。 例如,假定你有三个 Typescript 文件:
- interfaces.ts,它声明包含某些接口定义的命名空间。
- functions.ts,该文件使用在 interfaces.ts 中实现接口的函数声明命名空间。
- main.ts,它调用 functions.ts 中的函数,并表示应用程序的主代码。
若要告知 TypeScript interfaces.ts 与 functions.ts 之间的关系,请在 functions.ts 顶部使用三斜杠 (///) 语法向 interfaces.ts 添加 reference。 然后,在与 interfaces.ts 和 functions.ts 关联的 main.ts 中,将 reference 添加到这两个文件。
![在这里插入图片描述](https://img-blog.csdnimg.cn/e3767edc69a3430ab1757cbfb332d884.png#pic_center)
如果对多个文件进行引用,请从最高级别的命名空间开始,然后逐渐向下。 在编译文件时,TypeScript 将使用此顺序。
***编译多文件命名空间***
编译多个文件命名空间的方法有两种:每文件编译和单一文件编译。
默认情况下,当你在 main.ts 上运行 TypeScript 编译器时,它将检查文件中的 reference 语句,并为每个输入文件生成一个 JavaScript 文件。 如果选择此选项,请使用网页上的 <script> 标记按相应顺序加载每个发出的文件。
还可以使用 --outFile 选项指示编译器生成单个 JavaScript 输出文件。 在上面的示例中,命令 tsc --outFile main.js main.ts 指示编译器生成一个名为 main.js 的 JavaScript 文件。
This image diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This image diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment