- 博客(33)
- 资源 (13)
- 收藏
- 关注
原创 Verdaccio中,创建私服时,如何用VERDACCIO_PUBLIC_URL修改页面上资源文件的域名
用Verdaccio搭建私服时,当使用定义的域名访问时,报错,原因是JS等资源文件的访问域名是,并不是我们想要的域名:通过查看 Verdaccio了解,在配置中不支持设置这个域名,Verdaccio给了一个环境变量 VERDACCIO_PUBLIC_URL,我们可以通过设置 VERDACCIO_PUBLIC_URL 来改变资源文件访问的域名。
2024-01-11 08:49:54 634
原创 JavaScript-如何使用变量
变量的定义,可以通过var、const、let来定义,let和const是ES6新特性,let和const是解决var中的一些问题产生的。// 定义一个年龄为18的age变量// 定义一个名称叫xiaoming的name变量// 定义一个值为3.14的PI常量const是针对常量定义,这个值在整个生命周期中不改变,比如我们定义了一个常量 π = 3.14,由于 π 是不可变化的值,所以这个时候,我们就可以用const来定义。
2023-11-21 11:39:43 639
原创 JavaScript-声明和定义区别
在编程中,变量声明和变量定义是两个不同的概念。变量声明:是指在程序中声明一个变量,并指定它的名称和类型,但并不为它分配具体的值。变量定义是指在程序中给变量分配具体的值。它为变量分配内存,并初始化它的值。变量定义可以在声明的同时完成,也可以在稍后的代码中进行。let name;// 声明一个变量// 定义一个age变量,值为18。
2023-11-21 11:31:29 665
原创 JavaScript-变量类型判断
从实例对象obj的原型链中可以看到Object.prototype是在obj对象的原型链上,所以obj instanceof Object返回true。当解析函数的时候(还未执行),此时会在函数的原型对象上添加一个constructor方法,指向当前的函数。instanceof运算符:用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。对于复杂数据类型判断,除了function之外,其他都返回object。:只有对象才能调用constructor,其他基础数据类型不能使用。
2023-11-21 11:28:58 474
原创 JavaScript-undefined和null区别
当一个变量只声明,未赋值时,当前变量会设置为undefined;当前一个函数未明确return时,默认会return undefined。当一个函数定义了行参,但是没有传递实参时,默认为undefined;当一对象上没有该属性,并且原型链上也没有找到时,那么用对象访问时,为undefined。
2023-11-21 11:23:40 45
原创 JavaScript-变量类型
JavaScript变量类型有6种(新增加的Symbol、BigInt,八种),又将分为两大类:基础数据类型和引用数据类型。
2023-11-21 11:21:30 53
原创 hash路由模式
这也是为什么当hash的改变(hash的改变会记录在window.hisotry中),不仅仅可以出触发hashchange事件,还会触发popstate事件(监听history对象变化的事件)hash值的变化,会触发hashchange事件,这样我们就可以通过监听hashchanges事件来根据不同的hash值去渲染不同的UI,以实现路由切换的目的。hash的改变,不会访问服务器,不会刷新页面(hash 值是网页的标志位,HTTP 请求不包含锚部分,不会发送给服务器,对后端无影响)
2023-11-16 17:04:36 161
原创 HTML5-原生History
而对于通过 history.pushState() 或 history.replaceState() 改变的历史记录,点击浏览器的后退键或前进键页面是没有反应的,那该如何控制页面渲染呢?使用的时候,可以为popstate事件指定回调函数,回调函数的参数是一个 event 事件对象,它的 state 属性指向当前的 state 对象;跳转到相应的历史记录,以当前历史记录为标准线0,回到之前历史记录,为负值,比如回到上一页,n就是-1,向后,就是正值,如果n === 0,相当于刷新当前页面。
2023-11-16 16:50:55 1465 1
原创 History库源码分析-Action 动作类型
Action介绍Action表示location变化(路由切换)的动作类型,目前有三种动作类型:在history栈中,跳转到其他已存在的历史纪录(回退或者前进),这种location变化,叫做POP,比如浏览器的前进或者后退。POP动作类型也作为默认的动作类型,当进行push或者replace时,再更新当前的动作类型为PUSH或者REPLACE。PUSH表示一种新的历史记录被添加到history栈中,例如:react-router中的Link(底层调用的是history.push)。关于 When th
2023-11-16 14:35:50 154
原创 React-Router源码分析-History库
createBrowserHistory/createHashHistory:用于浏览器环境,createBrowserHistory对应于history路由模式,而createHashHistory应用于hash模式路由,两者方法的底层都是利用了HTML5 history API方法实现(即监听popstate事件及replaceState、pushState无刷新更改location URL)注意:一个history中,有且仅有一个活跃的listen监听函数,否则会抛出一个异常。
2023-11-16 14:08:24 138
原创 ImageFont.truetype时,报错:OSError: cannot open resource
font – A filename or file-like object containing a TrueType font. If the file is not found in this filename, the loader may also search in other directories, such as the fonts/ directory on Windows or /Library/Fonts/, /System/Library/Fonts/ and ~/Library/F
2020-08-19 15:56:17 3120
原创 _React$Component.call.apply(_React$Component, [this].concat(args))理解
在React-Router打包后的react-router-dom.js文件中,看到过_React$Component.call.apply(_React$Component, [this].concat(args)) || this;今天就聊聊Function.prototype.call.apply(),代码中源码是:var BrowserRouter =/*#__PURE__*/function (_React$Component) { _inheritsLoose(BrowserRou
2020-07-19 11:42:05 321
原创 深入理解__proto__
目前,所有浏览器(包括 IE11)都部署了这个属性。该属性没有写入 ES6 的正文,而是写入了附录,原因是__proto__前后的双下划线,说明它本质上是一个内部属性,而不是一个正式的对外的 API,只是由于浏览器广泛支持,才被加入了 ES6。因此,无论从语义的角度,还是从兼容性的角度,都不要使用这个属性,而是使用下面的Object.setPrototypeOf()(写操作)、Object.getPrototypeOf()(读操作)、Object.create()(生成操作)代替。
2020-04-05 13:28:02 3758 2
原创 @babel/plugin-proposal-class-properties
@babel/plugin-proposal-class-properties一种类的properties的另外一种书写方法,这里的class properties指的是类的实例方法或者实例属性、类的静态方法或者静态属性。特别注意,如果class properties 前面没有添加static,是将属性或者方法添加实例对象上,加上static,是表示类的静态方法或者属性。 class B...
2020-04-02 15:14:50 3722
原创 深入了解constructor
constructor伴随着函数产生的,当创建一个函数是,会默认为函数创建一个prototype对象(原型对象)。在prototype对象里,也会默认添加两个属性,__proto__和constructor。__proto__是形成原型链的重要原因,如果想要了解原型链,请进入JavaScript--原型链。constructor属性是指向构造函数本身的。比如: function A() {...
2020-03-22 18:12:10 1858 1
原创 Redux源码分析--Enhancer
store enhancer翻译成中文是store增强器,store middleware实质也是一种enhancer的实现,store middleware增强的dispatch的功能。store enhancer的实现不仅仅是丰富dispatch作用,你也可以通过createStore(reducer, preloadedState, enhancer)创建的store对象新增新的方法等等...
2020-03-17 16:44:51 458
原创 Redux源码分析--Middleware(2)
上一部分介绍了在分析源码过程中,出现的问题,及对它的解释,如果你想了解,请进入middleware代码分析延伸问题。这一章,主要带领你们去学习middleware的工作原理,了解了工作原理,才能更好的去使用它。要想深入了解middleware工作原理,必须弄懂compose(...chain)(store.dispatch)这行代码。下面我会用图来解释这个工作原理...
2020-03-15 16:14:28 182
原创 Redux源码分析--Middleware(1)
Middleware可以意为中间件,Reudx middleware作用于dispatch,丰富了dispatch的功能,也可以认为是store enhancer(store增强器)。Redux Middleware主要工作在action发起之后,到达reducer之前。Redux middleware主要解决:进行日志记录、异步请求、创建崩溃报告等Redux middleware实现模式...
2020-03-15 10:31:09 335
原创 Redux源码分析--compose
compose作用:将多个函数组合成一个函数,比如compose(f,g,h),组合成一个f(g(h(...args)))compose传入的函数参数,只有最右边的函数,可以传入多个参数compose(...funcs) { if (funcs.length === 0) { return arg => arg } if (funcs.length === 1...
2020-03-13 17:11:16 252
原创 Redux源码分析--CreateStore(subscribe)
上一章介绍了Redux源码分析--CreateStore(getState、subscribe),这一次介绍subscribe及其注销监听事件。如果分析的有问题,请及时提醒,谢谢。整个createStore.js代码中真正影响到store.subscribe(listener)的有以下几个:let currentListeners = []; let nextListeners = cur...
2020-03-13 12:51:32 965
原创 Redux源码分析--createStore(dispatch、getState)
Redux源码很简单,就是通过createStore.js暴露的createStore 方法创建当前项目唯一的一个store对象,store对象是唯一的、单一的,一个项目里面只能创建一个store对象。当你拆分数据处理逻辑时,可以使用reducer组合,而不是创建多了store对象。createStore用法: createStore(reducer, preloadState, ...
2020-03-13 08:35:53 1012
原创 对象的isPrototypeOf和Object.getPrototypeOf及如何判断一个对象是普通对象
一、如何判断一个对象是普通对象在研究react-redux和redux源码时,出现一个判断对象是普通对象方法isPlainObjectfunction isPlainObject(obj) { if (typeof obj !== 'object' || obj === null) return false let proto = Object.getPrototypeOf(o...
2020-03-05 15:45:22 1095 1
原创 声明式渲染和命令式渲染
声明式和命令式声明式:告诉“机器”,你想要什么,不需要关心中间实现过程,我们只需要开始和结果 命令式:如果你想要什么,你要告诉“机器”,并且还要告诉“机器”,怎么做,开始、过程、结果都要有下面,我们通过一个例子来说明 比如,我们我们想要从上海去北京,我们不考虑这个票怎么买到,还是做什么去,反正第二天,我们就到北京了,这就是声明式。但是命令式呢?我们还需要考虑,我们要是坐车怎么办...
2019-12-25 15:45:15 1225
原创 useMemo
useMemo是针对一个函数,是否多次执行useMemo主要用来解决使用React hooks产生的无用渲染的性能问题在方法函数,由于不能使用shouldComponentUpdate处理性能问题,react hooks新增了useMemouseMemo使用如果useMemo(fn, arr)第二个参数匹配,才会多次执行执行,否则只执行一次,如果为空数组[],fn只执行一次举例说明:...
2019-12-16 11:44:41 28724 2
原创 Express源码分析1
通过require('express')会expose一个函数,暂时现成它为express,尽量保持和require里面的参数名一样或者相式。接着通过app = express(),我们可以实例化一个对象,它其实类似http.Server的实例化server对象下面代码,可以分析,app可以作为一个createServer方法的回调函数,或者request监听事件的回调函数//expre...
2019-11-18 15:02:09 117
原创 methods和http.METHODS区别
methods在npm中地址https://www.npmjs.com/package/methodsmethods模块export一个包含了http methods的数组,就像http.METHODS。它和http.METHODS的区别:1、methods中所有的方法名字都是小写2、由于http.METHODS是在v0.11.8中添加,在node低版本中,无法使用http.METHO...
2019-11-14 17:19:47 171
原创 map、forEach区别笔记
https://juejin.im/post/5c999386e51d456d246deea1https://blog.fundebug.com/2018/02/05/map_vs_foreach/两者结合
2019-11-06 16:23:06 119
原创 React调试工具:React Developer Tools
1、下载插件 地址:https://download.csdn.net/download/wangyuegyq/103829892、安装插件 进入chrome的扩展程序页面:chrome://extensions/3、拖拽插件到扩展程序页面里,点击添加扩展程序 4、如果React 的log没有出现,则点击插件下图标,进入管理扩展程序页面,设置“允许访问文件网址”...
2018-04-29 17:17:34 459
原创 twoWay使用
twoWay:如果指令想向 Vue 实例写回数据,则在指令定义对象中指定 twoWay 。该选项允许在指令中使用this.set(value)(来自于官网)。通俗点意思就是在指定中改变Vue实例中的某个数据值。注意:this.set(value)中的this最好先赋值给一个变量(比如self),此处this指向指令对象。接下来看一个例子(vue.js库文件自己导进去):
2016-07-21 16:26:01 2429
原创 mac下在terminal中打开sublime text时出现的问题
问题: 进行完ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl之后,在终端上输入subl -v 出现subl: command not found问题第一步:$ ln -s /Applications/Sublime\ Text.app/Co
2016-07-14 16:34:30 998
Chrome插件 React Developer Tools
2018-04-29
angular2-es6-webpack
2017-02-24
counter(react)
2016-12-29
css实现平行四边形
2016-09-20
angularjs_requirejs demo
2016-06-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人