- 博客(99)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 前端如何将node.js 和mongodb部署到linux服务器上
遇到问题就多查询，上总有解决办法的。就算完全搞砸了，也没有关系，不管你用的哪个云服务器厂商的服务器都可以一键重装系统再次尝试。实在实在不行，还可以通过宝塔面板来可视化操作。
2023-04-03 21:29:50
645
2
原创 前端文件上传虽然看似简单，但也有一些小坑。
尽管这里面每一点都很简单，但可能写的时候总可能会忘记，当然如果你使用别人封装好的，肯定就没有这些无聊的问题。
2023-04-03 21:26:42
456
原创 Service Worker学习笔记
Service Worker介绍使用判断浏览器是否支持serviceWorker，接着注册serverWorker的js文件。if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('../serviceworker.js').then(res => { console.log(res);
2022-05-17 21:38:21
522
原创 await-to-js源码学习
众所周知 await可以帮我省略一些无聊的 .then代码，但是这玩意没有自带.catch功能。如果不用 await的话，我们直接可以Promise.catch捕获错误，不用写try catch。// let result = { success: true, data: [] };let result = { success: false, error:'something went wrong' };new Promise((resolve, reject) => { if (res
2022-04-30 20:07:29
591
原创 VScode快捷键学习
作为前端开发，我用vscode1年多了，但却从来没有仔细去了解过vscode有哪些快捷键，总是使用鼠标去进行操作。所以，我就用这篇博客记录我学到的vscode快捷键。ps：我是windows电脑，不知道mac的操作是怎样的。编辑区文件切换ctrl + tab当前已打开窗口的多个文件切换ctrl + pageup 或者ctrl +pagedown切换到前一个已经打开的文件或者后一个拆分ctrl + /将当前文件作为一个新的编辑区ctrl + shift + 5拆分终端侧边栏ctrl+
2022-04-13 09:02:57
298
原创 typescript中type和interface的区别
type和interface功能是基本一样的，唯一的区别就是type声明的不能继续追加新的属性，interface是可以拓展的。typetype Point ={ x:number, y:numberlet point:Point = {x:10,y:10};interfaceinterface Person{ name:string, age:number}let jiaqi :Person = { name:'jiaqi', age:3
2022-04-02 16:20:33
650
原创 TypeScript 函数重载
函数重载如果想要TypeScript实现一个加法函数，它可以实现字符串的拼接和数字相加。当然，用JS实现非常简单，因为JS不关心你的类型，但是用TS实现就稍微复杂一点了。法一：利用联合类型+类型判断function add(num1: string | number, num2: string | number) { if (typeof num1 === 'number' && typeof num2 === 'number') { return num1
2022-03-24 21:51:57
4008
原创 TypeScript 学习笔记
TS介绍TypeScript 是一个开源的、渐进式包含类型的 JavaScript 超集，由微软创建并维护。创建它的目的是让开发者增强 JavaScript 的能力并使应用的规模扩展变得更容易。它的主要功能之一是为 JavaScript 变量提供类型支持。在 JavaScript 中提供类型支持可以实现静态检查，从而更容易 地重构代码和寻找 bug。最后，TypeScript 会被编译为简单的JavaScript 代码。要开始使用 TypeScript，我们需要用 npm 来安装它。npm in
2022-03-24 21:45:57
1267
原创 JSON.parse(字符串)得到的对象比直接定义的一个对象更加快
原因：对于js引擎来说，JSON能够非常容易地被解析对于js解析器来说，JSON.parse()不就是相当于只带有一个参数的call语句。解析JSON时遇到大括号，只有两种情况，一种就是对象，另外一种就是无效的JSON。但是，在js中，看到大括号就有非常多的情况。const x = 12;let y = ({x}); //创建了一个对象字面量let y = ({x}) = {x:32}; //此处是解构赋值const x = 100;let y = ({x}) => x;.
2022-03-16 15:01:13
659
原创 path.resolve()与path.join()对比
当前目录为D:\node，以下为对比测试：const path = require("path");console.log(path.resolve("a")); //D:\node\aconsole.log(path.join("a")); // aconsole.log(path.resolve("/a")); //D:\aconsole.log(path.join("/a")); //\aconsole.log(path.resolve("/a",'b')); //D:\a\bco
2022-03-15 17:26:23
332
原创 Express学习笔记
快速上手a. 安装express，当前使用的是4.17版本。在终端中输入以下命令：yarn add expressb. 创建一个’app.js’文件，引入express，创建express实例，并监听端口3000。//app.jsconst express = require('express');const app = express();app.listen(3000, () => { console.log('running at http://localhost:30
2022-01-31 16:20:07
1406
原创 extract-text-webpack-plugin已经过时，如何实现将CSS文件单独抽离
打包之后，我们并不喜欢css和js混杂在一起，而是希望单独抽离出来，在加载html之前就加载css。这时我们可以使用webpack的插件。extract-text-webpack-plugin上次更新的时候还是4年前。作者也提示说，已经过时了，我们应该使用MiniCssExtracPlugin。MiniCssExtracPlugin基于Webpack5，我们需要用webpack5才能正常使用。与 extract-text-webpack-plugin 相比：异步加载没有重复的编译（性能）
2022-01-22 11:43:50
788
原创 3种方法实现JS对象深拷贝
相信大家总是在各大博客中看到手写深拷贝这类题目，今天就分享3种方法实现它。什么是深拷贝？let a = { name: 'jiaqi', age: 100 };let b = a;我们知道对象是引用类型，它的值是地址，这个地址指向了堆中真正的数据。如果直接将对象a赋值给b(b=a)，此时a和b就会引用同样的数据。如果b修改某个属性，则也会修改a中属性。b.name = '嘉琪'；console.log(a.name); //嘉琪因此，如果想要实现两个对象互不影响（深拷贝），就得逐一复制它
2022-01-08 14:15:16
4622
1
原创 JSX学习笔记
React.createElement()过于繁琐，且非常不直观，无法一眼看出所描述的结构。JSX简介JSX是 JavaScript XML的简写，表示在 JavaScript代码中写ⅩML（HTML）格式的代码。优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率。为什么脚手架中可以使用JSX语法？JSX不是标准的 ECMAScript语法，它是 ECMAScript的语法扩展。需要使用babel编译处理后，才能在浏览器环境中使用create-react-app脚手
2022-01-05 15:09:02
729
1
原创 React组件基础（一）
React组件介绍组件是Reat的一等公民，使用 React就是在用组件组件表示页面中的部分功能，组合多个组件实现完整的页面功能。特点：可复用、独立、可组合React创建组件的两种方式使用函数创建组件函数组件：使用JS的函数（或箭头函数）创建的组件约定一：函数名称必须以大写字母开头约定二：函数组件必须有返回值，表示该组件的结构如果返回null，表示不渲染任何内容// 函数组件function Hello() { return ( <div>这是一个组件<
2022-01-05 15:00:20
649
原创 JS手写事件总线
APIeventBus: 包含所有功能的事件总线对象eventBus.on(eventName, listener): 绑定事件监听eventBus.emit(eventName, data): 分发事件eventBus.off(eventName): 解绑指定事件名的事件监听, 如果没有指定解绑所有原理使用 on 方法来绑定发生某种事件后应该执行的回调函数。使用 emit 触发这个事件，并给这个事件的回调函数传入数据。代码class EventBus { constructor(
2021-12-28 17:25:22
510
原创 改变gitee（github）仓库名，导致无法push，解决方法。
准备push的时候，发现 not found。这时我想了起来，我给gitee上面的仓库改了名字。解决方法git remote remove origin //移除原来仓库地址git remote add origin 新仓库地址xxx //添加新仓库地址git push -u origin master //第一次设置默认的远程分支注意：只是第一次需要 git push -u origin master ，之后就直接gitpush了。...
2021-12-27 13:13:07
1318
原创 JS原型继承，盗用构造函数，组合继承，原型式继承
继承ECMA-262 把原型链定义为 ECMAScript 的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。原型链重温一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型有一个constructor 属性指回构造函数，而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。function Animal() { this.
2021-12-17 21:08:18
1140
原创 JS手写flat函数
flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。const arr = [1, 2, [3, 4, [5, 6, [7]]], 8];console.log(arr.flat(Infinity)); //[1,2,3,4,5,6,7,8]console.log(arr.flat(2)); //[1,2,3,4,5,6,[7],8]手写flat函数：function flat(arr,n) { let times = 0; //利
2021-12-15 21:20:11
1279
原创 JavaScript 对象属性的迭代与判断
hasOwnPropertyhasOwnProperty可以用来判断是否为实例属性还是原型属性。const obj1 = { happy:100}// 以obj1原型创建obj2const obj2 = Object.create(obj1);obj2.happy;//100 可以访问到原型的happy属性obj2.hasOwnProperty('happy'); //obj2 自身没有happy属性obj1.hasOwnProperty('happy'); //obj1拥有happy
2021-12-14 17:00:59
876
原创 JavaScript 手写 bind apply call
文章目录callapplybindcallcall() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。语法：function.call(thisArg, arg1, arg2, ...)注意：该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。// 核心思想// 将fn做为对象的一个属性，然后对象打点调用函数，这样函数中的this就会指向对象// 注意点
2021-12-04 16:56:57
246
原创 DNS服务器可能不可用 win11解决方法
DNS服务器可能不可用另外如果遇到了经常挂代理，导致浏览器提示DNS服务器可能不可用。这里使用的win 11系统，分享出我的解决方法，也算是填补了网络上大多都是以win 10 进行演示解决方法的空白。1.搜索控制面板2.查看网络状态和任务3.点击正在连接的网络4.点击属性5.点击ipv46.将首选服务器设置地址 8.8.8.8确认修改后，又能重新访问网站了！360检测也显示我的网络正常了！...
2021-12-04 12:59:33
9781
9
原创 JS防抖和节流进阶版 附验证实例
在我年轻的时候，写了这样一篇防抖和节流的文章。极简版JavaScript 节流和防抖那篇文章，既没有考虑到 dom调用监听器的this指向，也没有考虑其他方法。因此现在来一个升级版。防抖function debounce(callback, time) { let timer = null; return function (e) { // 如果timer存在，则清除定时器 timer && clearTimeout(timer); // 然后重新开
2021-12-04 11:59:09
325
原创 ＜input type=‘range‘＞ css自定义滑块样式
自定义滑块1HTML: <input type='range' min='0' max='1000' value='0'>css:input{ width: 400px; height: 15px; // 不显示原本的样式 -webkit-appearance: none; background-color: #111; outline: none; overflow: hidden; border-radius: 15px; box-shadow:
2021-11-30 10:30:19
1496
原创 安装babel-plugin-component和node-sass时，需要Python2报错的解决方法
babel-plugin-component和node-sass安装时，提示需要Python2报错的解决方法
2021-10-20 18:39:18
527
转载 path.join()和path.resolve()的区别
本文转载自：https://www.cnblogs.com/web-record/p/9907680.htmlpath.join()方法path.join()方法是将多个参数字符串合并成一个路径字符串。console.log(path.join(__dirname,'a','b')); 假如当前文件的路径是E:/node/1,那么拼接出来就是E:/node/1/a/b。console.log(path.join(__dirname,'/a','/b','..')); 路径开头的/不会影响拼接，.
2021-10-20 10:59:11
619
原创 JavaScipt 面试题+知识点
变量类型前置知识值类型 vs 引用类型// 值类型let a = 100;let b = a;a = 200;console.log(b); //100// 引用类型let a = { age: 20 };let b = a;b.age = 21;console.log(a.age); //21// 常见值类型let a // undefinedconst s = 'abc' const n = 100const b = trueconst m = Sym
2021-09-24 23:23:33
2046
3
原创 Scss学习笔记
title: Scss学习笔记date: 2021-09-24 22:12:10tags:在 vscode 中，首先需要安装 live sass compiler，将 sass 实时编译为 css 。点击底部的 watch sass，即可将 sass 文件实时编译为同名的 css 文件。嵌套我觉得 sass 中最重要的功能就是可以像 html 中进行层层嵌套，而不用像css中选择某一个元素，需要写多个父级标签。<header> <h1>hello my d.
2021-09-24 23:11:13
1192
原创 JavaScript日期格式化 toLocaleString 中文本地时间最简单的方法
JavaScript日期格式化 中文本地时间最简单的方法
2021-09-07 11:13:20
5241
原创 quill富文本编辑器自定义图片上传
github老哥的代码 const editor = new Quill('#quill-editor', { bounds: '#quill-editor', modules: { toolbar: this.toolbarOptions }, placeholder: 'Free Write...', theme: 'snow' }); /** * Step1. select local
2021-09-03 23:57:29
617
原创 JavaScript使用nanoid 给对象生成唯一的id值
总是想要给js对象一个唯一的id值，有一个包提供了这一服务。yarn add nanoid或者npm install nanoidimport { nanoid } from 'nanoid'const person = {name:'张三', age:18}// 最后用nanoid给它添加一个idperson.id = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"...
2021-08-29 21:36:40
715
空空如也
使用node和express，当清除缓存后，如何刷新所有已经存在的网页。
2021-07-27
TA创建的收藏夹 TA关注的收藏夹
TA关注的人