人鱼之伤-优快云博客

原创 vscode中的配置导致js文件被识别了react的文件，怎么修改配置

在vscode的settings中找到类似*.js": "javascriptreact"的配置，将其修改为。

2024-07-04 23:35:04 414

原创关于Js的数组方法是否会修改原数据的问题

会改变原数组，如果是删除一个元素，会返回删除元素的数组。正常情况下不会修改原数组，如果是对象数组会修改原数组。不会改变原数组，返回指定分隔符拼接的数组。改变原数组，返回的是修改后数组的长度。改变原数组，返回的是修改后数组的长度。不会改变原数组，会返回拼接后的数组。不会改变原数组，返回提取的部分。改变原数组，返回删除的元素。改变原数组，返回删除的元素。改变原数组，返回排序后数组。不会改变原数组，且无返回值。

2023-04-15 17:21:49 805

原创 Javascript的String.prototype.padStart()

定义：padStart( ) 方法用另一个字符串填充当前字符串(如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。const str1 = '5';console.log(str1.padStart(2, '0'));...

2021-11-09 18:04:11 1042

原创手写promise

// 判断变量是否为functionconst isFunction = variable => typeof variable === 'function'// 三种状态const PENDING = 'PENDING'const FULFILLED = 'FULFILLED'const REJECTED = 'REJECTED'// 定义Promise的三种状态常量class MyPromise { constructor(handle) { if (!isFunctio

2021-11-09 13:25:17 197

原创 Vue的computed和watch的区别

computed是模板表达的声明式描述，会创建新的响应式数据。而watch是响应式数据的自定义侦听器，用于响应式数据的变化。除此之外，computed还具有可缓存，可依赖多个属性，getter函数无副作用等特点。watch则更适用于异步或者开销大的操作。https://febook.hzfe.org/awesome-interview/book1/frame-vue-computed-watch...

2021-11-09 12:34:19 476

原创 Javascript中的callback

回调函数的概念：A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.自己在项目里的callback的使用的例子:(后期整理)

2021-10-26 23:53:52 273

原创为什么vue中的watch在mounted之后执行

首先，在调用mounted的时候，会进入到defineReactive函数，然后调用函数里面的set方法，将mounted中赋的新的值给传递过去，并通过调用dep.notify( )把消息发送给订阅者，继而更新订阅者的列表后面才开始渲染watch进入Watcher的class...

2021-10-16 12:35:17 2429

原创一个闭包的经典面试题

function fun(n, o) { console.log(o) return { fun: function(m) { return fun(m,n) } }}// 对第一种的理解：a = fun(0)会先调用第一行的函数，也就是传入了n为0，后面的fun(1),fun(2),fun(3)// 都是调用第四行的fun函数，然后return返回fun，也就是fun(1)传入的是1，m也是1，但是n还是第一次传入的0// 所以输出的是0// var a

2021-10-14 22:37:43 104

原创 html中的一些不常见的写法记录

aria-label以下定义来自MDN：aria-label属性用来给当前元素加上的标签描述，接受字符串作为参数aria-label属性可以用在任何典型的HTML元素中，并不需要配合特定的ARIA role才能使用。

2021-10-13 13:48:46 76

原创 CSS的一些不常见的使用方法

:root看到:root,以前没有见过，学习一下:root是一个伪类，表示文档根元素，非IE以及ie8以上的浏览器都支持，在:root中声明相当于全局属性，只要当前页面引用了:root，那当前页面都可以使用var()来引用:root { --main-bg-color: pink;}body { background-color: var(--main-bg-color);}...

2021-10-13 13:26:39 86

原创设计模式的学习整理

说到设计模式，其实觉得自己有很多要学的东西，但是，自己看了设计模式相关的书籍，看书的时候看得津津有味，明明白白，但是一到自己写代码的时候，又写得磕磕巴巴，也想不到自己要用哪种设计模式，有种阅后即焚的感觉，所以设计模式这种东西还是得一个个掰开了慢慢看，边看边学习。策略模式定义：定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换例子如下：// 旧的方法var calculateBonus = function(performancelevel, salary) { if(perfor

2021-10-10 16:23:05 127

原创 Vue的优化问题

vue的性能优化开启gzip压缩yarn add compression-webpack-plugin -D// 在vue.config.js中修改配置const CompressionPlugin = require('compression-webpack-plugin')configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置...

2021-10-08 16:18:08 368

原创关于移动端布局的总结

布局视口在移动端，在默认情况下，布局视口的宽度是远远大于浏览器的宽度。两个视口是独立存在的，这也很好的解释了为什么对一个网页不进行移动端适配的情况下，用户进行阅读的时候，如果默认情况下布局视口的宽度等于浏览器宽度，那是不是展示起来更加的不友好。也就是说，如果一个 div的宽度为20%，那么它在布局视口宽度为 980px的时候，展示给用户的像素还有196px，而如果宽度只有 375px的情况下，宽度只有 75px，展示的大小相差特别大。浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把布局视口宽

2021-09-30 21:20:08 156

原创基于某些组件库的VUE组件的封装

在antd的Vue版本的基础上封装组件，一般我们都只能想到最基础的关于Vue的组件封装，但其实在Vue的内部其实可以像React那样使用jsx，更灵活的去封装一些组件下面是我写的一个简单的例子，大家可以看看，参考下：<script>import { Table } from 'ant-design-vue'export default { props: Object.assign({}, Table.props), render() { return <a-tab

2021-09-17 15:41:21 193

原创 React中怎么把自己封装的Modal组件渲染到body下面

这个是一个比较有意思的想法，这么做可以屏蔽修改页面布局样式导致的Modal组件的样式的改变import * as React from 'react';import ReactDOM from 'react-dom';import './modal.scss';type showProps = { visible: boolean; children: React.ReactNode; title: string; onClose: () => void; // onSh

2021-09-15 14:54:13 1976

原创 React的新旧对比与回顾

现在React版本还在不断的更新，对于我这种只是中途学了react，对react之前的版本没有太多了解的人，可能又需要补充一些知识了，以下是我需要补充学习的一些知识类组件的特点类组件应该继承React.Component父类类组件必须提供render函数受控组件HTML中的表单元素是可输入的，也就是有自己的可变状态react中可变状态通常保存在state中，并且只能通过setState()方法来修改<input type="text" value={this.state.txt}

2021-09-15 14:37:36 515

原创 typescript中的interface和type之间的区别

相同点都可以描述一个对象或者函数都是允许扩展的不同点1、type可以但是interface不可以可以声明基本类型别名、联合类型、元祖等可以使用typeof获取的实例的类型进行赋值2、interface可以但是type不可以可以声明合并...

2021-09-14 14:57:48 138

原创 Sass中通过循环去设置样式

sass中可以设置变量，并且也可以通过设置循环的方法去设置样式1、首先来说一下sass中的for方法<template> <div> <div class="colored-div1">a</div> <div class="colored-div2">b</div> <div class="colored-div3">c</div> <div class="colo

2021-09-09 15:23:00 676

转载 Javascript的继承

以下只是简单的记录，具体的我会后面进行补充，以下的内容来自js的高级程序设计4// 1、原型链继承function SuperType() { this.property = true}SuperType.prototype.getSuperValue = function() { return this.property}function SubType() { this.subproperty = false}SubType.prototype = new SuperT

2021-09-08 14:55:53 80

原创 svg和canvas的区别

1、svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改，canvas输出的是一整幅画布。2、svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是失真锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿。...

2021-09-06 23:12:50 160

原创 JS中的对象的创建

1、工厂模式function createPerson(name, age, job){ let o = new Object() o.name = name o.age = age o.job = job o.sayName = function() { console.log(this.name) } return o}let person1 = createPerson('2', 3, 'ceshi')2、构造函数模式function Person(n

2021-09-06 17:10:04 77

原创 Vue的路由的hash和history的实现原理

hash路由模式的实现主要是基于下面几个特性URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；我们可以使用 hashchan

2021-09-06 16:39:59 1315

原创 Javascript中的普通函数和箭头函数之间的区别

在理解这个问题之前，建议大家先看看理解下关于js中的this的问题，具体看还是参考MDN中的this面试中遇到这个问题的时候，尽量回答的多一些，丰满一些，掘金中的这篇文章总结的很好，大家可以看一看掘金的文章...

2021-09-04 15:35:29 249

原创 Vue2的组件间的通信方法

1、父子组件之间的传值父组件向子组件传值1、父组件引用子组件，并且通过v-bind:的形式，把需要传递给子组件的信息传递给子组件在子组件中通过props去接收父组件传递过来的数据2、父组件向子组件传递一个方法父组件向子组件传递方法的时候，在父组件中定义一个方法，然后在子组件中用@方法名="父组件方法"的形式接收在子组件中定义一个方法，或者是在mounted中，通过this.$emit(‘方法名’，参数)的方式去接收子组件向父组件传值1、在父组件向子组件传递方法的时候可以传递参数2、兄弟组

2021-09-04 15:00:50 292

原创由Javascript中的object遍历后的顺序问题来看看Map

今天同事告诉我，object对象遍历后的顺序可能会有所变化，不能像数组那样直接按顺序遍历得到结果

2021-09-03 22:43:15 893

原创 call、bind、apply三者的用法和区别

callcall的理解：call() 方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数call方法的调用的整个过程：当实例(函数)通过原型链的查找机制，找到function.prototype上的call方法，function call() {[ native code ]}1、首先把药操作的函数中的this关键字变为call方法第一个传递的实参2、把call方法第二个及之后的实参获取到3、把药操作的函数执行，并且把第二个以后传递进来的实参传递给函数然后面试中会经常问到自

2021-09-02 21:28:21 299

原创面试中如何去回答原型链这个问题的思考

问题的场景面试中问到了关于原型链的什么我的回答如下：所有的JS对象都有一个prototype属性，指向它的原型对象。当试图访问一个对象的属性时，如果没有在该对象上找到，它还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。在这个查找的过程中形成的链式结构就被称作原型链但是面试官接下来没有继续问我问题，所以现在就很尴尬，我觉得我回答的不够好，总觉得缺点儿什么，总觉得应该补充点儿什么以下是我个人认为可以做补充的东西：首先从什么是原型讲起，在高

2021-09-02 17:36:02 4993 2

原创 Less和Sass的区别

不同的点：1、less是基于javascript的，sass是基于ruby的less是前端处理，sass是服务器处理，sass的处理速度更快2、sass的能力更强大3、sass的变量用$，less的变量用@参考的文章：参考文章

2021-09-02 16:46:59 272

原创闭包的理解

闭包的概念广义：MDN中所说的闭包是指那些能够访问自由变量的函数实践意义上的闭包:实践意义上的闭包是指的一个函数可以访问另一个函数中的变量闭包的好处:1、读取函数内部的变量2、让这些变量的值始终保持在内存中，不会在f1调用后被自动清除闭包的问题：一块被分配的内存既不能使用，也不能回收。从而影响性能，甚至导致程序崩溃...

2021-08-31 21:20:27 108

原创 js的异步的串行和并行

异步并行几个异步同时执行，最后一个执行完毕调用一下回调方法class AsyncParallel{ constructor() { this.cbList = []; } tap(fn) { this.cbList.push(fn); } call(end){ let index = 0; this.cbList.forEach(fn => { fn(

2021-08-31 10:45:44 185

原创 Javascript版的二叉树

代码如下：class Node { constructor(data){ this.left = null this.right = null this.value = data }}class BinarySearchTree { // class BST {constructor() {this.root = null;} insertNode(root, newNode){ if(newNode.value < root.val

2021-08-30 21:02:28 79

原创关于React的Fiber的一些理解和总结

1、原因：react中的render()方法在更新的时候是进行递归操作的，如果在更新的过程中有大量的节点需要更新，就会出现长时间占用JS主线程，并且整个递归过程是无法被打断的，由于JS线程和GUI线程是互斥的，所以可能会看到UI的卡顿2、实现Fiber架构时，必须要解决的两个问题：a、保证任务在浏览器空闲的时候执行b、将任务进行碎片化requestIdleCallbackrequestIdleCallback(callback)是实验性API，可以传入一个回调函数，回调函数能够收到一个deadl

2021-08-25 15:55:47 535

原创 React和Vue的虚拟Dom之间的区别对比

react函数式组件思想，当你用setState就会遍历diff当前组件所有的子节点子组件，这种方式开销是很大的，所以react16采用了fiber链表代替之前的树，是可以中断的，分片的在浏览器空闲的时候执行vue 组件响应式思想采用代理监听数据，我在某个组件里修改数据，就会明确知道那个组件产生了变化，只用 diff 这个组件就可以了参考...

2021-08-24 22:52:49 640

原创关于Vue2的路由beforeEach的问题

公司里的一个老项目要加个前端登录，而且这个项目的后台应该是C#，比较陈旧的代码修改比较难受，我没有做新的封装，只是在原有目录的在router.js文件下进行了修改：const router = new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path:'*', redirect: '/' }, { path:'/', name:

2021-08-24 17:41:36 352

原创节流与防抖(都是简单版

// 防抖；在一定时间内没有第二次触发某个事件，这个事件才会执行，// 如果在一定时间内多次触发，就会从头开始计算时间，到设定的时间后再次出发// 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。function debounce(func, wait) { let timeout = null return function () { clearTimeout(timeout) timeout = setTimeout(() => { f

2021-08-21 21:52:43 103

原创 Javascript中的链表

单向链表/** * @desc 单向链表 */class Node { // 链表节点 constructor(element) { this.data = element // 节点数据 this.next = null // 下一个节点的指针 }}class NodeList { // 链表 constructor(item) { this.head = new Node(item); //初始化链表的头节点 } /** * @de

2021-08-21 15:54:27 159

原创函数柯里化

const add = arg1 => { let args = [arg1] const fn = args2 => { args.push(args2) return fn } fn.toString = function() { return args.reduce((prev, item) => prev + item, 0) } return fn}const n = add(1)(2)(3)alert(n)console.log(n)// 支

2021-08-18 22:34:53 88

原创 Javascript中的new的实现

function objectFactory() { const obj = new Object() // [].shift.call(arguments) 删除并拿到arguments的第一项 Constructor = [].shift.call(arguments) obj.__proto__ = Constructor.prototype console.log(Constructor) const ret = Constructor.apply(obj, argum

2021-08-18 20:50:21 71

原创 Javascript中的call、apply和bind的手写

// 个人的思考// 实现一个简单的call// 首先思考call的功能，从简单到复杂的去完成// 自己不理解的时候，还是多看看别人的博客// 我是参考了讶羽的博客：https://github.com/mqyqingfeng/Blog/issues/11const foo = { value: 1, bar: function() { console.log(this.value) }}foo.bar()// 简单版Function.prototype.call

2021-08-18 17:57:29 110

原创 Javascript中的大数相加

js存放整数的时候有一个安全范围，一旦数字超过这个范围便会损失精度。我们不能用拿精度损失的数字进行运行，因为运算结果一样是会损失精度。我们用字符串来表示数据，这样就不会丢失精度。·JS中整数的最大安全范围是：9007199254740991padStart(len, str)根据给定长度自动在字符串的前面补充想要补充的字符串len给定的长度，转换后str想补充的字符串let a = "9007199254740991";let b = "1234567899999999999";fu

2021-08-17 21:41:26 188

空空如也

空空如也