- 博客(87)
- 收藏
- 关注
RSS订阅原创 文件系统设计 - 开发文件系统Store (下篇)
此篇我们将根据前文的接口类型定义，逐步分析实现文件系统相关的API逻辑，完成文件系统Store部分的开发工作。
2024-09-23 10:51:17
13
原创 文件系统设计 - 开发文件系统 Store (上篇)
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
2024-09-21 11:29:05
532
原创 开篇: 为什么要做这个项目？
经过调研和体验下来，并没有能够找到一款完全符合我预期的编辑器产品，最终决定下来自己来做这么一个编辑器，一方面解决当前的工作问题，也将这个项目的流程和开发实现中遇到的问题提取出来，帮助有需要的人。基于Monaco实现的前端代码编辑器(包括Vue语言的支持)内存文件系统管理，包括文件创建，目录创建，重命名，文件移动等等在线依赖安装，并且能够对编辑器提供包类型提示支持代码搜索，类似VSCode编辑器的文件搜索，内容替换等能力多编辑器代码分栏编辑Prettier 代码自动格式化。
2024-09-07 12:31:09
136
原创 探索Next全栈开发 - 做一个问卷表单低码项目
Nextjs做个全栈问卷星低代码项目，探索当前React全栈开发的相关技术内容，结合低代码表单项目场景，实现一个高颜值，搭建简单快速的问卷星表单项目
2024-07-23 10:40:10
767
原创 从阿里QianKun看前端沙箱隔离
关于QianKun： qiankun（乾坤）是由蚂蚁金服退出的微前端解决方案，基于Single-Spa进行二次开发，用于实现Web应用由单体应用到多个前端项目聚合的应用。而qiankun在Single-Spa上的封装的核心之一就是实现前端的沙箱隔离机制。沙箱： 沙箱其实是一种工具，或者可以理解为一个黑盒，用于隔离当前执行的环境作用域和外部的其他作用域。而在JavaScript中就意味着，在沙箱中的操作被限死在当前作用域，不会对其他模块和个人沙箱造成任何影响。Qiankun的沙箱隔离主要实现了三种模式：
2021-05-29 16:18:58
3984
2
原创 golang Sync包剖析
Go Sync包Sync.MapSync.CondSync.PoolSync.OnceSync.WaitGroupsync.Mapsync.Map主要针对于Map对于并发读写不支持的场景下提出实现的，其原理是通过对map的写操作进行加锁：Sync.RWMutex同时sync.Map实现了读写分离，当对map进行读操作时，通过读read Map, 当read Map中不存在是去dirty map中读取sync.Map的核心数据结构如下：type Map struct { me M
2021-02-17 19:59:29
426
原创 RabbitMQ消息队列在Golang中的简单使用
AMQP，即Advanced Message Queuing Protocol，高级消息队列协议，是应用层协议的一个开放标准，为面向消息的中间件设计。消息中间件主要用于组件之间的解耦，消息的发送者无需知道消息使用者的存在，反之亦然。AMQP的主要特征是面向消息、队列、路由（包括点对点和发布/订阅）、可靠性、安全。RabbitMQ是一个开源的AMQP实现，服务器端用Erlang语言编写，支持多种客户端，如：Python、Ruby、.NET、Java、JMS、C、PHP、ActionScript、XMPP.
2021-02-15 13:05:21
1463
4
原创 Redux-Hooks：玩转redux闭包
使用React-hooks实现一版简易Redux, 主要实现Redux中间件机制，看看Redux作者如何把闭包玩转…首先这里提一下闭包: （我个人对闭包的认识）可能有的人认为函数返回函数就是闭包，但实则不然，简单来说，函数返回函数会形成闭包，但它不算是闭包。 如何理解这句话呢？ 闭包其实和词法作用域相关，函数返回函数在函数被执行后，内层返回的函数在查找变量时走的顺序是从函数定义位置开始往上层查找，所以其定义处开始实则就是到了当前函数的外层函数的函数体内，所以，而这个过程是在程序运行时产生的，所以，闭包是
2020-10-16 19:27:34
381
原创 Nginx + Docker持续集成项目部署
Nginx + Docker持续集成创建三端代码:服务端Server客户端ClientWebHook同步更新脚本(后面将会记录)安装git, 新建project目录下载git代码yum install git -ysudo mkdir /usr/project 目录可自定义sudo ssh-keygen -t rsa -b 4096 -C “1084983891@qq.com” 创建公钥和git进行关联cd /user/projectgit clone git@github.
2020-10-15 14:50:22
359
原创 手写Axios源码——（三）
手写Axios源码 - 三实现defaults默认配置项合并 + 请求响应转化 + cancelToken请求取消实现defaults默认配置项合并:默认配置的合并主要做一些common的headers的配置,将这些全局的默认配置合并到每个请求的headers里面去进行发送：// 在Axios.ts文件中处理// 设定axios请求默认参数:// 这个默认配置的axios参数将会和传递进来的配置参数进行合并let defaults: AxiosRequestConfig = { me
2020-10-10 09:33:25
217
原创 手写Axios源码——（二）
手写Axios源码二: 处理post类请求和串通拦截器1. 添加POST请求post请求和get请求再处理上一个比较大的区别就是需要处理请求的data数据，仅需要再昨天代码的dispatchRequest()方法的基础上添加如下代码即可:// ... (这里只写出有变动的部分: dispatchRequest方法， 之后会将今天处理的完整的代码放到最后)// 解构出data数据:let { method, url, params, headers, data } = config;// ..
2020-10-09 17:09:52
330
原创 手写Axios源码——（一）
Axios (一)axios应该是目前最为常用的前端ajax请求框架， 此次将分四天实现手写Axios源码第一天: 实现基础极简版axios创建基础类型: types.ts文件:// 定义请求方法的类型export type Methods = 'GET' | 'POST' | 'get' | 'post' | 'put' | 'PUT' | 'delete' | 'DELETE' | 'options' | 'OPTIONS'// 定义axios请求的配置类型，及 axios({})方
2020-10-08 11:38:27
379
原创 Redux-Saga: 核心原理剖析
Saga简介: (来自Saga文档介绍)redux-saga 是一个用于管理应用程序 Side Effect（副作用，例如异步获取数据，访问浏览器缓存等）的 library，它的目标是让副作用管理更容易，执行更高效，测试更简单，在处理故障时更容易。可以想像为，一个 saga 就像是应用程序中一个单独的线程，它独自负责处理副作用。 redux-saga 是一个 redux 中间件，意味着这个线程可以通过正常的 redux action 从主应用程序启动，暂停和取消，它能访问完整的 redux state，也
2020-10-06 11:48:59
786
1
原创 剖析Dva原理: 手写Dva
关于Dva:dva 是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架，或者可以理解为react框架插件处理的全家桶.使用Dva:Dva的使用可以前往Dva的官方网站: https://dvajs.com/guide/getting-started.html若是需要快速创建一个React 集成Dva的项目，可以使用dva-cli脚手架工具:npm install
2020-09-24 11:28:10
1276
原创 JWT认证授权原理和简单实现
1. 关于JWT:(1). JWT(json web token)是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准(2). JWT的声明一般被用于在身份提供者和服务提供者之间传递被认证的用户身份信息，以便于从资源服务器获取资源。最为常见的场景就是用户登录认证(3). 因为数字签名的存在，这些信息是可信的，JWT可以使用HMAC算法或者是RSA的公私密钥对进行签名2. 主要的应用场景:(1). 身份认证在这种场景下，一旦用户完成了登录，在接下来的每个请求中包含JWT, 可以用来验证用
2020-09-22 17:46:57
2427
原创 Mobx原理: 手写mobx
手写状态管理库: Mobxmobx是一个状态管理库，类似于redux或者vuex完成状态观察相应相关的处理。mobx使得状态管理更加的简单和透明。由于这篇文章时mobx原理解析，所以关于mobx的使用就不在这里记录。注: 在开始之前，需要先搭建起支持Es7语法的装饰器开发的webpack等开发环境. 这里主要实现Mobx的observable, autorun两个方法.Mbox的observable的方法主要实现的是对状态的Proxy深度代理，使用Proxy对象代理状态对象的属性，同时在auto
2020-09-19 22:59:43
1760
原创 Vue技术栈个人总结整理
Vue知识点整理基本使用插值， 表达式/** * 1. 插值表达式: Vue中使用双大括号语法"{{ }}" * 2. 在{{ }}之间可以写变量和一些简单的js运算,但是不支持语句和流控制 * 3. */ <div>{{message}}</div> <div>{{count / 10}}</div> <script> export default{ data() { return { mess
2020-08-30 15:31:37
1991
原创 小试牛刀: Go操作Mysql
Go Web服务开发: 使用原生和ORM操作Mysql数据库(简单版)1. 原生操作Mysql数据库(依赖mysql的驱动)安装mysql驱动: go get github.com/go-sql-driver/mysql使用Go语言连接处理Mysql的步骤和其他语言是很类似的， 打开数据库 -> 操作数据库 -> 关闭数据库这么三步操作，这里就按照这三步来完成mysql的简单操作 （注意，这里使用的是在beego框架中做的操作，原生写也是一样的）import ( "data
2020-08-11 16:03:00
205
原创 React-Native入坑二：项目React-Navigation + Redux集成
项目集成Redux + React-Navigation开发用过React开发过项目的可能对Redux都有一定的了解吧，他和Vue中的Vuex也是比较类似的，今天这里就说说如何在RN项目中将Redux和React-Navigation进行结合集成到项目中进行开发：注意: 由于上次说过React-Navigation,这里就默认看这篇文展是已经了解了React-Navigation的安装相应的依赖:yarn add redux react-redux react-thunk react-navi
2020-08-05 11:38:09
529
原创 React-Native入坑第一天: 使用React-Navigator配置APP页面导航
React-Native入坑第一天: 使用React-Navigator配置APP页面导航前置: 为什么记录这篇文章,主要原因是我在配置React-Navagator导航的时候发现现在网上的很多的关于React-Navigator的配置教程都比较老了，和现在最新的React-Navigator不相对应，于是才转身到官网，跟着官网进行配置，并对这次使用React-Navigator的经历做一次记录:在老版本的React-Navigator中对于APP页面路由的配置一般从react-navigatio
2020-07-30 16:19:30
640
原创 手写Vue-router源码:（hash模式简易版）
手写Vue-router源码:（hash模式简易版）用户使用Vue.use()时，实际执行了模块中的install方法，而install方法可以接收到Vue的实例,而此时既可以在install方法中为Vue的实例上使用mixin去扩展相应的内容let Vue;// 创建Vue-Router的类class MyRouter{ static install(_Vue){ Vue = _Vue; Vue.mixin({ beforeC
2020-07-25 16:02:18
508
原创 Vue框架SSR自制轮子
使用Vue + Koa搭建服务端渲染 (项目使用包管理工具yarn)服务端渲染简介:客户端渲染不利于SEO优化服务端渲染是可以被爬虫抓取到的，客户端异步渲染则难以被爬虫抓取SSR直接将渲染好的html字符传递给浏览器， 大大加快了首屏加载的时间SSR会占用服务端更多的CPU和内存资源一些常见的浏览器API将无法正常使用在Vue中支持beforeCreate和created两个生命周期安装服务端koa依赖: yarn add koa koa-router koa-static安
2020-06-08 12:36:06
438
原创 深入了解Express: 挑战手写Express(3)，处理模板引擎
之前我们完善了Express的路由系统，以及中间件的支持，这也算是完成了Express中比较核心的部分，今天完成模板引擎的渲染后就不往后面继续了，因为后面的很多东西也不是太麻烦，大家可以自己去研究研究源码进入今天的正题，Express模板引擎渲染: 通俗的说，其实有点类似于SSR吧(个人觉得),当然肯定还是有区别的，我们先抛开不管，服务端模板引擎渲染其实就是将数据整合进入到前端html页面，将模板引擎中使用到的js语法，需要的服务端 变量进行替换成真实的数据信息整合到html文件中返回给客户端，一般
2020-06-02 17:43:04
261
原创 深入了解Express:挑战手写Express(2), 支持中间件
这里将在上次路由的代码上进行变更，所以不会给出完整的代码，只会给出删改的部分，但是思路会说到的:Express中是支持中间件机制的，而中间件其实就是一个函数，在express执行过程中，中间件使用next()进行串联，而我们上次实现的路由机制中，我们也实现了Router层，Route层的next方法，使得在路由匹配的过程可以逐层向下匹配。 所以这里的实现机制就是利用上次的 路由实现，将中间件也和路由放到一个stack中，使得在这个匹配中可以使用一套next执行机制串联中间件和路由。除了中间件
2020-05-27 17:38:02
190
原创 深入了解Express：挑战手写Express(1)，实现路由
Express是Node.js服务端开发中一个比较完善的框架了，其中很多的思想理念还是很值得我们深入学习的，这一专题开始，我们开始尝试实现手写Express框架，对Express进行深入解析这里将以需求带动开发的方式逐步对Express进行实现,所以这里先简单写一个Express的例子:const express = require("express")const app = express();app.get("/", function(req, res, next){ console.l
2020-05-26 19:12:31
401
原创 React源码剖析：手写React DOM DIFF比对
可能用过React或者Vue这样的前端框架的人可能都应该清楚，在React或者Vue中完成节点的更新渲染最重要的应该就是这DOM DIFF的比对了，它实际的需求就是尽可能的复用页面上已经创建的老节点，做一些补丁操作使得尽可能的复用已有的DOM，从而提高渲染更新的性能。之前有实现了Vue中的DOM DIFF的比对，但是React中的DOM DIFF和Vue中还是有比较大的区别的，那就来看看吧！：：React中的DOM DIFF的比对采用逐层比对，深度优先的比对方法，及从虚拟DOM树的根节点开始，先遍历节
2020-05-24 12:27:49
512
原创 React源码剖析：手写React合成事件机制
之前剖析过Vue中的AST的实现和DOM DIFF的实现。这里来到React,说说React的事件机制在看React源码之前，我一直认为React中的事件实现和原生的事件绑定差别不大，但是真正阅读源码后，发现和我最初的想法是大相径庭的：React采用合成事件，所谓的合成事件，简单来说就是React中的事件绑定是被React框架处理过的，它将事件的绑定作用在document对象上，类似事件代理的模式，同时劫持了事件对象，做了一层封装优化，也即是syntheticEvent，当然这里也就会出现了React中
2020-05-18 23:11:15
325
原创 Vue源码剖析(二)：实现DIFF算法
DIFF算法应该是Vue框架中比较核心的一点了，框架采用DIFF算法对抽离的新旧虚拟DOM进行比较，尽可能复用页面也有的真实DOM，找出不同的DOM进行补丁或者添加新的DOM操作。总之，DIFF算法的原则就是尽可能少的操作DOM,即是操作DOM，也尽可能的进行优化。首先先简述下具体的实现思路:如图，虚拟DOM的对比主要分五种情况:当新旧虚拟DOM的首元素相同是，将新旧DOM的首指针加一，向后移动一次继续比较新旧DOM的当前首指针指向的元素，如果不同执行下一种比较当新旧虚拟DOM不满足第一种比
2020-05-16 10:32:35
310
原创 Vue源码剖析(一)：抽离AST抽象语法树
Vue源码剖析，针对Vue2.x的Vue框架源码，描述相应的核心实现并简单实现具体的流程今天说的是如何将编写的模板语法，抽离成框架处理的AST语法树Vue是一个面向视图层的渐进式前端框架，它推荐用户使用不同的状态控制页面元素，而减少用户对DOM元素的直接操作。在Vue中，比较核心的两块内容：虚拟DOM， DIFF算法。关于虚拟DOM：虚拟DOM其实直白一点的说法就是使用js对象来描述我们的真实DOM元素及元素间的关系。而关于AST抽象语法树则是使用JS对象来描述原生的语法，二者稍有区别：// A
2020-05-15 21:15:13
1469
原创 微前端(Single-spa)框架在Vue项目中落地
关于微前端这里做一个简单的介绍："微前端构架"是一种使用微服务模式构建前端应用的方式，微前端中的理念是将一组组服务拆分成相互解耦的模块，然后通过一个统一的父模块进行整体的调度。同时在微前端的架构中，我们可以同时使用React, Vue, Angular，甚至是原生的Js,Jquery开发的应用都可以通过微前端进行调度。关于微前端的框架:微前端的框架现在比较成熟的是 “Single-spa” 和 “QianKun”， 而"QianKun"是基于Single-spa实现的，所以使用"QianKun"可能会
2020-05-10 19:46:16
4537
3
原创 设计模式(8): 状态模式
这次记录的是设计模式中的状态模式，也是介绍Js中常用的设计模式中的最后一个，一起来看看吧!什么是状态模式状态模式的使用优势如何实现状态模式使用javascript-state-mechine状态管理插件做一个简易的Promise这里还是按照以上几个方面对状态模式进行记录：什么是状态模式：在实际的代码开发中，大部分的代码实现都是基于对数据的操作控制，根据不同的数据展示出不同的抽象...
2020-04-24 10:42:34
136
原创 设计模式(7): 迭代器模式
迭代器模式的定义迭代器模式的使用场景迭代器模式的优缺点迭代器模式的实现这里将从以上几个方面记录迭代器模式迭代器模式的定义：其实迭代器模式的定义时很简单的，它就是提供一种循序访问一个聚合对象内的各个元素，但又无需暴露对象内部的表示。这里注意的是迭代的对象需要是一个有序的对象集合，而我们常用的object则不满足这个条件，常见的可迭代对象如：Array, Map, Set, Stri...
2020-04-22 09:23:35
259
原创 设计模式(6):观察者模式
关于观察者模式应该是在js中使用最为广泛的一种设计模式了，这里将从以下几个方面记录观察者模式:观察者模式的定义观察者模式的常见的使用场景观察者模式的简单实现观察者模式的设计原则分析何为观察者模式：观察者模式是一种行为模式，比较正式一点的定义是：当一个对象的状态发生变化时，能够通知其他关联的对象进行状态的刷新。举一个生活中的例子：当我们去饭店吃饭时，点好饭菜之后就可以坐在一旁等待，...
2020-04-21 21:22:33
172
原创 设计模式(5):代理模式
模式切入：何为代理模式代理模式的使用场景使用js实现一个简单的代理模式列举代理模式的几种实例何为代理模式：比较正式一点的定义是： 代理模式是为一个对象提供一个代理品或者占位符，以便于对它进行访问控制通俗点来说，代理模式就是为一个对象添加一个中间代理层，所有对于该对象的操作都需要经由这个代理层，代理层需要提供和原本对象一样的方法，让使用者使用时感觉上和直接操作该对象是一样的。这就...
2020-04-20 09:58:35
127
原创 设计模式(4): 装饰器模式
模式导入以一个简单的例子让我们来了解一下装饰器模式：已有一个类完成相应的功能，同时，需要为这个类或者方法添加一些额外的功能或者属性，我们可以将这个已有的类或者方法进行包装，包装的过程中不能够影响类或者方法原有的内容，所做的只是额外的装饰处理。以一个生活中的例子来看，装饰器模式就好比是给手机套手机壳，只是为了给手机起一个保护作用，但并不会影响手机的正常使用官方概念装饰器模式（Decorato...
2020-04-17 11:01:06
113
原创 设计模式(3):适配器模式
问题引入：何为适配器模式适配器模式的优势适配器模式的使用场景适配器模式的代码简单实现这里将从以上几个方面记录适配器模式的相关内容：何为适配器模式适配器模式的定义是将一个类的接口转换为客户需要的另一个接口，使得由于不兼容而不能进行工作的一个类可以进行正常的工作。一个简单的生活例子就是我们使用两脚的插头无法在三角的插线孔上进行充电，所以需要一个将两脚转化为三角的一个适配器进行辅助处...
2020-04-16 09:58:40
227
原创 设计模式篇(2):单例模式
问题导入何为单例模式单例模式存在的优势是什么单例模式的应用场景有哪些Js中如何实现单例模式Ts中单例模式又应该如何实现我将以以上五个方面介绍单例模式的内容：何为单例模式：单例模式也是我们23三种设计模式中的一种代码编写的模式，根据具体的编码需求，可以保证一个类只会有一个实例对象，所有拿到这个类的实例对象都是完全相同的 ---->这里给一张单例模式的简单UML类图：单...
2020-04-15 10:03:46
250
1
原创 设计模式篇(1): 工厂模式
设计模式并不是某一门语言所特有的内容，它只是一个面向对象开发的代码设计规范，我们常说设计模式，其实设计模式并不是一个内容，我们需要将它分开：及设计，模式。给定的一个业务需求，我们需要先有一个好的需求分析和抽象设计，其次才是根据我们的设计采用一种比较合适的模式去进行编码实现。（当然对于设计没有办法去简单的说清楚，它应该是一种抽象的思维，需要从实际的生产中去不断的积累的过程，所以就直接记录一下学习设计...
2020-04-14 17:44:09
81
原创 TypeScript的装饰器
首先我们来说一下什么是装饰器，其实TS中的装饰器和很多的静态语言(Java,C#)等中的装饰器其实是一样的，它会为被装饰的内容添加一些特定的内容，而装饰器本身就是一个方法，它需要遵循两个条件： 1. 不能够修改被装饰内容的源代码 2. 不能够修改被装饰内容的调用那么，我们进来就来说说在Ts中如何使用装饰器:(注：在TS中使用装饰器之前我们需要现在tsconfig.json这个配置文...
2020-03-31 18:22:26
348
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人