- 博客(36)
- 收藏
- 关注
RSS订阅
原创 vue项目中使用swiper实现中间大，两边小的轮播图
前言项目中使用的vue，刚好有需求要实现轮播图，突出显示当前图片，两边展示其他图片；通过查各种资料，实现了，故在此记录下来下面我们来看下实现步骤：第一步：首先在项目index.html中引入swiper的css文件-swiper.min.css第二部：写入dom结构<div class="swiper-container"> <div class="swiper...
2019-11-22 17:33:39
6060
4
原创 前端上传文件直传阿里云oss
ps: 最近突然接到了系统文件要直传阿里云oss得需求，赶紧去看了看阿里云得开放文档oss查完了一些资料后，就准备着手开发了，对了我们得上传文件用得是element ui 得 el-upload准备工作，想直传阿里云少不了一些基本的配置，密钥等信息;这些东西从哪里来呢，当然是需要我们的最佳搭档后端开发拿到给我们拉，哈哈，阿里云有提供给方法给后台，我们要调用签名接口去后台拿到endpoint = "http://oss-cn-shenzhen.aliyuncs.com"accessKeyI
2021-03-11 11:40:38
4398
原创 漫画 | 人到中年，一地鸡毛
今天这篇漫画，纯属虚构，虚构中又还有一点点真实，真实的反映大部分人（不仅仅程序员）中年的生活与无奈.事故主人公：大刘/某伪大厂架构师/35+，东北大汉，身高180，体重180，没有其他180了，下面是中年老刘普通de的一天.编后看着原文的内容，绘画着人物的场景，内心五味杂陈，选择这篇文章来改编时，也曾思考再三，此文内容虽是虚构，但却真实的体现了当下一、二线城市打工人（更包括程序员）的生活：“我抱砖就没手抱你，我放下手中砖就无法养家”.都说成年人的世界里，没有“容
2020-12-22 17:44:58
359
原创 介绍下重绘和回流（Repaint & Reflow），以及如何进行优化
题目描述：介绍下重绘和回流（Repaint & Reflow），以及如何进行优化知识点：Repaint & Reflow解题：思路一：1. 浏览器渲染机制浏览器采用流式布局模型（Flow Based Layout）浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了渲染树（Render Tree）。有了RenderTree，...
2020-01-17 08:47:25
1364
原创 介绍下 Set、Map、WeakSet 和 WeakMap 的区别？
题目描述：介绍下 Set、Map、WeakSet 和 WeakMap 的区别？解题：思路一：Set 和 Map 主要的应用场景在于 数据重组 和 数据储存Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构1. 集合（Set）ES6 新增的一种新的数据结构，类似于数组，但成员是唯一且无序的，没有重复的值。Set 本身是一种构造函数，用来生成 Set 数据...
2020-01-14 10:27:31
1670
原创 关于 const 和 let 声明的变量不在 window 上
题目描述：关于 const 和 let 声明的变量不在 window 上解题：思路一：在ES5中，顶层对象的属性和全局变量是等价的，var 命令和 function 命令声明的全局变量，自然也是顶层对象。var a = 12;function f(){};console.log(window.a); // 12console.log(window.f); // f(...
2020-01-13 18:13:02
509
原创 给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。
题目描述：给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中同样的元素。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1]...
2020-01-13 18:06:01
819
转载 第4篇：也许是终极异步解决方案之细说Async专题
上一章我们了解了co与Generator结合的异步编程解决方案。我知道你想说什么，写一个异步调用还得引入一个npm包(虽然是大神TJ写的包)。妈卖批的npm！当然是不存在的。如果一个特性足够重要，社区的呼声足够高，它就一定会被纳入标准的。马上我们要介绍的就是血统纯正的异步编程家族终极继承人——爱新觉罗·async。往期：第1篇：事件循环之细说Async专题第2篇：迟到的承诺之细说...
2019-12-27 09:11:43
140
转载 如何写出漂亮的 JavaScript 代码
原文：https://github.com/ryanmcdermott/clean-code-javascript说明：本文翻译自 github 上的一个项目，非全文搬运，只取部分精华。如何提高代码的可读性、复用性、扩展性。我们将从以下四个方面讨论：变量函数类异步一、变量用有意义且常用的单词命名// Bad:const yyyymmdstr = moment().fo...
2019-12-16 17:52:43
209
原创 开发项目时，如何限制接口被多次点击调用
前言在日常的开发中，经常会忽略掉按钮的重复点击提交，结果就是被细心的测试妹纸狂点按钮测试到不正常啦，哈哈哈哈。那么我们该怎么来实现按钮的重复提交呢？进入正题：思路：首先我们设置一个开关，当这个按钮被点击的时候，马上关掉开关，一直等程序运行完；后续如果还需要点击，再放开就好了上代码let switch = false;doSomething() { if (switch) {...
2019-12-16 17:35:11
1096
转载 带你构建专属你的 NodeJS 知识体系
最近读《重学前端》，开篇就是让你拥有自己的知识体系图谱，后续学的东西补充到相应的模块，既可以加深对原有知识的理解，又可以强化记忆，很不错的学习方案。这篇文章主要知识点来自：《Node.js硬实战：115个核心技巧》i0natan/nodebestpractices后续学习的一些知识点说明比较好的 markdown 的查看方式是直接用 VSCode 打开大纲，这样整个脉络一目了然，后...
2019-11-19 10:30:41
460
转载 聊聊 Vue 中 axios 的封装
axios 是 Vue 官方推荐的一个 HTTP 库，用 axios 官方简介来介绍它，就是：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。作为一个优秀的 HTTP 库，axios 打败了曾经由 Vue 官方团队维护的 vue-resource，获得了 Vue 作者尤小右的大力推荐，成为了 Vue 项目中 HTTP 库的最佳选择。虽然，a...
2019-11-15 17:56:36
147
转载 被问机率高达99.6%的Vue面试题
前言找了一些在 Vue 方面经常出现的面试题，留给自己查看消化，也分享给有需要的小伙伴。如果文章中有出现纰漏、错误之处，还请看到的小伙伴留言指正，先行谢过。废话不多说，开启面试模式↓1. 说一下 Vue 的双向绑定数据的原理vue 实现数据双向绑定主要是：采用数据劫持结合“发布者 - 订阅者”模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter...
2019-11-12 15:32:28
226
原创 浏览器和Node 事件循环的区别
题目描述：浏览器和Node 事件循环的区别解题：思路一：其中一个主要的区别在于浏览器的event loop 和nodejs的event loop 在处理异步事件的顺序是不同的,nodejs中有micro event;其中Promise属于micro event 该异步事件的处理顺序就和浏览器不同.nodejs V11.0以上 这两者之间的顺序就相同了function test (...
2019-11-12 12:54:36
1783
原创 改造 for 循环输出连续数字
题目描述：改造下面的代码，使之输出0 - 9for (var i = 0; i< 10; i++){ setTimeout(() => { console.log(i); }, 1000)}知识点：闭包letsetTimeout解题：思路一：原理：利用 setTimeout 函数的第三个参数，会作为回调函数的第一个参数传入利用...
2019-11-11 14:56:25
762
原创 找出字符串中连续出现最多的字符和个数
题目描述：找出字符串中连续出现最多的字符和个数'abcaakjbb' => {'a':2,'b':2}'abbkejsbcccwqaa' => {'c':3}知识点：我们可以通过正则匹配到字符串中连续出现的字符“(.)(\1)+”。即可找出对应的字符串。.表示匹配任意连续出现的字符串，也可以指定你想要匹配的项。解题：思路一：const arr = str.m...
2019-11-08 16:44:02
2115
转载 用 preload 预加载页面资源
本文主要介绍preload的使用，以及与prefetch的区别。然后会聊聊浏览器的加载优先级。preload 提供了一种声明式的命令，让浏览器提前加载指定资源(加载后并不执行)，在需要执行的时候再执行。提供的好处主要是作者简介 felix 蚂蚁金服·数据体验技术团队将加载和执行分离开，可不阻塞渲染和 document 的 onload 事件提前加载指定资源，不再出现依赖的font字体...
2019-11-08 10:18:24
1110
原创 真的，我发誓，永远都不会在代码中使用“User”这个单词！ - Js中文网
当你意识到你在项目开始时做的轻量、简单的设想竟然完全错了时，你已经用了六个月的时间投入到这个项目上。现在你需要解决这些问题，才能让这个系统继续运行下去，你发现你用在这个项目上的精力远远超出了你的预期，如果一开始就用正确的方式来做，就不会发生这样的事。今天，我要告诉你的是一个经常犯的错误，一个会给你带来无穷无尽的问题的单词，那就是“users”。这个单词有两个最基本的错误：对你的需求来说 ...
2019-11-06 21:19:55
262
原创 请写出如下代码的打印结果 - Js中文网
题目描述：请写出如下代码的打印结果:function Foo() { Foo.a = function() { console.log(1) } this.a = function() { console.log(2) }}Foo.prototype.a = function() { console.log(3)...
2019-11-05 19:44:00
975
转载 15.JavaScript深入之继承的多种方式和优缺点 - Js中文网
JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎，再让我感叹一句：《JavaScript高级程序设计》写得真是太好了！1.原型链继承function Parent () { this.name = 'kevin';}Parent.prototy...
2019-11-05 16:27:32
179
原创 如何实现一个 new - Js中文网
题目描述：如何实现一个 new解题：思路一：// 实现一个newvar Dog = function(name) { this.name = name}Dog.prototype.bark = function() { console.log('wangwang')}Dog.prototype.sayName = function() { console.log(...
2019-11-05 16:19:18
266
原创 如何将数组扁平化并去除其中重复数据，最终得到一个升序且不重复的数组 - Js中文网
题目描述：将数组扁平化并去除其中重复数据，最终得到一个升序且不重复的数组解题：思路一：Array.prototype.flat= function() { return [].concat(...this.map(item => (Array.isArray(item) ? item.flat() : [item])));}Array.prototype.uniqu...
2019-11-05 16:17:18
487
转载 14.JavaScript深入之创建对象的多种方式以及优缺点 - Js中文网
定义维基百科中对偏函数 (Partial application) 的定义为：In computer science, partial application (or partial function application) refers to the process of fixing a number of arguments to a function, producing anot...
2019-11-04 21:36:41
142
转载 13.JavaScript深入之类数组对象与arguments - Js中文网
定义维基百科中对柯里化 (Currying) 的定义为：In mathematics and computer science, currying is the technique of translating the evaluation of a function that takes multiple arguments (or a tuple of arguments) into e...
2019-11-04 21:35:01
163
转载 12.JavaScript深入之new的模拟实现 - Js中文网
前言虽然标题写的是如何判断两个对象相等，但本篇我们不仅仅判断两个对象相等，实际上，我们要做到的是如何判断两个参数相等，而这必然会涉及到多种类型的判断。相等什么是相等？在《JavaScript专题之去重》中，我们认为只要 === 的结果为 true，两者就相等，然而今天我们重新定义相等：我们认为：NaN 和 NaN 是相等[1] 和 [1] 是相等{value: 1} 和 {valu...
2019-11-04 21:33:09
152
转载 11.JavaScript深入之bind的模拟实现 - Js中文网
each介绍jQuery 的 each 方法，作为一个通用遍历方法，可用于遍历对象和数组。语法为：jQuery.each(object, [callback])回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。// 遍历数组$.each( [0,1,2], function(i, n){ console.log( "Item #" + i + ":...
2019-11-04 20:30:05
148
转载 10.JavaScript深入之call和apply的模拟实现 - Js中文网
前言在开发中，我们经常会遇到在数组中查找指定元素的需求，可能大家觉得这个需求过于简单，然而如何优雅的去实现一个 findIndex 和 findLastIndex、indexOf 和 lastIndexOf 方法却是很少人去思考的。本文就带着大家一起参考着 underscore 去实现这些方法。在实现前，先看看 ES6 的 findIndex 方法，让大家了解 findIndex 的使用方法。...
2019-11-04 20:28:10
138
转载 9.JavaScript深入之参数按值传递 - Js中文网
JavaScript深入系列第九篇，除了按值传递、引用传递，还有第三种传递方式 —— 按共享传递定义在《JavaScript高级程序设计》第三版 4.1.3，讲到传递参数：ECMAScript中所有函数的参数都是按值传递的。什么是按值传递呢？也就是说，把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。按值传递举个简单的例子：var value ...
2019-11-04 19:10:11
165
转载 8.JavaScript深入之闭包 - Js中文网
JavaScript深入系列第八篇，介绍理论上的闭包和实践上的闭包，以及从作用域链的角度解析经典的闭包题。定义MDN 对闭包的定义为：闭包是指那些能够访问自由变量的函数。那什么是自由变量呢？自由变量是指在函数中使用的，但既不是函数参数也不是函数的局部变量的变量。由此，我们可以看出闭包共有两部分组成：闭包 = 函数 + 函数能够访问的自由变量举个例子：var a =...
2019-11-04 19:07:56
159
转载 7.JavaScript深入之执行上下文 - Js中文网
JavaScript深入系列第七篇，结合之前所讲的四篇文章，以权威指南的demo为例，具体讲解当函数执行的时候，执行上下文栈、变量对象、作用域链是如何变化的。前言在《JavaScript深入之执行上下文栈》中讲到，当 JavaScript 代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution contexts)。对于每个执行上下文，都有三...
2019-11-04 19:05:40
127
转载 6.JavaScript深入之从ECMAScript规范解读this - Js中文网
JavaScript深入系列第六篇，本篇我们追根溯源，从ECMAScript5规范解读this在函数调用时到底是如何确定的。前言在《JavaScript深入之执行上下文栈》中讲到，当JavaScript代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。对于每个执行上下文，都有三个重要属性变量对象(Variable...
2019-11-04 19:04:04
197
转载 5.JavaScript深入之作用域链 - JS中文网
JavaScript深入系列第五篇，讲述作用链的创建过程，最后结合着变量对象，执行上下文栈，让我们一起捋一捋函数创建和执行的过程中到底发生了什么？前言在《JavaScript深入之执行上下文栈》中讲到，当JavaScript代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。对于每个执行上下文，都有三个重要属性：变...
2019-11-04 19:00:37
120
转载 4.JavaScript深入之变量对象 - Js中文网
JavaScript深入之变量对象JavaScript深入系列第四篇，具体讲解执行上下文中的变量对象与活动对象。全局上下文下的变量对象是什么？函数上下文下的活动对象是如何分析和执行的？还有两个思考题帮你加深印象，快来看看吧！前言在上篇《JavaScript深入之执行上下文栈》中讲到，当 JavaScript 代码执行一段可执行代码(executable code)时，会创建对应的执行上下...
2019-11-04 16:42:39
136
转载 3.JavaScript深入之执行上下文栈 - Js中文网
JavaScript深入之执行上下文栈JavaScript深入系列第三篇，讲解执行上下文栈的是如何执行的，也回答了第二篇中的略难的思考题。顺序执行？如果要问到 JavaScript 代码执行顺序的话，想必写过 JavaScript 的开发者都会有个直观的印象，那就是顺序执行，毕竟：var foo = function () { console.log('foo1');}...
2019-11-04 16:39:41
171
转载 2.JavaScript深入之词法作用域和动态作用域 - Js中文网
JavaScript深入之词法作用域和动态作用域JavaScript深入系列的第二篇，JavaScript采用词法作用域，什么语言采用了动态作用域？两者的区别又是什么？还有一个略难的思考题，快来看看吧。作用域作用域是指程序源代码中定义变量的区域。作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。JavaScript 采用词法作用域(lexical scoping)，也...
2019-11-04 16:35:22
203
1
转载 1.JavaScript深入之从原型到原型链 - Js中文网
JavaScript深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧。构造函数创建对象我们先使用构造函数创建一个对象：function Person() {}var person = new Person();person.name = 'Kevin';console.log(person.nam...
2019-11-04 09:59:22
151
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人