飞鹰3995-CSDN博客

原创块作用中的域

尽管函数作用域是最常见的作用域单元，当然也是现行大多数JavaScript中最普遍的设计方法，但其他类型的作用域单元也是存在的，并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀、简介的代码。除JavaScript外的很多编程语言都支持块作用域，因此其他语言开发者对于相关的思维方式会很熟悉，但是对于主要使用JavaScript的开发者来说，这个概念会很陌生。尽管你可能连一行带有块作用域风格的代码都没写过，但对下面这种很常见的JavaScrip...

2022-03-22 19:10:48 1377

原创作用域（三）——欺骗词法

在上一篇文章中，小编介绍了词法作用域，并在其中提到了两个会出现“欺骗”词法作用域的关键字——eval和with，今天小编就和大家一起揭开这两个关键字的神秘面纱。在探索今天的内容之前，先把上一篇文章的债还上。在上一篇文章中，我提到了【通过这种技术可以访问那些被同名变量所遮蔽的全局变量，但非全局变量如果被遮蔽了，无论如何都无法被访问到。】，下面的代码没有写出来。也就是这样：varb=3functionfoo(){ varb=4; functionbar(){ varb=...

2022-01-13 21:30:00 126

原创作用域（二）——词法作用域

在上一篇文章中，我们将“作用域”定义为一套规则，这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找。作用域共有两种主要的工作模型。第一种是最为普通的，被大多数编程语言所采用的词法作用域，我们会对这种作用域进行深入讨论。另外一种叫做动态作用域，仍有一些编程语言在使用（比如Bash脚本、Perl中的一些模式等）。简单的说，词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域就是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法处理器处理代码时会保持作用域不变

2022-01-10 18:07:34 533

原创作用域（一）

这段时间小编把两本js的经典图书看完了，一本是《深入理解JavaScript》,一本是《你不知道的JavaScript》。中间有些内容小编是根本没看懂，这次小编决定看第二遍并和大家一起分享书中的内容，期待着和大家一起进步。一、RHS和LHS先看一个js中很常用的赋值语句var a = 2;在这个例子中，js的引擎会对变量a进行LHS查询，当然了，和这个相对应的是RHS查询。那究竟什么是LHS和RHS呢，简单一点说，如果是对某个变量进行赋值，就是进行了一次LHS。获取一个变量的值，就进行

2021-11-15 21:38:51 644

转载 js中的函数嵌套和闭包

小编已经有一段时间没有更新文章了，最近一直在考虑接下来要更新什么内容。接下来，小编会围绕以下三个方面更新文章。实际项目中遇到的问题和解决方案、Vue源码解析、代码重构、关于数据可视化。小编也会按照这个顺序，逐步的去更新。期待着一起进步。今天就先和大家一起聊一聊我理解的闭包。在聊这个问题之前，先了解一下变量的定义域。在js中，变量定义域有全局作用域和局部作用域之说。es6中新出现的变量声明关键字，就是为了解决部分变量作用域混乱引入的。全局作用域在这就不谈了。主要说说函数的作用域。一、作用域简单

2021-11-12 17:26:59 587

原创 Vue3中的watchEffect

昨天和大家一起分享了关于CompositionAPI中的watch，今天继续探讨与watch类似的watchEffect，下面是示例代码const app = Vue.createApp({setup() { const { reactive, watch, toRefs,watchEffect } = VueconstnameObj=reactive({name:'lilei',englishname:'hanmeimei'}) watch([() => n...

2021-11-10 22:15:00 761

原创 Vue3中的watch

今天继续和大家一起探讨在Vue3中的CompositionAPI中，是如何处理watch的，我们先看一段针对基础数据类型数据的编码方式const app = Vue.createApp({ setup(){ const { ref,watch } = Vue const name = ref('lilei') // 具有惰性 // 可以拿到当前值和之前的值 watch(name, (currentVal,preVal) =&g

2021-11-09 22:15:00 743

原创 Vue3中的计算属性

在之前的文章中，小编和大家一起学习了关于Vue的基本语法和概念，包括组件、数据混入和插槽等。从今天开始，小编和大家一起学习Vue3中的新特性，也就是网上炒的铺天盖地的Composition-API，看看到底有什么神奇之处，我们之前通过Vue写的代码，基本都是这样Vue.createApp({ data(){ return {name:""//绑定基本数据类型数据items:[1,2,3,4] // 绑定引用数据类型 ...

2021-11-08 21:45:00 7373

原创 Vue3中的setup函数和响应式ref reactive

在之前的文章中，小编和大家一起学习了关于Vue的基本语法和概念，包括组件、数据混入和插槽等。从今天开始，小编和大家一起学习Vue3中的新特性，也就是网上炒的铺天盖地的Composition-API，看看到底有什么神奇之处，我们之前通过Vue写的代码，基本都是这样。Vue.createApp({ data(){ return {name:""//绑定基本数据类型数据items:[1,2,3,4] // 绑定引用数据类型 ...

2021-11-03 23:30:00 480

原创 Vue3中的Teleport(传送门)

动画片多啦A梦相信大家很多都看过，而且近几年又出现了相关的电影，作为小编一个男生来说，一直是对里面的静香念念不忘，有点跑偏了哈，今天小编介绍的Teleport就和多啦A梦的任意门一样，可以穿梭到任何的DOM中的任何地方。模态框一直是实际开发中用到比较多的功能之一，在没有各种各样的组件之前，我们需要通过css中的定位对元素进行修饰，有了Teleport，我们就可以这样实现一个简单的模态的组件<style> .area{ position: absolute; lef

2021-11-02 18:54:10 252

原创 Vue3中的自定义指令

有了前面组件、mixin的基础之后，再来了解今天小编要说的内容，就相对容易一些，今天小编和大家一起学习Vue3中的自定义指令，我们先来看看什么是Vue中的指令。除了核心功能默认内置的指令(例如 v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令https://v3.cn.vuejs.org/guide/custom-directive.htm.

2021-10-11 20:25:02 442

原创 Vue3的mixin

小编在之前的项目中还没有接触过minxin(数据混入)，直到一次面试的时候，面试官问我，我才注意到，原来还有这样的一个东西，今天小编就和大家一起看看这个神奇的mixin。个人感觉mixin和组件的注册和使用很类似，我们要注册一个局部的mixin的时候，可以这样。//组件data和methods优先级高于mixin中的data优先级，组件和mixin数据同时存在的时候，使用组件中的data数据，如果组件内部没有data，使用mixin中的数据// 声明周期函数，先执行mixin里面的，再执行组件里面的.

2021-09-21 21:21:42 415

原创 Vue3的动态组件和异步组价

今天小编在网上闲逛的时候，发现前端这几年的发展离不开组件的概念，之前小编接触到的组件，基本都是这样的const app= Vue.createApp({ template: ` <input-item /> <common-item /> `})app.component('input-item',{ template: `<div> <input /> &lt

2021-09-09 19:23:15 207

原创 Vue3中的slot

小编今天和大家一起探讨Vue中的插槽(slot)的概念，熟悉Vue的小伙伴都知道父子组件之间可以相互传递数据，但是传递DOM结构的时候，再通过属性的方式就有些麻烦，我们先来看个父子组件的例子constapp=Vue.createApp({ template: `<myform />`})app.component('myform',{ methods:{ handleClick(){ alert('handleClick') ..

2021-09-02 19:30:49 549

原创 Vue3样式绑定

今天和大家分享关于Vue中的样式和class的绑定，首先声明，这篇文章出现的class不是类声明的关键字，而是标签内部的属性，用于实现样式在原生html中，我们给一个元素添加样式的时候，大概有这么两种方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&

2021-09-01 18:58:56 703 2

原创 Vue中的Vuex（二）

小编今天继续和大家一起学习和探讨Vuex，咱们书接上回，继续探索Vuex的其他特性三、Mutation在上一篇文章中，咱们已经知道，对于Vuex中的数据，不能像data中的数据一样直接修改，那要对State中的数据修改的时候，要怎么做呢，Vuex提供了Mutation方式进行统一修改，并且使用state作为第一个参数，就像这样const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (

2021-08-30 20:12:42 163

原创 Vue中的Vuex（一）

小编在项目中，经常会使用到Vuex，其实小编自己只是知道Vuex是为了解决什么痛点，但是具体这个东西是怎么回事，小编自己有点迷迷糊糊，昨天小编痛下决心，认认真真的把Vuex的官网（https://vuex.vuejs.org/zh/）读了一遍，收获还是很多的，特地拿出来与大家分享，也希望能在大家今后的面试中，增加一些筹码和信心。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到

2021-08-27 18:40:07 288

原创 js中的事件委托/代理

小编今天在做项目的时候，在项目的注释中发现了关于事件委托的注释（PS：虽然下面代码写的不是事件委托的代码，小编作为一个干了前端三四年的小菜鸟，依然不知道事件委托到底是个啥，想想惭愧，特意在Vue3这个专栏中间插了这个。既然谈到了事件委托，就不能不提冒泡，那什么是事件冒泡呢？小编特意在网上找了这样一张图片下面的泡泡都很小，越往上泡泡越大。图中的泡泡可以看成是html中的DOM结构。那到底什么是冒泡呢？比如这样一个结构<divonclick="handleDivClick()"&g.

2021-08-26 20:33:01 135

原创 Vue生命周期函数

今天小编继续和大家一起研究Vue，今天要一起探讨的是生命周期函数，在小编的理解中，生命周期就是在一定时间自动执行的函数，就类似原生js中的window.onload。小编先拷贝一张来自Vue官方文档中的一张图其实在这张图中，已经完整的说明了Vue中每个生命周期中的函数的执行时间，但是小编还是要用代码结合注释，更加详细的说明生命周期。const app = Vue.createApp({ data(){ return { message: 'helllo world'

2021-08-25 16:46:16 209

原创 Vue3组件

上一篇文章小编用Vue的语法编写了一个简单的todoList，实现的逻辑比较简单，但是在实际项目中，会涉及到一些比较复杂的逻辑，比如在item中添加各种各样的标签，再加上甲方爸爸提出各种各样的需求，最后可能把我们搞到崩溃。所以引入了在组件化的概念。在组件化之前，小编先跟大家补充一些基础知识。一、数据绑定和差值表达式上一篇文章小编要实现的效果是这样的这个时候，可能有这样的需求，比如我想将文本框内输入的内容作为button标签的title，或者想把文本框的内容实时的显示在按钮里面。这时候，我们需

2021-08-24 18:17:45 212

原创 Vue3实现列表循环

今天小编和大家一起在Vue的路上探索，要实现的功能是这样的。现将默认数组内的渲染到页面上，然后点击按钮之后，将文本框内的数据添加到列表上，效果如下源码是这样的，下面我就结合代码中的注释来说明一下核心的代码Vue.createApp({ data(){ return { list:['item1','item2','item3','item4'], // 绑定v-for循环的列表 inputVal:"" // 绑定文本框

2021-08-21 16:38:19 2054

原创 Vue3实现字符串反转和内容隐藏

经过一周时间的努力，小编今天继续和大家学习Vue3，今天还是以实际例子为主，先让小小白感受一下Vue的魅力，让另外一些小小白体会一下不用脚手架是一种什么体验，当然了，也为了接下来的工作内容准备准备。上一篇关于Vue的文章，通过Vue，实现了一个累加的功能。源码是这样的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-

2021-08-17 22:14:02 395

原创 ES6中神奇的const

小编在之前的文章更新过关于es6中，定义变量的关键字，let和const，今天在找资料的时候，发现了const定义变量的新特点，今天特来用一篇文章来记录下我们都知道const是用来定义常量的，定义之后不可以改变，但是这个不可改变，只限于基本数据类型。在用const定义后的基本数据类型变量，再改变的时候就会出现问题，比如constnum1=2num1=3//UncaughtTypeError:Assignmenttoconstantvariable.对于引用数据类型，主...

2021-08-16 22:25:34 98

原创 Vue3实现Hello和Counter

小编之前的文章都是js和ts基础，基础完事之后，是时候向前端的主流框架发起挑战了，接下来小编主要针对现在比较流行的Vue3结合实例，和大家一起探讨一下Vue的基本语法和Vue3中提供的一些新特性，希望小编可以和大家一起成长，一起在前端的路上，越走越远。我们常见的html模板，基本都是这样的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ht

2021-08-14 13:12:38 200

原创 ES11中的空值合并运算符

小编在自己的朋友圈和一些论坛中，都有看到一些前端或者后端被js中判断折磨到起飞，特别是针对空字符串和数字0，在js中，以下6种情况是false undefined null false 0 NaN ''或""（特别的，当字符串中间全是空格的时候，会判断为true）为了解决这个痛点，es11中引入空值合并运算符。使用??运算符之前我们为了兼容性好一些，会写这样的代码const b = 2const a = b || 5 // 相当于给a一个

2021-08-06 22:15:45 138

原创 ES11中的globalThis和可选链

小编今天更新的这两个新特性主要是编码可以更方便，同时也增加了兼容性，globalThis主要是提供了一个标准的方式去获取不同环境下的全局对象。可选链主要是增加了对象中获取内容的安全性。一、globalThis对于WEB(浏览器)环境下，js中的全局变量是window/self，相信大家对于window了解的比较多，也比较熟悉，小编也是今天才知道self的这个对象，从目前来看，可以认为是一样的。下面是延时实例setTimeout(() => { console.log('lil

2021-07-31 15:15:34 312

原创 ES11的Promise.allSettled

小编最近因为一些自己的问题，没有更新文章。今天刚好有一点精神头，特意来更新一下，今天和大家一起探讨的是Promise对象中的allSettled方法，主要是为了解决多次异步请求的时候，中途出现失败的痛点处理。在之前的文章中，小编更新的Promise.all方法，这个主要是为了优化多次请求的情况，可以写成这样。Promise.all([ Promise.resolve({ code:200, data:[1,2,3] }), Promise.r

2021-07-27 22:14:45 379

原创 ES11中的bigint

上一周小编因为自己的事情，没有持续更新，还望大家谅解，趁着今天醒得早，小编继续和大家学(si)习(ke)es11中的新语法。大家还可以关注我的微信公众号，蜗牛全栈。在js中，对整数类型的数据，存在着最大极限，这个极限就是const max = 2**53 // js幂运算console.log(max) // 9007199254740992同样，为了计算的准确性，js也定义了最大安全整数，这个整数是console.log(Number.MAX_SAFE_INTEGER) // 900

2021-07-25 21:32:04 236

原创 ES11中matchAll

小编今天和大家继续研究es11，今天的这个方法主要是针对字符串匹配上，之前匹配字符串的时候，更多的是使用正则表达式，就像这样。大家还可以关注我的微信公众号，蜗牛全栈。const str = ` <html> <body> <div>第一个div</div> <p>这是个p</p> <div>第二个div</div&gt

2021-07-23 15:09:49 483

原创 ES10对象和Symbol扩展

今天和大家一起学习es10中对象和Symbol的扩展，虽然这两个特性在实际项目应用的较少，至少先混个脸熟，看到大佬的代码的时候，知道有这么个事，也是一件值得骄傲的事情么。大家还可以关注我的微信公众号，蜗牛全栈。一、JSONsuperseteval('var str="school";function foo(){return str;}')console.log(foo()) // schooleval('var str="school";\u2029 function foo(){re.

2021-07-02 08:26:55 98

原创 ES10toString()方法修订和Catch Binding

小编今天继续和大家一起探索es10中的新特性，针对第一个toString方法的修订，可以通过下面这个例子来熟悉。大家还可以关注我的微信公众号，蜗牛全栈。function foo(){ // 这是一段注释 console.log("lilei")}console.log(foo.toString()) // function foo(){// // 这是一段注释// console.log("lilei")// }今天的第二个特性，通过名称看着可能挺唬人

2021-07-01 08:54:04 100

原创 ES10中的对象拓展

小编前一段时间更新了一系列关于ts的语法，是看到github上面关于ts的项目越来越多，包括现在前端的主流框架，像React/Vue/Angular，但ts最终还要被编译成js执行，小编看到手上还有一些关于js的课程和资料，继续与大家探讨js中新特性，能给我们平时工作带来哪些方便。大家还可以关注我的微信公众号，蜗牛全栈。今天小编要更新的是es10对于对象的扩展，是一个在Object下面的静态方法，Object.fromEntries()，这个方法和之前的Object.entries()是两个互逆的操作。

2021-06-30 08:07:07 86

原创 ES9对象和Promise的扩展

今天小编更新的这篇文章相对比较好理解，一个是对对象的扩展，和之前es6中的数组扩展很类似，另外对Promise的扩展，也在query中的ajax类似，内部没有很多，所以小编将这两块内容放在一起更新。期待着大家一起进步。大家还可以关注我的微信公众号，蜗牛全栈。一、对象拓展1、es6中的数组拓展运算符const arr1 = [1,2,3]const arr2 = [4,5,6]const arr3 = [...arr1,...arr2] // [1,2,3,4,5,6]2、克隆对象

2021-06-29 08:50:48 74

原创 ES9中的异步迭代

从今天开始，小编和大家一起聊一聊ES9中的新特性和新语法。这些语法和新特性在小编实际项目用的时候，用到的并不多，这篇之后，小编准备把文章作为类似字典的东西，以后项目用到的，或者其他人写代码的时候，至少先混个脸熟。就像我前天看到的一句话一样，好代码50%是给机器运行的，另50%是给人看的，相信大家以后写的代码会越来越好，小编会和大家一起进步。大家还可以关注我的微信公众号，蜗牛全栈。一、同步迭代器：在之前的文章中，小编更新过一篇关于es6关于可迭代协议迭代器协议的文章，可以看看小编的这篇文章《ES6中的..

2021-06-28 10:47:54 119

空空如也

空空如也