qq_44746132的博客

手写Vue-router源码:（hash模式简易版）用户使用Vue.use()时，实际执行了模块中的install方法，而install方法可以接收到Vue的实例,而此时既可以在install方法中为Vue的实例上使用mixin去扩展相应的内容let Vue;// 创建Vue-Router的类class MyRouter{ static install(_Vue){ Vue = _Vue; Vue.mixin({ beforeC

节流和防抖可能很多人都听说过，或者使用过，我认为它主要是对我们的一些js操作起到一些优化性的作用的，我们先看看官方对于这两个东西的概念吧:防抖: 是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间，防抖注重结果节流: 让一个函数无法在很短的时间间隔内连续调用，当上一次执行完之后过了规定的时间间隔，才能进行下一次的函数调用，节流注重过程可能...

webpack之旅这么久，迎来了最终的一个章节，最近由于事情较多，所以最后一张稍稍来的比较晚，但既然是最后一节内容，那我们就来玩点有意思的: 手写一个简易的webpack打包，帮助大家更加深入的理解webpack的打包实现首先我们先理清一下思路: webpack作为一个模块打包工具，它需要知道我们到底引入了哪些模块，我们的js代码中的高级语法的还原为低版本的es语法。那么，我们的思路是: 通...

继上次node发送邮件后，node番外篇二我们来说说如何在LeanCloud平台上进行短信验证码的发送。是不是很激动，现在我们就来看看吧！！！使用CleanCloud平台发送短信验证码，首先我们肯定需要去平台进行用户注册并按照平台的指引完成实名认证，之后需要我们创建一个实例、当这一切你都完成后，点击进入我们的控制台 > 短信 > 设置 进行我们发送短信前的一些平台设置: 启用短信...

之前几天的Webpack中我们说到的所有的打包的都是只针对于单个页面的打包，甚至是一些脚手架工具中的webpack页面打包都是单页面的。但是当我们需要打包出多个html页面时，我们又应该怎么搞定呢？关于多页应用的打包其实不是webpack的内容，而是我们需要如何使用nodejs去实现多个页面的打包：假设我们现在有如下一个简单配置文件：const path = require('path')...

最近在做一个demo的时候需要使用到了邮件发送验证码的需求(不使用短信验证码的原因主要还是短信验证码需要花费~~)，那继node路完结后开始推出番外篇，说说如何使用nodejs模块向邮箱发送信息；注： 今天我们使用的是QQ邮箱，其他的比如126邮箱也都是类似的首先第一步,使用node操作邮箱发送信息我们需要开启QQ邮箱的POP服务：开启步骤: 登录扣扣邮箱 -> 设置 -> ...

上次我们深入介绍了Loader的相关的内容，今天我将带大家深入看看Plugin插件的内容：首先我们回顾一下Plugin具体是什么: plugin是插件，它是类似生命周期的一些东西，当webpack在进行打包的时候去对打包做一些具体的处理。我们之前说plugin的时候也说到了，plugin插件的底层是一个类，它会在webpack打包的某一时刻被执行。那么我们现在就开始带大家去编写一个Plugi...

今天我们的webpack主题是深入理解Loader,那要如何深入理解呢？今天我将带大家自制一个Loader!!好了，文章开始，我们先来回顾一下什么是Loader:我在之前的文章中介绍使用Loader的时候说过，Loader实际上是一个函数，当webpack在处理一些非通用型的文件时，webpack不知道如何去进行处理，那么就由Loader去帮助webpack处理。所以，简单说Loader就是对...

今天我们先说一下文webpack中的Tree Shaking:为什么需要使用Tree shaking?当我们在使用webpack进行模块打包时，如果就仅仅是我们之前的一些基础的配置项，最终会发现我们打包出的所有的模块仅仅只是一个bundle.js文件，webpack将我们所有的打包的模块都放到了这个文件中，就会使得bundle.js文件变得特别的大，这还不是最关键的。当我们在打包时，我们经常会...

PWA是什么？PWA的全称是Progressive Web App, 意思是渐进式网络编程，这是Google提出的使用前沿的技术为网页提供原生app体验的技术解决方案.它其实并没有什么魔法，而是使用如Service Worker, Promise, fetch, cache API, Notification API这样一些相互解耦的技术组成的。今天我就将以PWA的最主要的技术Service W...

Node路我们零零散散的说了十天，这期间我们主要围绕着使用Nodejs建站进行node的学习,几天是我们node学习之旅的最后一站，我将为大家最后说到的是使用pm2进行node项目的线上配置先说一下pm2： 这是一个带有负载均衡的Node的进程管理器使用pm2可以进行进程的守护使用pm2启动多进程pm2进行日志访问记录我们首先简单介绍下pm2工具的一些常用的使用命令:pm2 ...

经过我们之前的node路的学习，我们基本能够整合各种信息搭建一个小型的服务器系统弄了，那今天我们就来说一下服务器的安全问题: (注意，这里我们说到的只是个大概，就不进行深入了)我们主要说到的安全问题有三个:sql注入密码加密xss攻击1.关于sql注入，我们举一个简单的例子，他其实就是恶意者对我们数据库的攻击，获取我们数据库中的用户信息等私密的数据，我们之前在连接数据库...

node路继续，我们上一次说到了使用原生的node如何对我们的项目进行日志的记录，在看此篇文章前，推荐先看如何使用原生的node进行日志记录，因为这里我们不会再说到原理的东西，毕竟之前我们已经说到了，这里我们直接使用morgan在两大框架中进行日志的记录:express 脚手架安装的项目中，已经进行了基本的日志记录了，包括在koa中，也是使用了一个koa-logger在开发环境下进行日志的记录...

对于一个服务，若我们没有进行日志记录，那么这台服务器可以说成是瞎子也不为过了，为服务写日志的目的是为了了解到问我们服务运行期间的一些情况，被多少次访问了，期间什么时候那些接口出现了错误等等我们都需要日志来进行记录常见的日志我们都是记录到文件中的，为什么不用redis数据库或者是mysql数据库来存储我们这里也先说一下:关于redis缓存数据库我们之前进行登录验证的时候也说到了，它作为内存...

珊珊来迟，今日分node继续: 之前几天我们介绍使用node搭建服务器的一些小插曲，其实现在我觉得今天突然插入node爬虫不是很合适，我们应该先将node搭建服务器说完在继续这些，但考虑昨天的预告中我们说到了今天讲一下node爬虫，所以这里我们就当做一个小插曲吧，之后我们还是继续说一些node搭建服务器的东西，关于node使用redlock插件实现基于redis的node分布式锁就先往后延一延啦...

昨日我们说到了如何使用原生的nodejs实现cookie + session + redis制作登录验证，但原生实现起来毕竟太过于麻烦，而现在的node项目又多是基于express和koa框架开发的，所以我们今天就来说一下如何在express 和 koa 脚手架创建的项目中配置使用session实现登录验证既然我们这里使用了express 和 koa 的脚手架创建项目，所以我们也有必要简单说一...

关于登录这块应该是每一个系统中都必须的一个环节之一，虽然现在的第三方登录确实很流行，也很安全，但别人的始终是别人的。所以我们今天就来说一下如何使用原生的node实现客户端登录验证关于cookie(仅仅是我的理解): cookie是存储在浏览器的一段字符串，最长限制5kB，它的一些特性如下:跨域不共享: 及在不同的请求域下的cookie的值是不同的格式为键值的形式: 即 “k1=a1; ...

昨天我们说到使用node中的mysql 模块连接操作mysql 数据库，在文章的最后我们说到了可以使用Sequelize以完全的js 的形式创建，操作数据表, 那么我们今天就来说说Sequelize 具体应该怎么去使用首先我们还是说一下前期的准备工作:初始化一个node的开发项目: npm init -y项目中安装上sequelize安装上mysql2 （由于这里我们仍然是操作m...

node篇二： 使用node连接mysql 数据库昨天我们使用node && Express && koa 简单介绍了如何创建基本的服务器以及如何进行基本的请求数据处理。但作为服务端开发来说，不能连接操作数据库进行数据存储，那么这个服务端工程师就是半废品状态。所以我们今天就来说一下在Node中我们如何进行数据库的连接操作: (这里我们操作的是关系型数据库 mys...

开始前，我们先说一下客户端http请求服务端相应的大致过程:上图的说法可能不准确，但能描述个大致就行了：首先我们的客户端浏览器根据域名进行请求，域名经过DNS解析后及得到我们的服务器的ip地址，此时便可根据这个ip地址找到相应的服务端，之后的三次握手通俗的说就是客户端告诉服务端我需要发起请求，服务端又告知客户端我是可以请求的，之后客户端在发起具体的请求。 之后客户端再发起具体的数据请求到服务端...

React在2018年年末推出的Hooks新特性使得之前的function无状态组件变得有状态了，让函数组件也拥有了类组件的特性。同时hooks的出现也解决了类组件中组件逻辑散布于各个生命周期中，造成组件臃肿，可复用性不强的特点。同时，对于一些组件的副作用在Hooks中也得到了较好的解决。总之，Hooks的出现，对于React组件化的开发而言将会是一次巨大的革新这篇博客主要介绍的是关于Hooks...

上一篇博客中说到ssr服务器端渲染与客户端渲染的比较，这次介绍的Nextjs便是一款react完成ssr的一款同构框架简述Next完成服务端渲染流程:这里nextjs初探将介绍以下Nextjs 的页面跳转，路由切换，路由切换钩子，组件数据的获取(即上述图中的getInitialProps）,Next异步加载组件和模块Nextjs作为服务端渲染的同构框架，整体的项目结构中是不存在我们客户端...

前序：简述SEOSEO(Search Engine Optimization)是指搜索引擎优化，通俗说就是总结搜索引擎的检索排名规则，合理的优化网站，使得你的网站在百度或者谷歌这样的搜索引擎中的排名进步，让更多的用户能够访问到你的网站。客户端渲染：客户端渲染（Client Side Render）,就是用户在通过URL请求访问网站时，服务器端返回给的是html文档，再让浏览器去解析渲染...

特性1 => context ：在我们接触redux之前，当进行父子组件间的传值时，我们的方法是将需要传递的State在父子组件间逐层传递，而在之前我们介绍的redux中，则可以将所有的State托管到store中，而各层组件需要时直接到store中去拿取即可，但在没有使用redux时，State的传递现在便可以使用context进行传递。=>以下是一张使用context传递Sta...

对于组件化开发的应用而言，当系统结构较为简单，数据逻辑比较少的时候，我们直接在组件间对数据进行相互的传递使用也不是什么太难的事，只要在父子组件间去进行简单的数据传递就可以了。 但当我们的系统不断的发展壮大后，对于数据的管理就会变得越来越麻烦，而且，当我们需要在不相邻的组件间传递数据也会变得很繁琐，如果数据很多，或者是数据很繁杂，那么，我们需要对系统进行更新换代，或者是升级改造就会是件及其不容易的事，我们需要从千丝万缕的数据中去寻找关系，那将是及其恐怖的。

react初探：react中的几个核心概念：1.虚拟的dom(Virtual Document Object Model)—dom的本质：就是使用js来表示 的UI元素dom和虚拟dom的区别:Dom是由浏览器中的js提供的功能，所有我们只能够人为的使用浏览器提供的固定的API来操作dom对象;虚拟Dom:虚拟dom是由我们程序员手动来模拟实现的，类似于浏览器中的DOM，但是其与DOM...

场景导入:采用es6语法的nodejs进行读取文件的操作:const fs = require('fs')const psth = require('path')function getFileContent (fpath) { fs.readFile( fpath, 'utf-8', (err, dataStr) => { if (err) throw err retu...