Creabine的博客

参考资料：慕课网Docker入门视频Docker简介Docker允许一个应用程序运行在独立的环境中，包含了他的所有依赖。一些术语：host: 宿主机image：镜像container: 容器registry：仓库daemon：守护程序，所以是 -dclient：客户端Docker 架构常用命令docker pull: 获取镜像docker build: 创建镜像docker run xxx: 运行一个xxx镜像的容器docker stop [容器id]：停止容器

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

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

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

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

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

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

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

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

前两天在群里看到一道题，折腾半天没做出来。今天查了查，了解了前因后果，在此整理记录一下。参考资料：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, ...

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

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

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

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

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

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

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

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

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

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

最近看代码的时候跟同事学到了一招。Object.assign() Object.assign（）方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。// 目标对象有1个，后边可以有多个源对象。注意他只会拷贝源对象自身且是可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关 getter 和 set...

很久没写过关于css的博客了，今天来记录一下最近遇到的几个新东西。参考资料：css参考手册Css3函数 之前只知道sass,less这种预处理器有函数，突然发现css3也吸收了他们的想法，搞了自己的函数。目前css的函数有两个：calc/togglecalc calc就是calculate的缩写，运算。支持 “+”, “-“, “*”, “/” 运算，...

之前写过一篇ES6异步处理方式： Promise / async await，对Promise和async await 有了简单的理解，但后来才发现我的理解太浅了，只是记录了基本知识而已。 在上家公司，遇到过需要发送多个总数不定的ajax的需求，当时的解决方式是使用递归，一个请求结束之后再发另一个，当时还以为自己很机智，写了这篇博客：javascript递归的实际应用场景。 所以...

六月份实在太忙，只能把遇到的问题简单记录，今天小程序二期的开发基本上结束了，才有空来总结整理在开发过程中遇到的问题。 在上一篇博客小程序学习实践总结中，我以为小程序的开发没太多可说的，使用mpvue，只要了解vue和小程序的api就可以了。事实证明我还是太年轻了，当时只是做一些简单维护，6月份开发小程序二期的时候，才发现有很多坑点。这里边有自己不熟悉的坑，有mpvue的坑，甚至还有微信...

新公司的后台管理用了React技术栈。小程序维护告一段落后，马上给了我一个后台任务之前对React的了解基本只有名字，这次带着需求，看文档，看代码，写代码，因为有vue基础，上手还是蛮快的，两周内终于按时搞定了，对React也多了一些了解，在这里简单记录一下。因为是先看了Vue再看React，不可避免的会把他们放在一起进行比较。由于现在对于React的了解不够深入，所以比较得出的大多数...

新公司入职之后的第一个任务就是接手小程序【北美省钱快报】的维护和开发。我接手的时候一期的开发已经基本完成了，使用mpvue生成来写，基本写法跟vue很接近，经过一个月左右的边学变写，算是有一些认识了，这边做一些总结，之后的第二期和第三期会由我来开发，到时候有什么新的心得，再进行补充。开发流程mpvue的优势在于可以直接使用绝大部分vue的特性进行编程，然后由框架打包生成小程序文件。...

公司发了新的MacBook Pro美滋滋，在用的过程中发现自己对linux的理解基本为零，这样可不行，所以这边记录一下常用的命令，以后在使用过程中如果遇到新的，也会逐步更新积累在这里。常用命令cd [目录名] 跳转目录ls 列出该目录下的文件和目录cat [文件名] 读取文件显示在命令行中vi/vim [文件名] 使用vim编辑该文件vim编辑使用方式i...

参考资料： - JS Promise API - ES6 Async/Await 完爆Promise的6个原因Promise js的异步处理，一直是使用callback的，但当我们要连续执行多个异步的时候，就会导致callback层层嵌套，很不友好。所以在ES6中，加入了Promise来帮助处理异步apiPromise.resolve() 　　 执行成功Prom...

最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算简单梳理一下思路。相关博客：Vue全家桶实践（一）—vue-cliVue全家桶实践（二）—iViewVue全家桶实践（三）—axiosVue全家桶实践（四）—vue-routerVue

最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算简单梳理一下思路。相关博客：Vue全家桶实践（一）—vue-cliVue全家桶实践（二）—iViewVue全家桶实践（三）—axiosVue全家桶实践（四）—vue-routerVue

最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算前端梳理一下思路。相关博客：Vue全家桶实践（一）—vue-cliVue全家桶实践（二）—iViewVue全家桶实践（三）—axiosVue全家桶实践（四）—vue-routerVue

最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算前端梳理一下思路。相关博客：Vue全家桶实践（一）—vue-cliVue全家桶实践（二）—iViewVue全家桶实践（三）—axiosVue全家桶实践（四）—vue-routerVue

最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算前端梳理一下思路。相关博客：Vue全家桶实践（一）—vue-cliVue全家桶实践（二）—iViewVue全家桶实践（三）—axiosVue全家桶实践（四）—vue-routerVue

最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算前端梳理一下思路。相关博客：Vue全家桶实践（一）—vue-cliVue全家桶实践（二）—iViewVue全家桶实践（三）—axiosVue全家桶实践（四）—vue-routerVue

在这里整理一下js中事件包含的各种知识。参考资料：w3cschool叶文翔的博客javascript 事件流JS函数节流防抖事件句柄（Event Handlers）onabort： 图像加载被中断onblur：元素失去焦点onchange：用户改变域的内容onclick：鼠标点击某个对象ondblclick：鼠标双击某个对象onerror：当家在文档或图像时发生某个错误on

js是一门面向对象（Object-oriented，OO）语言，去年看《javascript高级程序设计》的时候，已经系统的学习了js对象相关的知识，但是当时好像偷了懒，学完觉得很清晰，就没有做笔记。现在到了成都，新工作中普遍使用面向对象的思想，在实践中又加深了理解，但是一些理论基础还是有些遗忘了。所以在此特意复习回顾一下，做做笔记。这里没有引用很多书面语，而是以我自己学习和实践为基础，写出对js对

Vue双向绑定的原理Vue用了一段时间了，一直没有纠结过它的原理，今天看了一篇很不错的文章：Vue.js双向绑定的实现原理，跟着敲了一遍，发现其中有意思的地方还是很多的，一些知识我之前都没有接触过，这里要好好整理一下思路。这篇博客涉及的东西比较多，还需要慢慢整理。目前还未写完。主要的知识点： 1.Vue双向绑定原理（一）文档片段DocumentFragment 2.Vue双向绑定原理（二）访问器

DocumentFragment介绍JavaScript有以下几种创建节点的方式：createAttribute(name)： 用指定名称name创建特性节点createComment(text)：　　　　　　　 创建带文本text的注释节点 createElement(tagname)：　　　　　 创建标签名为tagname的节点creat

访问器属性的介绍参考资料：《JavaScript高级程序设计》（第三版）第六章js的对象有两种属性： 数据属性和访问器属性。1.数据属性数据属性包含一个数据值的位置。这个位置可以读取和写入值。数据属性也就是我们最常见的对象属性。数据属性有4个描述他行为的特性：Configurable: 能否用delete删除属性从而重新定义属性。默认为trueEnumerable: 能否通过for-in遍历

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