javascript
文章平均质量分 96
astonishqft
每每走投无路,恰恰绝处逢生
展开
-
pnpm + workspace + changesets 构建你的 monorepo 工程
pnpm + workspace + changesets 构建你的 monorepo 工程原创 2022-05-17 15:57:21 · 8994 阅读 · 2 评论 -
redux你用对了吗?
redux 的三大原则redux 的开发和使用必须要遵循三大原则,即:单一数据源:整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中State 是只读的:唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。使用纯函数来执行修改: 为了描述 action 如何改变 state tree ,你需要编写 reducers关于第一点很容易理解,整个应用应当只有一个 s原创 2021-09-11 17:40:10 · 429 阅读 · 0 评论 -
Ant-design Modal实现可以拖动的效果
最近项目组在开发的时候提出了一个需求,需要让 ant-design Modal实现能够拖动的功能,研究了一番,基于 and-design Modal自己封装了一个antd-draggable-modal组件。特性:支持弹出窗居中打开支持拖拽 title bar 实现拖拽支持多层弹窗拖拽实现原理要实现 Modal 的拖拽,首先要弄清楚 Modal 的位置跟什么有关系,打开浏览器,通...原创 2020-03-01 14:14:58 · 10173 阅读 · 9 评论 -
微前端实践-实现React(umi框架)的子系统集成
问题引入最近在公司遇到了一个需求,别的团队的同事想将他们用 React 编写的工程作为子系统集成到我们已有的系统中,React 工程是基于 umi 框架编写的,我们的主系统是基于 jquery 框架实现的。其实他们本来是已经实现了 React 作为子系统集成到我们的主系统中的,但是他们是借助于 iframe 实现页面嵌入的,后来因为用户体验不佳、存在安全性问题等因素而不得不放弃这种方式的集成了。...原创 2020-02-23 23:57:27 · 3876 阅读 · 0 评论 -
拖拽神器React DnD你真的了解了吗?
简介最近在研究用 React 绘制拓扑图的时候涉及到了 HTML5 拖放 API,了解到了 React DnD 这个拖放神器。React DnD 帮我们封装了一系列的拖放 API,大大简化了拖放 API 的使用方式,今天就结合下面这个示例给大家介绍下 React DnD 的用法。重要概念React Dnd 提供了几个重要的 API 供我们使用:DragSourceDropTarget...原创 2020-01-19 21:03:16 · 3157 阅读 · 0 评论 -
手摸手教你撸一个代码检测命令行工具(CLI)
大家在做前端开发的时候,为了保证团队成员提交代码的质量,一般都会对代码进行代码质量检查和代码美化工作,通常的做法是进行一系列的配置,借助于 eslint、prettier、lint-staged、husky 等工具实现代码的检测工作。但是这个过程涉及众多,配置起来也很繁琐,而且针对不同的项目都需要进行重复配置,无疑增加了大家的工作量,那么我要解决的就是这个问题,提供一个命令行工具来封装上述检测工具...原创 2020-01-06 17:26:25 · 2290 阅读 · 0 评论 -
基于Github issues + umi 搭建一个免费的带评论功能的博客(二)
上一节我主要介绍了什么是`Github App`,以及如何利用GitHub App为我们的`repository`进行授权,解决了博客搭建中的数据层,那么这篇文章我将着重介绍博客搭建过程中用到的前端技术...原创 2019-12-22 00:36:14 · 402 阅读 · 1 评论 -
基于Github issues + umi 搭建一个免费的带评论功能的博客(一)
作为一个工作了好几年的前端搬砖狗,搭建一个属于自己的博客是很有必要的,一来可以总结自己的开发学习经验,二来可以分享和记录下自己的学习轨迹,可谓好处多多,那么今天我就给大家介绍一种搭建博客的新方式。✈️为什么选择Github issues而不是其他方式?其实在使用Github issues搭建博客之前自己就曾经尝试过其他方式搭建属于自己的博客平台,最早的时候自己买过云服务器,买的域名,搭建过一个...原创 2019-12-22 00:35:43 · 622 阅读 · 1 评论 -
js中如何判断一个变量是数组还是对象
在javascript中当使用typeof方法来判断[]和{}时,返回值都是’object’,那么如何来判断一个变量是数组还是对象呢?这里记录两种方法:利用toString()方法 Object.prototype.toString.call({}) // [object Object] Object.prototype.toString.call([]) // [object Arra...原创 2019-03-14 19:12:04 · 12447 阅读 · 0 评论 -
js中hasOwnProperty方法和in运算符区别
hasOwnPropert方法hasOwnPropert()方法返回值是一个布尔值,指示对象自身属性中是否具有指定的属性,因此这个方法会忽略掉那些从原型链上继承到的属性。看下面的例子:Object.prototype.foo = 'animal';let obj = { name: 'xiaoming', age: '12'}console.log(obj.hasOwnPrope...原创 2019-03-14 18:30:32 · 1780 阅读 · 0 评论 -
用React实现一个HTML中上标、下标转换工具
用React实现一个HTML中上标、下标转换工具前言HTML中的sub、sup标签在React中的使用前言最近的项目中有个需求,需要能够在html中实现化学元素的表示,比如上标:SO2、O3、CH4、PM2.5、PM10,还有一些单位,比如:μg/m3、mg/m3等,这些上下标该如何表示呢?解决这个问题的方式有几种,其中一种是搜狗输入法中的数字范围中可以找到部分上标和下标,但是不是很全,其次就...原创 2019-02-15 17:09:57 · 1266 阅读 · 0 评论 -
js将小数转换为百分数并保留两位小数
记录下js中如何将小数转换为百分数并保留两位小数的方法。function format(point) { const formated = Number(point*100).toFixed(2); return `${formated}%`}原创 2018-11-15 23:04:10 · 5824 阅读 · 0 评论 -
es6之async函数的用法
异步编程–async函数的用法目录异步编程–async函数的用法目录async函数介绍async函数的基本用法async函数内部多个await的调用顺序问题async函数介绍async函数是在ES2017 标准引入的,它的出现使得异步程序的处理变得更加简洁,那么什么是async函数呢?这里引用阮一峰老师的一句话: async 函数是什么?一句话...原创 2018-04-20 11:12:32 · 1548 阅读 · 1 评论 -
connect-history-api-fallback库的理解
connect-history-api-fallback库的理解connect-history-api-fallback库的理解介绍使用方法选项结论connect-history-api-fallback库的理解介绍今天在搭建项目的时候遇到了一个问题,该项目是一个单页面应用,前端使用的是React,用react-router做的前端路由,后端用的express做的web服务器,遇到的问题是通...原创 2018-09-18 18:52:54 · 16665 阅读 · 1 评论 -
ES6生成器的基础知识
发布文章 博文管理我的博客退出 Trash Temp ES6生成器的基础知识 @TOCES6生成器的基础知识JavaScript ES6中最令人兴奋的新特性之一是新增了一种新类型的函数,称为generator(下面会被翻译为“生成器”)。这个名字有点奇怪,但乍一看,这个函数的行为会更奇怪。本文旨在解释它们如何工作的基础知识,并帮助你理解为什么它可以...翻译 2018-09-19 22:05:38 · 213 阅读 · 0 评论 -
es6之generator函数的应用
generator函数的应用generator函数的应用generator函数的应用最近在学习到redux-saga用法的时候,发现其中大量用到了es6中新增的Generator函数,在学习Generator函数的同时,整理了一些关于Generator函数的基本应用,这篇文章不涉及到Generator函数的基本用法,关于基本语法知识大家可以参考[这里](http://es6.ruanyifen...原创 2018-09-20 13:13:30 · 686 阅读 · 0 评论 -
redux之compose的理解
redux之compose的理解redux之compose的理解应用reduce方法compose函数redux之compose的理解应用最近给自己的react项目添加redux的时候,用到了redux中的compose函数,使用compose来增强store,下面是我在项目中的一个应用:import {createStore,applyMiddleware,compose} from '...原创 2018-09-20 19:56:02 · 10949 阅读 · 2 评论 -
Array.prototype.slice.call(arguments)的理解
Array.prototype.slice.call(arguments)的理解Array.prototype.slice.call(arguments)的理解应用原理类似用法Array.prototype.slice.call(arguments)的理解应用看一个简单的例子:function foo(a,b,c,d) { var arg = Array.prototype.sli...原创 2018-09-27 10:39:47 · 4469 阅读 · 8 评论 -
js中call()和apply()方法的区别
js中call()和apply()方法的区别js中call()和apply()方法的区别定义示例js中call()和apply()方法的区别定义在W3Cschool中是这么定义这两个方法的:call方法:语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])定义:调用一个对象的一个方法,以另一个对象替换当前对象。说明:call 方法可以用来...原创 2018-09-27 13:16:36 · 253 阅读 · 0 评论 -
十分钟理解javascript中的this对象
最近在参加的几场面试中都涉及到了对于js中this对象的理解,那么怎样去理解this呢?这里针对不同的场景通过代码来帮助我们理解好this。this到底指向什么?this指向什么呢?一言以蔽之:this最终指向的是那个调用它的对象下面通过代码来分析this的指向问题。默认绑定全局变量windowvar a = 'hello';function foo() { conso...原创 2018-10-27 21:29:26 · 1769 阅读 · 3 评论 -
es6箭头函数中return的用法
最近在项目中频繁的使用了箭头函数,在使用的过程中经常遇到以下几个问题,下载记录下来:如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回例子:const foo = (a, b) => { a+b;}foo(1, 2) // undefinedconst foo1 = (a, b) => { return a+b;...原创 2018-11-15 16:21:43 · 12144 阅读 · 3 评论 -
es6之Promise简介
异步编程–Promise的用法目录异步编程–Promise的用法目录Promise简介Promise的应用一:处理多个相互依赖的异步请求Promise的应用二:并行执行多个异步请求Promise的应用三:Promise.race的应用Promise简介Promise的出现实际上是为了解决回调地狱的问题,在正式理解Proise的用法之前我们先来了解...原创 2018-04-20 02:05:31 · 683 阅读 · 1 评论