青衣墨客

/** * @description MyPromise * @author TsingYi */class MyPromise { state = 'pending' //状态，'pending', fulfilled','rejected' value = undefined //成功后的值 reason = undefined //失败后的原因 resolveCallbacks = [] //pending状态下，储存成功的回调 rejectCallbacks = [] //pending状态下，储存失败的回调 constructor(fn) { const resolveHandler = (value) => { this.state = this.state === 'pending' ? 'fulfilled' : this.state this.value = value t ...

hash模式: 原理: 在 url 中的 # 之后对应的是 hash 值, 其原理是通过window.onhashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件 优点:(1) 只需要前端配置路由表, 不需要后端的参与(2) 兼容性好, 浏览器都能支持(3) hash值改变不会向后端发送请求, 完全属于前端路由 缺点:(1) hash值前面需要加#, 不符合url规范,也不美观 history模式: 原理: 利用H5新增的history.pushState()和window.onpopstate()以及history.replaceState()方法监听和改变url 优点:(1) 符合url地址规范, 不需要#, 使用起来比较美观 缺点:(1) 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误(2) 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览 ...

手写bind,apply,call apply,call,bind都是js给函数内置的一些api,调用他们可以为函数指定this的执行,同时也可以传参. 使用方式//callfun.call(thisArg, arg1, arg2, ...)//apply func.apply(thisArg, [argsArray])//bindconst newFun = fun.bind(thisArg, arg1, arg2, ...)newFun() apply和call就是传参不一样,但是两个都是会在调用的时候同时执行调用的函数,但是bind则会返回一个绑定了this的函数. 我们还需要知道一个事情,就是this的指向. this的指向this的指向是在函数调用的时候确定下来的,this的指向大致可以分为五种. 1. 默认绑定默认绑定一般发生在回调函数,函数直接调用 function test() { //严格模式下是undefined //非严格模式下是window console.log(this)}setTimeout(function () ...

CDN配置原理：在第一次使用CDN服务时，往往会遇到一些问题，比如不知道回源HOST是干什么的，该不该配置？HOST 在计算机网络是主机、服务机的意思。顾明思议，回源HOST也就是客户访问CDN节点时，如果节点没有缓存这个资源，要在指定的主机寻找客户想要的目标资源。 源站和回源HOST的区别： 源站：源站决定了回源时请求到的具体IP地址。 回源HOST：回源HOST决定了回源请求访问到该IP地址上的具体站点。 举个例子：您要去某单位找张三办事，如果告诉您某单位在 XX路XX号，这就相当于源站。到单位后您需要找张三，就还需要知道张三的房间号，XX楼XX层XX号办公室，这就相当于回源HOST。 不需要设置回源HOST的应用场景以下两种应用场景下，可以不设置回源HOST，或者设置回源HOST为加速域名。 在您源站地址是加速域名服务器IP的情况下，您的回源HOST类型应为加速域名。 在您源站地址是OSS域名的情况下，您的回源HOST类型应为源站域名。 需要设置回源HOST的应用场景当您的服务器有多个站点，需要回源的站点不是加速域名对应的站点时，设置回源HOST。设置回源HOST要明白以 ...

前言如果不喜欢Butterfly主题自带的曲别针图标，可以换一种风格。（比如我现在使用的旋转风车） 操作打开主题配置文件_config.butterfly.yml 把beautify的title-prefix-icon选项设置为'\f863' （如果没有开启图标功能则需要将enable设置为true） beautify: enable: true title-prefix-icon: '\f863' 在inject的head引入: inject: head: <style>#article-container.post-content h1: before, h2: before, h3: before, h4: before, h5: before, h6: before { -webkit-animation: avatar_turn_around 1s linear infinite; -moz-animation: avatar_turn_around 1s linear infinite; -o-animati ...

前言gulp 能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括 css、js、html 乃至各类格式的图片文件。（图片文件的压缩往往只能节省几十 KB，效果远远不如 imagine、tinypng 等压缩方式，所以此处不再写使用 gulp 压缩图片的内容）。 如果需要压缩图片的话推荐使用图片在线压缩工具，将图像转换为WebP格式。WebP这是支持在互联网上无损和有损图像质量压缩的新格式。谷歌公司开发这种格式专为在网上迅速和方便地做好工作。其主要优点是，相对于其他图像格式，文件小，但图像质量相似。 配置教程 安装 Gulp 插件：在博客根目录 [Blogroot] 打开终端，输入： npm install gulp #安装gulp插件 安装各个下属插件以实现对各类静态资源的压缩。 压缩 HTML： npm install gulp-htmlclean # 清理htmlnpm install gulp-htmlmin # 压缩html 压缩 CSS： npm install gulp-minify-css # 压缩css 压缩JS npm install gulp ...

vue请求网络接口中图片报错403解决办法造成原因：网络接口都是有请求限制的，特别是图片字段值是绝对路径的情况，请求的时候就会报错403 forbidden。 解决办法：方法一：这个时候应该使用缓存的方式拿到请求图片的地址进行缓存，只要在请求到的图片链接前面加上https://images.weserv.nl/?url=即可（这是一个专门缓存图片的网址） getImages( _url ){ if( _url !== undefined ){ let _u = _url.substring( 7 ); return 'https://images.weserv.nl/?url=' + _u; } }123456 _u：提取http://后面的部分_url：是请求接口后返回的图片字段 方法二：在index.html 中增加一个meta标签，不发送HTTP Referer首部 <meta name="referrer" conten ...

文章转载自 Kerwin，如有侵权，请联系作者，本站仅当学习使用。 一、Node.js基础1. 认识Node.js Node.js是一个javascript运行环境。它让javascript可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。 Nodejs是基于V8引擎，V8是Google发布的开源JavaScript引擎，本身就是用于Chrome浏览器的js解释部分，但是Ryan Dahl 这哥们，鬼才般的，把这个V8搬到了服务器上，用于做服务器的软件。 01 nodejs的特性 Nodejs语法完全是js语法，只要你懂js基础就可以学会Nodejs后端开发 NodeJs超强的高并发能力,实现高性能服务器 开发周期短、开发成本低、学习成本低 02 浏览器环境vs node环境 Node.js 可以解析JS代码（没有浏览器安全级别的限制）提供很多系统级别的API，如： 文件的读写 (File System) const fs = require('fs')fs.readFile(& ...

source 文件夹中除了文章以外还可能需要引入其它文件，例如图片、CSS、JS 文件等。如果Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于  的方法访问它们。 如果需要更有规律地提供图片和其他资源以及想要将资源分布在各个文章上，可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。 _config.ymlpost_asset_folder: truemarked: prependRoot: true postAsset: true 安装插件hexo图片管理插件：npm i hexo-asset-image 启用后，资源图片将会被自动解析为其对应文章的路径。例如： image.jpg 位置为 /2022/09/01/Hello world/image.jpg ，这表示它是 /2022/09/01/Hello world/ 文章的一张资源图片，  将会被解析为 <img src=&quo ...

解决hexo报错spwan failedFATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.htmlError: Spawn failed at ChildProcess.<anonymous> (D:\Blog\node_modules\hexo-util\lib\spawn.js:51:21) at ChildProcess.emit (node:events:527:28) at ChildProcess.cp.emit (D:\Blog\node_modules\cross-spawn\lib\enoent.js:34:29) at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) 解决方案 进行以下处理 ##进入博客根目录(以我的为例)cd D:\Blog##删除git提交文件夹rm - ...