前端架构
辰辰沉沉大辰沉
某厂前端 xuelq007.com
展开
-
Flux,Redux,Vuex整理总结
关于前端架构中的状态管理方法论,经常能听到的Flux, Redux 和Vuex,这些方法论乍一看好像都差不多,再一看又有一些区别,这是我刚刚接触这些东西时的一个直观感受。看了很多其他人写的文章,自己又画了点图谢谢品味了一下,我决定还是把它们写出来,既能巩固所得,又可以方便以后时常温习。记得React刚出来不久时,Flux还是React官方指定,Redux那会儿还没有影,当时认真看了Flux,隔...原创 2018-02-11 09:34:16 · 3322 阅读 · 0 评论 -
React 实现 Modal 思路简述
Modal 简述模态对话框。需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用 Modal 在当前页面正中打开一个浮层,承载相应的操作。另外当需要一个简洁的确认框询问用户时,可以使用 Modal.confirm() 等语法糖方法。Modal 是组件库中开发的第一个组件, 做这个组件时的想法是先自实现后再和 Antd 做个对比,看看与大神的差距。核心功能点提取根据 Antd M...原创 2019-05-14 09:13:03 · 3603 阅读 · 0 评论 -
从Antd 源码到自我实现之 Grid 栅格系统
前言原创 2019-04-23 09:54:24 · 3567 阅读 · 1 评论 -
从Antd 源码到自我实现之 Form表单
前言Antd 中的组件大部分基于蚂蚁金服的组件库 react-component。antd 与 react-component 都是开源项目,阅读其源码可以给我们带来很多收益,比如:了解各式各样的组件背后的实现思想怎样去实现一个对开发和用户都友好的组件,即简单易用,便于扩展。学习一些我们在写业务代码时不太会用到的 React 高级用法但是阅读过 Antd 源码就会发现,代码量巨大而且...原创 2019-04-20 22:48:36 · 4087 阅读 · 0 评论 -
AWorkflow : 一个用于快速构建各种关系图的库
AWorkflow是什么Aworkflow旨在向用户提供一个可自定义模版的js流程图。AWorkflow github地址在线demo默认模版:http://zhoushengfe.com/flow/dist/index.html动画:http://zhoushengfe.com/flow/dist/demo/animate/index.html自动排列:http://zhoushen...原创 2019-03-22 09:51:52 · 2173 阅读 · 0 评论 -
从vue-cli 2.x 到 vue-cli 3.0 体验
vue.config.jsstyle scoped import原创 2019-03-06 13:25:34 · 2731 阅读 · 0 评论 -
React 16.7 Fiber源码解读 (一)之数据结构
React Fiber提出有一段时间了,关于它的文章汗牛充栋,从React 16.0 到React 16.4 (项目使用版本) 再到最新的 React 16.7,尽管大致框架没变,但是实现细节一直在变,在不同时间点发布的React Fiber源码间切换难免会有错乱。因此决定对Fiber运行框架基于最新React 16.7做一个大致的梳理原创 2019-01-30 18:28:22 · 3550 阅读 · 0 评论 -
React 16.7 Fiber源码解读 (二)之运行流程
Fiber DebuggerFiber Debugger是React官方的一个图形化展示fiber运行过程的动态demo.点击Edit按钮,可将以下代码复制到编辑框,点击运行Run即可查看log('Render <div>Hello</div&am原创 2019-02-01 16:53:14 · 2502 阅读 · 0 评论 -
步步提高网站体验系列之——骨架屏
最近原创 2018-12-10 19:33:53 · 2712 阅读 · 0 评论 -
步步提高网站体验系列之——PWA(Service Worker)
前言原创 2018-12-14 13:35:42 · 2861 阅读 · 0 评论 -
30分钟精通React新特性--React Hooks
你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗?——拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function。你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗?——拥有了Hooks,生命周期钩子函数可以先丢一边了。你在还在为组件中的this指向而晕头转向吗?——既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对...转载 2018-11-21 20:26:45 · 2838 阅读 · 0 评论 -
再论React与Angular-从数据绑定谈起
前言以前的项目一直使用Angular,但同时一直保持对React的关注,自己也在工作之余找一些React的项目资料来学习,当时有一些对两者的感悟,也写了一些文章,散落在之前发布的博客中。只所以想再论有两个原因:一是把之前散落在其他文章中的关于两个框架的比较收集在一篇文章中。二是真正在新项目中使用React也有一段时间了,必然有一些新的感悟。把新旧知识点一起梳理一下,提炼出对两个Re...原创 2018-08-07 18:40:41 · 3372 阅读 · 0 评论 -
从对Redux的使用看Angular2和React的设计差异
Redux中文文档中有这么一句话: 这里需要再强调一下:Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。不得不说这句话极大的鼓舞了我,Redux作为一款前端状态管理工具本质上和特定框架是解耦的。如果业务有需求,我们当然可以也引入到其他框架,比如说我们项目用的Angular2。当初怀着这...原创 2018-02-16 15:40:24 · 2638 阅读 · 0 评论 -
理解Redux底层原理从applyMiddleware开始
题外话:年前最后一个工作日事情不多,正好把近期看过的但是容易忘的重要知识点总结一下,毕竟好记性不如烂笔头,不再少年不扶不行。先放一个Redux中文文档关于Middleware(中间件)的官方解释。Redux MiddlewareMiddleware这个概念是Redux从其他框架借鉴过来的,本意如下: middleware是指可以被嵌入在框架接收请求到产生响应过程之中的代码。例如...原创 2018-02-13 17:54:54 · 3820 阅读 · 0 评论 -
Redux 异步数据流-- thunk中间件源码解析
Thunk 引入背景这是一个关于Redux异步数据流的故事。引入thunk中间件的完整故事在Redux官方中文文档异步数据流。一句话总结就是:原生Redux只支持同步数据流,所以需要引入中间件(middleware) Thnuk 来支持异步数据流。这里有两个关键字:中间件和异步。 Thunk 是什么A thunk is a function that wraps an e...原创 2018-02-14 23:03:04 · 2626 阅读 · 0 评论 -
从MVC到MVVM的意义之我见
题外话:发现自己的草稿箱里面还有几篇很久以前写了一半但是忘了结尾的东西,年关将至把最不烧脑的一篇打扫一下发出来吧。 MVC 先来看一张MDN的官方图:我之所以班门弄斧自己整一张主要是为了接下来与MVVM的比较。 关于MVC的文章汗牛充栋,我就说一句个人认为理解的关键:单向数据流,状态管理方法论Flux是对它的极大改进。从上图可以看出对于比较简单的应用,View, C...原创 2018-02-13 19:12:08 · 2133 阅读 · 0 评论 -
个人博客的Travis持续集成之路
前言个人博客主要用于技术探索与试用,服务器是在阿里云上购买的,操作系统是 ubuntu 16.04. 痛点是每次有新的提交都要远程连接到阿里云服务器,首先从 git 上拉取最新代码,然后再进行打包构建。在有多次提交的情况下,反复登陆云服务器感觉有点不胜其烦,所以想搞一个自动化部署。构建和测试的自动化工具层出不穷。Travis CI 就是这类工具之中,市场份额最大的一个。包括我们公司的持续集成工...原创 2019-07-05 13:03:49 · 824 阅读 · 0 评论