论一个程序媛的自我修养-CSDN博客

原创 webpack 模块化

首先，说明两种不同的模块规范：commonjs规范：node应用是由模块组成的，每一个文件都是一个模块，拥有自己的变量、作用域和方法。每个模块内部都会包含一个对象module，这个对象的exports属性是对外的接口，每次加载这个模块都是加载这个属性中的内容，require方法用于加载某个模块。ES6模块规范：ES6模块规范是我们现在常用的，它是通过import进行模块导入、通过export进行模块导出。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和

2021-04-12 14:50:41 293

原创 AST 抽象语法树

前言：Q1：AST是什么？做了什么？AST是抽象语法树Q2：为什么要将代码字符串转换为AST？Q3:怎么解析jsx语法在程序中，一段代码在被执行之前，都会经历三个阶段：1.分词–词法分析这个过程会将由字符组成的字符串分解成有意义的代码块，称为词法单元。例如 var a = 4;会被分解成‘var’,‘a’,’=’,‘4’,’;’2.解析–语法分析这个过程会将词法单元流转换成一个由元素相互嵌套的、表示程序的语法结构的树，叫做抽象语法树。3.代码生成将抽象语法树转换成可执行代码的过程叫做

2021-04-12 14:48:56 372

原创写一个简单的webpack打包工具

1.搭建项目基础骨架我们在项目中新建一个bin文件夹，在bin目录下创建start.js文件，这个文件的主要作用就是将webpack的基础配置传入编译模块（compiler），然后开启编译过程。// start.jsconst path = require('path') // 1. 读取需要打包项目的配置文件let config = require(path.resolve('webpack.config.js'))// 核心编译器const Compiler = require('..

2021-04-07 16:10:07 220

原创 webpack源码解析

话说在前头：在使用webpack打包的过程中，我们只管加入自己需要的插件，在打包的某个阶段实现相应的功能，并且加入loaders来处理各种各样的文件类型，但是1.webpack内部的整个运行流程到底是怎么样？2.它是如何一步步的输出打包文件的？3.插件和loaders在哪个阶段起作用的？一 webpack.js我们从webpack.js文件开始分析：// 用我们自定义的配置覆盖webpack默认的配置返回综合配置 options = new WebpackOptionsDefaulte

2021-04-07 14:55:42 1052 1

原创 webpack tapable啥玩意？

一.同步钩子SyncHook这是tapable最简单的一个钩子，它的

2021-03-24 16:35:16 257

原创 react-router 使用总结

1.withRouter 的作用function MyRouter () { return ( <Router basename='/help'> <Suspense fallback={<JsLoading />}> <TopBar /> <Switch> <Route exact path='/' component={HelpHome} />

2021-03-04 16:36:00 468 2

转载可以改变原数组的方法

1.可以改变原数组的方法pop()：删除数组最后一个元素，并返回该元素push()：在数组尾部添加元素，并返回更新后的数组长度shift()：删除数组的第一个元素，并返回该元素unshift()：在数组第一位添加元素，并返回更新后的数组长度sort()：对数组排序（按字符ASCII进行排序），也可添加回调函数按照想要的规则排序reverse()：数组反转splice(index, howmany, 新数据)：返回被删除元素所组成的数组。2.如何避免改变原数组（深拷贝）//方法一：slice

2021-03-03 16:41:58 6648 1

原创 useCallback和useMemo用法区别

1.useCallback作用：在依赖项发生变化的时候，返回一个新的函数引用。需求：1）请求数据的接口需要放在useEffect外面，因为要将该方法传递给子组件2）在conditions发生变化时，自动执行该函数3）只有在conditions发生变化时，才会重新render子组件中的内容。代码如下：const fetchPoolList = useCallback( () => { apis.getGoodsPoolList(conditions).then(res

2021-02-04 14:16:33 1138

原创 useEffect实现数据请求刷新的几种方法

请求数据入参变化的情况下重新请求数据的情景下useEffect的几种写法：1.函数在useEffect里面：const query = '' useEffect(() => { function fetchData () { return 'https://hn.algolia.com/api/v1/search?query=' + query } fetchData() }, [query])2.函数放在函数式组件外面：const planCod

2021-02-02 20:21:21 3922

原创 git 常见用法

一.基本操作1.创建仓库mkdir myTest:make directory的缩写cd myTest:进入该仓库pwd:print working directory打印当前工作区域目录git add xxx.file：将文件暂存到暂存区域，可多次操作git commit -m’本次提交的文字说明’ ：将文件提交到仓库2.查看状态和改动git status:查看工作区的状态git diff:查看修改的内容3.版本回退git log:查看提交记录回到上一个版本：git reset -

2021-01-27 11:38:33 299 1

原创 webpack 中分不清的名词

1.chunk是什么？Chunk在Webpack里指一个代码块，那具体是指什么样的代码块呢？????Chunk是Webpack打包过程中，一堆module的集合。Webpack通过引用关系逐个打包模块，这些module就形成了一个Chunk。产生Chunk的三种途径entry入口异步加载模块代码分割（code spliting）Chunk只是一个概念，理解了Chunk概念，更有利于对webpack有一定的认识。注：chunk bundle的区别一般来说，chunk文件和bundle文件都是

2021-01-21 15:53:07 898

原创 webpack-dev-server和HMR原理

webpack-dev-server只用于开发，不能在生产环境中使用。在代码打包的时候，我们都需要手动运行一下，会很麻烦，webpack有几个工具可以帮助我们自动编译并运行他们：1.webpack的观看模式2.webpack-dev-server3.webpack-dev-middleware1)观看模式webpack观看模式可以监视“依赖关系”中的所有文件，这些文件之一被更新之后，代码会被重新编译，不需要手动重新打包。在webpack.config.js文件中添加一行："scripts":

2021-01-06 15:33:21 731

原创如何配置babel?

在对babel进行配置的时候，我们一般都是复制粘贴官网上例子或者使用现成的脚手架，但其实其中的每一项我们都不太了解，它是做什么的？实现了什么功能？因此，做一下具体详细的记录。1.首先es6增加的内容分为语法和api语法：比如箭头函数和解构const fn = () => {}const arr2 = [...arr1]新的api：比如map和promiseconst m = new Map()const p = new Promise(() => {})2.@babel/co

2020-12-08 15:06:55 639

原创 output里面的publicPath和devServer中的publicPath的区别

在研究webpack打包的时候，一直对于publicPath有比较大的迷惑。今天就来记录一下我解惑的过程。首先，webpack-dev-server也可以打包，它用于在开发环境中打包文件，并将打包后的文件运行在本地服务器上，在生产环境下打包时，用webpack打包，打包之后的文件运行在线上服务器上。webpack-dev-server里面的publicPath就是指定本地服务器下的某一个路径，而output中的publicPath是指定线上服务器下的某一个路径。这是它们本质的区别。接下来，我们来仔细讨论

2020-12-01 16:02:41 1421

原创 js实现模糊的蒙层

在项目当中遇到一个问题：在做新人指导的时候，蒙层需要是模糊的，使得下方的内容看不清楚。这里有一个误区：以为模糊的那层是加在蒙层上的，其实是加在蒙层下方的内容上的，当蒙层出现时，就给该内容加上filter:blur(6px)这样在蒙层的效果下，就会有一种蒙层是模糊的错觉。加属性的元素应该是与蒙层一级的元素，不然会使得蒙层上的内容也变得模糊。...

2020-11-27 10:09:09 769

原创 npm i安装命令中的-G -D -S的区别

1.npm i xx -g是npm install xx --global的缩写，将模块进行全局安装。全局安装就是把模块安装到操作系统上，例如：npm i webapack -g，就是全局安装webpack，这样在操作系统下的任何一个目录下都可以使用webapcak所提供的命令。2.npm i xx -D是npm install xx --save-dev的缩写，对模块进行局部安装，模块写到devDependencies对象中。局部安装的意思就是只针对于当前的项目，模块一般安装在项目文件夹下的no

2020-11-04 16:31:31 547

原创 redux源码超详解(附举例)

redux源码详解(一)下图是redux官网一张动图，基本上解释了redux的运作原理。store是一个全局状态机，存放全局的状态，如果想改变其中某一个状态，用dispatch发出一个action，dispatch会自动执行reduce函数，该函数会在原来state的基础上返回一个新的state对象，状态改变之后，通知所有的订阅函数，改变页面视图。redux源码分为几个主要文件：1.createStore.js文件：基本的redux文件，生成全局状态机2.combineReducer.js文件：

2020-09-19 16:32:16 2444 2

原创节流与防抖函数理解

1.防抖函数：debounce中文是“去弹跳”，它的概念是从机械开关和继电器中的去弹跳衍生出来的，就是将多个信号合并成一个信号。当事件被多次触发时，只执行最后一次。function debounce(func, delay) { var timeout; return function(e) { console.log("清除",timeout,e.target.value) clearTimeout(timeout); var conte

2020-09-14 10:02:24 189

原创 webpack npm打包配置(react版本)

1.安装node和npm，新建文件夹，在文件夹中执行npm init命令，一直回车生成一个package.json文件如下：{ "name": "cobrandcard", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no ...

2020-09-01 15:57:32 1833

原创 js 异步总结

js 异步总结异步编程经历的过程：1.回调函数回调函数就是将函数的第二段单独写在一个函数里，并将这个函数传进主函数中，当主函数中任务执行结束后，就执行这个回调函数。fs.readfile(‘file’ ,function(err, data){if(err){console.log()；}})2.事件监听3.发布订阅4.promisePromise是异步函数的另一种写法，它...

2020-09-01 15:56:17 112

原创 HOOK 初使用

HOOK:是一个特殊的函数组件，可以在函数组件内使用生命周期函数和state等特性的函数useEffect()函数 useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); //相当于componentWillUnmount()函数 return () => { ChatAPI.unsubscribeFromFriendStatu

2020-08-03 14:23:48 1831

原创 React-Redux 的用法

本文主题：如何在react中使用redux，为了在react中更方便的使用redux，作者封装了一个专门用于react的redux库，叫做react-redux。主要作用：绑定state和action创建函数到props上export default connect(mapStateToProps, mapDispatchToPropos)(WrappedNormalLoginForm);function mapStateToProps(state, ownProps) { return {

2020-07-30 14:04:50 97

原创 REDUX 中间件

redux的基础使用：用户dispatch一个action，reducer计算出新的state，更新视图。同步操作：用户发出action，reducer立即计算出state，更新视图。异步操作期望的是：发出action，异步操作结束之后，期望自动执行reducer函数，更新视图。这就要使用中间件（middleware）1.中间件的用法中间件是在store.dispatch时添加功能。const store = createStore( reducer, applyMiddleware(log

2020-07-29 15:36:21 98

原创 REDUX 怎么用

redux存在的意义：作为一个web应用的状态管理方法，状态与视图一一对应，所有的状态都放在store里。1.storestore是保存数据的地方，一个应用只能有一个store。import { createStore } from 'redux';const store = createStore(fn);2.statestate是store在某一个时刻的快照，一个state对应一个view视图import { createStore } from 'redux';const store

2020-07-28 11:11:16 174

原创 react context

1.何时使用context?context的出现是为了共享那些对于组件树来说是“全局”的数据，比如当前用户信息、按钮主题或者首选语言。没有出现context之前，我们使用props来显式从上而下传递参数。class App extends React.Component { render() { return <Toolbar theme="dark" />; }}function Toolbar(props) { // Toolbar 组件接受一个额外的“them

2020-06-15 14:37:27 254 1

原创 URL编码

网络标准中规定：只有字母、数字和一些特殊符号“$±_!*’()”以及一些保留字可以不进行编码直接用于URL。而其他的字符和文字用于URL时，不同的浏览器对URL的编码是不同的。1） URL要统一的命名因特网上所有的资源，这就意味着它要通过不同的协议安全的传输这些资源，但是有一些传输协议在传输的过程中会自动剥去某些字符。导致URL上可以出现的字符的种类受限。2） URL还需要是完整的，人们希望URL上可以出现其他的不安全的字符或者汉字，但是为了适用于所有的网络传输协议，需要一种转义机制，将不安全的字符转

2020-06-04 15:54:20 265

weixin_38208314的博客