weixin_43263355的博客

本文主要介绍JavaScript中的一个重要概念Lexical Environment，它可以帮助我们解释我们为什么可以通过嵌套方法，共享数据，以及为什么可以在函数中定义一个和全局变量同名的变量，并且不会影响到全局变量。

下面的代码并不会报错，可以正常执行。var a = 0;代码最后执行结果是打印undefined。我们讨论一下代码背后的原因。首先， 创建JS Engine会创建GEC；然后， 代码在GEC中执行。此时，a的值就是undefined，所以打印出来的也是undefined。我们打开浏览器通过断点执行，可以看到同样的执行结果。因为a变量在最高的代码层级上，通过var被定义，所以在创建GEC的时候，会先将它赋值为undefined，后面根据代码的执行，再进行其它赋值。

本文主要通过一个实例，来理解什么是Javascript中的Execution Context，以及在JavaScript执行过程中，Execution Context是如何工作的。

本文主要介绍一个前端放大镜插件的设计和实现，该插件可以将图片的指定区域进行局部放大，插件运行不依赖任何第三方库，可以在Chrome或Edge的常见版本上运行。

本文主要介绍一个无缝轮播图的基本设计原理和实现方式，该轮播图不依赖任何第三方插件或组件库，可以在常用的Chrome或Edge浏览器上正常运行。

在前后端分离的开发工作中，我们经常从后端的WebAPI中获取到1维数据，前端需要将这些数据转换为树型结构。例如多级菜单数据，我们需要通过id和pid等栏位，将1维数组数据转换成一个树型结构，然后再进行页面渲染。本文主要介绍两个JS方法，方便我们将数组转换成树，或将树形结构转换成1维数组。

本文主要利用html 5的draggable原生特性，实现一个可拖拽的效果。我们可以创建包含多个页面节点的容器，每个容器可以包含多个节点。通过拖拽，可以移动一个容器内的节点到其他容器，每个容器内的节点和以通过拖拽改变排列顺序。

本文参照vuex 4的基本功能，模拟实现了其主要功能，并提供了关键的代码。本文是在Vue 3.0上通过其Composition API模拟Vuex 4.0的基本功能。

我们在开发中经常使用解构赋值，这样可以使我们的代码显得更加精简，清晰，但是它同样面临this指向出错的问题。

概要在前端开发过程中，字符串的replace方法在数据处理中非常常用。本文通过一个关键字高亮显示的实例和一个文字插值的实例，来说明replace方法如何结合正则表达式，从而更加灵活的满足各种需求。replace方法基本介绍函数参数和返回值regexp (pattern)一个RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。substr (pattern)一个将被 newSubStr 替换的 字符串。其被视为一整个字符串，而不是一个正则表达式。仅第一个匹配项会被替

概要我们在使用Vue的开发项目中，经常用自定义指令（directive）来封装一系列的DOM操作，这样做非常方便。一般来说，指令是使用动态指令参数来获取App中的数据。但是有些时候，自定义指令需要更多的数据来完成更复杂的功能，例如在指令中调用当前App实例的nextTick方法，以确保所有DOM元素加载完成，再进行DOM操作。还有一些情况，我们需要将一些全局配置参数传递给指令，已有的参数专递方式，显然无法满足这些需求。本文介绍一种扩展指令参数的方法，使其可以接收更多参数。该方法在Vue 2.0和 Vu

JavaScript中的原型，原型链和instanceof运算符详解。

概要无论前端后端，迭代器在我们的开发中大量使用。本文主要从实现和原理两个方面，比较JS和C#中迭代器，从而加深我们对迭代器这种编程模式的理解。代码实现本文通过迭代一个学生属性的实例来实现JS和C#迭代器。JS迭代器的实现var student = { 0: "XC-001", 1: "Tom", 2: "Room-01", length : 3}student.__proto__[Symbol.iterator] = function(){ var cu

概要本文主要目的是探讨在ES5中，数组原型链上flat方法是如何实现的。文章提供了基于reduce方法和基于map方法的两种实现思路。map和reduce方法的底层实现，请参看我的博文Javascript数组常用方法重写之map，reduce，some，every代码实现基本功能：将多维数组转换为1维数组。基于ES5 和 reduce方法的实现function flaten(temp){ arr = this; temp = temp || []; return arr.

概要我们在前端开发过程中，经常使用到各种数组的原生方法。为了更好的理解和使用这些原生方法，所以笔者试着重写了这些方法，并实现了相同的功能。本文主要对map，reduce，some，every这四个原型方法进行重写。代码实现由于新方法也要定义在原型链上，为了避免重复，所以本文参考C#的LINQ方法命名。具体如下：原型方法名称重写后的方法名称mapSelectreduceAggregate/AggregateLINQsomeAnyeveryAllma

概要我们在前端开发过程中，经常使用到各种数组的原生方法。为了更好的理解和使用这些原生方法，所以笔者试着重写了这些方法，并实现了相同的功能。本文主要对find，findIndex，filter，forEach这四个原型方法进行重写。代码实现由于新方法也要定义在原型链上，为了避免重复，所以本文参考C#的LINQ方法命名。具体如下：原型方法名称重写后的方法名称findFirstfindIndexfirstIndexfilterWhereforEachEach

概要在前端项目开发中，我们经常需要深度克隆JS对象。在克隆代码开发过程中，我们经常会遇到数组判定方法的问题，对象循环引用的问题。本文通过实例来解决上述问题代码及实现常见深度克隆JS对象的代码function deepClone(origin){ if (origin == undefined || typeof origin !== "object"){ return origin; } if (origin instanceof Date){

概要在现实应用中，我们常常需要从页面抓取出一些数据进行二次处理。在抓取出来的数据中，常常包含大量的重复数据，需要去掉重复数据。本文介绍几种方式来去掉字符串中的重复内容。解决方案解决方案解决方案1，基于ES6的新特新， 例如Set，展开运算符等。现在要去掉字符串***aaabbbcccddd***的重复项。代码如下：var str = [... new Set("aaabbbcccddd")].join("")运行结果是： abcd该方法主要是通过将字符串转为Set，而Set这种数据结构不

概要本文通过分析Vue 2.0 源码，探讨一下在Vue 2.0的初始化过程中，如何生成响应书数据。最后我们将关键的代码抽取出来，模拟出具体的实现过程。本文使用的Vue源码版本是2.6.14。Github地址是https://github.com/vuejs/vue.git。...

爬网脚本需求介绍关键代码分析附录本文通过ES6的新特性如async函数，rest参数，正则表达式的具名组匹配等，实现了一个简单的爬网脚本。通过获取每个页面的html代码，进行正则表达式匹配，最后完成所有需求。需求介绍获取指定页面title获取指定页面顶端按钮的名称和链接地址关键代码分析我们希望通过异步请求获取每个页面html代码，再对每个页面进行分析。因此，传统的异步请求很难解决该问题，所以使用async函数，让整个异步处理和同步处理几乎没有差别，循环体中实现获取一个html代码，处理并