- 博客(42)
- 收藏
- 关注
RSS订阅原创 根据Promises/A+规范实现Promise(下)
在上一篇文章中我们已经把Promise库的一些基本内容都实现了，接下来我们在之前的基础上再继续增加内容。1. 给Promise增加静态方法deferred我们在之前的基础上，再给Promise构造函数上增加一个静态方法deferred，这个方法在官方的Promise定义中并不存在。该方法也是用来处理异步逻辑的，只是写法跟常规的promise有一点点不同，Promise.deferred用法如下:let dfd = Promise.deferred();$.ajax({ type: 'get',
2021-01-26 15:19:43
172
原创 根据Promises/A+规范实现Promise(上)
本文中大部分的内容都是依据PromiseA+规范写出来的，该规范的地址是PromiseA+规范1. 最原始的版本首先关于promise最基本的特性可以总结为以下几个点:1 Promise是一个构造函数，通过new该构造函数创建promise实例对象，new构造函数的时候传入一个函数executor，它接收两个形参resolve和reject2 new Promise得到实例对象后，该对象默认状态为pending。在executor中调用resolve后该对象状态变为fulfilled，调用reje
2021-01-26 15:19:22
213
1
转载 require.context - 避免重复import
1. require.context是什么require.context是webpack针对依赖管理提供的一个API，通过它我们可以创建自己的上下文，它允许你传入一个目录进行搜索，一个标志指示是否应该搜索子目录，还有一个正则表达式来匹配文件。其实是Webpack通过解析 require()的调用，提取出来如下这些信息：Directory: ./templateRegular express...
2020-02-22 22:32:24
1125
原创 函数防抖与节流
1. 背景现在的不少项目中都存在类似这样的业务：页面监听鼠标滚轮事件做出对应操作、搜索输入框输入文字时下面弹出联想结果弹框(类似百度输入文字效果)等等，一般情况下会直接绑定scroll事件监听、input事件监听，如果在这些函数内部执行了其他函数，尤其是执行了操作DOM的函数，那不仅会造成计算机资源的浪费，还会降低程序运行速度，造成一些体验问题；或者在输入框频繁输入时，频繁调用后台接口，给后台造...
2020-02-17 11:59:09
215
转载 探讨npm依赖管理之peerDependencies
本文章转载自：作者：wonyun原文地址：探讨npm依赖管理之peerDependencies引言想必前端同学对npm的devDependencies和dependencies都比较熟悉，但是对peerDependencies可能就有点陌生，尤其是没有写过npm包插件的同学，比如之前使用grunt自动化工具的相关插件（如grunt-contrib-jasmine等）或者目前基于某个框架的u...
2019-12-15 11:52:33
3300
原创 vue2.x和vue3.x中的双向数据绑定原理有什么不同
简单探讨一下vue2.x和vue3.x中实现数据绑定的原理有什么不同，首先vue2.x使用的是Object.defineProperty方法，这个方法不兼容IE9以下的版本；而vue3.x使用的是Proxy方法，至于什么是Proxy，待会会简单介绍一下一. vue2.x实现原理我们通过去写一个非常非常简化版的vue框架和demo来实现这个双向数据绑定，来看下实现过程1 我们创建一个html模...
2019-10-22 11:28:43
1517
转载 vue的小技巧：高效简介的函数式组件
本文章主要分为两部分，第一部分是转载自别人和官网的对于渲染函数/函数式组件的介绍，第二部分是本人原创的公司项目中用到了函数式组件的场景1. 函数式组件的介绍以下1.1和1.2的内容转载自：作者：deniro原文地址：https://juejin.im/post/5c5bd129f265da2db0736691来源：掘金有时候，我们不需要复杂的组件，甚至在一些场景下，我们不需要那些组...
2019-10-10 16:28:37
795
2
原创 new Date处理日期格式及浏览器兼容问题
最近开发项目时，业务代码中有一段比较两个时间点相距是否超过3个月的逻辑，当时的条件判断语句我是这样写的：var sendDate = "2019-06-07 10:07:32";if (Date.now() - new Date(sendDate).getTime() < 7776000000) { // 具体业务逻辑}然后在测试的时候，我发现这段逻辑在Chrome是正常运行的，...
2019-06-08 15:55:15
1014
转载 webpack打包报javaScript heap out of memory,内存溢出
基于vue的项目在运行npm run dev的时候会报内存溢出，所以查了一些相关的资料总结了一下，下面会详细说明这个问题具体怎么解决。首先看我模拟出的报错内容具体截图如下:里面有句关键的话，CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory JavaScript堆内存不足，这里说的 JavaScript 其...
2019-02-18 15:56:50
5028
原创 《JavaScript设计模式与开发实践》学习笔记part4-发布订阅模式
本篇内容主要讲述JavaScript中的发布-订阅模式第七章 发布-订阅模式8.1 现实中的发布-订阅模式不论是在程序世界里还是现实生活中，发布—订阅模式的应用都非常之广泛。我们先看一个现实中的例子。 小明最近看上了一套房子，到了售楼处之后才被告知，该楼盘的房子早已售罄。好在售楼 MM 告诉小明，不久后还有一些尾盘推出，开发商正在办理相关手续，手续办好后便可以购买。 但到底是...
2018-09-09 18:15:23
187
原创 《JavaScript设计模式与开发实践》学习笔记part3-代理模式和迭代器模式
本篇内容主要讲述JavaScript中的两个设计模式：代理模式和迭代器模式第六章 代理模式6.1 定义代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。 代理模式是一种非常有意义的模式，在生活中可以找到很多代理模式的场景。比如，明星都有经纪人作为代理。如果想请明星来办一场商业演出，只能联系他的经纪人。经纪人会把商业演出的细节和报酬都谈好之后，再把合同交给明星签。...
2018-09-05 20:17:11
251
原创 闭包的概念、特性以及实际应用
1. 什么是闭包？闭包(closure)是函数式编程中的概念，最高实现闭包的语言是Scheme。闭包的严格定义是”由函数(环境)机器封闭的自由变量组成的几何体”，由于这个解释有些晦涩难懂，所以我们先通过一些例子来简单解释一下什么叫做闭包，然后再举一些实际应用中的例子2. 一个实例var generateClosure = function() { var count = 0...
2018-02-13 16:47:55
770
转载 常用的JavaScript设计模式
设计模式太多了，貌似有23种，其实我们在平时的工作中没有必要特意去用什么样的设计模式，或者你在不经意间就已经用了设计模式当中的一种。本文旨在总结平时相对来说用的比较多的设计模式。什么是设计模式百度百科： 设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。 使用设计模式是为了可重用代码、让代码更容易被他人理解、保证
2018-01-27 18:51:59
199
转载 什么是 JWT -- JSON WEB TOKEN
什么是JWTJson web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（(RFC 7519).该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该token也可直接
2018-01-07 01:39:26
322
原创 vue组件切换时使用过渡(transition)时应该注意的一些事项
最近在做公司项目时，涉及到做一个问卷调查，需要在不同题目题目之间使用transition产生一个过渡效果：当点击按钮进入下一题时，当前卡片从正中间向左滑动至不可见后，下一题对应的卡片从右边不可见区域从右向左滑动至屏幕正中间，在这个过程中我发现了几个问题，下面是该部分对应的代码<transition :name="slide"> <keep-alive> <component
2018-01-04 10:47:27
25438
3
转载 理解 JavaScript 中的策略模式
在讲解重点内容之前，我对于这里面的一个知识点困惑了好久，因此先讲解一下这个点，就是调用方法并且改变this指向的方法有2个：call和apply，两个方法的调用方式如下：(1) fnTest.call(obj, arg1, arg2, arg3, arg4....)(2) fnTest.apply(obj, [arg1, arg2, arg3, arg4, arg5])两种方法调用时参数列表不一样
2017-10-25 17:16:27
237
原创 使用express+mockjs搭建服务器和模拟数据
概述Express是目前最流行的基于Node.js的Web开发框架，提供各种模块，可以快速地搭建一个具有完整功能的网站。Express的上手非常简单，首先新建一个项目目录，假定叫做hello-world。$ mkdir hello-world进入该目录，新建一个package.json文件，内容如下。{ "name": "hello-world", "description": "hello
2017-09-10 11:32:42
7408
转载 移动前端开发之viewport的深入理解
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webvi
2017-09-08 17:35:53
242
转载 理解 JavaScript 的 async/await
随着 Node 7 的发布，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。我第一次看到这组关键字并不是在 JavaScript 语言里，而是在 c# 5.0 的语法中。C# 的 async/await 需要在 .NET Framework 4.5 以上的版本中使用，因此我还很悲伤了一阵——为了要兼容 XP 系统，我们开发的软件不能使用高于 4.0 版本的 .NET Fra
2017-09-07 15:11:49
2798
2
转载 前端精选文摘：BFC 神奇背后的原理
转载自: 作者: 梦想天空 原文链接: http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.htmlBFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC
2017-09-01 16:43:40
335
转载 CSS Sticky Footer
CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。在CSS的世界里，似乎没有完美这种说法。所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。先说我们为什么会使用到这个CSS底部布局解决方案:当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。对于追未完美的设计师来说，这
2017-06-29 15:50:48
338
转载 前端开发中关于浏览器兼容性的部分问题
（一）html部分1.H5新标签在IE9以下的浏览器识别 [if lt IE 9]> script type="text/javascript" src="js/html5shiv.js">/script>[endif]--> html5shiv.js下载地址https://github.com/aFarkas/html5shiv/releases2
2017-06-05 00:18:33
614
转载 CSS布局 -- 圣杯布局 & 双飞翼布局
圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。但是圣杯布局和双飞翼布局在实现方式上有一点差别。【圣杯布局】在这里，实现了左(200px) 右(220px) 宽度固定，中间自适应，container部分高度保持一致。DEMO稍微说明一下：html代码中 middle部分首先要放在
2017-05-28 21:25:22
273
转载 JavaScript排序，不只是冒泡
非常非常推荐大家去读一本gitBook上的书 -十大经典排序算法 : https://sort.hust.cc/， 本文的动图和演示代码均是这里面的。做编程，排序是个必然的需求。前端也不例外，虽然不多，但是你肯定会遇到。不过说到排序，最容易想到的就是冒泡排序，选择排序，插入排序了。冒泡排序依次比较相邻的两个元素，如果后一个小于前一个，则交换，这样从头
2017-05-24 11:08:07
288
转载 老生常谈-从输入url到页面展示到底发生了什么
整个过程其实总结为以下几个步骤:1、输入地址2、浏览器查找域名的 IP 地址 3、浏览器向 web 服务器发送一个 HTTP 请求4、服务器的永久重定向响应5、浏览器跟踪重定向地址6、服务器处理请求7、服务器返回一个 HTTP 响应 8、浏览器显示 HTML9、浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）1. 输入地址当我们开始
2017-05-07 22:03:51
317
转载 [转载]阿里前端笔试总结
1.有一个长度未知的数组a，如果它的长度为0就把数字1添加到数组里面，否则按照先进先出的队列规则让第一个元素出队。分析：这道题主要是考核了数组的队列方法和栈方法。另外，原题还有字数限制的，只有在字数小于30并且结果正确时才可以满分。所以，我们可以使用三目运算符（： ？）来减少字数。代码如下：a.length === 0 ? a.push(1) : a.shift();
2017-04-22 16:22:43
1956
转载 一道有趣的面试题和相关知识补充
转载自: 伯乐在线专栏作者 - chokcoco文章地址: http://mp.weixin.qq.com/s/0QwvOHpTiAg7Io_bdUQo7g最近在网上看到这么一道面试题: 使用JS实现一个哈数, 运算结果可以满足如下要求:add(1)(2) // 3add(1, 2, 3)(10) // 16add(1)(2)(3)(4)(5) // 15然后在一片博文
2017-03-28 14:43:18
213
转载 HTTP状态码详解
HTTP状态码状态码的职责是当客户端向服务器发送请求时，描述返回的请求结果。借助状态码，用户可以知道服务器端是正常处理了请求，还是出现了错误。状态码的类别状态码类别说明1XX信息性状态码(Information)接收的请求正在处理2XX成功状态码(Success)请求正常处理
2017-03-22 11:13:03
404
原创 webpack+Vue.js+vue-router的一个简单实例应用
最近学习了差不多1个月的Vue.js, 然后学习的过程相对缓慢, 也看了很多包括博客还有官方教程. 然后现在使用webpack+vue.js+vue-router做了一个简单的应用, 这个应用非常简单, 对于初学者肯定非常实用. 在这里描述一下我制作这个应用的过程.一. 准备工作首先先安装相关的程序. 第一个需要安装的是node.js, 可以通过命令行或者是去NodeJs的官网下载安装,
2017-02-24 17:15:58
2792
转载 高性能JavaScript 循环语句和流程控制
循环语句众所周知，常用的循环语句有for、while、do-while以及for-in，forEach。除了for-in和forEach性能略低外，平时我们对前三者的选择更多的是基于需求而非性能考虑，今天我们就对它们各自的性能做个测试，告诉我们最极端的情况下还能做哪些优化。首先我们来谈谈为何for-in和forEach会比其他的慢。for-in一般是用在对象属性名的遍历上的，由于每
2017-02-04 16:15:09
196
转载 网页重构应该避免的10大 CSS 糟糕用法
原文地址罗磊的独立博客:「网页重构应该避免的10大 CSS 糟糕用法」对于网页重构来说，CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志 。这些年来，随着我们的网站越来越复杂：html5，css3，新的技术、新的属性，越来越多的开发者开始思考和尝试提高他们的 CSS 技能。那么我们从哪里着手呢？对于网页重构工作来说，我们应该养成什么样的开发习
2017-01-30 11:25:45
675
原创 一道关于给DIV按比例分配宽度的面试题
之前参加某公司的笔试的时候有这么一道题, 要求用CSS3的方式实现下列布局:可以看得出来这里没有标明任何的宽度是多少, 但有一个值得注意的地方是蓝色块的宽度很明显是红色块宽度的两倍.当时做这个题是还没有学习CSS3, 所以并不知道怎么做. 而经过最近的学习之后, 了解到了其实可以使用CSS3中的弹性伸缩布局来做, 具体的做法是:(1) 结构:(2
2017-01-30 11:12:58
1036
1
转载 CSS z-index 属性的使用方法和层级树的概念
转载自:MG12's Blog - Just Another WordPress Blog原文地址:http://www.neoease.com/css-z-index-property-and-layering-tree/CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认
2017-01-30 11:05:58
254
原创 display:inline-block和元素水平居中的关系
一般情况下, 如果我们要使一个div在父元素中水平居中显示, 我们会给它设置一个宽度, 然后设置margin: 0 auto; 但这个属性只有在div的display为block或者默认情况下才会有效果. 但是在某些必需的情况下, 我们给div设置了display为inline-block的情况下, 发现使用margin来让其居中这个方法行不通. 那么此时解决的方法就是: 给该元素的父元素添加样式
2017-01-30 10:49:38
14371
原创 针对不同浏览器的事件绑定以及鼠标滚轮事件
前段时间在看《JavaScript高级程序设计》第十三章-事件, 还没看完, 只是看到里面的一些内容觉得在这里做一个记录和总结会比较好. 首先先来讲解一下绑定事件一共有几种方式以及他们的特点和浏览器的兼容性一. DOM0级事件处理程序所谓的DOM0级事件处理程序, 就是通过JavaScript指定事件处理程序的传统方式, 就是将一个函数赋值给一个事件处理程序属性, 比方说div.o
2017-01-30 10:36:35
2269
转载 JavaScript中的深度克隆
javascript的一切实例都是对象，只是对象之间稍有不同，分为原始类型和合成类型。原始类型对象指的是字符串（String）、数值（Number）、布尔值（Boolean），合成类型对象指的是数组（Array）、对象（Object）、函数（Function）。既然对象分为这两类，他们之间的最大差别是复制克隆的差别。普通对象存储的是对象的实际数据，而引用对象存储的是对象的引用地址，而把对象
2017-01-30 10:15:45
252
原创 关于如何取消匿名函数的绑定以及arguments.callee的用法
之前在看《JavaScript高级程序设计》第十三章P391看到关于arguments.callee的用法, 然后又翻回之前的内容, 原来在第5章引用类型P113的时候曾经讲到过这个arguments.callee, 发现这个arguments对象的属性其实有挺大的用处的, 接下来讲一讲的两大作用:作用一. 取消代码与函数名的耦合状态首先, 如果要定义一个阶乘函数,
2017-01-26 12:38:58
1432
转载 Webapp中1px边框在retina屏中变粗的问题
最近在做一个webapp, 给边框设置了1px的大小, 结果同时在1080P的手机中打开并截图后用PS无限放大, 发现边框并不是1px大小, 而是变成了3px的大小.其实这是因为手机的dpr在作祟, 在超高清屏(dpr=3)的情况下会用3dp的大小去渲染1px的内容, 因此1px的边框在超高清手机上会被拉伸成3px, 这个问题是需要解决的.还好，时代总是进步的。也许很多人都不知道， 现
2017-01-03 11:05:33
2022
原创 Ajax小实例2验证注册框-经验总结
今天做了第二个关于ajax的实例, 验证注册框, 一些比较主要的代码跟前一篇验证登录框差不多, 但是我做了一部分的改动, 下面还是来讲讲我是如何制作的以及一些需要注意的地方.这个实例的思路是: 一个前端页面上有两个输入框和注册按钮, 如果用户什么都不输入直接点击注册框的话会弹出对话框提醒用户输入内容, 此外通过JS限制密码的输入只能是数字和英文字母的组合, 不能是特殊字符, 输入符合要
2016-12-26 17:18:08
420
转载 大部分人都会做错的经典JS闭包面试题
由工作中演变而来的面试题这是一个我工作当中的遇到的一个问题，似乎很有趣，就当做了一道题去面试，发现几乎没人能全部答对并说出原因，遂拿出来聊一聊吧。先看题目代码：function fun(n,o) { console.log(o) return { fun:function(m){ return f
2016-12-26 17:01:32
232
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人