20190623 前端开发周报-前端开发博客

送你43道JavaScript面试题；公司要求熟悉框架 Vue，必问面试题你都会几道？；记一次忏悔的前端面试经验（Vue 双向绑定原理）；前端黑科技结合Vue 如何让首页秒开；Vue 页面权限控制和登陆验证；一行css代码搞定响应式布局；vue+element加入签名效果（移动端）；尤雨溪关于VUE3.0进展的重磅分享

送你43道JavaScript面试题导读这两天的 GitHub Trending repositories 被一个名叫 javascript-questions 的项目霸榜了，项目中记录了一些 JavaScript 题目。我大概从头到尾看了一遍，都是一些基础的题目，我大概花了半个小时（有些题很简单，可以一扫而过）把这些题做完了，虽然题目很简单，但是每道题都对应…
公司要求熟悉框架 Vue，必问面试题你都会几道？戳蓝字「高级前端进阶」关注我们哦！作者：张小小来源：程序员成长指北如果你是一个已经在学习前端开发的初学者亦或者是一名在代码界纵横多年的程序员，那你一定知道现在最火的前端框架之一Vue.js。它相比于React与Angular上手更加容易，或许这也是很多初学者选择vue的原因之一。 …
记一次忏悔的前端面试经验（Vue 双向绑定原理） 2019年6月6号，为了爱情，我离开工作了一年多的广州来到了杭州这个互联网城市。开始我的前端面试之旅… 放下拧螺丝的扳手，开始造起了飞机… 面试的第一家，一开始就问 Vue 双向绑定怎么实现。一脸蒙蔽，之前看过源码，但是没有深入研究，只回答出了使用 Object.defineProperty Object.defineProperty(o…
前端黑科技结合Vue 如何让首页秒开文/北妈阅读本文需要 3.2 分钟一前端性能优化一直是衡量一个团队和一个前端的各方面水平，呈现快速的加载，是给人最直观，成就感也最足的一个感受，而且对用户体验是第一重要的概念，所以这个相当重要，今天北妈就来结合美团的实践方案来讨论一下。其实文中的很多方案，我和我团队也早在实…
Vue 页面权限控制和登陆验证就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出限制了。
一行css代码搞定响应式布局在这篇文章中，我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图，它将根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名…
vue+element加入签名效果（移动端）！—————————————————————————————— 下面介绍为了方便就把项目的文件叫作父组件，然后签名的那个组件叫作子组件！如有不太明白的地方，多看看代码注释。为细节地方 1. 首先根据element ui 在父组件中设置好diglog弹框，并且在全局样式下，自定义样式 …
尤雨溪关于VUE3.0进展的重磅分享 2019 年 6 月 8 日来自全球各地的开发者齐聚上海交通大学文治堂， VueC onf 2019 在上海成功举办。 VUE 3.0 最新进展使用 Object.defineProperty -> Proxy 速度提升了 1 倍 VUE3.0 将 Virtual DOM 重构速度提升 6 倍牛逼吧！！！是如何…
Vue拖拽组件列表实现动态页面配置这篇文章主要介绍了Vue拖拽组件列表实现动态页面配置功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
大前端时代下的微前端架构：实现增量升级、代码解耦、独立部署想做好前端很难，做出可扩展的前端，从而让多个团队可以同时投身于一项复杂的大型产品项目就更难了。本文将介绍前端领域最近的一项变革：单体前端架构正在过渡到许多较小、较易管理的前端架构。我们还会展示这种新的体系结构怎样提升前端团队的效率和表现。除了讨论这种新趋势的好处与代价外，我们还将介绍一些可行的实…
vue核心原理学习最近想深入了解一下vue.js（后面简称vue）的核心原理，无意中看到了一个用于学习vue原理的项目。在深入了解之后，发现它短小精悍，对于渐进式地了解vue的核心原理的实现大有帮助，于是乎就正式开始了对它探索之旅。概念概念代表着人类意识上的共识。所以，要想通过沟通交流来产生一些成果，对同一个概念达成共…
使用JavaScript的一些小技巧任何一门技术在实际中都会有一些属于自己的小技巧。同样的，在使用JavaScript时也有一些自己的小技巧，只不过很多时候有可能容易被大家忽略。而在互联网上，时不时的有很多同行朋友会总结（或收集）一些这方面的小技巧。作为一位JavaScript的菜鸟级的同学，更应该要留意这些小技巧，因为这些小技巧可以在实际业务的开发…
vue基本知识点实例化vue对象的重要选项1:data对象是存储所有的vue实例数据的。使用数据的其中一个方法是双花括号,如下所示。2:methods对象,该对象里面主要封装的是v…
分享 10 道 Nodejs 进程相关面试题通过对以下 10 个面试题的分享，助您更好的理解 Node.js 的进程和线程相关知识作者简介：五月君，Nodejs Developer，热爱技术、喜欢分享的 90 后青年，公众号 “Nodejs技术栈”，Github 开源项目www.nodejs.red 快速导航创建多进程时，代码里有 app.listen(port) 在进行 fork 时，为什么没有报端口被占用？…
来试试这个用 Vue 撸的数据可视化后台吧国际惯例：项目Github地址，欢迎 Star dongsuo/vue-data-board 首先放个线上地址大家感受一下(由于后端用的是 leancloud 的免费套餐，因此可能会比较慢)： vue-data-board P.S. 建议大家尽量自己注册一个账号(可以随便填一个密码)，如果用默认的测试账号，不要乱改东西，否则别人进来就没得看了，因为你做的…
js基本搜索算法实现与170万条数据下的性能测试今天让我们来继续聊一聊js算法，通过接下来的讲解，我们可以了解到搜索算法的基本实现以及各种实现方法的性能，进而发现for循环，forEach，While的性能差异，我们还会了解到如何通过web worker做算法分片，极大的提高算法的性能。同时我还会简单介绍一下经典的二分算法，哈希表查找算法，但这些不是本章的重点，之后…
前端工程化（5）：你所需要的npm知识储备都在这了 npm 在前端开发流程中提供了非常完善的自动化工具链，已成为每个前端开发者必备的工具，但是同样由于其强大性导致很多前端开发者只会简单的使用它。本文将总结在日常开发中所需要的 npm 知识点，以便开发者们更好的利用 npm 来辅助项目开发。 1、npm 处理 node_modules 目录结构 node_modules 是一个项目开发、…
Javascript中的树结构前沿前端中设计数据结构的方面不多，最常用的就是对树结构的一些操作。从某种意义上来说，前端工作本身就是和树结构打交道的一个工作方向。毕竟， DOM就是天然的树结构。所以如何能够良好地对树结构进行操作，是前端工程师不可或缺的一项能力。树结构定义什么是树结构呢？从数据结构的角度来讲： …
写个 Babel 插件丰富你的 console 内容 console.log 相信很多人都用过，作为平时工作中主力调试工具，我常常有些困惑，就是如何找到控制台中打印的信息对应的源码。通常情况会在打印的信息之前加入一些字符串，如下所示： console.log(‘from handleFileUpload—->’, data); 复制代码那么有没有更好的方式来满足这个需求呢？最好是自动添加信息。因为最…
JavaScript 原型链污染原型 JavaScript 是一门面向对象的语言，但是在 ES6 之前，JavaScript 中没有 class 语法。不过在它的构造函数（ constructor ）就相当于类，通过构造函数，我们可以生成实例化的对象。 function Cat() { this.color = ‘orange’ } var cat = new Cat() console.log(cat.color) // orange prototype …
你就说，你明不明白JavaScript的关键字 this？最近，看了一篇关于JavaScript的关键字 this 的教学文章，收益甚多，因此，在这篇文章的基础上，稍微整理了一下，分享给大家。希望可以有助于学习JavaScript的童鞋，好好的理解 this 这个在JavaScript中最重要的关键字。涵义 1. 定义 this就是属性或方法“当前”所在的对象。 this.property 复制代码上面代码中…
Node.js进阶之进程与线程进程与线程在服务端研发中是一个非常重要的概念，如果您在学习的时候对这一块感到混乱或者不是太理解，可以阅读下本篇内容，本篇在介绍进程和线程的概念之外，列举了很多 Demo 希望能从实战角度帮助您更好的去理解。作者简介：五月君，Nodejs Developer，热爱技术、喜欢分享的 90 后青年，公众号 “Nodejs技术栈”，Gi…
经常被面试官问道的JavaScript数据类型知识你真的懂吗？之前面试了几个开发者，他们确实做过不少项目，能力也是不错的，但是发现js基础不扎实, 于是决定写一下这篇javascrip数据类型相关的基础文章，其实也不仅仅是因为面试了他们，之前自己在面试的时候，也曾经被虐过，面试官说过的最深刻的一句话我到现在都记得。基础很重要，只有基础好才会很少出 bug ，大多数的 bug …
《阿里云前端技术周刊》第九期作者：灵沼校对：染陌知乎：阿里云中台前端/全栈团队专栏Github：阿里云前端技术周刊给我们投稿：传送门参与交流：传送门前端速报拒绝重复造轮子！GitHub推出新功能repository template，帮助开发者在所有项…
Webpack介绍和使用(配置环境变量，打包依赖) webpack介绍和使用 webpack是一个前端模块化打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。主要由入口，出口，loader，plugins四个部分。 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端…
Vue踩坑之旅（二）—— 监听页面刷新和关闭我在做项目的时候，有一个需求，在离开（跳转或者关闭）购物车页面或者刷新购物车页面的时候向服务器提交一次购物车商品数量的变化。将提交的一步操作放到 beforeDestroy 钩子函数中。 beforeDestroy() { console.log(‘销毁组件’） this.finalCart()},复制代码但是发现 beforeDestroy 只能监听到页面间的…
前端性能优化之 JavaScript 前端性能优化之 JavaScript 前言本文为《高性能 JavaScript》读书笔记，是利用中午休息时间、下班时间以及周末整理出来的，此书虽有点老旧，但谈论的性能优化话题是每位同学必须理解和掌握的，业务响应速度直接影响用户体验。一、加载和运行大多数浏览器使用单进程处理 UI 更新和 JavaScript 运行等多个…
前端基本功(七)：javascript中的继承（原型、原型链、继承的实现方式） javascirpt没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，全靠一种很奇特的"原型链"（prototype chain）模式，来实现继承。继承意味着复制操作，然而 JavaScript 默认并不会复制对象的属性，相反，JavaScript 只是在两个对象之间创建一…
一文彻底理解JavaScript的深拷贝与浅拷贝 javascript 中一般有按值传递和按引用传递两种复制方式: 按值传递的是基本数据类型（Number,String,Boolean,Null,Undefined），一般存放于内存中的栈区，存取速度快，存放量小；按引用传递的是引用类型（Object,Array,Function,Symbol），一般存放与内存中的堆区，存取速度慢，存放量大，其引用指针存…
更优雅地基于 canvas 在前端画海报我们的业务涉及电商、教育行业，出于营销以及功能需要，会有很多卡片展示（长按保存）的需求，或者分享长图的需求。以及我们有面向商家的PC端，商家端又能编辑、实时预览卡片的样式。同样的卡片内容我们需要在两端以两种框架（vue react）分别维护。考虑到依赖太大（ungzipped 160kb+）、稳定性、可维…
使用vue-i18n实现多语言切换效果安装vue-i18n 我们使用npm安装vue-i18n。 npm install vue vue-i18n –save 引入vue-i18n 首先在 main.js 中引入 vue-i18n。 import Vue from ‘vue’ import App from ‘./App’ import VueI18n from ‘vue-i18n’ Vue.use(VueI18n) // 通过插件的形式挂载接着创建带有选项的 VueI18n 实例。 const i18n = new VueI1…
我所理解的promise 虽然项目中一直在用到promise，虽然以前也学习过promise，但是对于promise真的是没有很好的学以致用，有时候看到别人用promise的时候也是一脸懵逼，所以就决定花点时间再来好好研究一下promise到底是什么?应该怎么样用？ 1、什么是promise? Promise 是异步编程的一种解决方案，使得执行异步操作变得像同步操…
【Vue项目总结】后台管理项目总结每个系统都有自己的登录登出逻辑，而我们前端所要做的其实是请求后台，拿到登录权限，带上登录权限，获取用户信息和菜单信息。在vue项目开发当中，我们一般都是在全局路由钩子做这一系列判断。
协调微前端现在是时候讨论如何协调微前端了。首先，关于微前端应该是什么样子，有两种思路，如上一篇文章中所述，我解释了微前端的不同实现：一个微前端对应着一块用户界面的区域，其中微前端是 SPA 或单个页面。当我们考虑基于应用的不同逻辑区域（如标题，页脚，付款表单等）的微前端实现时，我们将面临不同的挑战，例…
JavaScript基础专题之原型与原型链（一） function Person(){ } let person1 = new Person() let person2 = new Person() person1.name = ‘james’ person2.name = ‘kobe’ 复制代码我们通过new来创建一个person实例，我们可以看到不同的实例拥有自己的属性。 proto 我们可以看到每个对象下都会有__proto__的属性，这个属性会指向该对象的…
Vue源码解析-了解vue插槽slot篇1.这里直接看到组件button-counter编译后的render函数，就不详细从template模板编译说起，直接看最后的render函数：
5种处理Vue异常的方法去年一整年，我都在使用最爱的—Vue.js— 来做项目。最近突然意识到，我竟然从来没有认真去处理异常。我可以自恋地说：”我写的代码是完美的，没有BUG。” 我相信大家都明白这是迷之自信。最近，我花了不少时间研究了…
Vue.js 2.0 手把手入门笔记是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 2 特点: 核心只关注视图层(view) 灵活、轻量、灵活的特点适用于移动端项目渐进式框架 3 什么是库，什么是框架？ …
提升90%加载速度——vuecli下的首屏性能优化之前用vuecli做了个博客，是一个单页面项目，大概有十个路由直接npm run build打包出来，有一个1M的巨大js文件
【整理】20个让你效率更高的CSS代码技巧在本文中，我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的，有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识。
从渲染原理谈前端性能优化这句话来自《web性能权威指南》，我一直很喜欢，而本文尝试从浏览器渲染原理探讨如何进行性能提升。全文将从网络通信以及页面渲染两个过程去探讨浏览器的行为及在此过程中我们可以针对那些点进行优化，有些的不足…
前端单元测试实践（koa篇）前端的业务逻辑日益复杂，对于逻辑正确性的要求也越来越高，单元测试作为一种简单快捷的测试工具为前端业务的正确性提供了有力的支持。所谓单元测试，就是通过测试单个代码单元以测试代码的单一功能，单元测试可以让开发人发现很多潜在的问题。为什么要写单元测试单元测试费时费力的苦力活，很多人都不愿意写，甚…
前端项目中常见的 CSS 问题快速摘要：近年来，跨浏览器的渲染和交互已经愈加一致。不过，它仍然没有达到完全一致，有很多小问题会让你出错。除了这些问题之外，还有不同的屏幕尺寸、语言偏好和明显的人为错误等不确定因素，我们从中发现了…
混子前端所知道关于ES6的Promise Promise是异步编程的一种解决方案，比传统的解决方案更合理也更强大。 Promise的含义混子前端认为 Promise 简单来说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 Promise对象有以下两个特点：对象的状态不受外界影响： Promise代表一个异步…
Vue.js 高级概念：Mixins，自定义指令，过滤器，过渡，状态管理和服务端渲染搭建环境（Vue.js 2.x）下面利用 Vue-cli 搭建一个工程，首先安装Vue-cli npm install -g vue-cli 复制代码安装完成执行Vue -V 检查是否安装成功，我的 Vue-cli 版本是2.9.6。 Mixins Vue 官方网站对 Mixins 定义：混入 (Mixins) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一…
JavaScript 线性代数：使用 ThreeJS 制作线性变换动画本文是“JavaScript 线性代数”教程的一部分。最近我完成了一篇关于使用 JavaScript 进行线性变换的文章，并用 SVG 网格实现了 2D 的示例。你可以在此处查看之前的文章。但是，那篇文章没有三维空间的示例，因此本文将补全那篇文章的缺失。你可以在此处查看本系列文章的 GitHub 仓库，与本文相关的 commit 可以在 …
Web实战：如何进行视频截图各位读者大人们好，不知道各位读者大人们近来如何。由于前段时间事情比较多，文章的更新就给耽误了，项目需要上线经常加班，再加上自己的一些学习计划，一晃就是一个多月，没有更新文章。有人会问，登哥你怎么不搬运和转载别人的文章呢？，这样公众号就不会断更了，这个问题问的好，熟悉我的读者应该会发现，我的…
说说JavaScript中函数的防抖 (Debounce) 与节流 (Throttle) 为何要防抖和节流有时候会在项目开发中频繁地触发一些事件,如 resize 、 scroll 、 keyup 、 keydown 等，或者诸如输入框的实时搜索功能，我们知道如果事件处理函数无限制调用，会大大加重浏览器的工作量，有可能导致页面卡顿影响体验；后台接口的频繁调用，不仅会影响客户端体验，还会大大增加服务器的负担。而…
【GAN的优化】从KL和JS散度到fGAN 欢迎来到专栏《GAN的优化》，这是第二期。在这个专栏中，我们会讲述GAN的相关背景、基本原理、优化等相关理论，尤其是侧重于GAN目标函数的优化。小米粥和有三将带领大家从零学起，深入探究GAN的点点滴滴。其实，比起来东拼西凑的资料的堆叠，我更喜欢讲故事，从头到尾讲一个故事，中间环环相扣，逻辑条理清晰，读完之…
vue 路由基础（1）vue-router 是 Vue 官方提供前端路由插件，借助它我们实现可以基于路由和组件的单页面应用。
前端面试问题整理第一部分首先overflow的常用属性：visible/hidden/scroll/auto/inherit white-space:pre/pre-wrap/nowrap/pre-line/inherit； <style type="text/css"> .ellipsis{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } </style> &l…
给 node.js 白嫖怪的 5 个免费托管服务本文翻译自 5 Free Ways To Host Your Node.js App In 2019 <https://amitbend.com/node.js/2019/05/13/five-free-ways-to-host-your-node-app-2019.html> 点击原文链接可达。希望大家看完本文可以再去原文看看，拒绝二手知识从 pshu 这里开始。 …
[vue中使用typescript] 超实用教程 VueConf ，尤大说， Vue 支持 Ts 了，网上关于 Vue + Ts 的资料有点少，楼主踩了一个星期坑，终于摸明白了修饰器的玩法，下面我们就来玩下 Vue 的 decorator 吧 1，data 值的声明在这里 public 声明的是公有属性， private 声明的是私有属性，私有属性要带下划线蓝色框里的内容是声明组件，在每个…
用Vue.js在浏览器中裁剪图像[每日前端夜话0x86] 每日前端夜话 0x86 每日前端夜话，陪你聊前端。每天晚上18:00准时推送。正文共：1557 字预计阅读时间： 5 分钟作者：Nic Raboy 翻译：疯狂的技术宅来源： logrocket Cropping Images In The Browser With Vue.js 你是否写了一个需要接受用户上传图片…
【vue源码解析】render到底做了什么？ render的作用 render函数可以作为一道分割线，render函数的左边可以称之为编译期，将Vue的模板转换为渲染函数。render函数的右边是Vue的运行时，主要是基于渲染函数生成Virtual DOM树，Diff和Patch。 render渲染函数将结合数据生成Virtual DOM的。有了虚拟的DOM树后，再交给Patch函数，负责把这些虚拟DOM…
一篇文章完全掌握 JavaScript 数组操作[每日前端夜话0x87] 每日前端夜话 0x87 每日前端夜话，陪你聊前端。每天晚上18:00准时推送。正文共：2857 字预计阅读时间： 8 分钟作者：Bolaji Ayodeji 翻译：疯狂的技术宅来源： logrocket JavaScript 中的数组是什么？在开始之前，你需要先了解数组的真正含义。在 JavaScript 中…
React性能测量和分析上一篇文章讲了 React 性能优化的一些方向和手段，这篇文章再补充说一下如何进行性能测量和分析, 介绍 React 性能分析的一些工具和方法. 进行任何性能优化的前提是你要找出’性能问题‘，这样才能针对性地进行优化。我觉得对于 React 的性能优化可以分两个阶段: 1. 分析阶段通过分析器(Profiler)找出…
《送你 43 道 JS 面试题》这两天的GitHub Trending repositories被一个名叫 javascript-questions的项目霸榜了，项目中记录了一些JavaScript题目。（by ConardLi ）
JavaScript递归实现对象深拷贝1.JavaScript递归实现对象深拷贝 JavaScript递归实现对象深拷贝 {代码…} 2. {代码…}
生成海报（前端 | python）我最近没有摸鱼，一直都在工作。只不过目前需要爬一点数据 python 做的，之后看机会分享一下。忙着忙着老大说要生成海报，有个活动要给每个用户来个分享图。想法 PS 批处理？脚本？能甩出去的活都甩出去，机智…