Sun.sir-CSDN博客

原创手写Promise原理实现

手写Promise源码从构造函数开始Promise就是一个类，在执行这个类的时候需要传递一个执行器进去，执行器会立即执行。Promise中有三种状态分别为：成功fulfilled失败rejected等待pending，一旦状态确定就不可更改。//Promise 类核心逻辑实现const PENDING = 'pending';//等待const FULFILLED = 'filfulled';//成功const REJECTED = 'rejected';//失败class

2021-04-01 15:11:16 137

原创 JavaScript 异步编程

JavaScript 异步编程内容概要同步模式与异步模式事件循环与消息队列异步编程的几种方式Promise异步方案、宏任务/微任务队列Generator异步方案、Async / Await 语法糖1.0 同步模式与异步模式1.1 进程和线程进程：当一个程序开始运行时，它就是一个进程，进程包括运行中的程序和程序所使用到的内存和系统资源。而一个进程又是由多个线程所组成的。线程：线程是程序中的一个执行流，每个线程都有自己的专有寄存器(栈指针、程序计数器等)，但代码区是共享的，

2021-04-01 15:02:20 111

原创函数式编程

函数式编程-笔记函数式编程(简写FP) 是编程范式之一，我们常听说的编程范式还有面向过程编程，面向对象编程函数式编程式是随着React的流行受到越来越多的关注Vue 3 也开始拥抱函数式编程函数式编程可以抛弃this打包过程中可以更好的利用 tree shaking 过滤无用代码方便测试，方便并行处理有很多库可以帮助我们进行函数式开发：lodash underscore ramda总结：函数式编程是一种编程范式，跟面向对象编程式并列关系函数式编程中的函数实际上指的就是数学中的函数可

2021-04-01 14:53:23 125

原创防抖和节流，代码实现

防抖和节流什么情况下会用到防抖和节流呢？在绑定一些事件的时候，如resize，鼠标移动等。。就是持续触发事件的时候。有时候我们并不希望在事件持续触发时，频发的去执行函数，所以需要用到防抖和节流。什么是防抖？(防抖节流插件：underscore.js)原理：事件响应函数在一段时间后才执行，如果在这段时间内再次调用，则重新计算执行时间；当预定的时间内没有再次调用该函数，则执行响应函数。一般防抖还是用的比较多的应用场景：scroll事件滚动触发搜索框输入查询表单验证按钮提交事件浏览器

2020-07-31 23:32:07 711

原创 Webpack 性能优化（基础）

Webpack 性能优化（基础）一、跟上技术的迭代（Node，Npm，Yarn）最好更新到最新版本，因为最新版肯定是对于之前的版本做了一定的优化二、在尽可能少的模块上应用 Loader来提升webpack的打包速度三、尽可能少的使用Plugin并确保Plugin的可靠性四、合理的应用resolve配置项中的参数五、使用 DllPlugin 提高打包速度六、控制包文件大小七、thread-loader，paraller-webpack，happypack 多进程打包八、合理使用sourceM

2020-06-23 22:44:45 140

原创如何编写一个Loader

比如我现在实现一个简单地字符替换的Loader，该怎么做？这是业务代码：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVkrhUw5-1592838633564)(https://i.loli.net/2020/06/21/wVLN7SvMTUbaBAe.png)]我要把Sun替换成别的字符：为了方便使用，可以先下载个依赖npm install loader-utils --save-dev在根目录下创建loaders文件夹，里边比如创建一个replac

2020-06-22 23:11:01 466

原创 Promise和async/await

一、为什么有Async/Await？我们都知道已经有了Promise的解决方案了，为什么还要ES7提出新的Async/Await标准呢？答案其实也显而易见：Promise虽然跳出了异步嵌套的怪圈，用链式表达更加清晰，但是我们也发现如果有大量的异步请求的时候，流程复杂的情况下，会发现充满了屏幕的then，看起来非常吃力，而ES7的Async/Await的出现就是为了解决这种复杂的情况二、Promise的基本概念Promise本质上其实就是一个构造函数，是用来解决异步编程的一种方案，她呢最早是由社区提出

2020-06-18 22:08:58 216

原创 HTTP协议概念及工作流程

HTTP协议重要性：无论是以后用webserveice ，还是用rest做大型架构，都离不开对HTTP协议的认识甚至可以简化的说：webservice = http协议+XMLRest = http协议 + json各种API，也一般使用HTTP+XMl/json 来实现的往小来说，比如：小偷站也需要对HTTP协议有所了解以及AJax对HTTP协议有了解之后，学习AJax是非常容易理解的什么是协议？计算机中的协议和现实中的协议是一样的，一式说份/多份双方/多方都遵从共同

2020-06-17 21:38:21 289

原创什么是vuex?

什么是vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex能够帮助我们解决什么问题?vuex能够帮助我们解决组件之间数据传递或者共享的问题vuex的理解Vue 应用中的每个组件在 data() 中封装着自己数据属性，而这些 data 属性都是私有的，完全隔离的。如果我们希望多个组件都能读取到同一状态数据属性，或者不同组件的行为需要更新同一状态数据属性，这就需要一个..

2020-06-17 01:36:20 290

原创 vue中使用富文本编辑器

vue中使用quill富文本编辑器下载依赖npm i quill -Snpm i vue-quill-editor -S直接在组件中，或页面中使用，代码注意：我的提交按钮用了element-ui组件库的提示组件<template> <div class="edii_page">  <quill-editor class="editor" v-model="conten

2020-06-16 01:38:09 878 3

原创 Webpack：PWA离线缓存

什么是 Service Worker？Service Worker 是一种 Web Worker。它本质上是一个与主浏览器线程分开运行的 JavaScript 文件，可以拦截网络请求、缓存资源或从缓存中检索资源、传递推送消息基于web worker（一个独立于JavaScript主线程的独立线程，在里面执行需要消耗大量资源的操作不会堵塞主线程）在web worker的基础上增加了离线缓存的能力本质上充当Web应用程序（服务器）与浏览器之间的代理服务器（可以拦截全站的请求，并作出相应的动作->

2020-06-11 21:29:30 716

原创 Webpack系列（七）：css文件的代码分割

怎么对css文件进行代码分割？如果我们想让引入的css文件，在打包时，单独生成一个css文件到dist目录的话，可以这样做先下载一个插件npm install --save-dev mini-css-extract-plugin在webpack.config.js中进行配置const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { plugins: [new MiniCssE

2020-06-10 20:34:28 359

原创 Webpack系列（系列六）：Code Splitting 和 Webpack的关系

Code Splitting是什么？Code Splitting也就是代码分割的意思，本质上跟Webpack是没有关系的因为我们会发现，我们通过Webpack打包的js文件，都会放在一个文件当中，那么如果我的业务代码很长，一个js文件可能有2mb大小，那么都放在一个js中，用户是不是在访问页面的时候，都得每次加载这么多的资源？这就造成一个隐性问题，加载时间过长，给用户的体验感不好！！！所以就需要代码分割了，提高页面性能那么之前我们做代码分割都是手动来去做，很麻烦，但是Webpack提供的配置可以很方便

2020-06-09 20:43:48 202

原创 webpack(系列五)：development和 production 模式的区分打包

为什么要区分打包呢？是因为如果开发环境的配置和生产环境的配置都放在一个文件里，那么配置的多，想要去切换这两种模式的打包，就显得很麻烦了，所以，建议把他们区分开来1. 首先在项目根目录下创建三个文件存放到build文件夹webpack.common.js 存放两个模式下的公共配置webpack.dev.js 存放development模式下的配置webpack.prod.js 存放production模式下的配置2.webpack.co

2020-06-08 23:23:59 1056

原创 webpack系列(四):搭建Vue和React

前文：我在使用webpack的过程中，遇到一个坑，这个坑跟cnpm和npm 有关系，所以当去下载依赖的时候，记得如果用cnpm下载的话，都用cnpm下载就可以，要不然打包和运行的时候很容易会出现bug，当然也可以给node_modules文件夹删掉，重新cnpm i 或 npm i 进行全部下载都是可以的一、先简单说下搭建React环境1. 下载依赖npm install --save-dev @babel/preset-reactnpm insstall react react-dom

2020-06-07 19:32:15 234

原创 Webpack(系列三)：热模块更新和使用 Babel处理 ES6语法

热模块更新为什么要用热模块更新呢？比如，我做了css样式的修改，当我想要在不刷新当前页面html的前提下，让样式渲染出来，就需要用到热模块更新了，相关配置:在webpack.config.js文件中，对devServer和plugins进行配置const webpack = require('webpack') // 移入webpack 在plugins中需要用到它的热模块加载方法module.exports = { devServer:{ open:true,

2020-06-06 21:58:35 784

原创 Webpack(系列二)：什么是loader？

什么是loader？Loser就是一个打包的方案，他知道对于某一个特定的文件，Web pack应该如何的进行打包。本身webpack 对于一些文件是不知道该如何处理的，但是loader知道，所以呢，我们想要打包其他文件格式的话，直接去配置loader可以了如何打包图片资源？可以结合两个插件去配置图片的打包，file-loader 和url-loader下载插件npm install file-loader -D //对于大的图片去做处理npm install vue-loader

2020-06-04 21:52:11 615

原创 Webpack系列(一)：初步使用Webpack

一、为什么要使用Webpack？随着前端工程越来越复杂，单独写几个文件来写业务代码，这样的方式已经无法保证项目的可维护性了，所以我们就想把不同的业务逻辑拆成模块然后去分开引入这些模块，每个模块自己做自己的事情。这样就可以保证项目地维护性和可扩展性了！但假如你有几千个模块，那你能在页面上引入几千个js文件吗？所以当项目大到这种程度的时候，我们就得借助工具来管理我们的这些模块了！而Webpack就是可以帮助我们管理复杂项目的一个工具。与Webpack类似还有很多相似的工具，比如说Gulp，Grunt，

2020-06-03 20:12:29 316

原创响应式布局的简单介绍

前言（文章随笔）我们都知道，响应式布局就是为了让我们的网站可以同时适配不同分辨率和不同的手机端，能够让用户有更好的体验为的就是防止页面在其他一些屏幕分辨率上样式直接崩盘，如果我们只考虑了某个特定的屏幕分辨率，而不考虑其他屏幕，这样的话，当用户用手机或者其他一些设备打开网站发现，整体的布局已经惨不忍睹，给用户带来了很不好的体验，就造成了用户的流失`所以响应式布局就随之诞生了！！！那么随着时间的变化，响应式布局的方法也是多种多样，下面列举下常用的几种：一、百分比布局百分比布局就是利用对属性设

2020-06-03 01:27:03 398

原创团队开发如何使用git分支？

一、什么是git分支比如如说我们一个小组开发一个项目，如果每次小组成员把修改的代码都提交到主分支（master）上的话，那么其中某个成员一旦有了失误，跟其他成员代码之间发生了冲突，那么整个项目就不能正常运行了，这会严重干扰我们的进度，所以就需要去创建一个开发分支(development),把每次修改的代码都推送到开发分支上，那么就不会对主分支项目产生影响，更有利于组长合并代码，做容错处理，进行测试，当测试没有问题，就可以把开发分支（development）上的所有代码与主分支（master）进行合并

2020-06-02 08:16:21 2054 2

yu923023913的博客