- 博客(196)
- 收藏
- 关注
RSS订阅原创 智慧PG集成开发平台pgting-cli发布了
pgting-cli是一款node集成工作台，无需配置，开箱即用，pgting-cli主要提供本地组件开发环境，面板可视化设计等，和线上环境完全相同，数据一键同步。
2023-06-06 00:46:08
325
原创 antd扩展动态表单formake，支持事件配置和复杂嵌套
formake 是一款动态表单生成器，基于 react(16.10 以上), antd(5.x)开发，继承了 antd 组件接口，并在此基础上添加了扩展。支持事件配置和多层嵌套，可快速生成复杂表单。
2023-05-28 00:25:34
731
原创 智慧PG(pgting)，一款拖拽式智能页面搭建系统
智慧PG(pgting)主要定位于中小企业，个人团体，采用拖拽式搭建，设计支持数据可视化大屏搭建，中台搭建，h5页面搭建，采用线上沙箱渲染架构，支持多框架融合，系统设计理念是资源整合，开箱即用，降低系统颗粒度，组件共享，简化配置。不同的业务场景会有不同的组件，除了一些通用的组件，业务组件的开发会增加成本，而在大量业务中，有些组件是可以通用或者类似的，智慧PG提供了组件共享机制，用户可以将自己研发的组件设为公共组件，也可以使用公共组件搭建系统，这是互利共赢的。那么能不能有一款小而美的系统平台呢。
2023-05-26 20:20:41
1144
原创 从0实现react框架，React Fiber架构和Fiber Diff算法
react框架是目前最为流行的前端框架之一，尤其在很多大厂，应用更为广泛。相对于一些mvvm框架，react上手需要一定的技术基础，但掌握后，编码体验和性能是很不错的。react整体思想是函数式编程，可以很大程度上减少代码重复，易于并发编程，react内部实现了一套调度机制，给不同执行任务划分优先级，从高到低循环渲染（Fiber），同时引入一套Fiber Diff算法，最大限度的使网页平滑，性能最优。react的源码在不断的迭代后，相对不那么好理解，那么怎么才能快速理解并掌握react底层运行原理呢，近
2022-05-19 15:11:25
1121
原创 从设计原则，程序实现目标谈谈前端常用的10种设计模式和应用场景
总括：近几年前端技术迭代迅速，除了ES6，Vue，React，Angular，各种企业级框架也层出不穷，比如egg，umi，nuxt，next，koa等等，还有redux, vuex, Mobx, Flux，dva等状态管理库，这些给前端开发工作带来了极大的简化，同时也给开发者很大的学习挑战。但是想要在前端架构层面有一定的高度，这些都是必须要掌握的。除了这些，还要掌握工程化，自动化，服务端等。那么这些类库或者框架剥离业务之后，其背后的设计思想以及遵循的底层程序原理是怎样的呢？很多开发者对于知识的掌握
2020-07-31 22:15:02
1552
原创 树结构使用实例---实现数组和树结构的转换
树是一种非散列数据结构，和非散列表一样，它对于存储需要快速查找的数据非常有用。树是一种分层数据的抽象模型。现实生活中最常见的树的例子是家谱，或是公司的组织架构本文将讲述一个实例，构造一棵树来实现数组和tree的相互转换，这在前端树结构中是经常遇到的。需求场景：将数组转化树结构，并将树结构转化为数组数组const list= [ { id: 1001, parentId: 0, name: 'AA' }, { id: 1002, parentId: 1001, ...
2020-07-19 06:48:06
3420
原创 position:fixed怎么参照祖先元素定位以及transfrom属性对元素布局的影响的原理
position:fixed通常情况下是相对于窗口定位的，但是有一种情况，position:fixed是相对于祖先元素定位，而此时的定位层级（z-index）也是相对于祖先元素的。这种情况就是让祖先元素发生变换，也就是transfrom属性发生改变。实例：<div class='parent'> <div class='child'>我固定了吗？</div> </div><div class='parentSibling'>
2020-06-15 23:22:22
2553
原创 lerna开发流程（入坑和出坑）
1, lerna publish发布失败后怎样操作，如下：采用 from-packagePositionalsbumpfrom-gitIn addition to the semver keywords supported bylerna version,lerna publishalso supports thefrom-gitkeyword. This will ide...
2020-06-14 08:08:30
18007
原创 在前端开发中，有哪些因素会导致页面卡顿
前端开发不像后端那样，很少出现有大量算法的场景，但是前端性能也是需要优化的。好的代码是保证网页平稳高性能运行的基础，结合以往开发中遇到的场景，本文对前端网页卡顿的原因进行了梳理和分析，并给出了对应的解决方法。前端页面卡顿的原因有很多，从渲染机制和运行上可以分为两大类，分别是： 渲染不及时，页面掉帧 网页内存占用过高，运行卡顿 两种类型又可细分如下：渲染不及时，页面掉帧长时间占用js线程 页面回流和重绘较多 资源加载阻塞内存过大导致的页面卡顿内存泄漏导致内存过大
2020-06-06 16:54:44
10862
原创 网页dom元素过多为什么会导致页面卡顿
在做移动端或者其他无限下拉加载时会遇到不断插入dom的场景，随着dom的增多页面会出现卡顿，遇到这种情况开发者会采取一系列的优化措施，比如复用dom等，那么到底为什么会出现卡顿呢？本文将探讨这个疑问。网页卡顿，那肯定是渲染延迟或者cpu占用过高。看下面一个实例：...
2020-06-05 22:50:45
12015
原创 @babel/cli使用总结
@babel/cli是babel自带的命令行集成工具，本文对其常见的使用api进行了总结。很多情况下我们开发人员看着官网介绍也可以很快的使用该功能，但是为什么还要记忆这些呢。除了使用时可以快速实现意外，还有两点比较重要的一：通过总结可以加深记忆，有利于于新知识的接收二：形成知识网络，单个的知识是孤立的，网状知识是有迹可循的安装使用npm安装到本地，可以全局安装，也可以使用npxnpm install --save-dev @babel/core @babel/cli语法b
2020-05-19 17:55:06
1415
原创 在vue文件中使用render函数封装实现动态组件
近期遇到一个vue项目中的table页面，数据和模板强耦合在一个页面中，看起来比较复杂，维护较不方便，而该页面又重复性较高，于是尝试在vue中用循环渲染dom元素，抽离公共部分配置化，很不幸的是v-for并不支持动态的dom元素插入，那么怎么用vue实现动态dom元素节点的动态渲染呢。联想到react的实现方式，想到vue的render函数，vue中的render号称可以像react一样写页面，有了想法就开始实施。render函数是比较好理解的，但是在render中如何实现插槽，事件点击，Scope,.
2020-05-18 20:18:08
6829
1
原创 数据结构系列-------js五种常见排序方式总结和性能测试
js排序方法有很多，本文就常用的几种进行了总结，分别是快速排序，冒泡排序，插入排序，归并排序，选择排序。实例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>5种排序方式
2020-05-12 20:00:41
332
原创 egg生命周期
egg作为企业级node框架，在封装的基础上，又约定了一些规则，集成在了框架之中。像plugins, service，extend等，同时，egg为了让用户能够更好的参与应用启动过程，实现了一套生命周期的机制。egg生命周期提供了统一入口文件app.js，这个文件返回一个boot类，在boot类中提供了不同的生命周期函数。生命周期一共有7个，从配置文件加载，到文件加载，到插件启动，wor...
2020-05-04 15:19:26
1495
原创 egg插件机制原理
egg提供了丰富的插件，也提供了自定义插件的api，那么egg插件到底是如何被框架识别并加载的呢。了解这个，对开发者来说，可以更好的使用插件，抽离通用插件。...
2020-04-29 09:57:25
575
原创 形象化解读js事件循环以及node事件循环和浏览器事件循环的区别
node和浏览器都是js运行的环境，二者都给js提供了一个很强大的功能，事件循环。那么什么是事件循环呢，简单讲就是在单线程中为了实现程序的高效运行而设定的事件执行机制...
2020-04-28 01:12:35
2350
原创 node核心EventEmitter的应用总结
EventEmitter是node中应用非常广泛，不管是框架，还是脚手架，还是插件都可以看到eventEmitter的身影。比如我们去查看vue, react， webpack， egg, koa等框架或者插件的源码，都可以看到内部使用到了EventEmitter。那么到底什么是EventEmitter呢。总体介绍：进入node.js官网，eventEmitter的介绍有一大堆api，很多...
2020-03-30 20:36:15
704
原创 node在大前端中的应用
关于node的使用已经很久了，使用范围也很广，似乎有前端的地方就有node，那么来思考一个问题，node到底是用来干嘛的呢？本文从五个大的方面对该问题进行了解释。我们知道node的出现，让前端开发既ajax之后，有了全新的面貌，在开发效率，性能等层面都有质的提升。归纳一直是知识提升的重要一环，参考了很多内容，本文对node的应用做了一个入门级的总结。读完本文，希望可以清楚地认识到node在...
2020-03-30 19:17:27
1584
原创 vue-cli脚手架 vue和vue-cli-service命令详解
createvue create 后面有很多参数：源码如下：program .command('create <app-name>') .description('create a new project powered by vue-cli-service') .option('-p, --preset <presetName>', 'Skip ...
2020-03-16 21:01:58
9175
原创 node 第三方模块系列------minimist轻量级的命令行参数解析引擎
总体介绍：node.js的命令行参数解析工具有很多，比如：argparse、optimist、yars、commander。optimist和yargs内部使用的解析引擎正是minimist，代码量也很少（只有几百行），非常适合研读。使用apilet parseArgs = require('minimist')let argv = parseArgs(args, opts={})...
2020-03-14 14:22:47
2019
原创 node 第三方模块系列----fs-extra 文件操作相关工具库
fs-extra模块 是基于fs 的文件操作相关工具库，封装了一些fs实现起来相对复杂的工具，主要使用方法如下：使用：let fse = require('fs-extra')常用api:1. copy 复制文件copy(src, dest, [option],callback)2. emptyDir 清空目录确保一个目录是空的。如果目录非空删除目录内容。如果目录不...
2020-03-14 11:24:37
2857
原创 vscode中 vue ESlint自动修复环境配置详解
很久没有写vue的项目，近期加入了教育疫情项目的开发，重新启用vue，这里就vue代码自动修复环境的安装，以及可能遇到的vscode安装的插件：ESlint, Vetur,eslint-plugin-html (全局安装){ "window.zoomLevel": 0, "terminal.integrated.rendererType": "dom", "ed...
2020-03-13 14:58:28
2692
原创 vue插槽slot的简单理解
vue中插槽的使用非常广泛，本文就插槽的使用和理解简单总结。从字面理解插槽是预先插入一个代码空间，用于后期塞入数据。插槽分类匿名插槽 ------------------ 匿名的代码空间具名插槽 ------------------ 带有命名的代码空间作用域插槽 ------------------- 带有数据的代码空间插槽使用示例匿名插槽...
2020-03-09 19:14:36
682
1
原创 关于class类链式继承，实例化及react super(props)原理
class定义类是es6提供的新的api，比较直观，class类继承也有着一定的规律性，在egg, webpack等库的源码中有着很多的应用场景。结合一些初学者可能遇到的难点，本文主要对其链式继承进行总结，关于super关键字的使用请参考我的其他文章es6中super关键字的理解。class定义class App { constructor(options){ s...
2020-01-15 19:17:41
715
原创 react16 Fiber架构的实现
Fiber概念和背景为什么叫fiber对于进程（Process）和线程（Thread）的概念，我们应该比较了解，在计算机科学中还有一个概念叫做Fiber，英文含义就是“纤维”，意指比Thread更细的线，也就是比线程(Thread)控制得更精密的并发处理机制。react把最新的调度架构取名为fiber，也意为实现更精密的任务控制。但是react fiber和这个fiber是不同的两个概念。...
2020-01-14 19:25:36
640
原创 jest单元测试实践总结及react单元测试
jest 是facebook推出的一款测试框架，集成了 Mocha，chai，jsdom，sinon等功能。基本用法和 mocha 和 chai 的功能很像，甚至可以兼容部分 mocha 和 chai 的语法。可以这么写import React from 'react'import { shallow } from 'enzyme'import CommentItem from ...
2020-01-03 17:10:25
1383
原创 事件监听和触发Signal信号模式使用文档及Signal，redux-saga结合使用实例
js中常见的事件触发模式有订阅发布者模式，代码简洁，使用方便，但是这种模式并不能自动完成（除非把value作为常量或者变量存储），相对的Signal信号模式不需要创建常量来存储字符串值，轻松控制事件广播和订户，接下来是对该模式的一些总结。使用：var Signal = require('signals');var mySignal = new Signal();mySignal实例...
2020-01-02 15:57:42
951
原创 webpack-dev-ser原理解析
webpck-dev-ser作为开发时的服务非常方便，本文将对webpack-dev-server从原理层次解析，来看看它是如何实现服务和热更新的。1，webpack-dev-server的服务原理基于express，搭建了一个http服务，根据路由返回不同的内容2，静态资源服务webpack-dev-server使用了webpack-dev-middleware，改变了webpa...
2019-12-21 19:34:55
984
原创 http2.0相比http1.0的优势
http2.0所有数据以二进制进行传输，同一个连接里面发送多个请求不再按顺序来头信息压缩以及等提高效率的功能，头压缩减少带宽，请求html同时提前推送js,css资源。http1.1之后，发送一个http请求，会建立一个tcp连接，该链接在请求返回后不会关闭，下次发送其他http请求，会继续使用该链接。抓包工具：wireshark （传输层， 网络层都可以抓），Charle...
2019-12-20 12:30:46
356
原创 关于es6 module和common.js互通的babel规范
es6module和common.js互通时，最大的问题是能否正确引用到default的值关于该issue，babel给出了官方解释，这里做一个记录总结：核心代码：//help _interopRequireDefault 函数。function _interopRequireDefault(obj) { return obj && obj.__esMod...
2019-12-20 12:26:03
403
原创 使用react-hooks实现异步获取数据的封装
react-hooks作为react新的api，深受广大开发者的欢迎，不仅简化了代码，嵌套，还更符合react函数式编程的思想。react-hooks并不复杂，但是初期可能很多多学并不理解，不能从class写法转变过来。其实class的多个生命周期是可以通过hooks模拟实现的，且在服务端渲染时，hooks也有相对的优点，比如class在服务端渲染时存在的生命周期多次触发。本文就之前项目中相对复杂...
2019-12-18 11:46:15
4317
1
原创 egg核心挂载流程（图解）和扩展原理，设计原理
egg作为一个可以高度扩展的框架，使用起来非常方便。之前介绍了egg的启动流程，本文主要对egg框架的加载原理进行解析，从设计层面谈谈egg，并把egg的加载流程归结为一张图。简易挂载流程分析：从egg的启动流程已经找到了egg的入口文件：1，核心：egg的app_worker_loader中的load方法，而AppWorker又继承自egg-core包下的EggLoader，相当...
2019-11-25 17:48:32
1126
原创 javascript中实例，类，实例的原型，类的原型，以及constructor，prototype的区别和联系
javaScript中实例，类，原型等是js语言的核心概念，在充分理解并掌握的情况下，才能在编程中得心应手。近期进行知识归类总结，对js中的实例，类，类的原型，实例的原型，类的prototype，实例的prototype进行一个总结。核心概念：prototype指的是原型对象， __proto__指的是原型看一个简单的例子：class a{ constructor(optio...
2019-11-25 16:54:52
1147
原创 decorator(装饰器)总结及第三方包介绍
decorator作为一个提案，经过了多次修改，还未正式发布，不过在实际编程过程中，装饰器已经有了很多的应用。装饰器很受欢迎的主要原因是其借鉴了java中注解的概念，让代码结构性和可读性大大增强。装饰器的意义：更好地解释类的相关属性和概念，将不同的功能归类区分，便于维护和扩展。demo:@Component({ tag: 'my-component', styleUrl: '...
2019-11-24 23:48:33
428
原创 egg框架启动过程和核心入口（图解）
egg启动分为单进程启动和多进程启动两种方式部分源码：/** * Start egg application with cluster mode * @since 1.0.0 */exports.startCluster = require('egg-cluster').startCluster;/** * Start egg application with single...
2019-11-21 18:14:08
3020
原创 图解koa启动流程
koa作为express之后的后起之秀，深受开发者喜爱，尤其是async await的写法，更是使代码看起来结构清晰。那么怎样才能更好的掌握koa的，首先要了解其设计思想，加载流程，设计思想在其他文章中已经介绍，本文主要讲总的流程。通过几个项目的实践下来，将koa的启动流程总结为下图。说明：下图为总流程，不包括具体细节，比如路由中间件流程，ctx实现流程等。...
2019-11-20 12:30:40
733
原创 实现一个真正的babel插件（不仅仅是替换字符）及 ast操作原理
babel作为当前源码编译的重要工具，有着很重要的地位。babel编译的核心流程是，先把代码解析为AST语法树，再遍历AST语法树并执行操作，最后根据规则生成代码。流程不复杂，复杂的是如何操作AST语法树，以及如何编写babel的插件。网上有很多帖子在讲如何编写babel插件，但是讲的都比较浅显，看过之后并不能真正意义上去编写babel插件。在实际的项目中，我们需要的插件不仅仅是替换字符串或者...
2019-11-15 13:01:40
1544
原创 new,create,class,extends,{}创建对象的原理及原型链查找规则
首发：https://zhuanlan.zhihu.com/p/91439580原型，原型链属于js语言的基础，近期面试了很多同学，发现有很大一部分并不清楚原型，隐式原型，原型链之间的关系，加上自己在业务中分析源码遇到的一些问题，秉着知识回顾和总结的初心，详细总结下js原型相关的知识，有不足之处，还望大家补充。几个概念：原型：prototype隐式原型：__proto__本文将...
2019-11-12 22:13:16
400
原创 node delegates解析及koa中应用
这是一个用来提升内部属性上的方法或者属性的包，换句话说就是把对象内部的属性暴露到根属性上。原理：通过原型链继承达到效果APIDelegate(proto, prop)用于创建一个 delegator 实例，用于把 proto 接收到的一些操作委托给它的 prop 属性进行处理。Delegate.auto(proto, targetProto, targetProp)根据 t...
2019-11-11 18:40:02
308
原创 编程思想系列——使用函数副作用实现程序缓存设计
函数式编程里面有一个重要的概念，纯函数，即怎样的输入有怎样的输出，并且不依赖于外部变量，同时函数也不会产生任何可观察的副作用。那么什么是函数副作用呢？函数副作用是指函数在正常工作任务之外对外部环境所施加的影响。具体地说，函数副作用是指函数被调用，完成了函数既定的计算任务，1，但同时因为访问了外部数据，尤其是因为对外部数据进行了写操作，从而一定程度地改变了系统环境。2，函数的副作用也...
2019-11-05 14:37:51
209
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人