20200617 前端开发日报

2020 祝安，缝隙中寻找机遇：面试题第二波：Git&Webpack；为什么 Vue 更符合这个时代的大势所趋？；Vue 函数式组件的使用技巧；[GitHub] JavaScript 趋势榜项目(25周)；TypeScript 使用日志；当后端一次性丢给你 10 万条数据，作为前端工程师，你要怎么处理？；58 道 Vue 常见面试题集锦，涵盖入门到精通，自测 Vue 掌握程度；前端测试最佳实践（持续更新，建议收藏）

1. 2020 祝安，缝隙中寻找机遇：面试题第二波：Git&Webpack

   非常感谢，前同事 行长 @onlyadaydreamer分享的面经。 好吧，日行一张表情包，我们搬砖的也是很有爱的 北京现在有开始严重了，大家不要吃进口海鲜了，抗击疫情，人人有责！ 直接正文！ git常用操作，怎么回滚？【后续添加相关截图】 首先git 怎么放弃修改，可以参考我以前的文章git放弃修改 …

2. 为什么 Vue 更符合这个时代的大势所趋？

   发布之后我们对社区里的前端开发者做了一次调查沟通，大家普遍认为 Vue 已经具备了商业项目开发的必备条件，如语法精炼、优雅而简洁、代码的可读性高、成熟的组件模块化能够让开发者从编码中获得乐趣等等，当然，…

3. Vue 函数式组件的使用技巧

   什么是函数式组件没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法，它只是一个接受一些 prop 的函数。简单来说是 一个无状态和无实例的组件 基本写法： Vue.component(‘my-component’, { functional: true, // Props 是可选的 props: { // … }, // 为了弥补缺少的实例 // …

4. [GitHub] JavaScript 趋势榜项目(25周)

   时间：2020 年 6 月 9 日 – 2020 年 6 月 15 日 1. bradtraversy/vanillawebprojects 项目地址： github.com/bradtravers… :star::5917 | forks:1086 | 1101 stars this week 使用HTML5，CSS和JavaScript构建的小型项目。 没有框架或库 2. ianramzy/decentralized-video-chat 项目地址： github.com/…

5. TypeScript 使用日志

   Typescript 使用日志 最近这两年，有很多人都在讨论 Typescript，无论是社区还是各种文章都能看出来，整体来说正面的信息是大于负面的，这篇文章就来整理一下我所了解的 Typescript。 本文主要分为 3 个部分： •Typescript 基本概念•Typescript 高级用法•Typescript 总结 Typescrip…

6. 当后端一次性丢给你 10 万条数据，作为前端工程师，你要怎么处理？

   前段时间有朋友问我一个他们公司遇到的问题, 说是后端由于某种原因没有实现分页功能, 所以一次性返回了2万条数据,让前端用select组件展示到用户界面里. 我听完之后立马明白了他的困惑, 如果通过硬编码的方式去直接渲染这两万条数据到select中,肯定会卡死. 后面他还说需要支持搜索, 也是前端来实现,我顿时产生了兴趣. 当…

7. 58 道 Vue 常见面试题集锦，涵盖入门到精通，自测 Vue 掌握程度

   1.vue优点？ 答： 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单； 组件化：保留了 react 的优点，实现了 html 的封装和重用…

8. 前端测试最佳实践（持续更新，建议收藏）

   最近公司在推行单元测试，但是一些同事对于单元测试只是了解，甚至不怎么了解。因此推动单元测试的阻碍是有的，这种阻碍除了人的层面，还有基础设施的层面。希望通过本文，一方面加深大家对前端测试最佳实践的认知，另一方面可以作为手册，在日常开发中做参考。本文也会不断更新，期待你的参与。 如果大家对前端测试不…

9. 前端7个快速发现 bug 神仙调试工具

   点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。

10. 前端存储除了 localStorage 还有啥

    前端的数据存储方式，你除了用过 Cookies、localStorage 和 sessionStorage 外，还有用过其它的存储方式么？其实除了前面提到的 3 种存储方式，目前主流的浏览器还支持 Web SQL 和 IndexedDB。

11. JavaScript异步编程: 从回调地狱到async和await

    写好一个优秀的web应用关键之一就是可以在一个页面上做许多AJAX请求 前言 我们可以从一个简单的例子的每个解决方式来思考JavaScript异步编程的进步 为了做到这些，我们可以来做一个简单的任务，这个任务是完成下面这些流程： 验证用户的名称和密码 获取应用中用户的角色 打印用户访问应用的时间 …

12. 小白前端之路:手写一个简单的vue-router

    这几年，好像过的好快，怀念我的大学生活。 – 连某人 大三实习生,之前写过简单MVVM框架、简单的vuex、但是看了vue-router的源码(看了大概)之后就没有写,趁着周末不用工作(大三趁着不开学出来实习,现在水平比较低,代码也没有优化,请小喷)来写一下，写的比较仓促。 github仓储地址 使用 <template> &l…

13. 利用 webpack 理解 CommonJS 和 ES Modules 的差异

    问： CommonJS 和 ES Modules 中模块引入的区别？ CommonJS 输出的是一个值的拷贝； ES Modules 生成一个引用，等到真的需要用到时，再到模块里面去取值，模块里面的变量，绑定其所在的模块。 我相信很多人已经把这个答案背得滚瓜烂熟，好，那继续提问。 问： CommonJS 输出的值是浅拷贝还是深拷贝…

14. 【项目实战篇】Vue结合路由配置递归实现菜单栏

    作者：小土豆biubiubiu 博客园： www.cnblogs.com/HouJiao/ 掘金： juejin.im/user/58c61b… 微信公众号：土豆妈的碎碎念（扫码关注，一起吸猫，一起听故事，一起学习前端技术） 作者文章的内容均来源于自己的实践，如果觉得有帮助到你的话，可以点赞给个鼓励或留下宝贵意见 前言 在日常开发中，项目中…

15. Javascript 多线程编程​的前世今生

    作者：jolamjiang，腾讯 WXG 前端开发工程师 一篇关于 Web Worker、SharedArrayBuffer、Atomics 的文章。 为什么要多线程编程 大家看到文章的标题《Javascript 多线程编程》可能立马会产生疑问：Javascript 不是单线程的吗？Javascript IO 阻塞和其他异步的需求（例如 setTimeout, Promise, requestAnimationFra…

16. 如何使用JavaScript Set集合更快地编写代码

    我敢肯定，有很多开发人员坚持使用基本的全局对象：number，string，object，array和boolean值。 对于许多用例，这些都是你所需要的。但是，如果你想使代码尽可能快和可扩展，那么这些基本类型并不总是足够好。 在本文中，我们将讨论JavaScript的 Set集合如何使你的代码更快，尤其是在扩展时。数组可以执行的操作与S…

17. 使用 JS 和 NodeJS 爬取 Web 内容

    这些年来 Javascript 进步飞快，又引入了称为 NodeJS 的运行时，所以已经成为了最流行和使用最广泛的语言之一。不管你要写的是 Web 应用还是移动应用，都能在 Javascript 生态中找到合适的工具。本文要介绍的是如何在 NodeJS 的活跃生态系统帮助下高效地抓取 Web 内容，以满足大多数相关需求。 本文最初发布于 scraping…

18. 你真的了解ES6的Set，WeakSet，Map和WeakMap吗？

    之前在学习 ES6 的时候，看到 Set 和 Map，不知道其应用场景有哪些，只觉得很多时候会用在数组去重和数据存储，后来慢慢才领悟到 Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构。

19. 一款超好用的vue图片预览组件，支持单图、多图预览

    本组件是一个基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，比较适合给文章及页面的所有图片添加预览效果。预览背景色，关闭按钮颜色，控制条的背景也和字体颜色都可自定义，兼容 ie9+，火狐，Safari，谷歌浏览器，支持多图预览。如果能帮上你，希望可以移步 GitHub …

20. 8个问题测试你的 JavaScript 基础能力

    点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。

21. vue中路由的使用

    介绍路由 路由 : 是浏览器 URL 中的哈希值 ( # hash) 与 展示视图内容 之间的对应规则 简单来说,路由就是一套映射规则(一对一的对应规则), 由开发人员制定规则.- 当 URL 中的哈希值( # hash) 发生改变后,路由会根据制定好的 规则 , 展示对应的视图内容 为什么要学习路…

22. 基于 Web 端的人脸识别身份验证

    近些年来，随着生物识别技术的逐渐成熟，基于深度学习的人脸识别技术取得了突破性进展，准确率显著提高。现阶段，人脸识别身份验证作为非常重要的身份验证方式，已被广泛的应用于诸多行业和领域，例如：支付宝付…

23. vue实现公告栏文字上下滚动效果

    在项目结构的components中新建text-scroll.vue文件 <template> <div class="text-container"> <transition class="" name="slide" mode="out-in"> <p class="text" :key="text.id">{{text.val}}<…

24. 微前端框架chunchao(春潮)开源啦

    乞丐版微前端框架chunchao源码开源,仅仅为了让大家学习微前端的工作模式而已，实际项目中，我们有使用Paas模式，web components，git submodule等模式都可以实现微前端,当然业内肯定有独特的、优于这些模式的微前…

25. 剖析JS和Redis的数据结构设计：数组

    总体来说，各种程序语言底层的设计思想是非常相通的，首先针对需要解决的问题和场景选择不同的数据结构和算法，根据运行环境设计不同的架构和特性，根据作者的喜好选择开发的风格，根据应用场景开发对外的接口，…

26. Vue + ArcGIS API for JavaScript 构建前端GIS应用（三）

    接着上篇，继续介绍如何编写一个组件、组件间如何通行，如何解决组件通讯的一些硬伤，最终如何结合arcgis js api创建一个vue项目传送门：Vue + ArcGIS API for JavaScript 构建前端GIS应用（一）Vue + ArcGIS API…

27. Web 测试：为什么我选了 cypress，而不是 headless

    作为一个成熟的开发者，不仅仅要有测试自己的代码的意识和习惯，更需要一套自动化的工具和方案。 单元测试当然是这个工具箱里面重要角色。但是单元测试只是验证了你自己的代码的正确性。如果还要更高层面正确性的验证我们就需要集成测试或者端到端的测试（E2E）。在 E2E 的测试工具上，pshu 选择了 Cypress。…

28. Promise对象和任务队列

    有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外， Promise 对象提供统一的接口，使得控制异步操作更加容易。 基本用法 下面是一个Promise实例 const promise = new Promise(function(resolve, reject) { // … some code if (/* 异步操作成功 */){ reso…

更多内容请关注公众号【前端开发博客】每日更新