踩坑 JavaScript循环中的闭包引起的问题

关于for循环中的闭包问题,其实早在之前我学习闭包的时候,就看过不下两篇文章提到过了,算是一个很经典的问题了。

尴尬的是,当同事叫我帮忙看这个问题的时候,我虽然一眼就看出了问题产生的原因,但是却死活想不起来解决方法,没办法只好又去google了一下才解决。

所以今天额外写一篇采坑记录加深印象

问题描述

问题产生的原因就是在for循环中使用了闭包,导致了“出乎意料”的结果。

代码演示:

var funcArr = [];
for(var i=1;i<=10;++i){
    var func = function(){
        console.log("这是第 "......

阅读更多

2018.04.27 从今天开始写日志

没有什么特殊的原因,也不是什么特殊的日子,就是单纯的想开始写日志了。

可能以后会每天都写一篇,也可能哪天就忘记写了,又或者哪天就不再写了。

不过无所谓,日志这种东西就随缘吧,工作已经挺累的了,不给自己加负担了。

最近又或者是断断续续不知道多久了,总是会觉得有些焦躁,但这些焦躁又会在第二天醒来以后被忘掉。

是因为又度过了高度重复的一天吗?

日复一日的9:05分左右骑着我的小牛来到公司,请叫我迟到小王子。

迟到小王子的考勤却从来不会让人失望。

考勤截止时间是9:00整,但我已经在之前经过另外一个公司园区的时候打了卡了。不知道公司为什么不做员工归属园区的校验,不过既然作为既得利益者……

阅读更多

sprite框架之完全体(包含最新版代码)(终)

从17年的12月,到现在18年的4月,历时5个月,spirte框架从一开始的一个简单雏形,慢慢变得强大起来。

从简单的require+Vue+VueRouter实现了框架的整体骨架,到后来和公司的前端部门一起配合实现了今日校园和微信的SDK初始化,再到跟公司的权限体系结合后实现的页面授权和按钮授权,再到游客模式,再到可配置的页面按需加载的实现,最后又实现了可配置的多入口应用实现,还支持了关于公司的对于移动应用的合并式二开扩展模式。

在这5个月的过程中,我踩了不计其数的坑,框架代码也改的面目全非,我想现在的sprite框架代码基本就代表了我现如今最高的前端水平了。

今天就在这里展示一下这五……

阅读更多

sprite框架之可配置的页面按需加载(六)

如果看过我之前的文章,你会知道我在sprite框架的时候,是把应用中的所有页面js文件一次性全部加载,然后再初始化Vue对象的。

在第一次初始化时就将所有的页面和组件准备好,这是典型的单页应用的做法。

这样做的优点:

  1. 在应用内部切换页面时渲染速度非常快。
  2. 由多组件构成的复杂页面的渲染效果是整体渲染,而不是分块渲染(比如先出现上面的组件再出现下面的组件)。

这样做的缺点:

  1. 当应用的规模比较庞大时,在初始化应用时请求所有的js文件会影响应用的加载速度。
  2. 加载所有的页面,即使用户并不需要访问的页面,这会造成额外的流量消耗。

虽然以目前的网络速度和用户的平均的流量值,这些缺点并不造……

阅读更多

Vue 在使用异步Ajax时mint-ui的懒加载组件InfiniteScroll存在的坑

mint-ui是饿了么提供的一套vue移动组件,使用起来还是很方便的。

其中有一类组件是用于分页加载数据的,比如Infinite Scroll和Loadmore这两个组件。

最近同事在使用Infinite Scroll实现数据分页懒加载时,遇到了一个奇怪的坑,我花了不少时间才定位出来原因,今天就写到博客里记录一下避免以后再次踩坑。

先来看看Infinite Scroll的介绍:

Infinite Scroll的主要属性为v-infinite-scroll和infinite-scroll-distance,v-infinite-scroll为触发加载时执行的函数,infinite……

阅读更多

sprite框架之web应用鉴权以及页面、按钮授权(五)

这篇文章介绍web应用鉴权,session一致性问题,还有sprite框架是如何与我们公司现有的web应用授权体系结合起来,从而实现页面授权以及按钮授权。

1.web应用鉴权

所谓web应用,就是基于http协议的已应用形式展现的web站点。既然是基于http协议,那就要知道http协议是一种无状态协议。

无状态协议意味着什么呢?比如你访问一个同一个网站的A页面和B页面,其实网站的服务器并不知道访问A页面和访问B页面的人是你,它只知道“噢,刚才发来了两个http请求,一个请求A页面,一个请求B页面”。http协议是基于tcp协议的,所以每次请求经过“三次握手”和“四次挥手”后,就和网站切……

阅读更多

JavaScript 浅拷贝与深拷贝

这篇文章介绍一下js中的浅拷贝与深拷贝。

拷贝的意思就是把一个变量的值复制给另一个变量。

由于js中变量类型分为基础类型和引用类型,在对这两种类型进行copy时的结果会有截然不同的效果,因此在进行变量拷贝时需要多考量一下。

先简单的给浅拷贝和深拷贝下个定义:
浅拷贝就是复制一份对变量的引用,每个持有引用的对象都指向同一份内存空间,所以每个对象都可以修改内存空间中的值。
(就像几个人同时租了一套房子,房东给每个人都发了一把钥匙,有钥匙的人都可以进房子入住)
而深拷贝则是复制变量的值,对于非基本变量,则递归的为基本变量后再复制,复制完成后复制对象与原对象拥有不同的内存空间,因此修改复制对象将……

阅读更多