自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端技术小哥

前端技术分享

  • 博客(41)
  • 收藏
  • 关注

原创 打造react企业私有化组件库

介绍随着web框架不断完善和壮大,越来越多的前端团队开始搭建内部的组件库,虽然市场上已经有很多功能强大且完善的UI组件库提供给我们使用,例如,react 开源的就有 antd, material。 vue开源组件库有 element UI、 iView 等等。用这些框架可以快速的开发一个B端的产品,但是面对日益变化的用户需求,和一些定制化的交互场景,我们可能需要对已有组件进行二次开发,或者是基...

2020-04-02 20:33:44 1438

转载 你一定是闲得蛋疼才重构的吧

随着“发布”进度条走到100%,重构的代码终于上线了。我露出了老母亲般的微笑……最近看了一篇文章,叫《史上最烂的开发项目长啥样:苦撑12年,600多万行代码》,讲的是法国的一个软件项目,因为各种奇葩的原因,导致代码质量惨不忍睹,项目多年无法交付,最终还有公司领导入狱。里面有一些细节让人哭笑不得:一个右键响应事件需要花45分钟;读取700MB的数据,需要花7天时间。足见这个软件的性能有多糟心。...

2019-08-22 11:10:32 338

原创 写一个 JS 调用栈可视化工具 hound-trace

背景最近在分析一些框架源码,在写笔记的时候,一些函数的调用栈希望用流程图的形式记录下来,打开 http://draw.io[1] 就是一顿操作,画了几个调用栈之后,感觉很麻烦。于是蹲在厕所里的我开始思考了,调用栈既然可以用 console.trace() 打印出来,那是不是也可以把数据记录下来直接画出流程图来?当然我从不喜欢造轮子,首先熟练的打开 google 操作一波,发现地球之...

2019-08-19 14:50:36 1308 1

转载 30分钟完成JavaScript中的记忆游戏

通过在30分钟内构建一个记忆游戏来学习JS,CSS和HTML!本教程介绍了一些基本的关于HTML5,CSS3和JavaScript概念。我们将讨论数据属性,定位,透视...

2019-08-18 11:55:09 130 1

转载 如何用Jest和TypeScript调用Puppeteer库

客户端测试通常使用Selenium,它可自动执测试行任务。但是,您可能不需要Selenium那种重量级的或者那么多功能的框架。如果您正在寻找一种更轻巧,易于使用的工具...

2019-08-13 10:50:35 998 1

转载 如何用React Hooks构建可复用的动画组件

原文:https://www.freecodecamp.org/news/animating-visibility-with-css-an-example-of-reac...

2019-08-12 00:41:13 1139 1

转载 初学者的JavaScript generators指南

原文:https://www.freecodecamp.org/news/beginners-working-guide-to-javascript-generators...

2019-08-12 00:41:13 172

转载 常用的JavaScript设计模式你都知道吗?

简介我们编写代码是为了解决问题。这些问题通常有很多相似之处,在尝试解决这些问题时,我们会注意到几种常见的模式。这就是设计模式的用武之地。设计模式这个术语在软件工程中用来...

2019-08-10 21:44:14 440

转载 Development模式是如何运作的?

原文:https://overreacted.io/how-does-the-development-mode-work/译者:前端技术小哥如果您的JavaScript代...

2019-08-09 23:35:29 1153

转载 JavaScript: ES2019更新了什么呢?

原文:https://blog.tildeloop.com/posts/javascript-what%E2%80%99s-new-in-es2019 译者:前端技术小...

2019-08-09 23:35:29 1279 1

翻译 JavaScript:ES2019中的新功能

原文:https://blog.tildeloop.com/posts/javascript-what’s-new-in-es2019译者:前端技术小哥JavaScript(JS)是最流行的编程语言之一,也是Web开发的主要语言之一,它在不断发展,每一次迭代都会带来一些新的内部变化。让我们来看看ES2019的一些新功能,它们可能很快就会进入我们的日常代码:Array.flat()现在我们...

2019-08-08 23:45:11 520

转载 5个要矫正的JavaScript编程陋习

在阅读JavaScript(JS)代码时,您是否有过这样的感觉:你几乎完全不明白这条代码的作用?这些代码使用了大量的JS技巧?命名和编程风格相当随意?这些是编程陋习的征兆...

2019-08-08 09:56:40 158 1

原创 ​5个要矫正的JavaScript编程陋习

在阅读JavaScript(JS)代码时,您是否有过这样的感觉:你几乎完全不明白这条代码的作用?这些代码使用了大量的JS技巧?命名和编程风格相当随意?这些是编程陋习的征兆。在这篇文章中,我将会概述JS中5种常见的编程陋习。重要的是,我将提出我认为的,关于如何矫正这些陋习的可行的建议。1. 不要使用隐式类型转换JavaScript是一种松散类型的程序语言。如果使用得当,这对我们是有利的...

2019-08-07 22:37:34 133

翻译 ​Map, Filter和Reduce-动画版

Map, Filter和Reduce已经存在很长时间了。 它们通常被视为函数式编程风格的一部分。下面的动画看起来可能有点不自然。但是因为只用了创建的俄罗斯方块网格(在以前的《如何制作俄罗斯方块》教程中)。大家可以也来看看。我们经常把复杂的概念通过形象化的方式记在脑海中。使用可视化作为学习起点的编程文章并不多见。然而,视觉化在教育中是很重要的一环。编程也一样。即使在使用map、filter和...

2019-08-07 21:15:59 194

翻译 我为什么认为Flutter是移动应用程序开发的未来?

原文:https://medium.com/free-code-camp/why-i…译者:前端技术小哥几年前,我使用Java和Objective-C在Android和iOS开发中有一些涉足。在实际工作中我花了将近一个月时间,我决定继续学习深挖。但是我发现很难深入。在最近,我了解到Flutter,并决定再为移动应用程序开发提供支持。我立刻爱上了它,因为它使开发多平台应用程序变得非常有趣...

2019-08-07 12:00:22 1736

原创 JavaScript变量定义和作用域的可视化指南(入门级)

我们常讨论var,let和const之间的作用域的差异。但更多的时候,我看到不少初学者仍然在尝试着理解这个观点。我认为这可能是因为这个概念很少被可视化。让我们一起来看一看。并不是所有的作用域看起来都是一样的。注意:我并不建议大家死记作用域变量定义和每种类型的作用域的值可见性规则。相反,你们可以试着找出其运作的实际原因。(例如,变量隐私。)块级作用域简单的块级作用域可访问性规则:全局作用...

2019-08-05 22:31:38 198

翻译 为什么会出现React Hooks?

原文:https://dev.to/tylermcginnis/why-react-hooks-51lj…译者:前端技术小哥当你要学习一个新事物的时候,你应该做的第一件事就是问自己两个问题1、为什么会存在这个东西?2、这东西能解决什么问题?如果你从来没有对这两个问题都给出一个令人信服的答案,那么当你深入到具体问题时,你就没有足够的坚实的基础。关于React Hooks,这些...

2019-08-05 14:50:26 1254

原创 如何在NodeJS中开发一个命令行界面(CLI)工具

借助Heroku的Oclif框架作为开发人员,我们经常会用到CLI工具。从git到cloud shells,我们处处都在使用这些工具。所以,是时候开发一个自己的了。在此过程中,我们将使用Heroku的强大的oclif框架。Oclif是什么?它是一个快速构建CLI工具的开放框架,由著名的Heroku提供。要建什么?我们将创建一个待办事项指令,它有四个操作:1、添加新任2、查看所有任务3...

2019-08-03 23:37:07 2752

原创 在生产环境中运行PM2和Node.js

在Stream,我们构建了许多应用程序来展示我们的服务所提供的出色功能。对于几乎所有的应用程序,我们都将它们放在一个云服务器上—通常是DigitalOcean或AWS EC2。虽然维护代码库和维持它的相关性是有困难的,但我们发现,在维护应用程序时,最具挑战性的是保持它的活动和运行。此外,由于Node.js是大多数后端API的核心语言,因此很难扩展单个线程进程;这就是PM2发挥作用的地方,也是...

2019-08-03 22:25:15 1037

原创 ​如何用实例掌握Async/Await

今天让我们一起来探讨如何用实例掌握Async/Await目录1、简介(callbacks, promises, async/await)2、实例—货币转换器从2个API’s接收异步数据。简介Async/await是一种编写异步代码的新方法。它是建立在promises之上的,所以也是非阻塞。最大的差别在于异步代码看起来更靠近同步代码。这就是它的关键所在。以前的异步代码选项是callba...

2019-08-02 21:08:09 151

原创 关于TypeScript泛型的解释

今天让我们一起来学习什么是泛型以及它在TypeScript(TS)中的使用方式。泛型:一种抽象类型的能力TS中泛型的实现使我们能够创建可重用的组件,一个组件可以支持多种类型的数据,为代码添加额外的抽象层和可重用性。泛型可以应用于TS中的函数、接口和类。本文将会解释泛型是什么以及用一系列变量的例子来阐述如何运用。泛型之Hello World用一个简单的例子来阐述泛型的概念,假如我们有一个...

2019-08-01 22:37:54 4579

翻译 如何成为一个优秀的程序员

原文链接: https://medium.com/free-code-camp…译者:前端技术小哥是什么让真正优秀的程序员与众不同?众所周知的是,优秀的程序员可以构建令人赞叹的功能、网站、应用程序等等。但是他们有什么共同点呢?经过我的研究,这不仅仅只是熟练掌握一门编程语言或有特定的教育背景。真正有才华的程序员已经掌握了基础要素。这些基础要素使他们能够建立伟大事物,并提出突破性的想法。...

2019-07-31 12:42:43 518

原创 如何避开async/await地狱

async/await把我们从回调地狱中解放了出来,但是随之而来的是大家对它的滥用,导致了async/await地狱的诞生。在这篇文章里我将会解释什么是async/await地狱以及分享一些方法去避开它。什么是async/await地狱?当我们在编写JavaScript异步代码的时候,常常会在一个接着一个函数调用前添加await关键字,影响了函数的调用。因为在一般情况下,下一个函数的调用并...

2019-07-30 16:02:34 414

转载 前端GraphQL入门很简单

现在越来越多的公司开始用GraphQL来建立API。我们获取数据的方式发生了革命性的变化。GraphQL的起源以及我们为什么要使用这种方法GraphQL来自于facebo...

2019-07-30 15:44:03 3783

翻译 GraphQL入门:非常简单

原文:https://medium.com/free-code-camp/give-it-a-…译者:前端技术小哥现在越来越多的公司开始用GraphQL来建立API。我们获取数据的方式发生了革命性的变化。GraphQL的起源以及我们为什么要使用这种方法GraphQL来自于facebook。facebook内部正在寻找一种让他们的新闻推送在移动平台上加载的更稳定的方法。使用传统REST...

2019-07-30 15:26:52 6030

原创 2019年JavaScript开发者必备的10个vscode插件

VSCode现在前端圈特别火爆,基本人手一件,那么选择一个好的插件能够帮我们提高开发效率,和开发体验。今天给大家推荐的这个10个插件希望对大家有所帮助。之前我们还热衷使用Atom,webstorm,在前两年的时候改用了vscode,感觉非常好,性能也不错。而且vscode的社区和市场也日渐强大,这也是我选择vscode的原因之一。10.Quokka.js类别:调试Quokka.js是Ja...

2019-07-27 17:01:25 4588

转载 8个问题看你是否真的懂 JS

译者:前端小智链接:https://juejin.im/post/5d2d146bf265da1b9163c5c9原文链接:https://dev.to/aman_sin...

2019-07-25 12:09:58 163

原创 NPM你真的会吗?(一)

什么是NPMnpm是什么东东?npm其实是Node.js的包管理工具(package manager)。为啥我们需要一个包管理工具呢?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,script 引入,非常繁琐。于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上...

2019-06-16 13:01:11 293

原创 前端必知必会HTTP请求系列(一)了解Web及网络基础

在当前大前端的环境下,前后端分离,前后端同构等开发协同的工作模式的出现,对前端的要求越来越高,前端需要懂得的知识面也越来越广,经常会有朋友在面试的时候被问到,在浏览器输入一个链接到浏览器显示整个网页内容发生的一些列过程,那么这个过程就脱离不开我们今天要分享的HTTP请求了!也有很多同学在和后端同学在协调前后端api接口的时候前端同学老是处于下分,今天这个系列能让前端的同学重回巅峰(稍微有点夸张哈...

2019-05-29 23:56:51 325

原创 前端必知必会HTTP请求系列(二)简单一点的HTTP协议

http协议用户客户端和服务器之间的通信http协议和TCP/IP协议族内的其他众多协议相同,用于客户端和服务器之间的通信。那么问题来个如果两台服务器之间一台服务器向另一台服务器进行接口请求那谁是客户端呢?所以这里的客户端和服务端是相对的概念,如果一端担任客户端的角色,另一端就需要担任服务器端的角色不是绝对的概念。通过请求和响应的交换达成通信http协议中已经规定了请求是从客户端发出,最...

2019-05-29 23:55:04 341

原创 前端必知必会HTTP请求系列(三)HTTP报文内的http信息

http报文用于HTTP协议交互的信息被称为HTTP报文。请求端的http报文叫做请求报文,响应端的叫做响应报文,HTTP报文本身有多行数据构成的字符串文本。http报文大致可分为报文首部和报文主体两块,报文主体两块。两者由最初出租。出现的空行来划分,通常并不一定要有报文主体。请求报文及响应报文的结构我们来看一下请求报文和响应报文的结构。请求报文和响应报文的首部内容由以下数据组成。现在出...

2019-05-29 23:50:16 588

原创 Vue.js的动态组件模板

组件并不总是具有相同的结构。有时需要管理许多不同的状态。异步执行此操作会很有帮助。实例:组件模板某些网页中用于多个位置,例如通知,注释和附件。让我们来一起看一下评论,看一下我表达的意思是什么。 评论现在不再仅仅是简单的文本字段。您希望能够发布链接,上传图像,集成视频等等。必须在此注释中呈现所有这些完全不同的元素。如果你试图在一个组件内执行此操作,它很快就会变得非常混乱。   ...

2018-11-26 11:17:32 1042

翻译 我们应该如何(以及为什么)要将Typescript与Express、nodejs一起使用(译文)

在我的职业生涯开始时,我是一名桌面应用开发人员,其中强类型语言占据了市场主导地位。  当我迁移到Web开发时,我对JavaScript和Python等语言的每个新功能都很着迷。事实上,我没有必要声明变量的类型,这极大的提高了我的生产力,并且使我的工作变得更有趣了。  所以我第一次听说TypeScript时,脑海中的第一个想法是这个语言的演变是不是倒退了一步。我改变了主意吗?是的,...

2018-11-19 15:15:33 528 1

原创 ES6 Fetch API HTTP请求实用指南

本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解。注意:所有示例均在带有箭头功能的 ES6中给出。当前的Web /移动应用程序中的一种常见模式是从服务器请求或显示某种数据(例如用户,帖子,评论,订阅,付款等),然后使用CRUD(创建-Create,阅读-Retrieve,更新-Update或删除-Delete)操作。...

2018-11-14 15:01:10 175

原创 js和原生应用常用的数据交互方式

场景1在原生app中经常会使用到H5页面,比如说电商中的活动页,一些电商中的详情页,等等...这些页面都有一个特点,那就是在未来修改的可能性,和一次性的几率特别的大。所以用H5的页面是最睿智的一种选择。一旦使用了H5那么就少不了和原生开发的一些交互(Android, IOS)如下的方案能够帮助你解决。其实现原理是原生在js的window对象中注入一个js方法,以备原生应用进行处罚触发,就和...

2018-11-08 22:08:34 924

原创 html2canvas在vue下的巨坑

公司有个需求就是要在前端生成图片首先想到的是用canvas生成图片,自己画这也太耗时间了吧!后面在npm上一查有个html2canvas的框架可以用这里附上地址html2canvas使用起来也特别简单,官网是这么描述的html<div id="capture" style="padding: 10px; background: #f5da55">    <h4 sty...

2018-09-01 19:04:59 11623 1

原创 6个小技巧教你编写干净整洁的代码

编写干净的代码并不是一件容易的事。它需要用不同的技巧和很多的实践。写出一手整洁的代码也是开发者们不断追求的目标。编写干净代码的好处项目更容易启动和延续 适合新团队人员加入项目组 更加容易理解编写干净代码的要点代码更加易读 为变量,函数和方法使用更有意义的命名 让每个函数或方法只执行一个任务 使用注释进行说明(重要) 保持一致性 定期检查您的代码  编写干净代码的...

2018-07-24 13:25:08 789

转载 reactNative在Airbnb中应用和未来的规划

2016年,我们押注了React Native并下了大赌注。两年后,我们准备与大家分享我们的经验并展示下一步的计划。这是一个系列中,我们概括我们的经验与本土作出反应和博客...

2018-07-18 23:55:54 104

转载 前后端的分离模式

早期的web开发是不分前端后端的。 互联网进入Web2.0时代之后,大量网站从纯展示型网站演变成类似桌面软件的Web应用,网站的前端也变的越来越复杂, 慢慢就形...

2018-07-15 13:07:51 1409

原创 JavaScript中发出HTTP请求最常用的方法

JavaScript具有很好的模块和方法来发送可用于从服务器端资源发送或接收数据的HTTP请求。在本文中,我们将介绍一些在JavaScript中发出HTTP请求的流行方法。AjaxAjax是发出异步HTTP请求的传统方式。可以使用HTTP POST方法发送数据,并使用HTTP GET方法接收数据。我们来看看发送GET请求。我将使用JSONPlaceholder,这是一个免费的在线REST API,...

2018-07-12 00:25:10 2793

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除