架构
文章平均质量分 91
qdmoment
全局掌控,剖析网站终端建设
展开
-
智慧PG集成开发平台pgting-cli发布了
pgting-cli是一款node集成工作台,无需配置,开箱即用,pgting-cli主要提供本地组件开发环境,面板可视化设计等,和线上环境完全相同,数据一键同步。原创 2023-06-06 00:46:08 · 360 阅读 · 0 评论 -
antd扩展动态表单formake,支持事件配置和复杂嵌套
formake 是一款动态表单生成器,基于 react(16.10 以上), antd(5.x)开发,继承了 antd 组件接口,并在此基础上添加了扩展。支持事件配置和多层嵌套,可快速生成复杂表单。原创 2023-05-28 00:25:34 · 827 阅读 · 0 评论 -
智慧PG(pgting),一款拖拽式智能页面搭建系统
智慧PG(pgting)主要定位于中小企业,个人团体,采用拖拽式搭建,设计支持数据可视化大屏搭建,中台搭建,h5页面搭建,采用线上沙箱渲染架构,支持多框架融合,系统设计理念是资源整合,开箱即用,降低系统颗粒度,组件共享,简化配置。不同的业务场景会有不同的组件,除了一些通用的组件,业务组件的开发会增加成本,而在大量业务中,有些组件是可以通用或者类似的,智慧PG提供了组件共享机制,用户可以将自己研发的组件设为公共组件,也可以使用公共组件搭建系统,这是互利共赢的。那么能不能有一款小而美的系统平台呢。原创 2023-05-26 20:20:41 · 1221 阅读 · 0 评论 -
从0实现react框架,React Fiber架构和Fiber Diff算法
react框架是目前最为流行的前端框架之一,尤其在很多大厂,应用更为广泛。相对于一些mvvm框架,react上手需要一定的技术基础,但掌握后,编码体验和性能是很不错的。react整体思想是函数式编程,可以很大程度上减少代码重复,易于并发编程,react内部实现了一套调度机制,给不同执行任务划分优先级,从高到低循环渲染(Fiber),同时引入一套Fiber Diff算法,最大限度的使网页平滑,性能最优。react的源码在不断的迭代后,相对不那么好理解,那么怎么才能快速理解并掌握react底层运行原理呢,近原创 2022-05-19 15:11:25 · 1178 阅读 · 0 评论 -
从设计原则,程序实现目标谈谈前端常用的10种设计模式和应用场景
总括:近几年前端技术迭代迅速,除了ES6,Vue,React,Angular,各种企业级框架也层出不穷,比如egg,umi,nuxt,next,koa等等,还有redux, vuex, Mobx, Flux,dva等状态管理库,这些给前端开发工作带来了极大的简化,同时也给开发者很大的学习挑战。但是想要在前端架构层面有一定的高度,这些都是必须要掌握的。除了这些,还要掌握工程化,自动化,服务端等。那么这些类库或者框架剥离业务之后,其背后的设计思想以及遵循的底层程序原理是怎样的呢?很多开发者对于知识的掌握原创 2020-07-31 22:15:02 · 1628 阅读 · 0 评论 -
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 · 18422 阅读 · 0 评论 -
@babel/cli使用总结
@babel/cli是babel自带的命令行集成工具,本文对其常见的使用api进行了总结。很多情况下我们开发人员看着官网介绍也可以很快的使用该功能,但是为什么还要记忆这些呢。除了使用时可以快速实现意外,还有两点比较重要的一:通过总结可以加深记忆,有利于于新知识的接收二:形成知识网络,单个的知识是孤立的,网状知识是有迹可循的安装使用npm安装到本地,可以全局安装,也可以使用npxnpm install --save-dev @babel/core @babel/cli语法b原创 2020-05-19 17:55:06 · 1441 阅读 · 0 评论 -
node在大前端中的应用
关于node的使用已经很久了,使用范围也很广,似乎有前端的地方就有node,那么来思考一个问题,node到底是用来干嘛的呢?本文从五个大的方面对该问题进行了解释。我们知道node的出现,让前端开发既ajax之后,有了全新的面貌,在开发效率,性能等层面都有质的提升。归纳一直是知识提升的重要一环,参考了很多内容,本文对node的应用做了一个入门级的总结。读完本文,希望可以清楚地认识到node在...原创 2020-03-30 19:17:27 · 1701 阅读 · 0 评论 -
关于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 · 424 阅读 · 0 评论 -
BRD,PRD,MRD分别代表什么及它们在互联网领域的地位
互联网领域有很多的专业名词,开发中用到的有PD,TL等,网页监控用到的有pv,uv等。而在用互联网解决商业领域的一些问题时,就会涉及到BRD,PRD,MRD.BRD和MRD,PRD一起被认为是从市场到产品需要建立的文档规范。BRDBRD是产品生命周期中最早的文档,再早就应该是脑中的构思了,其内容涉及市场分析,销售策略,盈利预测等,通常是供决策层们讨论的演示文档,一般比较短小精炼,没有产...原创 2019-08-01 14:29:41 · 7357 阅读 · 0 评论 -
babel原理和插件编写
babel是一个多用的多功能的javascript编译器。主要将js代码转化为浏览器或其他特定环境下的代码,比如转换为es5格式,其主要原理是ASTs(抽象语法树),babel在处理代码的每一步都涉及或创建语法树。什么是AST:AST(Abstract Syntax Tree) 抽象语法树 /ˈæbstrækt ˈsɪntæks/谁在使用:webpack和Lint等很多的工具和库的核心...原创 2019-07-01 11:27:10 · 388 阅读 · 0 评论 -
react最新fiber架构原理和流程
react16以后做了很大的改变,对diff算法进行了重写,从总体看,主要是把一次计算,改变为多次计算,在浏览器有高级任务时,暂停计算。原理:从Stack Reconciler到Fiber Reconciler,源码层面其实就是干了一件递归改循环的事情fiber设计目的:解决由于大量计算导致浏览器掉帧现象。由于js是单线程的,解决主线程被长时间计算占用的问题,就是将计算分为多个步骤,分...原创 2019-06-19 17:25:57 · 3193 阅读 · 0 评论 -
基于html5封装实现前端路由控件fnt-router
前端路由框架已经很成熟,vue有vue-router,react有react-router,还有像umi这样集成度高的库,但是前端路由并没有实现统一,这也导致了开发者需要学习多项技术,他们很多都是基于html5封装的,那么有没有可能封装一个前端统一的路由库呢,基于html5,但和所有其他技术无关,而且这个路由希望是轻量级的,只提供页面路由功能。于是就有了fnt-router原型。...原创 2019-03-22 16:23:35 · 450 阅读 · 0 评论 -
egg的设计理念和底层实现架构模式
在egg的官方文档上可以看到:Egg.js 为企业级框架和应用而生,我们希望由 Egg.js 孕育出更多上层框架,帮助开发团队和开发人员降低开发和维护成本。那么到底什么是egg呢?egg设计理念首先egg也是一款基于node的server web框架,但这个框架不同于koa2, express。1,egg不定制技术选型,专注于提供 Web 开发的核心功能和一套灵活可扩展的插件机...原创 2019-03-21 14:31:16 · 1775 阅读 · 0 评论 -
命令行集成工具开发及分布式路由recdi-cli前端脚手架实例
在前端开发工程中,实现项目自动化和工程化越来越重要,而每次搭建前端项目的时候,很多文件都源自复制粘贴,这是一些重复的工作。虽然现在已经有了很多大的脚手架生成工具,像create-react-app, vue-cli,但是这些工具生成的脚手架可能和我们的业务场景相差较远,生成过后还需要手动更改,也是比较麻烦的,另外,对于自己封装的脚手架可以加入定制的东西,对于开发团队而言,扩展性较强。前端脚手架...原创 2019-02-20 00:15:32 · 227 阅读 · 0 评论 -
commander库的作用和简单总结
随着网站工程的复杂化,我们不希望把有限的时间浪费到一些诸如文件复制,打包配置等重复的工作上,我们希望在创建新的项目工程时可以使用模板直接初始化项目,这对于效率和团队使用是比较方便的。对于前端工程化而言,模板的封装许多是基于cli,这时候就要用到commander库,进而简化cli。commander简单总结://添加命令:myCommand.command('init')//命令添...原创 2019-01-17 14:13:43 · 5032 阅读 · 2 评论