SH'S BLOG

1. call 异步阻塞调用2. fork 异步非阻塞调用，无阻塞的执行fn，执行fn时，不会暂停Generator3. put 相当于dispatch，分发一个action4. select 相当于getState，用于获取store中相应部分的state5. take 监听action，暂停Generator，匹配的action被发起时，恢复执行。take结合fork，可以实现takeEvery和takeLatest的效果6. takeEvery 监听action，每监听到一个action，就

webpack优化大合集在项目中经常用到的性能优化postcss-loader 以及 autoprefixer 插件自动补全css前缀raw-loader 资源内联提取公共资源代码分割及动态importwebpack中使用eslint打包速度分析打包文件体积分析多线程打包...

在React中使用Typescript最近学习的技术发现TS越来越多,于是自己尝试做了几个Demo实战,发现TS上手不是很难,但是一旦出现错误很难百度到对应的文档,而且在react中也不会使用ts来编写跟着这个文章走,内容可能会很长,一步一步去写,保证你的React项目可以使用TS来编写本人写的一个 TS+Hooks简易版实战1. 创建一个React的TS项目react的脚手架crea...

初始化初次加载组件的时候,会调用一次render函数更新state发生改变props发生改变强制更新如果不是前两种,还希望组件发生更新,可以使用this.forceUpdate()注意: <button onClick={() => this.forceUpdate()}>强制渲染 不可以写为<button onClick={this.forceUpd...

react配置装饰器npm install -D @babel/plugin-proposal-decorators配置.babelrc 文件或package.json文件的 babel 字段值（两者二选一，不要都配置，否者会报找到两个配置文件的错（1）配置 .babelrc 文件"plugins": [ ["@babel/plugin-proposal-decorat...

前言目前很多网站都有注册登录的方式,同时他们也都有第三方授权登录,那么为什么第三方授权会有呢?如果一个网站必须要注册登录才能访问的话,那么他的访问量会大量下降,如果不需要注册,例如使用微信和QQ去登录这个网站,是绝大多数的人的选择原理步骤一般第三方软件会有一个授权步骤第三方授权的图标是一个链接,链接到授权网站,获取到token 一般会携带一个 client_id还有一个回调地...

订阅发布模式在这种模式中，并不是⼀个对象调⽤另⼀个对象的⽅法，⽽是⼀个对象订阅另⼀个对象的 特定活动并在状态改编后获得通知。订阅者因此也成为观察者，⽽被观察的对象成为发布者或者主题。当发⽣了⼀个重要事件时候 发布者会通知（调⽤）所有订阅者并且可能经常已事件对象的形式传递消息vue中的 emit, on源码 ⼤概也是这个样⼦ vue源码完整的演示代码class A { const...

深拷贝说到深拷贝,肯定想到的最简单的方式就 JSON.stringify 和 JSON.parse 配合,这个是最简单的深拷贝方式手写一个深拷贝深拷贝 = 浅拷贝 + 递归 ,这个只是最笨的一种方式var a = { name: "muyiy", book: { title: "You Don't Know JS", price: "4...

理解原型和原型链原型和原型链学了很久,但是一直没有完全理解,虽然现在也没用完全理解,但能勉强对付一下了这里面先参考一下 阮大大的教程前言要先从继承开始讲起,根据其他语言比如java或者c++来说,他们都可以通过new来创建一个实例对象,然后js也出现了new的关键字,但是new后面不能跟着类,必须要跟着构造函数new运算符的缺点用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方...

React-美团(Dva + umi + koa + Mongoose)说明 自己为何要去尝试写一个这么多页面的网页????,本人是纯粹的小白一枚,在各大论坛不停的刷着Vue,React,RN,微信小程序等方面的教程,虽然不停的学习,但是发现自己的技术并没有实质上的提高,就是不停的重复着同样的任务,每个地方都学到了一点,只要混合在一起,马上就全都不会了,????所以第一次尝试使用最新的技术去制作一个...

当浏览器要请求资源时调用 Service Worker 的 fetch 事件响应查看 memory cache查看 disk cache。这里又细分：如果有强制缓存且未失效，则使用强制缓存，不请求服务器。这时的状态码全部是 200如果有强制缓存但已失效，使用对比缓存，比较后确定 304 还是 200发送网络请求，等待网络响应把响应内容存入 disk cache (如果 HTT...

实际开发的过程中,数据都是从后台获取的,那么他的长度是不确定的,所以我们需要设置一个溢出值第一种(单行)overflow: hidden;white-space: nowrap;text-overflow: ellipsis;第二种(多行)-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical...

在本次开发的过程中,我遇到了一个问题,就是我的首页是多个壁纸转换,需要提前加载先展示一下效果,再看代码,我的首页是多个壁纸之间跳转效果图代码 <template> <div> <div class="loading"> <el-progress type="dashboard" :percentage="percent...

在我们开发的过程中,我的开发流程一般都是说明 本地 -> git push -> 服务器 -> git pull -> npm i -> yarn build那么我们能不能去监听 git push 呢?如果我们每次push之后,服务器可以自动的去执行上面的后面的命令岂不是很好第一种方式使用 travis-ci.org -> 官网他的作用就是我们每次p...

Webpack实现es6转换为es5安装插件npm install --save-dev babel-loader @babel/core @babel/preset-env配置在webpack.config.js中的module的rules中,添加一条新的loader{ test: /\.js/, //babel转化es6到es5 exclude: /node_module...

网络安全前端不需要过硬的网络安全方面的知识,但是能够了解大多数的网络安全,并且可以进行简单的防御前两三个是需要的介绍一下常见的安全问题,解决方式,和小的Demo,希望大家喜欢网络安全汇总XSSCSRF点击劫持SQL注入OS注入请求劫持DDOS在我看来,前端可以了解并且防御前4个就可以了(小声逼逼:大佬当我没说)XSSCross Site...

请求 request 简写 req响应 response 简写 res客户端 -> 发出请求request -> 服务器做出一定处理之后 -> 返回响应response -> 客户端转发和重定向转发和重定向也是我们前端需要了解的一个能力,知道什么时候使用转发,什么时候使用重定向就可以了在发出一个请求或者说跳转到某一个页面的时候,并不能直接达到这个页面,我们需要...

Webpack介绍1.1 Webpack是什么webpack是前端方面的静态资源打包工具,能够让浏览器也支持模块化,他会根据模块的依赖关系进行静态分析,然后按照某种规则生成静态资源1.2 WebPack的作用webpack的核心主要是进行JavaScript资源打包把静态文件,例如png,sass,less,css,js等多个文件打包成一个文件,减少页面的请求可以集成 http ...

在开发的过程中,如果我们能够熟练掌握vue的修饰符,就可以大大提高我们的开发效率分类表单修饰符事件修饰符鼠标按键修饰符键值修饰符表单修饰符.lazy<div> <input type="text" v-model="value"> <p>{{value}}</p></div>//每次数据改变...

easy-mock数据接口说明: 由于eask-mock访问量过大,总是出现无法访问或者不安全链接等等神奇的操作,=-=,原官网,所以我只好自己踩坑去安装easy-mock数据接口,期间内也是遇到了很多神奇的问题,!竟然要求node版本是8.^.版本!,这可是很古老了,然后又去学习和安装了nvm,反正一大堆坑!!!关于如何使用mock数据,请查看 mockjs自己如何安装? 安装...

antd简介antd 是蚂蚁金服推出的一套非常好的React UI库,使用起来特别方便,而且也推出了Antd手机端库,同时还推出了vue的使用方式如果没有按需加载,我们如果想要使用一个标签,比如Button,需要导入js和css文件,使用起来不是很方便,而且还会造成性能上面的一个下降,先来看一下正常版本的使用import React from 'react';import { ...

pm2 解决了node不能多线nvm 让你的电脑里安装很多个不同的node版本nrm 快速管理你的npm,多个镜像源内切换nodemon 监控node代码段是否更新,让代码重新运行node 常用工具大整合这些都是我个人平常总是使用的一些关于node的工具,不喜勿喷pm2先声明对于线程的补充 我们引用官方的解释：线程可以独立运行的最小的CPU单位，可以在...

What is Travis CI?Travis CICI(Continuous Integration)翻译为持续集成。Travis CI是一个提供持续集成功能的平台，在Github上，可以添加Travis CI，当有code push时候，会推送通知到Travis，根据设置的脚本运行指定任务。目前有两个站点:Travis.org 对于所有public项目完全免费Travics.com...

什么是pjax?pjax = ajax + pushState通过ajax让页面进行局部刷新,然后通过pushstate让url发生改变,再让pushState,让页面产生一个回退的记录,从而让页面的性能进行大幅度的优化简单demo感受一下准备两个页面 index.html content.htmlindex.html<!DOCTYPE html><ht...

策略模式优点以及定义策略模式是一种从算法的角度上考虑问题的方式,所有需要算法解决的问题,都可以采用策略模式的角度,降低算法与算法之间的偶尔度偶尔度说白了就是一个方法对于一个方法的依赖性,就是删除一个方法尽可能少的影响其他的方法使用其实我们在开发的过程中,都使用过策略模式,只是我们本身没有去注意摆了举例说明使用现在我们要做一个表单验证正常新情况下$('#btn_send...

HTTP（超文本传输协议），是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议，所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。HTTPS（超文本传输安全协议），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加...

防抖解释定义防抖是指在一定的时间内再次触发此事件,会清空上次的事件重新开始,如果制定的时间内没有再次触发,那么这个事件才会执行例如: input输入信息,不可能每次按下都发起一个ajax请求,可以等一段时间内不输入了之后在发起请求代码样例function debounce(sayHi){ var timer = null return function(){ clea...

手写new看一下正常使用newfunction Dog(name){ this.name = name}Dog.prototype.sayName = function(){ console.log(this.name)}var dog = new Dog('小狗')dog.sayName()结果为小狗自己手写的newfunction Dog(name){ ...

继承JS中继承的概念：通过【某种方式】让一个对象可以访问到另一个对象中的属性和方法，我们把这种方式称之为继承 并不是所谓的xxx extends yyy为什么要使用继承？有些对象会有方法(动作、行为)，而这些方法都是函数，如果把这些方法和函数都放在构造函数中声明就会导致内存的浪费 function Person(){ this.say=function()...

npm包管理工具npm可以理解为前端的maven,一个包的管理工具1. 查看npm和node版本node -v npm -v2. 初始化项目npm init默认配置初始化项目npm init -y3. 安装本地安装npm install <Module Name>@版本号全局安装npm install <Module Name>@版本号 ...

关于js的this指向问题一直困扰着我们,并且面试的时候总是喜欢有关this的的问题讨论this的指向,就要从四个角度来分析看触发this的方式去决定this指向哪里1.方法调用var obj = { name: '残梦博客园', say: function(){ console.log(this.name) //残梦博客园 }}obj.s...

在js中,对象属于是键值对的集合//例如const obj = { name: '残梦', say:function(){ console.log('你好') }}在上面这个代码中,name就属于是key,而'残梦'就是value如何获取对象属性第一种方式: .语法student.name 获取到student的name属性stude...

策略模式优点以及定义策略模式是一种从算法的角度上考虑问题的方式,所有需要算法解决的问题,都可以采用策略模式的角度,降低算法与算法之间的偶尔度偶尔度说白了就是一个方法对于一个方法的依赖性,就是删除一个方法尽可能少的影响其他的方法使用其实我们在开发的过程中,都使用过策略模式,只是我们本身没有去注意摆了举例说明使用现在我们要做一个表单验证正常新情况下$('#btn_send...

为何要去写博客作为一个苦逼的程序员,发现自己遇到问题,总是直接在百度上直接去搜索,然后找到解决的方案之后就开始了自己的工作(改bug=-=)是什么给了我这种刺激作为一个小白程序员(尤其是还没毕业),总是会想尽一切办法提升自己的编程能力,没错,那就是我一次偶然的观看大佬的教程视频讲解的时候,他突然问了我们一句话:你们热爱编程吗?说到这里呢,我感觉自己非常喜欢编程,总是喜欢自己做出来的成...

margin: 0 auto;为何会居中呢???一开始的学习html的时候,就是只知道块级元素margin:0 auto就能居中但是后来就很好奇margin: auto 0;为何不能垂直居中?margin: 0 auto 0 0;如果只设置一个margin会发生什么?现在我们就开始学一下首先如果想要设置居中,width是必须设置的,如果不设置width元素,那么块级元素一定会...

Generator究竟有什么样的作用呢???他是ES6提出的一个解决异步问题方案先看一段代码, 感受一下generator函数和普通函数的区别 function* test(){ yield 2; yield 3; yield 5; } var app = test() // 此时代码不会执行...

说一说我对于mvvm模型的理解吧我第一次接触mvvm也是在学习vue的时候,在我看来vue和react都是数据驱动视图,但是vue属于标准的mvvm模型,react是从组件化演变而来不多废话,直接粘图第一次使用mvvm的时候感觉特别的神奇,我只是修改了数据就可以驱动视图的改变学习mvvm模型的作用一开始就是在学习vue的使用还有vuex等等很多,也能做一些小的网站,但就是...