- 博客(63)
- 收藏
- 关注
RSS订阅原创 HTTP网络面经
经典五层模型物理层主要作用是定义物理设备如何传输数据，机器的硬件，网卡端口，网线等。数据链路层在通信的实体间建立数据链路连接，比如最基础的数据传输数据流，可以自己选择二进制或者ASCII码形式等网络层在数据在结点之间传输创建逻辑链路，比如输入百度，网络层会为我们找到百度的网址，如何寻找到的过程就是网络层要做的事。传输层：向用户提供可靠的端到端（End-to-End）服务传输层向高层屏蔽了下层数据通信的细节应用层：为应用软件提供了很多服务构建于TCP协议之上屏蔽网络传输相关细节
2021-08-11 08:32:52
944
原创 Koa及其插件
koakoa 是基于 Node.js 的下一代 Web 框架。简介Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。安装Koa 依赖 node v7.6.0 及其以上的版本npm i koa -s开始做一个
2021-02-03 17:03:53
1449
原创 RESTful
REST 是什么REST 全称 Representational State Transfer ，它不是业界哪个组织规定的规范，它是一种万维网软件架构的风格 ，它是用来创建网路服务的。Representational ：这里的含义是 数据的表现形式 （JSON、XML…），常用 JSON 数据格式State ：当前状态或者数据，描述当前处于那种状态（增、删、改、查）Transfer ：数据传输，数据在互联网上传输，（服务器传到客户端）REST 6 个限制客户-服务器（Client-Serve
2020-10-25 11:12:38
190
原创 React 的高级指引
ContextContext 提供了一种方式，能够让数据在组件数中传递而不必一级一级手动传递，可以把 Context 开成是一种全局变量其实 Context 是 Provider （生产者） 和 Consumer （消费者）共同来实现的，通过这两个标签我们可以使用 ContextReact.createContextconst MyContext = React.createContext(defaultValue);该代码创建了一个 Context 对象。当 React 渲染一个订阅了这个 C
2020-09-22 13:25:51
276
原创 React Hook之基础 Hook
Hook 是什么？它是一个特殊的函数，可以勾入 React 特性（例如：React State 、生命周期函数等）我们都了解传统的 React 定义组件有两种形式：其中一种为 Class ，因为有 state 和 生命周期函数 被称为 有状态组件；另一种为 function 因没有 state 和 生命周期函数 被称为 无状态组件；而 Hook 的 推出就是为了解决 无状态组件 使用 state 和 生命周期函数 的问题。注意：Hook 不能再 class 组件中使用，但这也使得我们可以不使用
2020-09-04 22:00:50
278
1
原创 基于 TS 实现 axios（九）
这一章是最后一章，主要是进行单元测试。jest什么是 jestjest 是 Facebook 弄出来的一个 JavaScript 的测试框架，这个是很好用的。我把的它的官网地址放在了这里：https://jestjs.io/zh-Hans/安装 jest由于我们的项目是使用 typescript-library-starter 初始化的，已经内置了 Jest 的安装，但是安装的版本却不是最新的，我们可以对 package.json 中的相关依赖版本做修改，重新安装来进行更新。{ "@typ
2020-06-15 15:12:06
258
原创 基于 TS 实现 axios（八）
这一章主要完善接口目录结构没有进行修改withCredentials这个功能是可以携带跨越请求的，默认情况下是自动携带同源 cookie 的 ，但是跨域的时候是不可以进行携带的，将 withCredentials 设置成 true 就可以进行携带了。types/index.tsexport interface AxiosRequestConfig { // ... withCredentials?:boolean, //...}core/xhr.ts// ...i
2020-06-11 21:54:52
917
原创 基于 TS 实现 axios（七）
这一章节，主要是写取消请求目录：取消请求有些场景下，我们希望能主动取消请求，比如常见的搜索框案例，在用户输入过程中，搜索框的内容也在不断变化，正常情况每次变化都应该向服务器发送一次请求，但在当用用户输入过快的时候，我们不希望每次变化请求都发出去，通常一个解决方案是前端用 debounce 的方案，比如延时 200 ms 发送请求，这样当用户连续输入的字符，只要输入间隔小于 200 ms，前面输入的字符都不会发请求。但是还有一种极端情况下，后端接口很慢，比如超过1s才能响应，这个时候即使多了 200m
2020-06-02 22:27:15
518
原创 基于 TS 实现 axios（六）
这一章主要实现一些配置化，让用户可以进行配置默认配置transformRequest 和 transformResponseaxios.create API目录：默认配置添加 defaults.ts ：import {AxiosRequestConfig} from './types';const defaults: AxiosRequestConfig = { method: 'get', timeout: 0, headers:{ comm
2020-05-24 21:22:28
576
原创 基于 TS 实现 axios（五）
今天这一章节主要介绍 拦截器目录结构：拦截器先问什么是拦截器？可以从字面意思理解大概就是拦截数据，主要运用在发起请求前或请求返回数据后对数据进行处理，可以运用在登录、处理一些格式化数据之类的。按照请求的时间不同分为：请求前的 请求拦截器，请求后的 响应拦截器在 types/index.ts 中新增代码// ...// 最后加入export interface AxiosInterceptorManage<T>{ use(resolved:ResolvedFn<T
2020-05-23 21:32:22
777
原创 基于 TS 实现 axios（四）
这一章主要实现接口的扩展接口扩展目录结构：core 目录：core 中的都是一些核心代码Axios.ts这个是新加的类，扩展接口，可以向 axios,axios.get,axios.post 那样使用import {AxiosRequestConfig, AxiosPromise,Method} from '../types'import dispatchRequest from './dispatchRequest';export default class Axios{ re
2020-05-12 21:06:17
2369
原创 基于 TS 实现 axios（三）
这一小节，主要是把异常的处理加上处理错误网络错误就在你发送 Ajax 请求的地方，new 出来的 XMLHttpRequest 有一个 onerror 的方法，把你的方法挂上去就可以了。request.onerror = function handleError() { reject(new Error('Network Error'));} 超时错误同样的，在new 出来...
2020-04-28 22:04:11
401
原创 基于 TS 实现 axios（二）
这一次主要是基础功能实现目录结构：仅仅包含 src 下的编码注：get 中的参数是在 url地址上的；post 中的参数是在 data 中的，并不能在 url 地址中url 编码实现了这个功能其实就意味着实现了 GET ，想要实现 POST 就必须加上响应头 header要想传递请求，我们必须将 URL地址 和 参数 按照一定规则拼接起来，不多说，先上代码：// 判断类型是否...
2020-04-20 21:57:24
629
原创 基于 TS 实现 axios（一）
需求分析我们写的 axios 具有以下特点：在浏览器使用 XMLHttpRequest 对象通讯支持 Promise API支持请求和响应的拦截器支持请求数据和响应数据的转换支持请求的取消JSON 数据的自动转换客户端防止 XSPF准备1、需要一个远程仓库需要一个 GitHub 的账号(其他的远程仓库也是可以的)，建立一个仓库。注：GitHub 仓库的地址：https...
2020-04-14 21:43:49
3355
原创 TypeScript 语法学习（二）
类介绍从 ES6 开始，JS 程序员将能够使用基于类的面向对象的方式。 使用TypeScript，我们允许开发者现在就使用这些特性，并且编译后的 JS 可以在所有主流浏览器和平台上运行，而不需要等到下个 JS 版本。使用class Greeter { greeting: string constructor (message: string) { this....
2020-04-06 22:25:13
371
原创 TypeScript 语法学习（一）
TypeScript 是 JavaScript 的超集安装npm i typescript -g使用tsc xx.ts文件路径 输出文件路径数据类型TypeScript 包含 JavaScript 的类型，加了一些类型。只不过声明的时候记得加 :类型名称基本数据类型let a:number = 1;let bool:boolean = true;let b:string...
2020-03-30 21:04:34
278
原创 深入学习webpack 4.x核心用法及其源码（五）
自己编写一个 Loader目录结构：我在 loaders 目录下写了一个 replaceLoader.js 的文件，代码如下：module.exports = function(source) { return source.replace('world', '你好')}其实 Loader 就是一个函数，但是不可以使用 箭头函数 ，为什么？因为箭头函数会改变我们的指向s...
2020-03-22 18:45:34
129
原创 深入学习webpack 4.x核心用法及其源码（四）
这一章主要是一些关于 webpack 打包组件、库的一些配置引入方式我们可以通过配置 webpack 来实现不同方式的引用，不管是 import 、require、AMD方式 引入都可以正常的引入，通过把 libraryTarget设置成 umd 就可以了webpack.config.jsmodule.exports = { entry: './src/index.js', ...
2020-03-14 21:33:36
143
原创 深入学习webpack 4.x核心用法及其源码（三）
想实现更小的打包内容。Tree Shaking介绍webpack 2.0 之后开始提供；Tree Shaking 只支持 ES Module（import） 的引入具体什么意思呢？如果你想导入一个 .js 文件（多个方法）中的一个方法。webpack 默认会将这个文件中的所有代码都打包，这就不是我想要的，我要的是我导入那个就给我打包那个方法，所以我们需要借用 Tree Shaking ...
2020-03-08 16:27:06
163
原创 深入学习webpack 4.x核心用法及其源码（二）
上一小节我简单介绍了 webpack 的一些用法，它的核心用法我还没有介绍，webpack 默认只会对 js 的一些代码进行打包，不可以对 css 样式进行打包，或把二进制图片打包成 data URL，热更新Loader介绍loader 用于对模块的源代码进行转换。例如：typescript 转换成 js，less 转换为 css 等。使用webpack 4.x 有三种使用 loader...
2020-02-11 18:37:13
133
原创 深入学习webpack 4.x核心用法及其源码（一）
注：我是用的是webpack 4.x 版本什么是webpack?它就是一个 模块打包 工具 （Module Bilder）模块加载方式它就是我们使用导入或导出模块的规范，主要有四种：CommonJS （node）就是使用 require 导入，module.exports 导出ES6 模块 （常用）使用 import 导入，export 导出AMDCMD安装最好是安装...
2020-02-09 18:02:59
142
原创 rn 组件总结
虽然最近期末考试，但还是准备梳理一下自己一两个月来学习 React Native 的一些经历Model该组件是提供一种覆盖在其他视图上显示的内容。类似于下图支付宝的选择框遮罩效果。还有一些b站的分享也是使用类似的这种效果文档参见一些官网的把：https://reactnative.cn/docs/modal/官网上说的很好了这个我们一般会和 StatusBar 组件进行配合使用S...
2019-12-22 21:27:44
236
原创 RN中结合Animated封装一个简单的Toast组件
直接上代码import React, {Component} from 'react';import {StyleSheet, Dimensions, Animated, Easing} from 'react-native';import PropTypes from 'prop-types';const HEIGHT = Dimensions.get('screen').height...
2019-12-08 12:03:06
214
原创 RN 中使用 React-Redux
在 RN 中如何使用 React-Redux其实，在 RN 中使用 React-Redux 和 React 中类似，可以说一模一样都是在根元素中使用，<Provider>来包裹根组件，导入 store，将 store 挂载在 Provider 上。代码的结构：.├── src # 程序源文件夹 │ ├── pa...
2019-11-24 23:08:43
532
原创 React-Navigation （RN 的路由）采坑总结
注意：React-navigation 4.x 将 createStackNavigator 等组件放到 react-navigation-stack 中，createBottomTabNavigator 等导航栏放到了 react-navigation-tabs 中，想要使用必须还要先安装它们React-Navigation 底部导航栏实现当页面数量大于等于2时，实现隐藏底部导航栏expo...
2019-11-17 23:09:49
596
原创 Redux 的简单实现
什么是 ReduxRedux 是 JavaScript 的状态容器，提供可预测化的管理，可以让你构建一致化的应用，运行与不同的环境（客户端、服务器、原生应用），并且易于测试。（个人理解：Redux 和 Vuex 很像）优点：可预测：始终有一个唯一的准确的数据源（single source of truth）就是 store，通过 actions 和 reduces 来保证整个应用状态同步，...
2019-11-10 16:45:35
457
原创 JavaScript 数据结构与算法（二）
双向链表特点：可以使用一个 head 和一个 tail 分别指向头部和尾部的节点每个节点都有三部分组成：前一个节点指针(prev)/保存的元素(item)/后一个节点的指针(next)双向链表的第一个节点的 prev 是null双向链表的最后的节点的 next 是nullfunction Node (data) { // 辅助类 this.data = data...
2019-11-03 19:18:35
136
原创 JavaScript 数据结构与算法 （一）
栈先进后出的数据结构：先进去的数据在底部，最后取出，后进去的数据在顶部，最先被取出。如下图所示：function Stack() { this.items = [];}Stack.prototype.push = function(element) { // 入栈 this.items.push(element);}Stack.prototype.pop = fun...
2019-10-27 22:27:17
125
原创 手写一个Vue数据绑定（配图文）
学前准备：Object.defineProperty、观察者模式index.html 的准备：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
2019-10-20 11:41:03
187
原创 模板方法模式
什么是模板方法模式模板方法模式（Template Method） ——基于继承的设计模式模板方法模式是一种典型的通过封装变化提高系统扩展性的设计模式。在传统的面向对象语言中，一个运用了模板方法模式的程序中，子类的方法种类和执行顺序都是不变的，所以我们把这部分逻辑抽象到父类的模板方法里面。而子类的方法具体怎么实现则是可变的，于是我们把这 部分变化的逻辑封装到子类中。通过增加新的子类，我们便能给系...
2019-10-13 16:02:34
159
原创 js 中的组合模式
什么是组合模式其实在上面一篇博客中提到过一个宏命令，而这个宏命令和组合模式比较像。成一组子命令，形成一颗树型的结构（暂且这样理解），只不过组合模式更加复杂而已。图解：注意：组合模式不是父子关系，而是一种聚合的关系。组合对象把请求委托给它所包含的所有叶对象，它们能够合作的关键是拥有相同的接口组合模式除了要求组合对象和叶对象拥有相同的接口之外，还有一个必要的条件，就是对一组叶对象的操作必...
2019-10-07 15:07:02
1610
原创 命令模式
命令模式是什么在 JavaScript 中 命令模式是一种隐性的模式种情况为发出者直接作用于执行者，这样耦合度很高，另外一种情况为，在发出者和执行者之间增加一个用存储命令的命令访问库也即命令命令模式。可以死使得请求发送者和请求接收者之间能够消除彼此之间的解耦关系不要随便使用这个模式一般如果我们的业务中有撤销操作、重新开始的操作，可以考虑使用这个命令，例如在下棋的时候进行的悔棋的操作，重...
2019-09-29 18:37:43
156
原创 发布-订阅模式
什么是发布-订阅模式？发布-订阅模式又被称为观察者模式，指的是对象间的一种一对多的依赖关系，当对象的状态发生改变是，所有依赖于它的对象都将得到通知。在 JavaScript 开发中，一般使用事件模型来替代传统的发布-订阅模式。在生活中，发布订阅模式是非常常见的，例如：在我们取快递的时候，往往是快递到你的那个取货点的时候给你发送了个短信，叫你来取快递，这就是发布-订阅模式。就拿这个例子来说，我们...
2019-09-22 14:59:33
270
原创 JavaScript中的代理模式
什么是代理模式？在现实生活中，可以找到很多使用了代理模式的场景。例如：我想要去租房，一般的做法是不是找个中介，给你介绍房子，这样你可以节约很多的时间和精力，而这时候中介就是代理；如果有商家想找某某明星打广告，是不是一般先找这个明星的经纪人，和这个经纪人商量好一些片酬和细节，而后在把这个合同（结果）交给明星，而这个经纪人就是代理。定义： 代理模式给某一个对象提供一个代理对象，并由代理对象控制对原...
2019-09-13 16:48:53
185
原创 weex 全套环境搭建（配图文）
简介Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架。“Weex” 的发音是 /wiːks/, 和 “Weeks” 同音。Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，在集成了 WeexSDK 之后，你可以使用JavaScript 语言和前端开发经验来开发移动应用。官网：https:...
2019-09-07 20:52:07
795
原创 React 初探
简介React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。官网：https://www.reactj...
2019-08-31 20:02:30
133
原创 js中的策略模式
定义策略模式指的是定义一系列的算法，把它们一个个封装起来。将不变的部分和变化的部分隔开是每个设计模式的主题，策略模式也不例外，策略模式的目的就是将算法的使用与算法的实现分离开来。通常一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体 的算法，并负责具体的计算过程。 第二个部分是环境类 Context，Context 接受客户的请求，随后把请求委托给某一个策略类。...
2019-08-23 17:32:29
865
1
原创 自己做一个在线markdown编辑器
准备请使用以下使用 npm 下载以下的包bootstrap: “^3.4.1”,jquery: “^3.4.1”,marked: “^0.7.0”代码效果图：[外链图片转存失败(img-nJzZLHDz-1564754147043)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1564752584699....
2019-08-02 21:57:24
1241
原创 单例模式
定义保证一个类仅有一个实例，并提供一个访问它的全局访问点。有的时候我们创建一个对象仅仅需要一个，比如线程池、浏览器中的 window 对象等。在 JavaScript 中，单例模式的用途同样非常的广泛。例如，我们做一个提示浮窗，可以让他显示登录成功，登录失败，密码错误等等，无论我们显示多少次提示浮窗，这个浮窗都仅仅创建一次（是唯一的），这样可以有效地节约内存资源。创建注意：单例模式会运用...
2019-08-01 17:32:15
83
原创 js 防抖
什么是防抖（debounce）定义：当调用动作触发一段事件后，才会执行该动作，若在这段时间间隔内又调用此动作则将重新计算时间间隔举一个例子：例如在注册账号时，肯定不能用户每输入一个字符就检查邮箱是否正确，我们应该是等待用户停止输入，比如过了500ms用户都没有再输入，那么就检查此时的邮箱地址格式是否正确，这就是防抖代码展示function debounce(fn,delay) { ...
2019-07-15 13:59:30
105
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人