javascript
文章平均质量分 77
浮游本尊
这个作者很懒,什么都没留下…
展开
-
防抖节流函数
我们按照如下思路来实现:防抖基本功能实现:可以实现防抖效果优化一:优化参数和this指向优化二:优化取消操作(增加取消功能)优化三:优化立即执行效果(第一次立即执行)优化四:优化返回值let timer = null // console.log(this)//window // 定义控制立即执行的变量,false表示没有执行过 let isInvoke = false // 真正的处理函数 function _debounce(... args) {原创 2023-03-01 10:07:57 · 178 阅读 · 0 评论 -
Can‘t find Python executable “ python“, you can set the PYTHON env variable
右键“我的电脑”(win7系统有的显示是“计算机”)选择“属性”然后选择“高级系统设置”,弹出的“系统属性”界面,选择“高级”里面的“环境变量”的对话框在下面的“系统变量”中找到“Path”,然后点击“编辑”,将Python的安装目录“C:\Python27”填写进去,注意,两个路径之间是用“;”分号隔开的。输入之后点击“确定”即可。原创 2023-02-08 11:44:57 · 1831 阅读 · 0 评论 -
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
最近使用vue框架时报了一个错,vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.You may want to run the following to upgrade to Vue CLI 3:这是由于vue的版本存在更新,需要先卸载vue cli2,然后重新安装vue cli 3。原创 2023-02-08 11:34:50 · 2466 阅读 · 0 评论 -
Can‘t find Python executable “ python“, you can set the PYTHON env variable
出现如下情况报错Can‘t find Python executable “ python“, you can set the PYTHON env variable,说明axios所需的插件没有装上。原创 2023-02-08 11:30:50 · 419 阅读 · 0 评论 -
this的指向问题
在日常的工作中,我们经常会遇到this的指向问题,过去对这个问题一直是一知半解,今天特意写一篇文章,来扫盲,如有错误,欢迎指出。JavaScript中的this和常见的面向对象语言中的this不太一样:常见面向对象的编程语言中,比如Java、C++、Swift、Dart等等一系列语言中,this通常只会出现在类的方法中。也就是你需要有一个类,类中的方法(特别是实例方法)中,this代表的是当前调用对象。但是JavaScript中的this更加灵活,无论是它出现的位置还是它代表的含义。原创 2023-02-08 11:19:07 · 444 阅读 · 0 评论 -
在栈空间和堆空间中数据是如何存储的
这个涉及到JavaScript 的内存机制,这个概念咋看可能觉得很熟悉,但是据我观察,一知半解的比较多,因为平时不会去关注这方面的知识,但是如果想对JavaScript有一个更深入的了解,注重前端应用的性能,这个知识点必须掌握。执行第一段代码,打印出来 a 的值是 2,b 的值是 1,这没什么难以理解的。接着,再执行第二段代码,会发现,仅仅改变了 a 中 name 的属性值,但是最终 a 和 b 打印出来的值都是{name:“fuyoubenzun”}。原创 2022-09-29 10:32:42 · 642 阅读 · 0 评论 -
async await使用同步方式写异步代码
自从网页中引入了 JavaScript,操作 DOM 树中任意一个节点就变得非常容易了,例如隐藏 / 显示节点、改变颜色、获得或改变文本内容、为元素添加事件响应函数等等。不过在 XMLHttpRequest 出现之前,如果服务器数据有更新,依然需要重新刷新整个页面。原创 2022-09-05 11:18:35 · 567 阅读 · 0 评论 -
XMLHttpRequest是怎么实现的
自从网页中引入了 JavaScript,操作 DOM 树中任意一个节点就变得非常容易了,例如隐藏 / 显示节点、改变颜色、获得或改变文本内容、为元素添加事件响应函数等等。不过在 XMLHttpRequest 出现之前,如果服务器数据有更新,依然需要重新刷新整个页面。原创 2022-08-25 16:14:52 · 605 阅读 · 0 评论 -
组件的本质
当我们使用 Vue 时,往往会将页面拆分为各种组件,通过拼装组件来形成页面和应用,就像搭积木一样。那么,组件的产出是什么呢?在 JQuery 盛行的年代,比起组件,“模板引擎”的概念要更加流行。我们可以使用 lodash.template 函数来回忆一下当年是如何用模板开发一个页面的:模板引擎的概念是:字符串 + 数据 => html。lodash.template 函数虽然称不上是“引擎”,但足以说明问题。我们将模板字符串传递给 template 函数,该函数返回一个编译器 compiler,只要把数据原创 2022-07-08 15:16:24 · 202 阅读 · 0 评论 -
浅谈模块化
写这篇文章是因为最近在网上看了很多关于模块化的文章,所以进行总结。Js发展之初,只是为了解决基础的表单验证问题,以及基础的页面交互,代码非常简单,不存在模块化的概念和问题。但是随着ajax的发展,web进入2.0时代,Js成为一门应用非常广泛的语言。这个时候js作为一门嵌入型语言,劣势就展示出来了,没有一个权威的规范,问题总是要解决,在前端发展的这几十年,也就顺势而为的产生了很多的js规范。在最早的js中,想要实现分模块开发,最简单的就是函数,因为函数能形成一个相对封闭的空间,通过函数来实现简单的模块化也是原创 2022-07-08 15:13:17 · 633 阅读 · 0 评论 -
理解前端组件化、模块化、工程化
组件化:把重复的代码提取出来合并成为一个个组件,组件最重要的就是复用,位于框架最底层,其他功能都依赖于组件,可供不同功能使用,独立性强。组件化更多关注UI部分,每个组件有独立的HTML、css、js代码。可以根据需要把它放在页面的任意部位,也可以和其他组件一起形成新的组件。一个页面是各个组件的结合,可以根据需要进行组装。模块化:分属同一功能/业务的代码进行分装,让它成独立的模块,可以独立运行,以页面、功能或其他不同粒度划分程度不同的模块,位于业务框架层,模块间通过接口调用,目的是降低模块间的耦合,由之前的主原创 2022-07-08 15:12:30 · 3825 阅读 · 0 评论 -
markdown和富文本聚焦时改变边框的样式(wangEditor、mavon-editor)
首先说一下大致思路:wangEditor、mavon-editor聚焦时,需要给边框加样式,那么怎样才能知道目前是否是聚焦状态呢?这时候就需要了解两个东西:document.activeElement、document.hasFocusJavaScript中可以使用document.activeElement判断某一元素是否获取焦点。或使用hasFocus()方法检测文档内任一元素是否获取焦点。document.activeElementdocument.activeElement获取当前获得焦点的原创 2022-04-25 16:10:45 · 1175 阅读 · 0 评论 -
ES6生成器
什么是生成器?生成器是ES6中新增的一种函数控制、使用的方案,它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。平时我们会编写很多的函数,这些函数终止的条件通常是返回值或者发生了异常。生成器函数也是一个函数,但是和普通的函数有一些区别:首先,生成器函数需要在function的后面加一个符号:*其次,生成器函数可以通过yield关键字来控制函数的执行流程:最后,生成器函数的返回值是一个Generator(生成器):生成器事实上是一种特殊的迭代器;MDN:Instead, they原创 2022-04-25 14:54:57 · 668 阅读 · 0 评论 -
ES6迭代器内容详解
什么是迭代器?迭代器(iterator),是确使用户可在容器对象(container,例如链表或数组)上遍访的对象,使用该接口无需关心对象的内部实现细节。其行为像数据库中的光标,迭代器最早出现在1974年设计的CLU编程语言中;在各种编程语言的实现中,迭代器的实现方式各不相同,但是基本都有迭代器,比如Java、Python等;从迭代器的定义我们可以看出来,迭代器是帮助我们对某个数据结构进行遍历的对象。在JavaScript中,迭代器也是一个具体的对象,这个对象需要符合迭代器协议(iterato原创 2022-04-24 09:59:06 · 260 阅读 · 0 评论 -
响应式原理的实现
什么是响应式自动响应数据变量的代码机制,我们就称之为是响应式的通过数据劫持和发布者-订阅者模式来实现。一旦发现属性发生改变就通知订阅者,触发相应的回调,来改变视图。一、Vue3响应式原理的实现下面的步骤是一步步推导,逐步实现出来的过程。第一步:响应式函数的封装// 响应式函数的封装const reactiveFns = []function watchFn(fn) { reactiveFns.push(fn)}const obj = { name: 'fuyou', age原创 2022-04-14 11:08:45 · 869 阅读 · 0 评论 -
柯里化函数
理解JavaScript纯函数函数式编程中有一个非常重要的概念叫纯函数,JavaScript符合函数式编程的范式,所以也有纯函数的概念;在react开发中纯函数是被多次提及的;比如react中组件就被要求像是一个纯函数(为什么是像,因为还有class组件),redux中有一个reducer的概念,也是要求必须是一个纯函数;所以掌握纯函数对于理解很多框架的设计是非常有帮助的;纯函数的维基百科定义:在程序设计中,若一个函数符合以下条件,那么这个函数被称为纯函数:此函数在相同的输入值时,需产生相同的原创 2022-04-11 12:12:16 · 818 阅读 · 0 评论 -
axios详解及使用
axios是什么前端最流行的ajax请求库,react/vue官方都推荐使用axios发送ajax请求,是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。文档:https://hithub.com/axios/axios细节:axios包括TypeScript定义。特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应拦截转换请求数据和响应数据取消请求自动转换 JSON 数原创 2022-04-07 10:42:42 · 10102 阅读 · 0 评论 -
JS中错误处理
错误处理方案当程序在运行过程中出现可预知的错误时,希望程序继续运行不要被打断,这时可以将异常抛出,向用户提供有意义的错误信息。开发中我们会封装一些工具函数,封装之后给别人使用在其他人使用的过程中,可能会传递一些参数对于函数来说,需要 对这些参数进行验证 ,否则可能得到的是我们不想要的结果很多时候我们可能验证到不是希望得到的参数时,就会直接return但是return存在很大的弊端:调用者不知道是因为函数内部没有正常执行,还是执行结果就是一个undefined事实上,正确的做法应该是如果没原创 2022-04-07 10:42:10 · 675 阅读 · 0 评论 -
js事件循环机制(await-async-事件循环)
await和async异步函数 async functionasync关键字用于声明一个异步函数:async是asynchronous单词的缩写,异步、非同步;sync是synchronous单词的缩写,同步、同时;async异步函数可以有很多中写法:// await/asyncasync function foo1() {}const foo2 = async () => {}class Foo { async bar() { }}异步函数的执行流程原创 2022-04-07 10:41:31 · 2970 阅读 · 0 评论 -
vue3组件化开发、全局与局部组件、父组件和子组件
组件化开发什么是组件化?人们面对复杂问题的处理方式:任何一个人处理信息的逻辑能力都是有限的。所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。但是,我们可以将问题进行拆解。如果将一个复杂的问题,拆分成多个可以处理的小问题,再将其放在整体当中,就可以把大的问题解决。组件化也是类似的思想:如果我们将一个页面的所有的处理逻辑全部放在一起,处理起来会变得非常复杂,而且不利于后期的维护管理与扩展。但是如果,我们将一个页面拆分成一个个小的功能可,每个功能块完成属于自己这部分独原创 2022-04-07 10:40:52 · 1023 阅读 · 0 评论 -
Proxy和Reflect内容详解
监听对象的操作我们先来看一个需求:有一个对象,我们希望监听这个对象中的属性被设置或获取的过程通过我们前面所学的知识,能不能做到这一点呢?其实是可以的,我们可以通过之前的属性描述符中的存储属性描述符来做到;监听对象的操作:下面这段代码就利用了前面讲过的 Object.defineProperty 的存储属性描述符来对属性的操作进行监听。const obj={ name:'fuyou', age:21}Object.keys(obj).forEach(item=>{ let原创 2022-04-07 10:39:59 · 426 阅读 · 0 评论 -
Promise使用详解
异步任务的处理在ES6出来之后,有很多关于Promise的讲解、文章,也有很多经典的书籍讲解Promise。虽然等你学会Promise之后,会觉得Promise不过如此,但是在初次接触的时候都会觉得这个东西不好理解;那么这里我从一个实际的例子来作为切入点:我们调用一个函数,这个函数中发送网络请求(我们可以用定时器来模拟);如果发送网络请求成功了,那么告知调用者发送成功,并且将相关数据返回过去;如果发送网络请求失败了,那么告知调用者发送失败,并且告知错误信息;什么是Promise呢?在上面的解原创 2022-04-07 10:39:16 · 1200 阅读 · 0 评论 -
ES6~ES12
ES6字面量增强ES6中对 对象字面量 进行了增强,称之为 Enhanced object literals(增强对象字面量)。属性的简写:Property Shorthand方法的简写:Method Shorthand计算属性名:Computed Property Names // 1.属性的简写 var obj = { name: name age: age } // 增强后 var obj = { nam原创 2022-04-07 10:38:10 · 903 阅读 · 0 评论 -
ECMAScript,JavaScript,TypeScript的关系
很多前端都对ECMAScript,JavaScript,TypeScript这几个词相当熟悉,可以说是我们工作的核心技术,但如果具体问起来这三者到底是什么关系,有什么区别,恐怕很难对其进行准确的描述,所以我决定和大家一起彻底搞明白他们的关系与区别。一、ECMAScriptECMAScript,即ECMA-262定义的语言,并不局限于Web浏览器。事实上,这门语言没有输入和输出之类的方法。ECMA-262将这门语言作为一个基准来定义,以便在它之上再构建更稳健的脚本语言。如果不涉及浏览器的话,ECMA-2原创 2022-04-07 10:37:25 · 1316 阅读 · 0 评论 -
15 vulnerabilities (7 moderate, 8 high) To address all issues 使用时提示有漏洞
由于最近换新电脑了,所以需要重新拉项目,安装依赖后有几个报错。npm install # 安装项目依赖包 11 packages are looking for funding run `npm fund` for detailsfound 1 high severity vulnerability run `npm audit fix` to fix them, or `npm audit` for detailsnpm官网提供了命令说明,比如有幸查过一次npm audit fix原创 2022-04-06 09:56:18 · 9786 阅读 · 0 评论 -
TypeScript的泛型和模块化
一、泛型1.1 认识泛型软件工程的主要目的是构建不仅仅明确一致的API,还要让你的代码具有很强的可重用性,比如我们可以通过函数来封装一些API,通过传入不同的函数参数,让函数帮助我们完成不同的操作,但是对于参数的类型是否也可以参数化呢?什么是类型的参数化?我们来提一个需求:封装一个函数,传入一个参数并且返回这个参数。如果我们是TypeScript的思维方式,要考虑这个参数和返回值的类型需要一致:function add(num: number): number{ return num;}原创 2022-04-01 09:35:21 · 301 阅读 · 0 评论 -
TypeScript的类及接口
一、类我们知道类有三大特性:多态、继承、封装。类class的类型 本质上是一个函数; 类本身就指向自己的构造函数。一个类必须有constructor方法,如果没有显示定义,一个空的constructor方法会被默认添加我们在ES6的时候,实例属性都是定义在constructor()方法里面, 在ES7里 我们可以直接将这个属性定义在类的最顶层,其它都不变,去掉this;通过代码我们也可以发现,new类的时候就相当于new构造函数调用类上面的方法就是调用原型上的方法在类的实例上面调用方法,其实原创 2022-04-01 09:34:49 · 1063 阅读 · 0 评论 -
TypeScript的数据类型及函数
一、TS类型注解一种为变量添加类型约束的形式,(什么类型的变量,赋值什么类型的数据,否则会报错)语法类型:var/let/const 变量名:数据类型=值number和Number的区别?虽说在声明的时候,并不会进行报错,但是在设置数据类型注解的时候,尽量使用小写,大部分基本数据类型都是小写的,Number一般代表的是一个类ts中的变量的声明,注意变量名是否重复在ts中使用let声明的变量,会在全局的文件中进行查找,如果有重复的,该变量的声明就会报错(有波浪线),所以在ts文件中底部expor原创 2022-04-01 09:34:10 · 1939 阅读 · 0 评论 -
TypeScript的初步了解
如果有javascript基础,学习TypeScript其实并不难,写这篇文章的目的是记录一下学习ts的过程。因为老是学了之后,就容易忘,好记性不如烂笔头…ts的学习的必要性:新技术的出现都是为了解决原有技术的某个痛点,js很好,这是不可否认的,但它依然有它的不足。背景一、JavaScript的痛点并且随着近几年前端领域的快速发展,让JavaScript迅速被普及和受广大开发者的喜爱,借助于JavaScript本身的强大,也让使用JavaScript开发的人员越来越多。优秀的JavaScript没原创 2022-04-01 09:33:31 · 1132 阅读 · 0 评论 -
Vue项目打包部署总结
由于之前对前端部署上线这一套不清楚,所以这次通过查找多方资料总结一下。使用Vue作先后端分离项目时,一般前端是单独部署,用户访问的也是前端项目地址,所以前端开发人员颇有必要熟悉一下项目部署的流程与各种问题的解决办法了。Vue项目打包部署自己不复杂,不过一些前端可能对服务器接触很少,部署过程当中仍是会遇到这样那样的问题。下方主要描述的是使用nginx服务器代理前端项目的方法以及项目部署的相关问题,内容概览:一、准备工作——服务器和nginx使用1. 准备一台服务器使用linux系统,如果没有服务器,原创 2022-04-01 09:32:31 · 496 阅读 · 0 评论 -
vue3开发的基础语法
认识VueVue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。全程是Vue.js或者Vuejs;什么是渐进式框架呢?表示我们可以在项目中一点点来引入和使用Vue,而不一定需要全部使用Vue来开发整个项目;目前Vue在前端处于什么地位?目前前端最流行的是三大框架:Vue、React、Angular。目前需要学习Vue3吗?在2020年的9月19日,万众期待的Vue3终于发布了正式版,命名为“One Piece”。它也带来了很多新的特性:更好的性能、更小的包原创 2022-03-24 11:50:39 · 1748 阅读 · 0 评论 -
this.$nextTick()的使用场景
应用场景需要在视图更新之后,基于新的视图进行操作。this.nextTick()方法主要是用在数据改变,dom改变应用场景中。vue中数据和dom渲染由于是异步的,所以,要让dom结构随数据改变这样的操作都应该放进this.nextTick()方法主要是用在数据改变,dom改变应用场景中。vue中数据和dom渲染由于是异步的,所以,要让dom结构随数据改变这样的操作都应该放进this.nextTick()方法主要是用在数据改变,dom改变应用场景中。vue中数据和dom渲染由于是异步的,所以,要让dom原创 2022-03-14 17:59:07 · 579 阅读 · 0 评论 -
js基础知识必背
1.如果有多个条件我们可以在数组中存储多个值,并且可以使用数组 include 方法。//Longhandif (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') { //logic}//Shorthandif (['abc', 'def', 'ghi', 'jkl'].includes(x)) { //logic}2.如果为真…否则简写这对于我们有 if-else 条件,里面不包含更大的逻辑时,是一个较大的捷径。原创 2022-03-14 17:58:16 · 453 阅读 · 0 评论 -
Vue3搭建项目
写这篇文章,主要是因为我记性不太好,所以记录下来,方便以后查看,距离2020 年 9 月 19 号的发布,已经有一年多了,是时候可以学起来了。一、在开始之前,请确保已经正确安装了 node.js(1)如何检查是否安装了node.js在命令提示符面板中,输入命令:node -v,出现版本号即为已安装,如下图。(2)若未安装node.js下载地址 https://nodejs.org/en/download/,选择对应你系统的Node.js版本进行下载。安装步骤不再赘述,直接下一步、下一步,完成。原创 2022-03-14 17:57:26 · 5442 阅读 · 1 评论 -
微信支付流程
1、首先要在微信商户平台(pay.weixin.qq.com)上配支付的链接,否则在实际操作中,最后支付时提示“当前页面的URL未注册”。2、支付时,接口中要求传用户openid,而获取openid则需要在公众平台设置获取openid的域名,只有被设置过的域名才是一个有效的获取openid的域名,否则将获取失败。(这也是为什么测试环境无法测试的原因,因为域名不同)3、请求创建订单接口,后端统一下单获取 orderId 并返回4、根据返回的 orderId ,请求订单详情接口,获取详情信息5、选择原创 2022-03-14 17:54:51 · 1763 阅读 · 0 评论 -
微信登录流程
主要流程:微信授权登录让微信用户使用微信身份安全登录第三方应用或网站,在微信用户授权登录已接入微信的第三方应用后,第三方可以获取到用户的接口调用凭证(access_token),通过access_token可以进行微信开放平台授权关系接口调用,从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。该模式整体流程为:(1) 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;(2)通过code参数加上AppID和App原创 2022-03-14 17:54:12 · 5394 阅读 · 1 评论 -
JavaScript 运行机制及原理
写js也有两年多了,一直对它的运行机制和原理不是很了解,今天特意把大神们的理论和自己的总结都记录到下面:什么是JavaScript解析引擎简单地说,JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出代码运行结果的一段程序。比方说,当你写了 var a = 1 + 1; 这样一段代码,JavaScript引擎做的事情就是看懂(解析)你这段代码,并且将a的值变为2。学过编译原理的人知道,对于静态语言来说(如Java、C++、C),处理上述这些事情的叫编译器(Compile原创 2022-03-10 15:12:22 · 4137 阅读 · 1 评论 -
W3C标准及其规范
作为一名前端开发工程师,了解 W3C 标准也是基础的一部分;何为W3C标准: 不是一个标准,而是万维网联盟制定的一系列标准网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Comput原创 2022-03-10 15:11:07 · 10876 阅读 · 0 评论 -
了解小程序的target和currentTarget
使用事件委托,children层存在嵌套时无法获取dataset,非嵌套时可以如期获取。如期获取场景wxml中<view bindtap="parent"> <view data-name="child1">child1</view> <view data-name="child2">child2</view></view>js中 parent(e) { console.log(e) if(e.t原创 2022-03-09 10:00:07 · 671 阅读 · 0 评论 -
Nuxt.js 如何做SEO优化
全局在nuxt.config.js配置文件中,有个head属性可以设置全局的title,content和keywords等属性 head: { title: '墨天轮 - 开放、便捷、专业的数据库技术社区', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1原创 2022-03-09 09:59:04 · 4622 阅读 · 0 评论