2021年01月_CreatorRay

原创前端面试100问(5)

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。题目：介绍下深度优先遍历和广度优先遍历，如何实现？第五题问的是深度优先遍历和广度优先遍历，我是从dom节点的遍历来理解这个问题的深度优先遍历深度优先遍历DFS 与树的先序遍历比较类似。假设初始状态是图中所有顶点均未被访问，则从某个顶点v出发，首先访问该顶点然后依次从它的各个未被访问的邻接点出发深度优先搜索遍历图，直至图中所有和v有路径相通的顶点都被访问到。若此时尚有其他顶点未被访问到，则另选一个未被访问.

2021-01-30 15:38:23 215

原创前端面试100问(4)

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。题目：介绍下 Set、Map、WeakSet 和 WeakMap 的区别？Set 和 Map 主要的应用场景在于数据重组和数据储存Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构1.集合（Set）ES6 新增的一种新的数据结构，类似于数组，但成员是唯一且无序的，没有重复的值。Set 本身是一种构造函数，用来生成 Set 数据结构。new Set([iterable])举.

2021-01-30 15:33:44 290

原创前端面试100问(3)

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。题目：什么是防抖和节流？有什么区别？如何实现？防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间思路：每次触发事件时都取消之前的延时调用方法function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { clea.

2021-01-30 15:09:40 203

原创前端面试100问(2)

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。题目：[‘1’, ‘2’, ‘3’].map(parseInt) what & why ?第一眼看到这个题目的时候，脑海跳出的答案是 [1, 2, 3]，但是真正的答案是[1, NaN, NaN]。首先让我们回顾一下，map函数的第一个参数callback： var new_array = arr.map(function callback(currentValue[, index[, arr.

2021-01-30 15:06:11 220

原创前端面试100问(1)

从今天开始，给大家带来一个系列，关于前端面试题的100问，基本涵盖所有前端技术栈，大量大厂真题，各个级别的都有，题目来自GitHub。今天的问题是：写React/Vue项目时为什么要在列表组件中写key，其作用是什么？（滴滴、饿了么面试题）key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。更准确因为带key就不是就地复用了，在sameNode函数 a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。更快

2021-01-30 15:00:18 285

转载揭秘 Vue.js 九个性能优化技巧

这篇文章主要参考了 Vue.js 核心成员 Guillaume Chau 在 19 年美国的 Vue conf 分享的主题：9 Performance secrets revealed，分享中提到了九个 Vue.js 性能优化的技巧。我看完他的分享 PPT后，也阅读了相关的项目源码，在深入了解它的优化原理后，把其中一些优化技巧也应用到了我平时的工作中，取得了相当不错的效果。这个分享可谓是非常实用了，但是知道和关注的人似乎并不多，到目前为止，该项目也只有可怜的几百个 star。虽然距大佬的分享已经有两年时

2021-01-28 19:11:17 407

原创前端面试题之---树形数据结构化

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。话不多说，直接上题。const data = [ { id:2, pid:0, path:'/course', name:'Course', title:'课程管理' }, { id:3, name:'CourseOperate', path:'operate'.

2021-01-27 23:01:57 830

原创 Vue+Nodejs+WebSocket实现多人聊天室

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。上篇文章已经给大家介绍了使用原生JavaScript+Nodejs+WebSocket实现多人聊天室的内容。这期的话，我们使用Vue2.x版本同样使用Nodejs+WebSocket继续实现多人聊天室功能。因为上期已经很详细的介绍了WebSocket的一些重要的事件处理函数，这期的话就不详细介绍了。只是用Vue2.x的版本再做一下，感受一下区别。首先我们应该使用VueCli新建一个Vue2.x版本的项目。.

2021-01-26 19:35:54 2020

原创原生JavaScript+WebSocket+nodejs实现聊天室功能

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。WebSocket也是前端非常重要的技术栈。现在各种网站、App、小程序都伴有即时通信的功能。WebSocket的主要应用就是即时通信。WebSocket的介绍在网上非常非常多，也非常详细，我就不做过多介绍了。WebSocket的出现解决了远古时期http轮询的”丑陋“。我这期视频使用原生JavaScript+nodejs实现一个最基本的聊天室功能。我先介绍一个目录文件：前端内容存放在chat文.

2021-01-25 18:18:41 975

原创前端面试题之---Object.defineProperty(2)

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！上期给大家分享了三道关于Object.defineProperty的面试题，今天再分享一道。这也是百度的面试题。var obj = { a:1, b:2, c:3}for(var k in obj){ obj[k] += 1;}console.log(obj);// 输出:/*{ a:3, b:3, c:5}*/题目要求是：现有一个对象内有三个属.

2021-01-24 17:48:35 467 1

原创前端面试题之---Object.defineProperty(1)

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！今天给大家分享几道关于Object.defineProperty的面试题。Object.defineProperty是前端非常重要的知识点。Vue中核心的双向数据绑定就是通过Object.defineProperty实现的。Object.defineProperty在框架中的应用非常广泛。if(a === 1 && a ===2 && a ===3){ console.log(.

2021-01-23 15:01:50 578 1

原创在vue.config.js中模拟后端接口数据

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！现在都流行前后端分离，前端干前端的事，后端干后端的事。但是我们在前端的实际开发时，有时候是需要数据辅助的，但是可能后端的接口还没写好，或者和后端在开发前期沟通太耗时耗力。我们前端就需要自己模拟一下后端的数据。首先我在使用VueCli搭建的项目根目录下新建一个vue.config.js的文件。可能之前的脚手架版本还有这个文件，但是VueCli3之后的都没有，所以要自己新建一下。新建之后写下如下代码：module.expo.

2021-01-20 13:30:54 1417 1

转载异步解决方案----Promise与Await

前言异步编程模式在前端开发过程中，显得越来越重要。从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题。随着ES6新标准的到来，处理异步数据流又有了新的方案。我们都知道，在传统的ajax请求中，当异步请求之间的数据存在依赖关系的时候，就可能产生很难看的多层回调，俗称’回调地狱’（callback hell），这却让人望而生畏，Promise的出现让我们告别回调函数，写出更优雅的异步代码。在实践过程中，却发现Promise并不完美，Async/Await是近年来JavaScript添加的最革命

2021-01-18 22:47:05 311

转载你好，谈谈你对前端路由的理解

前言好了不装了，今天我就化身性感面试官在线问大家一个问题，“谈谈你对前端路由的理解”。看到这个问题，那回答可多了去了。但是换位思考一下，你问候选人这个问题的时候，你想要得到什么答案？以我个人拙见，我希望候选人能从全局解读这个问题，大致以下三点。为什么会出现前端路由前端路由解决了什么问题前端路由实现的原理是什么我们带着这三个问题，继续往下看。传统页面这里不纠结叫法，凡是整个项目都是DOM 直出的页面，我们都称它为“传统页面”（SSR 属于首屏直出，这里我不认为是传统页面的范畴）。那么什么是

2021-01-18 22:29:10 558

原创 Vue知识点总结(24)——使用VueCli创建一个项目（超级详细）

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！在上一篇文章我们已经简单了解了一下传统创建组件的缺点和使用单文件组件的好处，并且进行了快速的原型开发。今天我们来试着使用VueCli3完整的创建一个项目。首先我们打开终端，在合适的目录下运行以下命令：（前提是你已经完整了上篇文章对于Vue-Cli3的基本配置）vue create hellovuecli3这个hellovuecli3是文件名，文件名大家可以自拟，但是注意，不要有大写字母的出现，这里是不支持大写的。如.

2021-01-18 18:30:50 485

原创 Vue知识点总结(23)——Vue-Cli3脚手架基本配置和快速原型开发（超级详细）

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！在这之前我们已经把vue的基础部分已经基本讲述完毕。我们之前写vue组件的流程都是Vue.component("组件名", {});new Vue({ components:组件名});这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：全局定义 (G.

2021-01-18 11:35:47 511

原创 Vue知识点总结(22)——mixin混入技术（超级详细）

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！在web前端的发展中，组件化、模块化的思想一直在贯彻目前的技术发展。组件的一大重要作用就是可复用，我封装完组件之后，可以在任何地方重复使用我的组件，不需要多次开发。正所谓，一次封装，多次使用。然而组件和组件之间，其实也有很多的功能可以复用。我们简单举个例子，一个提示框组件，一个模态框组件。它们在展示形态上有所不同，但是它们触发的机理基本一样，都是通过触发条件的出现，改变v-if的值，从而实现组件的展示。也就是说，虽然它.

2021-01-17 18:23:27 552

原创 Vue知识点总结(21)——对象的变更检测（超级详细）

vue官方文档中的深入响应式原理中有提到过，对于检测变化的一些注意事项。由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。这句话是啥意思呢？我们先看一个小例子。<div id="app"> <h3>{{user.name}},{{user.age}}</h3> <button @click='handlerAdd'>添加属性</button>

2021-01-16 22:11:21 660

原创 Vue知识点总结(20)——nextTick的基本概念和实际应用（超级详细）

今天的主角是nextTick，它是Vue官方提供的一个API。首先在介绍它之前，我们要先了解一件事。可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这是Vue官方文档中对Vue异步更新DOM队列的简单介绍。其实我们就知道一件事情就可以，Vue在更新DOM的时候是异步执行的。什么是异步大家应该都知道，不知道的可以翻看一下我前面的博客。异步

2021-01-14 19:07:44 744

原创普本在校生是如何零基础在一个月内开发出第一款微信小程序的

先自我介绍一下，我是一个普通本科的大三在读生，在2020年春节前后，自己一个人开发并上线了第一款微信小程序，后续陆续开发了N款小程序，并且自己通过毕设、课设的开发在2020年上半年的疫情期间挣了一万多RMB。首先先说一下，我们为什么想做一个微信小程序。我个人觉得，需求是源于生活的，能解决实际生活需求的产品就是好产品。在QQ诞生之前，人们之间联系的主要途径可能是短信，不仅麻烦，而且费钱，所以即时聊天工具QQ才有诞生的社会背景。在淘宝诞生之前，人们所有的购物活动都是在线下实体店完成的，线下的店铺因为房

2021-01-13 20:08:52 1221

原创 Vue知识点总结(19)——ref属性和$refs的使用（超级详细）

ref是vue提供的非常便利的属性。它可以直接获取页面元素的DOM节点，也可以获取子组件对象。虽然Vue建议不要随便在vue项目中操作DOM，但是在一些不得已的情况下，必须要操作DOM，ref属性就可以很轻松的实现我们的需求。还有，我们在使用子组件的时候，非常想要获取它的data数据，调用它的方法，这也是ref属性的一大用处。总结下来就是，很方便，很好用。<div id="app"> <App></App></div><script

2021-01-13 13:08:34 4128

原创微信小程序如何实现转发/分享功能

在微信小程序的开发中，我们经常遇到把当前页面转发给好友的需求。并且大部分时候，转发的页面都是带参数的。这里面坑还是比较多的。 <button open-type="share" type="primary"> 分享给好友 </button>首先我们先写一个button按钮，很重要的一个点就是button按钮的open-type属性，这个一定要写为share。其实，这其中的实际原理就是通过按钮触发onShareAppMessage这个生命周期函数。 onShare

2021-01-12 21:35:09 5527

原创 Vue知识点总结(18)——生命周期（超级详细）

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！这期的主题是Vue的生命周期。先说一下什么是生命周期。百度百科上是这样说的：生命周期就是指一个对象的生老病死。我们每个人都会经历生老病死的过程，这是任何人都无法摆脱的事实。程序也是一样，一个页面，一个组件，也会有诞生、改变和销毁的过程，这就是它们的生命周期。程序本来就遵循着人类生活中的客观事实和规律。下面我们看一下Vue中的生命周期。这是官方文档的图解：这个图解看起来可能有些困难，因为它是纯英文的，而且其.

2021-01-10 17:41:54 891

原创 Vue知识点总结(17)——作用域插槽（超级详细）

之前分别了解了匿名插槽和具名插槽。这期我们的任务是作用域插槽。作用域插槽虽然用的不多，但是还是挺重要的。我们以一个实际需求来展示作用域插槽，因为作用域插槽用的确实不多，只能在实际需求中展示它的意义。需求：已经开发了一个待办事项列表的组件,很多模块都在用A B之前数据格式和引用接口不变,正常显示新功能模块增加对勾需求解释起来有点模糊，到时候看页面的内容就知道咋回事了。 <div id="app"> <App></App>

2021-01-09 18:16:08 19045 7

原创 Vue知识点总结(16)——具名插槽（超级详细）

上节我们了解了一下插槽的概念和用途，并且详细演示了一下匿名插槽的使用。这期我们的任务是具名插槽。从名字我们就可以看出区别，一个是匿名，一个是具名。我们就不详细说插槽概念的东西了，直接演示具名插槽。 <div id="app"> <App></App> </div><script> Vue.component('MBtn',{ template:` <but

2021-01-08 21:33:09 1727

原创 Vue知识点总结(15)——匿名插槽（超级详细）

我们在前几期已经说过了组件的各种知识。接下来我们就要学习插槽的内容了，插槽是Vue组件化开发的拓展内容。官方文档种解释插槽的作用就是：在vue中实现的一套分发内容的API，将slot元素作为承载内容分发出口。用大白话说就是：想要在一个组件标签中添加新的内容，必须在该组件内声明一个slot元素，否则，添加的新内容则不会被渲染。通常我们会在vue中将各种通用的功能单独拿出来进行封装，以便于后面复用，但是有时候需要复用的组件不是完美契合，这个时候就需要用到插槽，slot可以让用户拓展组件，更好的实现组件

2021-01-06 21:14:44 1134

CreatorRay的博客