20200307 前端开发日报

简单的Vue脚手架案例；一定要熟记这些常被问到的React面试题；17 个场景，带你入门 CSS 布局；几个 JavaScript 性能优化小 Tip；美团前端面试记录；算法和数据结构面试题（JavaScript+Python）——滑动窗口；总结Vue组件的通信；Vue Router 实现动态路由和常见问题解决方案

1. 简单的Vue脚手架案例 实现步骤 通过 vue-cli 脚手架工具， 初始化项目， 命名为test_project； 在 components 目录下创建 Header.vue 组件、 List.vue 组件、 Recommend.vue 组件； 在 src 目录先新建 page 文件夹， 在 page 文件夹下新建 Home.vue 组件； img 文件夹（提供）、iconfont 文件夹（提供） 放在 …
2. 一定要熟记这些常被问到的React面试题什么是 JSX 要了解 JSX，首先先了解什么三个主要问题，什么事 VDOM，差异更新和 JSX 建模： VDOM，也叫虚拟 DOM，它是仅存于内存中的 DOM，因为还未展示到页面中，所以称为 VDOM {代码…} 上面这一句就是最简单…
3. 17 个场景，带你入门 CSS 布局 CSS 布局本质就是控制元素的位置和大小。比如这样的布局：元素宽960px，水平居中。宽960px是大小。水平居中是位置。又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。 下面，我们从大小和位置两个方面，结合场景来看CSS布局…
4. 几个 JavaScript 性能优化小 Tip 本文翻译自 John Au-Yeung 的 JavaScript Best Practices — Performance ，请参考原文阅读 像任何其他编程语言一样，JavaScript 也有自己的最佳实践列表，以使程序更易于阅读和维护。JavaScript 有很多棘手的部分，因此应避免某些降低代码质量的做法。通过遵循最佳实践，我们可以创建优雅且易于管理的代码，让任何人…
5. 美团前端面试记录此篇文章来自于读者投稿 我在 github 上新建了一个仓库 每日一题，每天一道面试题，欢迎交流。 前端面经大全 前端面试题小记 计算机基础面试题小计 时维七月，炎炎夏日，酷暑当头，而我已经在望京附近饶了半个小…
6. 算法和数据结构面试题（JavaScript+Python）——滑动窗口 input是一些线性结构如 链表，数组，字符串 等，求 最长/最短 子字符串或是某些 特定的长度 要求 滑动窗口避免了重复循环元素，在计算sum等数值时适应，但是有些情况必须遍历所有值解题就不适用了。 模式 res = [] <1.设置窗口> start= 0 end= 0 while end < len(arr): <2.执行计算 (window.add(a…
7. 总结Vue组件的通信 写在前面 总结是一种学习方式，取长补短是一种学习态度。 全文总结了6种Vue组件间的通信方式，如有误区，欢迎指正！ 1、props/$emit 最常用的一种父子间传递数据的方式。 描述： 父组件通过绑定属性来向子组件传递数据，子组件通过 props 属性来获取对应的数据；子组件通过 $emit 事件向父组件发送消息，将自…
8. Vue Router 实现动态路由和常见问题解决方案 个人理解：动态路由不同于常见的静态路由，可以根据不同的「因素」而改变站点路由列表。常见的动态路由大都是用来实现：多用户权限系统不同用户展示不同导航菜单。 如何利用Vue Router 实现动态路由 Vue 项目实现动态路由的方式大体可分为两种： 前端将全部路由规定好，登录时根据用户角色权限来动态展示路由…
9. 学习Javascript之模拟实现bind总括: 本文模拟实现了bind方法的更改this，传参和绑定函数作为构造函数调用时this失效的特性。
10. [推荐] 要进大厂？前端灰度发布必须要知道 笔者在刚进入阿里的时候，其实连灰度是什么也不知道，但是灰度这个概念在大厂非常普遍，只要有一定用户量的应用都会涉及到灰度发布，所以准备进大厂的同学，灰度发布这个概念一定要了解一下。 一. 灰度发布是什么？ 灰度发布，又被称之为金丝雀发布，是指某次新发布功能特性和旧功能特性之间能够…
11. 【js进阶系列】一文学会31个数组方法 JS数组上的方法太多了，有的修改原数组，有的返回一个新数组，记住了又混淆了， 所以我决定关上书本一个都不记! 哼!用的时候再说吧。 然后每出现一个数组方法的时候看着都知道，就是用的时候还是模棱两可，又去查文档，这样是不能算作精通JavaScript的哦，于是玲珑好好的把每个方法认真复习、认真总结、认…
12. Koa & Mongoose & Vue实现前后端分离–01序言这系列文章没有很深入的内容，只是一个简单的全栈实现流程，内容包含前后端开发的主要步骤和过程中的一些思考。
13. 我用JS刷LeetCode | Day 1 | Two Sum Given an array of integers, return indices of the two numbers such that they add up to a specific target. You may assume that each input would have exactly one solution, and you may not use the same element twice. 中文题目： 给定一个整数数组 nums 和一个目标值 target ，请你在该数组中找…
14. 手写一个Vue版Toast组件 目前，前端生态圈中各大厂高大尚的UI库比比皆是。但是作为一名业务中都是接触移动端开发、H5开发的搬砖者，面对产品各种高端霸气上档次的需求，996是在所不辞的。 所以该如何减少自己的工作压力？ 工作中养成对自己代码复盘的习惯，各式各样常用到的设计都可以抽离出来作为公共使用的插件或者组件。这…
15. javascript函数记忆在编写代码时，会有函数多次重复调用到的也有可能是相同的结果那么可以把函数执行的结果缓存起来，下次调用时，直接从缓存中获取函数就不会重复执行，从而达到优化代码的执行速度。
16. 前端实现压缩图片功能 为什么要前端来压缩图片 最近在做一个移动端h5上传图片的功能，本来这个功能并不复杂，只需要将图片文件通过axios传到服务端即可，但是考虑到现在手机设配的拍照功能十分强大，随便一张照片都能动辄五六兆，而服务端的要求是上传图片必须小于两兆，而且直接传这么大图片，带宽它也受不了，所以前端进行压缩图片就成了…
17. 前端知识点大乱炖（初级前端面试可看）1.CSS实现水平居中：行内元素：text-align:center;块级元素：div{width:100px;height:100px;margin:0 auto};
18. webpack 原理解析简述 本文面向那些需要或者想了解开发 webpack plugin 和想要深究 webpack 源码但是无处下手的人群。这篇文章会带你大致了解 webpack 原理与执行流程，具体的源码限于篇幅暂不讨论，后面会考虑出一系列 webpack 源码解析系列与 webpack 经典插件解析。 webpack 初始化流程 webpack是基于插件体系的构建工具，插件的具体…
19. Javascript Symbol 解惑Symbol是ES6中新引入的一种基本数据类型，在此之前Javascript中已有几种基本数据类型：
20. 什么是遍历二叉树，JavaScript实现二叉树的遍历（递归，非递归） 遍历的定义指顺着一条搜索路径巡防二叉树的结点，使得每个结点均被访问一次，而且仅被访问一次（又称周游） 复制代码 遍历方法： 依次遍历二叉树中的三个组成部分，便是遍历了整个二叉树 复制代码 L：遍历左子树 D: 访问根结点 R: 遍历右子树 若规定先左后右，则遍历二叉树就有三种情况 DLR ———— 先(根)序遍…
21. 【快速复习】Node.js中的fs模块的使用JavaScript 的是没有操作文件的能力，但是 Node 是可以做到的，Node 提供了操作文件系统模块，是 Node 中使用非常重要和高频的模块，是绝对要掌握的一个模块系统。
22. 视频会议玩消失？借助神器TensorFlow.js，200行代码教你“隐身”
23. JavaScript — 事件循环 eventloopeventloop机制在nodejs和chrome浏览器中是不同的。下面我们先梳理nodejs，再讲chrome
24. JavaScript——基础知识，开始我们的js编程之旅吧 JavaScript基础第01天 1. 编程语言 编程语言： 可以通过类似于人类语言的“语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言（Programming Language）。编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守。如今通用的编程语言有两种…
25. 签名你的每个 Git Commit 文章目录 给每个 Commit 签名 在 GitHub 验证一个邮箱 生成一个 GPG 的 key 在 GitHub 登记你的公钥 在 git 里面设定使用签名 总结 好久没有写代码提交 GitHub 了，真是惭愧！回到正…
26. 讲讲为什么要用javascript的requestAnimationFrame函数在web上实现复杂动画效果 简单地讲，requestAnimationFrame函数更适合在浏览器上面做复杂的动画。比用定时器效率高。 废话如下： 现代的WEB世界(2020年)，网页上各种各样的内容丰富多彩。虽然css也能完成很多简单的动画，但是仍然有一些复杂的动画animation需求需要javascript处理。之前，我简单地理解，浏览器已经有定时器函数setTimeout()和s…
27. 支持 TypeScript，Agora Web SDK “体验服” 开启 声网 Agora Web SDK 过不了多久即将发布新版本。现在，我们已经有一个稳定的内测版本了。我们在新的 SDK 中增加了一些新功能，而且相对上一版更易用，集成起来更顺滑。为了让 部分开发者也一起来体验一下，我们决定再开启一次“尝鲜之旅”。老朋友、新用户，都可以来申请试用！在了解如何加入“体验服”之前，我们先讲讲Agor…
28. 万丈高楼平地起，巩固你的基础知识点，js知识点巩固第一步，面试不在难（1） JS基本有5种简单数据类型：Number,String,Bolean,Null,Underfined.引用数据类型：function,Object,Array 判断数据类型的方法 常用的数据类型判断方法有三种 typeof,instanceof,Object.prototype.toString.call() 下面介绍一下这几种方法。 typeof console.log(typeof 2); //number console.log(…
29. [推荐] 爱奇艺号微前端架构实践 前言 近来，微前端的概念非常火爆，那么什么是微前端架构？微前端架构是一种架构风格类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。由此带来的变化是，这些前端应用可以独立运行、独立开发、独立部署。微前端所具备的便于引…
30. NodeJS：图片验证码登录 样式可能有点丑，请不要在意 用到的技术 express、vue、redis、axios 功能实现 图片验证码生成 svg-captcha 是一个可以生成图形验证码的模块，详细介绍移步 svg-captcha文档 下载 svg-captcha 模块 npm i svg-captcha -S 复制代码 在nodejs中引入 const code = require("svg-captc…
31. 从零开始的vue-cli（简易版） 这里将介绍如何从零开始搭建一套包含调试，构建的vue脚手架，其中主要是对webpack的学习，以及现在一些常用的集成在脚手架中前端功能的使用比如：babel,代码压缩，代码热更新等等。本文适合掌握了前端基础以及vue相关知识的程序猿观看学习，最主要的是要有颗热爱这个行业的心（滑稽），也请各位大神指教指教，不喜勿喷，…
32. JavaScript 引擎基本原理 – Shapes & Inline Caches 本文来源于对 mathiasbynens.be/notes/shape… 的学习总结 基础知识 浏览器引擎 pipeline interpreter：可以快速生成未经过优化的字节码 optimizing compiler：可以生成高度优化的机器代码，但要花费更多时间 浏览器会在快速运行代码和花费更多时间生成更高效代码之间进行取舍，不同浏览…
33. Vuejs 组件化开发中插槽的使用说明 在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。插槽的目的是让我们原来的设备具备更多的扩展性。 组件的插槽也是为了让我们封装的组件更加具有扩展性；让使用者可以决定组件内部的一些内容到底展示什么。 一、移动网站中的导航栏 移动开发中，几乎每个页面都有导航栏，并且不同的页面，导航栏中…
34. Webpack源码解析 – 初识Js解析器 Js解析器 Parser 是Webpack中最重要的工具之一，不同类型的文件在经过 loader 处理后，将会被转换输出成为一串js字符串。紧接着 Parser 会将其转换为 AST 语法树，有了语法树就可以对代码为所欲为了，其中最重要的功能就是分析出这段代码依赖了哪些模块。Webpack将会基于解析出来的信息进行依赖组合及内容输出，所以 Par…

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