自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Creabine的博客

时无重至 华不再扬

原创 Git提交规范

最近公司的前端团队分了组,我根据兴趣加入了基础设施建设组,负责做一些方便和规范开发的东西。第一个产出是增加了Git的提交规范,之前参与开源项目时接触到的,感觉很有意思,也很实际,用得到。参考资料: 阮一峰-Commit message 和 Change log 编写指南Git提交规范意义及现状在开发过程中,Git每次提交代码,都需要写Commit message(提交说明),规...

2018-12-13 16:58:44 1239

原创 【设计模式系列】之【发布-订阅模式】

前言:要提升代码水平,就绕不开设计模式。之前也有过一些了解,但并没有深入学习。最近准备系统的学习一下设计模式,提高设计,解耦的能力,发现了一本好书《JavaScript设计模式与开发实践》,所以边读边写,把常用的设计模式学习并记录在这里。发布-订阅模式定义与介绍发布-订阅模式的例子必须先发布再订阅吗?推模型和拉模型小结定义与介绍发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖...

2020-01-03 18:12:12 91

原创 【设计模式系列】之【迭代器模式】

前言:要提升代码水平,就绕不开设计模式。之前也有过一些了解,但并没有深入学习。最近准备系统的学习一下设计模式,提高设计,解耦的能力,发现了一本好书《JavaScript设计模式与开发实践》,所以边读边写,把常用的设计模式学习并记录在这里。迭代器模式定义与介绍内部迭代器 和 外部迭代器JavaScript中的单例模式迭代器模式的例子定义与介绍迭代器模式是指提供一种方法顺序访问一个聚合对象中...

2019-12-25 16:24:33 54

原创 【设计模式系列】之【代理模式】

前言:要提升代码水平,就绕不开设计模式。之前也有过一些了解,但并没有深入学习。最近准备系统的学习一下设计模式,提高设计,解耦的能力,发现了一本好书《JavaScript设计模式与开发实践》,所以边读边写,把常用的设计模式学习并记录在这里。代理模式单一职责原则定义与介绍保护代理 和 虚拟代理JavaScript中的代理模式单一职责原则面向对象涉及的原则之一:单一职责原则,即对一个类(对象,...

2019-12-25 15:41:36 55

原创 【设计模式系列】之【策略模式】

前言:要提升代码水平,就绕不开设计模式。之前也有过一些了解,但并没有深入学习。最近准备系统的学习一下设计模式,提高设计,解耦的能力,发现了一本好书《JavaScript设计模式与开发实践》,所以边读边写,把常用的设计模式学习并记录在这里。策略模式定义与介绍JavaScript中的策略模式策略模式的例子定义与介绍单例模式的定义:定义一系列算法,把它们一个个封装起来,并且使它们可以互相替换。...

2019-12-23 17:09:51 76

原创 【设计模式系列】之【单例模式】

前言:要提升代码水平,就绕不开设计模式。之前也有过一些了解,但并没有深入学习。最近准备系统的学习一下设计模式,提高设计,解耦的能力,发现了一本好书《JavaScript设计模式与开发实践》,所以边读边写,把常用的设计模式学习并记录在这里。单例模式定义与介绍JavaScript中的单例模式惰性单例将创建对象和管理单例的逻辑解耦单例模式的例子定义与介绍单例模式的定义:确保只有一个实例,并提供...

2019-12-19 18:21:48 56

原创 使用vscode断点调试egg后端代码

前端调试经常打断点,但后端之前一直是打log调试的,其实有些情况下断点更好用,而且vscode配置也很简单,是自己之前懒了没去弄。参考资料:egg文档按照文档做了相应配置,然后写上调试项目的绝对目录之后,从vscode中启动即可,egg本身就做了支持,还是非常方便的。...

2019-10-23 15:13:56 363

原创 Mongoose 设置TTL(time to live) 过期自动删除数据

最近忙好忙。。。没什么时间积累,今天抽空赶紧随手记一个新操作什么是TTLTTL(time to live) 集合支持mongodb对存储的数据进行失效时间设置,经过指定的时间段后、或在指定的时间点过期,集合自动被mongod清除。这一特性有利于对一些只需要保存一定时间的数据信息进行存储,比如机器产生的事件数据、日志、会话信息等。简单场景比如用户的验证码,生成后需要存在数据库的ver...

2019-10-17 15:59:53 657

原创 前端配合Egg实现导入导出Excle文件功能

本来我只是个小前端,来了新公司前后端一起搞,node也写的美滋滋,crud非常嗨皮。结果就在上周,突然多了个导入导出功能。虽然没做过,但是想一想查一查,应该也搞的定,没想到,一搞就是一周。今天终于弄好了,所以赶紧做个笔记,完整的记录下来,为自己整理思路,希望也能帮到后来的人。相关技术栈:Reactant DesignEggMongoDB。使用库:xlsx: 生成,解析excle...

2019-09-05 16:43:09 1018 3

原创 新遇到的神器--Tmux

又是一个之前从没听过的玩意,最近真的是疯狂长见识!之前三年明明都只是一个小前端,现在突然接触后端,看啥都新鲜,看啥都不会。前段时间项目提测,再测试环境的命令行里同时用了tmux,看的我一脸懵逼,赶紧请教了一下,然后百度了几个常用快捷键,算是知道咋回事儿了,今天周末,抓紧时间补一下,了解一波参考资料:有可能是最简单的tmux入门教程tmux简洁教程Tmux 快捷键 & 速查表...

2019-09-01 15:43:50 81

原创 在Egg中使用MongoDB及Mongoose

新公司的项目中用了Egg和MongoDB及mongoose。最近有空来系统的梳理一下。参考资料&扩展阅读:Mongoose中文文档mongoose学习笔记(超详细)Mongoose中文文档-Mongoose的APIEgg链接MongoDBEgg 使用 egg-mongoose来方便的跟数据库进行链接// eggProject/server/config/config....

2019-08-19 15:09:04 886

原创 MongoDB入门笔记

前段时间赶鸭子上架,前端的我也开始全栈了。用了egg+MongoDB来开发后端内内容。边做边学了解了个大概,这两天趁着有空,刷刷文档,系统的过一遍,争取快速把常用的80%内容都搞定。参考资料:菜鸟教程MongoDB官网MongonDB简介MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB...

2019-08-16 16:32:42 46

原创 TypeScript

之前很早就听说过TypeScript,也看过好几遍文档。但是如果不在实际项目中使用,总是没有实感,看完就忘了。这次新公司的项目就是ts,写的非常开心,确实感觉ts写出来的代码要稳固健壮的多,一切都很可控,非常舒服。目录介绍参考资料常见用法原始数据类型任意值类型推论联合类型对象的类型 -- 接口 interface数组的类型函数的类型类型断言介绍TypeScript(一下简称TS)是由微...

2019-07-31 15:30:53 136

原创 Moment.js

Moment 可以同时在浏览器和node环境中使用。是一个非常好用的时间日期处理类库。在新公司的项目中,大量使用Moment来处理时间日期,非常方便好用。参考资料:官方文档使用详情见官方文档,Moment基本可以代替Date,获取任意时间,时间格式化,时间日期计算,比较,都非常方便。常用方法:// 取当前时间moment();// 取当日开始时间moment().star...

2019-07-30 17:54:13 614

原创 BigNumber.js

在新公司的第一个项目是区块链相关的管理后台和交易所,其中就涉及了很多的计算问题。而JavaScript因为存在计算的精度问题,所以直接计算就可能会导致各种各样的bug,为了解决这个问题,就要使用BigNumber.js这个库。BigNumber.js是一个用于任意精度计算的js库。可以在 官方文档 的console中测试使用。也可以通过npm install bignumber.js --s...

2019-07-30 16:04:42 2708

原创 最近学到的新东西

目录为啥两个多月没写博客了关于新公司最近学到的新东西写在最后为啥两个多月没写博客了前段时间忙着面试跳槽,后来终于在6.13号入职了新公司–知道创宇。关于新公司之前的跳槽主要是想要进入更大的团队提升自己,希望能接触node等等我一直很想学习的东西。面试知道创宇的时候,面试官说这边就是node,刚好跟我的愿望不谋而合,后来也就顺利入职了。想想也很不容易了,从0开始自学,第一家公司只有我一个前...

2019-07-29 18:48:37 77

原创 浏览器缓存机制学习

之前对浏览器缓存一直没什么了解,直到工作中遇到了一些相关需求。感觉自己的知识不论是深度还是广度都还差得远,都要一一补全。这次就来了解一下浏览器缓存的相关机制。参考资料:实践这一次,彻底搞懂浏览器缓存机制浏览器缓存机制浅析前端优化:浏览器缓存技术介绍浏览器缓存的作用及原理浏览器在打开页面时需要向服务器请求各种资源,但如果每次打开、刷新都去请求,不仅服务器压力大,显示速度也慢,体...

2019-05-08 10:50:14 112

原创 前端错误监控与错误日志

平时工作中没怎么接触到这部分,对它的了解也零零碎碎的。今天看了几篇文章,算是有个完整的认识了,在这里总结记录一下。项目上线之后肯定无法避免所有的bug,有些bug出现后开发人员并不知道,有的知道了缺无法快速准确的修复。这时候就需要在代码层面去处理bug,一是方便debug,二则是通过错误处理防止程序崩溃。参考资料:前端错误日志收集方案前端错误监控与上报Vue SPA项目 + S...

2019-05-05 16:32:07 548

原创 React Hooks 入门

之前就听过React的新特性Hooks,今天有空来学习了解一蛤~参考资料:React中文文档概述Hooks 是一项新功能提案,可让您在不编写类的情况下使用 state(状态) 和其他 React 功能。目前还在讨论中。简单来说,这个提案对React的函数式组件进行了加强。之前在React中的三种组件及其区别中提高过:函数式组件没有生命周期和内部状态,所以一般只做单纯的渲染。...

2019-04-24 15:49:05 144

转载 JavaScript设计模式

转载自:JavaScript设计模式之前看了 JavaScript 中常见设计模式整理 这篇文章,这里我也把平时整体的设计模式分享一下。设计模式是解决一类问题的模板,为软件设计中常见的问题提供解决方案。JavaScript 是一种弱类型、动态的、基于原型的语言,所以它可以以很简单的方式去实现一些模式。切记不要去套用后台语言的设计模式,这往往会丢失 JavaScript 这门语言的动态性和灵活...

2019-04-22 15:43:22 71

原创 requestAnimationFrame学习

之前知道异步有个requestAnimationFrame,但一直没去了解,今天有空学了下,记录一波。参考资料:requestAnimationFrame理解与实践为什么需要requestAnimationFrame传统的 javascript 动画是通过定时器 setTimeout 或者 setInterval 实现的。但是定时器动画一直存在两个问题:1. 动画的循时间环间隔...

2019-04-22 14:31:35 124

原创 如何实现数组的map和filter方法

最近经常看到如何实现原生方法的文章,之前自己对于这些并没有特别在意,看了几篇之后发现还是挺有意思的,搞清楚其中的原理比业务代码有趣多了。今天来记录一下数组的map和filter方法参考资料:JS Array.reduce 实现 Array.map 和 Array.filterArray.prototype.myMap在实现map方法之前,有一个要注意的地方在于,map方法有一个很...

2019-04-07 14:35:39 203

原创 JS数组去重

闲来无事,总结一下数组去重的各种思路。当然去重有很多种方法,这里只写几个相对简洁的思路。基本思路做一个空数组A,遍历数组,若A中不存在则放入Afunction uniqeArray (arr) { let result = []; arr.map(item => { if(!result.includes(item)) { result.push(item); ...

2019-04-07 11:07:26 615

原创 组件化和React

组件化和React题目:说一下对组件化的理解jsx的本质是什么jsx和vdom的关系是什么说一下setState的过程阐述自己对react和vue的认识对组件化的理解:1.封装(视图,数据,变化逻辑)。2.复用(props传递)。jsx的本质是什么:jsx跟vue模板一样,都是语法糖,是为了降低学习成本和写代码的难度(相比直接写h函数来说)。最终也是编译成js在浏览器中运...

2019-03-27 17:31:14 70

原创 MVVM 和 VUE

MVVM 和 VUE如何理解mvvm如何实现mvvm是否读过vue源码题目说一下使用jQuery和使用mvvm框架的区别说一下对mvvm的理解vue如何实现响应式vue如何解析模板vue的整个实现流程jQuery和vue的区别:数据和视图分离,解耦(开放封闭原则)以数据驱动视图,只关心数据变化,DOM操作被封装对mvvm的理解mvc(modal, view...

2019-03-27 17:29:24 769

原创 虚拟DOM和Diff算法

虚拟DOM (virtual dom)vdom 是 vue 和 react 的核心,学习他们绕不开vdomvdom比较独立,使用也比较简单如果面试问到了vue和react的实现,免不了问vdom问题:什么是vdom?为何会存在vdom?vdom如何应用,核心API是什么?介绍一下diff算法什么是vdom?为何会存在vdomvirtual dom , 虚拟dom用js...

2019-03-27 17:28:29 167

原创 jQuery 和 zepto中原型的实际应用

jquery 和 zepto 的简单使用zepto 如何使用原型jquery 如何使用原型在jquery中,我们获取不同的dom元素,但他们都有相同的jquery方法(如css(),html(), hide()等),这些方法就是在原型上的。zepto 和 jquery 中原型的使用<!DOCTYPE html><html lang="en"><hea...

2019-03-27 17:26:29 113

原创 ES6中的Proxy、Reflect以及Vue3.0中的应用原理

Vue3.0中,Even You表示会使用Proxy代替Object.defineProperty来做数据的响应式。对于Object.defineProperty我们已经很熟悉了,之前也写过相关的Vue双向绑定原理(二)访问器属性defineProperty()和发布/订阅模式。我们也知道了使用Object.defineProperty的一些劣势:Object.definePropert...

2019-02-20 17:59:39 974

原创 数组的reduce方法及其应用

前两天在群里看到一道题,折腾半天没做出来。今天查了查,了解了前因后果,在此整理记录一下。参考资料:MDNredux之compose题目:const fn1 = x => x+1;const fn2 = x => x+2;const fn3 = x => x+3;const fn4 = x => x+4;let Fn = compose(fn1, ...

2019-02-19 18:21:31 792

原创 React生命周期整理

之前对React的生命周期的理解一直比较浮于表面,今天有空来梳理一下。发现React的新版本对生命周期也做了改动,更有必要搞清楚了。参考资料:React.ComponentReact生命周期[译]如何使用React生命周期方法Mounting阶段constructorconstructor方法在组件建立前被调用:在这个方法里面,应该先调用super(props),否...

2019-02-18 16:45:13 94

原创 class中的static

参考资料类(class)通过 static 关键字定义静态方法。不能在类的实例上调用静态方法,而应该通过类本身调用。这些通常是实用程序方法,例如创建或克隆对象的功能。class ClassWithStaticMethod { static staticMethod() { return 'static method has been called.'; }}conso...

2019-02-18 15:51:28 1843

转载 React的受控组件和非受控组件

在HTML当中,像<input>,<textarea>, 和 <select>这类表单元素会维持自身状态,并根据用户输入进行更新。但在React中,可变的状态通常保存在组件的状态属性中,并且只能用 setState() 方法进行更新。来源:浅谈React受控与非受控组件非受控组件非受控组件,即组件的状态不受React控制的组件,例如下边这个imp...

2019-02-15 16:53:14 547

原创 React中的三种组件及其区别

React中有三种生成组件的方式,分别是React.Component、React.PureComponent和Function,他们有什么异同呢?参考资料:(React(二):类组件、函数式组件)[https://juejin.im/post/5c0dfa265188257a5a2514d6]React.ComponentReact.Component是最常使用的方式,我们经常...

2019-02-15 15:25:59 259

原创 关于React 中All in js的浅尝辄止(React 柱状图,环形图)

什么是 All in js前段时间在别人的项目上了解到了styled-components插件,它能够用js来写css,方便的在其中加上需要的逻辑。React本身用过jsx已经把html用js来写了,再加上styled-components,就能够实现All in js 这种编码方式。如何看待All in js了解之后跟小伙伴在群里讨论了一下,这种All in js的方式比较有争议,不...

2019-02-15 11:03:02 448

原创 Promise.all结合async/await

在日常编码中,async/await明显比promise写起来方便。但是当遇到多个可以同时执行的异步时,就必须使用promise.all,这时候把每个异步函数包装成promise又很麻烦,这时候就要结合起来。之所以能够结合,是因为async/await本身就是promise的语法糖,他就是promise,所以可以直接这样写:const a = async (x) => {};cons...

2019-02-15 10:12:57 3097

原创 如何实现call,apply,bind方法?

很久前写过一篇call,apply,bind的作用,最近学习的过程中看了一篇手写这三个方法的文章。才想起这么多年其实一直知其然不知所以然,还是要更深入原理才好,接下来整理一下我自己的写法。实现call首先我们看call的用法,比如fn.call(obj,a,b,...)。从中可以看书,call是函数的一个方法,所以我们把它加在Function.prototype上,传入上下文contex...

2019-01-29 15:23:24 202

原创 LeetCode刷题(八)

LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...

2019-01-18 14:51:00 95

原创 LeetCode刷题(七)

LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...

2018-11-30 10:23:17 89

原创 LeetCode刷题(六)

LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...

2018-11-30 10:20:38 107

原创 LeetCode刷题(五)

LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...

2018-11-30 10:18:19 98

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