学习笔记
文章平均质量分 79
Creabine
时无重至,华不再扬
展开
-
【设计模式系列】之【单例模式】
前言:要提升代码水平,就绕不开设计模式。之前也有过一些了解,但并没有深入学习。最近准备系统的学习一下设计模式,提高设计,解耦的能力,发现了一本好书《JavaScript设计模式与开发实践》,所以边读边写,把常用的设计模式学习并记录在这里。单例模式定义与介绍JavaScript中的单例模式惰性单例将创建对象和管理单例的逻辑解耦单例模式的例子定义与介绍单例模式的定义:确保只有一个实例,并提供...原创 2019-12-19 18:21:48 · 293 阅读 · 0 评论 -
使用vscode断点调试egg后端代码
前端调试经常打断点,但后端之前一直是打log调试的,其实有些情况下断点更好用,而且vscode配置也很简单,是自己之前懒了没去弄。参考资料:egg文档按照文档做了相应配置,然后写上调试项目的绝对目录之后,从vscode中启动即可,egg本身就做了支持,还是非常方便的。...原创 2019-10-23 15:13:56 · 1168 阅读 · 0 评论 -
LeetCode刷题(四)
LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...原创 2018-09-27 14:36:36 · 206 阅读 · 0 评论 -
React-router学习笔记
之前用react开发了一些模块,对react的使用也更加熟悉了。最近有空,来总结记录一下react相关生态,系统的梳理一下,便于更好的理解和记忆。首先看一个配置示例:const routeConfig = { path: '/', component: App,】 indexRoute: { component: Dashboard }, childRoutes...原创 2018-10-29 11:51:18 · 268 阅读 · 0 评论 -
React-Redux学习笔记
之前用react开发了一些模块,对react的使用也更加熟悉了。最近有空,来总结记录一下react相关生态,系统的梳理一下,便于更好的理解和记忆。参考资料:React-redux框架之connect()与Provider组件 用法讲解Redux类比Vuex,Redux也是用来解决复杂SPA中的全局状态管理问题。通过对比来一起记忆。三大原则:单一数据源:整个应用只能有一个唯...原创 2018-10-29 19:05:13 · 320 阅读 · 0 评论 -
LeetCode刷题(五)
LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...原创 2018-11-30 10:18:19 · 256 阅读 · 0 评论 -
浏览器页面加载相关知识
页面加载题目 从输入url到html的详细过 window.onload 和 DOMContentLoaded 的区别知识点加载资源的形式加载资源的过程浏览器渲染页面的过程 加载资源的形式//输入url(或跳转页面)加载htmlhttp://www.baidu.com//加载html中的静态资源<script src="/sta...原创 2018-02-27 18:22:53 · 382 阅读 · 0 评论 -
LeetCode刷题(六)
LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...原创 2018-11-30 10:20:38 · 211 阅读 · 0 评论 -
LeetCode刷题(七)
LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...原创 2018-11-30 10:23:17 · 201 阅读 · 0 评论 -
Git提交规范
最近公司的前端团队分了组,我根据兴趣加入了基础设施建设组,负责做一些方便和规范开发的东西。第一个产出是增加了Git的提交规范,之前参与开源项目时接触到的,感觉很有意思,也很实际,用得到。参考资料: 阮一峰-Commit message 和 Change log 编写指南Git提交规范意义及现状在开发过程中,Git每次提交代码,都需要写Commit message(提交说明),规...原创 2018-12-13 16:58:44 · 2422 阅读 · 0 评论 -
如何实现call,apply,bind方法?
很久前写过一篇call,apply,bind的作用,最近学习的过程中看了一篇手写这三个方法的文章。才想起这么多年其实一直知其然不知所以然,还是要更深入原理才好,接下来整理一下我自己的写法。实现call首先我们看call的用法,比如fn.call(obj,a,b,...)。从中可以看书,call是函数的一个方法,所以我们把它加在Function.prototype上,传入上下文contex...原创 2019-01-29 15:23:24 · 382 阅读 · 0 评论 -
LeetCode刷题(三)
LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...原创 2018-09-27 14:34:33 · 222 阅读 · 0 评论 -
LeetCode刷题(二)
LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...原创 2018-09-27 14:32:27 · 209 阅读 · 0 评论 -
性能优化思路
性能优化–优化策略这是个综合性的问题没有标准答案关注核心点性能优化的原则多使用内存、缓存或者其他方法减少CPU计算、减少网络请求从哪里入手 加载页面和静态资源静态资源的合并压缩(合并减少请求个数,压缩减少文件大小)静态资源缓存(刷新时减少重复请求,通过改名[加版本号/时间戳]来控制缓存)使用CDN让资源加载更快(CDN能够让你请求最近/最快的服务器...原创 2018-02-27 18:29:46 · 415 阅读 · 0 评论 -
ES6知识整理(二)--- Promise
早在17年初就读了《ES6 标准入门》并在博客上做了笔记(《ES6 标准入门》读书笔记),工作中也有用到一些。一年后再回过头来看这些知识,又跟初看的时候的感觉完全不同了。对很多新特性的好处有了更具体的认识。也有一些知识依然了解不够,所以在这里重新整理一波,夯实基础。参考资料: 1. 浅析Promise用法 2. Promise对象的含义和基本用法 3. 大白话讲解Promise...原创 2018-03-11 13:51:17 · 339 阅读 · 0 评论 -
ES6异步处理方式: Promise / async await
参考资料: - JS Promise API - ES6 Async/Await 完爆Promise的6个原因Promise js的异步处理,一直是使用callback的,但当我们要连续执行多个异步的时候,就会导致callback层层嵌套,很不友好。所以在ES6中,加入了Promise来帮助处理异步apiPromise.resolve() 执行成功Prom...原创 2018-04-10 11:23:04 · 1719 阅读 · 0 评论 -
Linux相关知识积累
公司发了新的MacBook Pro美滋滋,在用的过程中发现自己对linux的理解基本为零,这样可不行,所以这边记录一下常用的命令,以后在使用过程中如果遇到新的,也会逐步更新积累在这里。常用命令cd [目录名] 跳转目录ls 列出该目录下的文件和目录cat [文件名] 读取文件显示在命令行中vi/vim [文件名] 使用vim编辑该文件vim编辑使用方式i...原创 2018-05-31 11:28:38 · 289 阅读 · 0 评论 -
CSS3的函数和事件
很久没写过关于css的博客了,今天来记录一下最近遇到的几个新东西。参考资料:css参考手册Css3函数 之前只知道sass,less这种预处理器有函数,突然发现css3也吸收了他们的想法,搞了自己的函数。目前css的函数有两个:calc/togglecalc calc就是calculate的缩写,运算。支持 “+”, “-“, “*”, “/” 运算,...原创 2018-07-09 11:11:34 · 6240 阅读 · 0 评论 -
React学习笔记
前段时间因工作需要,快速学习了一下React写了点代码,当时写过一篇初识React的一些感受,但限于时间,没空整理总结。最近搞完了小程序,稍微有点空闲,赶紧来复习总结一下。参考资料:React官网教程JSXJSZ是类似const element = <h1>Hello, world!</h1>这样的语法,可以通过花括号{}在其中插入变量或任意JS...原创 2018-07-11 11:44:30 · 392 阅读 · 0 评论 -
小程序图片上传和Promise.all
之前写过一篇ES6异步处理方式: Promise / async await,对Promise和async await 有了简单的理解,但后来才发现我的理解太浅了,只是记录了基本知识而已。 在上家公司,遇到过需要发送多个总数不定的ajax的需求,当时的解决方式是使用递归,一个请求结束之后再发另一个,当时还以为自己很机智,写了这篇博客:javascript递归的实际应用场景。 所以...原创 2018-07-06 16:08:25 · 4210 阅读 · 0 评论 -
Object.assign及在Vue中的应用小技巧
最近看代码的时候跟同事学到了一招。Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。// 目标对象有1个,后边可以有多个源对象。注意他只会拷贝源对象自身且是可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 set...原创 2018-08-14 11:40:13 · 22647 阅读 · 1 评论 -
LeetCode刷题(一)
LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...原创 2018-09-27 14:30:09 · 285 阅读 · 0 评论 -
React中的三种组件及其区别
React中有三种生成组件的方式,分别是React.Component、React.PureComponent和Function,他们有什么异同呢?参考资料:(React(二):类组件、函数式组件)[https://juejin.im/post/5c0dfa265188257a5a2514d6]React.ComponentReact.Component是最常使用的方式,我们经常...原创 2019-02-15 15:25:59 · 994 阅读 · 0 评论 -
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 · 216 阅读 · 0 评论 -
React Hooks 入门
之前就听过React的新特性Hooks,今天有空来学习了解一蛤~参考资料:React中文文档概述Hooks 是一项新功能提案,可让您在不编写类的情况下使用 state(状态) 和其他 React 功能。目前还在讨论中。简单来说,这个提案对React的函数式组件进行了加强。之前在React中的三种组件及其区别中提高过:函数式组件没有生命周期和内部状态,所以一般只做单纯的渲染。...原创 2019-04-24 15:49:05 · 319 阅读 · 0 评论 -
浏览器缓存机制学习
之前对浏览器缓存一直没什么了解,直到工作中遇到了一些相关需求。感觉自己的知识不论是深度还是广度都还差得远,都要一一补全。这次就来了解一下浏览器缓存的相关机制。参考资料:实践这一次,彻底搞懂浏览器缓存机制浏览器缓存机制浅析前端优化:浏览器缓存技术介绍浏览器缓存的作用及原理浏览器在打开页面时需要向服务器请求各种资源,但如果每次打开、刷新都去请求,不仅服务器压力大,显示速度也慢,体...原创 2019-05-08 10:50:14 · 286 阅读 · 0 评论 -
前端错误监控与错误日志
平时工作中没怎么接触到这部分,对它的了解也零零碎碎的。今天看了几篇文章,算是有个完整的认识了,在这里总结记录一下。项目上线之后肯定无法避免所有的bug,有些bug出现后开发人员并不知道,有的知道了缺无法快速准确的修复。这时候就需要在代码层面去处理bug,一是方便debug,二则是通过错误处理防止程序崩溃。参考资料:前端错误日志收集方案前端错误监控与上报Vue SPA项目 + S...原创 2019-05-05 16:32:07 · 1265 阅读 · 0 评论 -
BigNumber.js
在新公司的第一个项目是区块链相关的管理后台和交易所,其中就涉及了很多的计算问题。而JavaScript因为存在计算的精度问题,所以直接计算就可能会导致各种各样的bug,为了解决这个问题,就要使用BigNumber.js这个库。BigNumber.js是一个用于任意精度计算的js库。可以在 官方文档 的console中测试使用。也可以通过npm install bignumber.js --s...原创 2019-07-30 16:04:42 · 11108 阅读 · 0 评论 -
Moment.js
Moment 可以同时在浏览器和node环境中使用。是一个非常好用的时间日期处理类库。在新公司的项目中,大量使用Moment来处理时间日期,非常方便好用。参考资料:官方文档使用详情见官方文档,Moment基本可以代替Date,获取任意时间,时间格式化,时间日期计算,比较,都非常方便。常用方法:// 取当前时间moment();// 取当日开始时间moment().star...原创 2019-07-30 17:54:13 · 994 阅读 · 0 评论 -
TypeScript
之前很早就听说过TypeScript,也看过好几遍文档。但是如果不在实际项目中使用,总是没有实感,看完就忘了。这次新公司的项目就是ts,写的非常开心,确实感觉ts写出来的代码要稳固健壮的多,一切都很可控,非常舒服。目录介绍参考资料常见用法原始数据类型任意值类型推论联合类型对象的类型 -- 接口 interface数组的类型函数的类型类型断言介绍TypeScript(一下简称TS)是由微...原创 2019-07-31 15:30:53 · 316 阅读 · 0 评论 -
在Egg中使用MongoDB及Mongoose
新公司的项目中用了Egg和MongoDB及mongoose。最近有空来系统的梳理一下。参考资料&扩展阅读:Mongoose中文文档mongoose学习笔记(超详细)Mongoose中文文档-Mongoose的APIEgg链接MongoDBEgg 使用 egg-mongoose来方便的跟数据库进行链接// eggProject/server/config/config....原创 2019-08-19 15:09:04 · 2322 阅读 · 1 评论 -
新遇到的神器--Tmux
又是一个之前从没听过的玩意,最近真的是疯狂长见识!之前三年明明都只是一个小前端,现在突然接触后端,看啥都新鲜,看啥都不会。前段时间项目提测,再测试环境的命令行里同时用了tmux,看的我一脸懵逼,赶紧请教了一下,然后百度了几个常用快捷键,算是知道咋回事儿了,今天周末,抓紧时间补一下,了解一波参考资料:有可能是最简单的tmux入门教程tmux简洁教程Tmux 快捷键 & 速查表...原创 2019-09-01 15:43:50 · 238 阅读 · 0 评论 -
JavaScript设计模式
转载自:JavaScript设计模式之前看了 JavaScript 中常见设计模式整理 这篇文章,这里我也把平时整体的设计模式分享一下。设计模式是解决一类问题的模板,为软件设计中常见的问题提供解决方案。JavaScript 是一种弱类型、动态的、基于原型的语言,所以它可以以很简单的方式去实现一些模式。切记不要去套用后台语言的设计模式,这往往会丢失 JavaScript 这门语言的动态性和灵活...转载 2019-04-22 15:43:22 · 240 阅读 · 0 评论 -
requestAnimationFrame学习
之前知道异步有个requestAnimationFrame,但一直没去了解,今天有空学了下,记录一波。参考资料:requestAnimationFrame理解与实践为什么需要requestAnimationFrame传统的 javascript 动画是通过定时器 setTimeout 或者 setInterval 实现的。但是定时器动画一直存在两个问题:1. 动画的循时间环间隔...原创 2019-04-22 14:31:35 · 272 阅读 · 0 评论 -
如何实现数组的map和filter方法
最近经常看到如何实现原生方法的文章,之前自己对于这些并没有特别在意,看了几篇之后发现还是挺有意思的,搞清楚其中的原理比业务代码有趣多了。今天来记录一下数组的map和filter方法参考资料:JS Array.reduce 实现 Array.map 和 Array.filterArray.prototype.myMap在实现map方法之前,有一个要注意的地方在于,map方法有一个很...原创 2019-04-07 14:35:39 · 460 阅读 · 0 评论 -
class中的static
参考资料类(class)通过 static 关键字定义静态方法。不能在类的实例上调用静态方法,而应该通过类本身调用。这些通常是实用程序方法,例如创建或克隆对象的功能。class ClassWithStaticMethod { static staticMethod() { return 'static method has been called.'; }}conso...原创 2019-02-18 15:51:28 · 5792 阅读 · 0 评论 -
React生命周期整理
之前对React的生命周期的理解一直比较浮于表面,今天有空来梳理一下。发现React的新版本对生命周期也做了改动,更有必要搞清楚了。参考资料:React.ComponentReact生命周期[译]如何使用React生命周期方法Mounting阶段constructorconstructor方法在组件建立前被调用:在这个方法里面,应该先调用super(props),否...原创 2019-02-18 16:45:13 · 191 阅读 · 0 评论 -
数组的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 · 1302 阅读 · 0 评论 -
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 · 2123 阅读 · 0 评论 -
虚拟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 · 369 阅读 · 0 评论