Felix皇子-CSDN博客

原创 Typescript - - 高级用法

TS 的一些高级用法中的基础知识

2022-12-13 22:01:33 1368

Jest 使用指南 - - tsx 组件篇#jest首先考虑一下，React 组件我们需要测试哪些东西呢？React 组件的 render 结果是一个组件树，并且整个树最终会被解析成一个纯粹由 HTML 元素构成的树形结构React 组件可以拥有 state，且 state 的变化会影响 render 结果React 组件可以拥有生命周期函数，这些生命周期函数会在特定时间点执行这就是我们的测试一个 React 组件需要考虑的东西了接下来我们来考虑一下怎么去测试，Jest 提供了一个基于

2021-06-27 16:19:08 1544

原创 Jest 使用指南 - - Mock 篇

Jest 使用指南 - - Mock 篇#jestJest Mock为什么会用到 Mock？ Mock 能帮我们解决什么问题？在项目中，一个模块的方法内常常会去调用另外一个模块的方法。在单元测试中，我们可能并不需要关心内部调用的方法的执行过程和结果，只想知道它是否被正确调用即可，甚至会指定该函数的返回值。此时，使用Mock函数是十分有必要。Mock函数提供的以下三种特性，在我们写测试代码时十分有用：- 擦除函数的实际实现（换句话说：改变函数的内部实现）- 捕获函数调用情况( 包括：这些调用中

2021-06-27 16:18:28 8675

原创 Jest 使用指南 - - ts 文件篇

Jest 使用指南 - - ts 文件篇#jestts 文件的单测ts 文件主要是一些工具方法的使用，然后对于其中的工具方法进行单测，比对返回的数据结构，包括基础数据类型、对象、数组、函数异步方法这部分直接参考测试异步代码 · Jest用到的 api 介绍expect.assertions(1)expect.assertions(number)验证在测试过程中是否调用了一定数量的断言。这在测试异步代码时通常很有用，以确保回调中的断言确实被调用。Donetest 的第二个参数

2021-06-27 16:17:00 1353

原创 Jest 使用指南 - - 基础篇

Jest 使用指南 - - 基础篇#jestJest 基础Jest 语法descriptionDescribe, 一种用于包含一个或多个相关测试的 Jest 方法。每次在开始为功能编写新的测试套件时，都将其包装在 describe 块中。description('一组测试的名称', () => { // 测试的方法})testTest 是实际的测试模块，我们会在 test 里面运行我们的一些函数或方法，一般在测试里有三部分：输入（参数等）、功能（运行的函数方法）、预期输出（

2021-06-27 16:16:16 1171

原创 Single-Spa 实践（下）-- 拆分子应用不同目录

Single-Spa 实践（下）-- 拆分子应用不同目录在上篇中讲到了，在同一个目录下创建主应用以及子应用，但是这样的话其实还是感觉像一个大应用，并且别的模块在维护的时候还需要把整个项目 clone 下来，感觉还是欠缺了点什么。在这篇中大致上还是基于上看的结构，接着把上面的结构完全拆开来，拆分到单独的 repo，可以分为如下几个结构：1. 根(主)应用： root-config2. 子应用1: app13. 子应用2: app2接着一步步来Step 1把 app1 和 app2 从 mi

2020-12-03 22:37:21 587

原创 Single-Spa 实践（上） -- 子应用在相同目录下

Single-Spa 实践（上） – 子应用在相同目录下基于 single-spa 来搭建一个 react 的微前端应用，主应用以及子应用都在同一个个目录下，即下方的 micro-front 下Step 1 新建一个目录，并初始化mkdir mirco-front && cd micro-frontnpm init -yStep 2 增加 webpack 配置怎么简单怎么来，因为后面我们是用的 react，并且是用 CRA 来创建的子应用，所以这个 webpack 的基本配

2020-12-03 22:35:36 705

原创 Docker 学习

Docker 学习前言软件开发的一大难题就是环境配置，不同的用户计算机的环境是不同的，这就可能会导致不同的问题出现。因此就出现了以下三种解决方案：虚拟机资源占用多：因为相当于就是一个实际的操作系统，所以哪怕你的程序只要1M资源，但是别的资源依旧被占用着冗余步骤多：无法跳过一些系统级别的操作，比如用户登陆启动慢：启动操作系统需要多久，那么虚拟机就需要多久Linux 容器（LXC）：Linux 容器不是模拟一个完整的操作系统，而是对进程进行隔离，或者说是在进程外包裹一层保护壳启

2020-11-07 22:03:18 263

原创位运算总结

位运算总结191.位1的个数题解位运算按位与 &按位与运算将参与运算的两数对应的二进制位相与，当对应的二进制位均为 1 时，结果位为 1，否则结果位为 0。0000 0101 & 0000 1000 = 0000 0000判断奇偶：这是因为奇数的二进制最低位始终为 1，而偶数的二进制最低为始终为 0。所以，无论任何奇数与 1 即 0000 0001 相与得到的都是 1，任何偶数与其相与得到的都是 0。if( 3 & 1) { // 奇数} else {

2020-11-07 22:01:56 1432

原创微前端 Micro-Frontnds - Single-SPA Application API

微前端 Micro-Frontnds - Single-SPA Application APIApplication APIimport { registerApplication, start } from 'single-spa';// orimport * as singleSpa from 'single-spa';registerApplication使用在 root config 中，用于注册应用Simple argumentssingleSpa.registerApp

2020-11-07 21:59:54 1591

原创微前端 Micro-Frontends - Single-SPA

微前端 Micro-Frontends - Single-SPAsingle-spa 包含两部分，1. Applications ，每个应用都是一个完整的 SPA，每个应用需要知道怎么从 DOM 上 bootstrap(引导), mount(安装), and unmount(卸载)（这三个可以理解为 single-spa 的生命周期）2. 一个配置文件 single-spa-config ，可以理解为 HTML 页面和 single-spa 注册应用程序的 js 配置文件，注册应用需要的参数：1.

2020-11-07 21:59:24 509 1

原创微前端 Micro-Frontends - 概念

微前端 Micro-Frontends - 概念什么是微前端？（what）微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用可以独立运行、独立开发、独立部署。微前端的核心在于拆，拆完后在合。为什么需要用到微前端？（why）原先的单体应用当我们的项目越来越复杂的，项目中的功能模块也越来越多，这就导致了一个问题，代码复杂。代码构建部署缓慢对开发人员非常不友好（特别是新接手的人来说，找个模

2020-11-07 21:58:43 995 1

原创 webpack 配置注意的小技巧和坑

webpack 配置注意的小技巧和坑// 相关版本信息"webpack": "^4.44.1","webpack-cli": "^3.3.12"css-loader 中的坑自 v1.0.0 开始废弃了 minimize option，因此无法由如下的写法 v1.0.0 break changes// ... 省略其余配置内容module:{ rules:[ // "css-loader?minimize", error { test: /\.css$/,

2020-09-12 15:45:40 1061 1

原创 Chrome Extension demo 说明

Chrome Extension demo 说明因为工作中的需要，所以就开发了一个 Chrome 扩展（插件），这个扩展的主要功能包括如下几点- 划词翻译- i18n yaml 文件的导入- 翻译内容的保存，yaml 文件的导出项目地址 GitHub。GitHub - Felix-Prince/crx-i18n-extension: 基于 react 开发的 Chrome 翻译 extension总结一下开发过程中使用的技术以及遇到的问题使用的技术1. 翻译使用的是 translation.

2020-07-25 13:43:06 293

原创 Chrome Extension 通信常用 API 说明

通信常用 API 说明chrome.runtime.sendMessage/** * 向您的扩展程序/应用或另一个扩展程序/应用中的其他事件监听者发送单个消息。 * @param {string} extensionId 发送消息的扩展程序或应用的标识符，扩展的 id，省略就是当前扩展内部通信 * @param {any} message * @param {object} options * @param {function} callback (response: any) =>

2020-07-25 13:18:01 2006

原创 Chrome Extension 第二篇--通信

Chrome Extension 第二篇 – 通信Chrome Extension JS 对比JS 种类可访问的 APIDOM 访问情况JS 访问情况直接跨域background js可以访问绝大部分的 API，除了 devtools 系列不能直接访问不可以可以content scripts只能访问 extension、runtime 等部分 API可以访问不可以不可以browser action可以访问绝大部分的 API，除了 devtools

2020-07-25 13:11:52 2119 1

原创 Chrome Extension 第一篇 — manifest

Chrome Extension 第一篇 — manifest简介Chrome 浏览器给我们提供了很多插件，比如：React Developer tools 、划词翻译、Octotree等，可以让我们在某些页面或者所有页面中能使用一些特定的功能。这是给 Chrome 浏览器增加功能。Chrome 浏览器扩展使用的技术还是HTML、CSS 和 JavaScript ，所以对前端开发来说是非常友好很容易上手的。扩展程序本质上是网页概念及基础每一个扩展程序包含以下文件：一个清单文件一个或多个 HT

2020-07-25 13:09:24 1200 2

原创 Webpack 工程化

Webpack 工程化搭建一个 react 的环境，并且是基于 typescript 的项目首先我们需要思考的一个问题是我这个项目需要哪些功能（可以先把能想到的功能配置进去，之后再想到的再配置，毕竟一开始可能想不全是正常的）1. 能处理样式 less/css 文件2. 能处理图片字体图标 png/jpg/gif/svg/ttf/… 等3. 能处理 react 组件代码 jsx/tsx4. 能把 ts 转换成 js5. 能把 es6 代码转化为 es56. 能处理代码规范 eslint

2020-06-14 15:57:16 413

原创 GraphQL 第二章 Schema 和类型

GraphQL 第二章 Schema 和类型定义了 schema 后我们就能知道服务器会返回那种对象，这些对象有哪些字段可用等。每个 GraphQL 服务都会定义一套类型，用以描述你可能从那个服务查询到的数据，每当查询到来，服务器就会根据 schema 验证并执行查询。之前我们讲了 GraphQL 的查询语言，这里我们来讲一下 GraphQL Schema language 。这个和 GraphQL 的查询语言类似。一个 GraphQL schema 中的最基本的组件是对象类型，它表示你可以从服务上

2020-06-13 11:04:53 375

原创 GraphQL 第一章查询和变更

GraphQL 第一章查询和变更What ? When ? Where ? Why ? How ?GraphQL 是什么？GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时。GraphQL 包括两部分：定义的类型和类型上的字段（Schema），每个类型上的每个字段的解析函数（Resolvers)为什么要用 GraphQL ？1. GraphQL 是强类型的 Schema 。是每个 GraphQL API 的基础，它清晰的定义了每个 API 支持

2020-06-13 11:04:10 590 1

原创 React-Hooks

React HooksHooks 的目的是加强函数组件，完全不使用"类"组件，就能写出一个全功能的组件， A Hook is a special function that lets you “hook into” React features.根据官网的说法，Hook就是一个特殊的函数，让你可以在函数组件中使用一些 Hooks(钩子)类组件的缺点大型组件很难拆分和重构，也很难测试。...

2019-11-10 16:29:52 543

原创 Forwarding Refs

Forwarding Refs在react中我们最开始接触到ref是在表单组件中的非受控组件，我们先来回顾一下这个// 类组件class Hello extends React.Component { // 1、调用 React.createRef() 方法创建一个 ref 对象 txtRef = React.createRef() handleClick = ...

2019-09-28 20:50:05 347

转载前端基础知识

前端基础知识DNS 解析DNS（Domain Name System，域名系统）是指由域名到ip地址的映射，DNS协议运行在udp协议之上，使用端口号53。该域名->ip地址的映射分两种：静态映射（本地维护一个映射表），动态映射（需要一套域名解析系统）主机名：三级域名.二级域名.顶级域名一个完整的域名由二个或二个以上部分组成，各部分之间用英文的句号".“来分隔，倒数第一个”....

2019-08-25 14:44:16 611

原创 Redux状态管理

Redux资料react-redux流程与实现分析《看漫画，学 Redux》 —— A cartoon intro to ReduxRedux 中文网React 实践心得：react-redux 之 connect 方法详解解读redux工作原理React 是构建 UI 的库，只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及1 代码结...

2019-08-14 21:21:39 1317 2

原创 React学习(二)——react中的路由

React 学习React 路由现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）前端路由是一套映射规则，在 React 中，是 URL 路径与组件的对应关...

2019-08-13 10:41:42 872

原创 React基础（一）

React 学习基本介绍A JavaScript library for building user interfaces —— React 是一个 JS 库，用来构建用户界面（再简单点就是写 HTML，构建 web 应用，这是指 PC 端，react 也可以用于很多别的地方），从 MVC 的角度来看，相当于视图层 V（View）的内容。特点声明式（Declarative）...

2019-08-13 10:37:00 302

原创 Vue和React中的反向代理

Vue和React中的反向代理反向代理原理要说到反向代理，我们就得先提一下，为什么需要用到反向代理？因为在我们通过 ajax 请求数据的时候存在同源策略问题，因为协议、域名、端口中有不同，就会导致产生跨域问题，而反向代理是我们开发中用的很多的一种解决跨域问题的方式。跨域是浏览器的行为当我们在浏览器端跨域请求数据的时候，其实浏览器已经把数据给我们返回了，但是浏览器自身检测到这是跨域的，因此...

2019-08-11 10:42:24 771

原创 Vue和React 环境变量

Vue和React 环境变量一般我们开发的时候有这么几个环境，开发环境（development ）、测试环境（test）、生产(线上)环境（production），而这也就导致了我们在不同的环境情况下，请求数据的地址是不同的，但是我们如果没切换一个环境都修改咱们的代码中的请求地址，这显然是不明智的，因此就了配置环境变量一说Vue需要在Vue的脚手架（Vue-CLI）中使用在根目录下创建下...

2019-08-01 10:09:02 916 2

转载 Vue中的SEO优化

不可否定的是，vue现在火。但是在实际项目中，特别是像一下交互网站，我们不可避免会考虑到的是seo问题，这直接关系到我们网站的排名，很多人说用vue搭建的网站不能做优化，那我们真的要放弃vue，放弃前后端分离开发么？首先，可以肯定的是前后端分离不利于SEO，为什么呢？1.搜索引擎的基础爬虫的原理就是抓取你的url，然后获取你的html源代码并解析。而你的...

2019-07-20 09:40:06 2731

原创 ES6学习(二)

ECMAScript学习(二)SymbolES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）Symbol的用法let s = Symbol()let ss = Symbol()s==...

2019-07-10 15:24:17 306

原创 webpack基本使用

webpack 基础基于 NodeJs 的，模块化打包工具注意：代码一定要模块化的，webpack 才可以工作，因为 webpack 是通过模块化的代码，进行依赖查找的！作用是将项目里面的所有的用到的资源进行整合打包，减少最终生成的资源数量，优化网页性能webpack 使用安装webpack 4.+的版本都需要额外安装一个 webpack-cli本地安装(推荐)可...

2019-07-08 19:38:22 216

原创 Vue基础(二)

Vue 学习Vue扩展Vue实例参数补充const vm = new Vue({ el:'#app', data:{ // 实例数据 }, computed:{ // 计算属性 }, methods:{ // 实例的方法 }, watch:{ // 监听器 }, //...

2019-07-08 19:35:02 955

原创 Git基本使用

Git基础版本控制系统（VCS）Version Control System是用来解决什么问题的？在开发过程当中，我们经常需要，将代码返回到之前某个时刻所开发的版本，如果没有版本控制工具，那么我们只能通过拷贝文件。拷贝文件的方式，不够简洁，而且会产生很多个文件。版本控制工具，可以用来记录我们每一次的修改历史(版本), 当我们想要使用之前的版本的时候，直接使用这个工具，就能找回之前的...

2019-06-26 20:33:24 323

原创 Vue基础(一)

Vue学习框架和类库前端从后端获取到数据之后，如何将其展示到页面上？原生DOM操作，将数据一个个的往上放字符串拼接法模板引擎数据驱动的MVVM框架Vue等这些框架做的事情，其实就是简化数据渲染的操作！提高开发效率的！！框架(Framework)框架是一整套完整的解决方案，我们需要将自己的代码按照框架的规则，放在合适的位置，框架会在合适的时机，帮我们调用代码...

2019-06-20 22:22:17 3271 2

原创实战——NodeJs项目

NodeJs项目功能描述用户登录（基于cookie、session和redis实现登录）博客的创建、编辑、删除、查询（基于mysql实现数据的增删改查）通过Nginx的反向代理来解决跨域问题总体使用的是MVC的设计模式来进行的项目依赖nodejs：使用原生nodejs提供的各种模块mysql：使用mysql包来实现nodejs读取mysql数据库中的数据redis：使用red...

2019-06-20 10:03:02 27479 17

原创 express初体验

express学习在express中，我们任然可以直接用nodejs的一些原生的方法，express并没有把那些方法给覆盖，只是新增了一部分更高效有用的方法常用的一些方法res.send() 发送一段文本可以是字符串数组对象都自动设置content-typeres.sendFile(path) 发送一个文件的，都自动设置content-typeres.redirect(...

2019-06-10 21:14:53 2171 1

原创 NodeJs基础

NodeJs基础nodejs的本质：不是一门新的编程语言，nodejs是javascript运行在服务端的运行环境，编程语言还是javascriptglobal模块-全局变量Node.js 中的全局对象是 global, 类似于浏览器中的window常用的global属性console: 用于打印日志setTimeout/clearTimeout: 设置清除延时器setInt...

2019-06-10 21:04:11 1816

原创 ES6学习（一）

ECMAScript 学习通过我们说的 ES6 泛指 ES5 之后的下一代标准，涵盖了 ES6, ES7, ES8…ES5-数组的新方法forEachforEach方法对数组的每个元素执行一次提供的函数。功能等同于for循环.应用场景：为一些相同的元素，绑定事件处理器！var arr = ['张飞', '关羽', '赵云', '马超']//第一个参数：item，数组的每一项元素...

2019-06-10 20:58:01 4233 2

原创 Ajax专题

ajax 学习知识铺垫浏览器的组成用户界面－包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分浏览器引擎－用来查询及操作渲染引擎的接口渲染引擎（浏览器内核）－用来显示请求的内容，例如，如果请求内容为 html，它负责解析 html 及 css，并将解析后的结果显示出来网络－用来完成网络调用，例如 http 请求，它具有平台...

2019-05-21 16:37:42 416