前端周报：纯CSS导航栏下划线跟随、JavaScript DOM事件机制

记得点击文章末尾的“阅读原文”查看哟~

下面先一起看下本周的文章摘要吧~

腾讯一面（2019前端实习岗）；不可思议的纯CSS导航栏下划线跟随效果；从八道面试题看JavaScript DOM事件机制；新人必看的短小而精悍的javascript function；BAT 要的是什么样的前端实习生？；记金山wps2019届前端笔试题 | 掘金技术征文；HTML5中37个最重要的技术点；2018三月个人前端社招面试经验总结

1、腾讯一面（2019前端实习岗）

前言 之前投递了腾讯的实习生前端岗，一直没有电话，查了下状态说不合适，以为凉凉了，今天却收到了电话，出乎意料... 然后就开始了一面，一开始面试官说时间不会太久，大概30分钟吧，结果整个过程也就持续了30分钟吧。 下面是面试的过程： 自我介绍 简单介绍了自

2、不可思议的纯CSS导航栏下划线跟随效果

先上张图，如何使用纯 CSS 制作如下效果？ 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javas

3、从八道面试题看JavaScript DOM事件机制

As we all know,事件机制其实很简单，无非 冒泡 和 捕获 这两点，笔者不再赘述，网上相关文章一大堆，下面让我们直接看面试题 题目一到七，统一设置css .test2 { height: 50px; } 题目一 <div class="test1"> <div class="test2"></div> </div>...

4、新人必看的短小而精悍的javascript function

最近github上看到30-seconds-of-code关于js,css都是值得看的，今天分享10个fnc. 1.回到顶部，优点使用浏览器刷新频率的requestAnimationFrame，很顺滑 const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationF...

5、BAT 要的是什么样的前端实习生？

面试季又到了，各位小鲜肉也在着手准备基本的面试、实习。但是，有小鲜肉的思想我确实有点不敢苟同。面试无非就是问一些问题，你能答出来就行，答不出来就 pass。那如果我知道你要问哪些问题，这不就行了吗？感觉这不就是做一场考试吗？ 一个学期的课程，我用 7 天学完，题目我都会做，考试分数还比那些学了一个学期的...

6、记金山wps2019届前端笔试题 | 掘金技术征文

第一题 console.log(a) // undefined var a = 1; var getNum = function() { a = 2; } function get

7、HTML5中37个最重要的技术点

目录 SGML（标准通用标记语言）和HTML（超文本标记语言），XML（可扩展标记语言）和HTML的之间有什么关系？ 为什么HTML5里面我们不需要DTD（Document Type Definition文档类型定义）？ 如果我不放入<! DOCTYPE html> 标签，HTML5还会工作么？ 哪些浏览器支持HTML5？ HTML5的页面结构同...

8、2018三月个人前端社招面试经验总结

社招面试相比校招面试，我个人觉得是并不太那么的看重基础知识了(基础知识还是非常重要的)。社招一般没笔试，更多的是聊你之前做过的项目。基本上问问几个问题就知道你是什么水平了。 第一家： 应聘公司：拉勾网上发来的面试邀请，坐落于上海陆家嘴某金融大夏，环境非常高大上，面试官也还不错。面试的岗位是react-n...

9、3月web前端面试小结 | 掘金技术征文

说一下box-sizing的应用场景 box-sizing的属性值分为两个，border-box和content-box，其中， border-box：width=content+padding+border content-box： width=conte

10、JS灵巧判断7种类型的方式

空值 (null) 未定义 (undefined) 布尔值 (boolean) 数字 (number) 字符串 (string) 对象 (object) 符号 (symbol，ES6中新增) 在 JS 中呢，有很多坑，本文章将结合 undersoce.js源码 和我所总结的方法准确判断这七种类型； 先来一个小测试： 首先，大家都熟悉的一种判断方式 typeof，这是...

11、前端到底要不要算法？

1+1=2的问题，我们都知道。但是市场上面依然能看到一句缪论“前端不需要算法”，这个不可否认，是不需要太多的算法，因为一个合理的产品，对于展示层的表现，应该注重的是视觉的还原和细节，但是！算法在某些情况下，对于性能的优化，有着很显著的提升。 举个例子，假设后端没有给你提供排序好的数据，这些数据...

12、三分钟快速理解javascript内存管理

javascript 中具有垃圾自动回收机制 （Garbage Collection） ,也就是执行环境会负责管理代码执行过程中使用的内存,在开发过程中就可以不考虑内存的分配,以及无用内存释放的问题.但是触发立即回收机制会中断代码的执行,停止其他操作,遍历所有的对象,回收所有不可访问的对象,因此垃圾回收的工作机制是周期性的. 因...

13、秀几种 CSS 背景渐变图片 transtion 过渡效果技巧

background-image 不支持 CSS3 transition，当 CSS3 gradient 渐变作为背景图片存在的时候，直接设置 transition 是不会有过渡效果的，那该怎么办呢？

14、JS中的九个console命令以及用法

一、显示信息的命令 根据信息的不同，console对象有四种显示信息的方法，分别是 console.log('text'); 日志的输出 console.info('信息'); 信息提示 console.error('错误'); 错误信息 console.wa

15、Vue.js最佳实践（五招让你成为Vue.js大师）

本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我，有空就给你们写。 对大部分人来说，掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更...

16、JavaScript 优雅模式 Ice Factory

简评:JavaScript 中 Class 的行为和我们预期的不太一样,为了达到预期的效果作者使用 Ice Factory 模式来处理这个问题。 JavaScript class 并不优雅 将相关的方法组织...

17、前端进阶系列-目录

之前我分享了文章《大厂前端面试考什么》,你们一定很想看答案吧？说实话，答案我是有，在准备面试的时候会时不时翻看，但内容比较多，比较凌乱，也不能指望我在一篇文章中写完。 我打算写一系列文章来进行解答面试中碰到的问题。目前只有目录，赶时间的同学可以根据关键词自行搜

18、vue2 + koa2 + webpack4 的SSR之旅

因为自己的博客完全的前后端分离写的，在 seo 这一块也没考虑过，于是乎，便开始了本次的 SSR 之旅 技术栈 vue2 + koa2 + webpack4 + mongodb 因为webpack也已经到了 4.1 的版本了，所以顺带把 webpack3 迁移到了 webpack4 。 服务端渲染（SSR） 大概意思就是在服务端生成 html 片段...

19、精美的 Node.js 框架

编辑推荐: 本文来自于segmentfault.com ,我们从理论上讨论了NestJS并做了一个实际的例子。 欲了解更多信息，请参阅框架的官方文档，其中包含大量随时可用的指导和代码片段。 NestJS 是一个精心制作的服务器端（后端）应用程序框架，以支持开发人员的生产力并让他们的生活更加快乐。 那...

20、Nerv：京东高性能前端框架

Nerv 是一款由京东凹凸实验室打造的类 React 前端框架。目前已广泛运用在京东商城（JD.COM）核心业务及TOPLIFE全站。Nerv 基于React标准，使用 Virtual Dom 技术，拥有和 React 一致的 API 与生命周期，如果你已经对 React 使用非常熟悉，那么使用 Nerv 开发对你来说绝对是零学习成本。 与此同时，相比于 React 以...

21、webpack4之基础篇

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 2. webpack核心概念 Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。 Module：模块...

22、《css世界》的那些实用技巧

下面所有的内容都来至张鑫旭所著的《css世界》。 《css世界》这是一本专门写css的书，书中并没有涉及css3的知识，但是它所展现的东西很多都是我从未知道或以前未重视的。这是一本能够开阔视野的书，我把这本书推荐所有从事前端的人。 下面都是我在看这本书所记录的

23、webpack4之高级篇

css Tree Shaking yarn add purify-css purifycss-webpack -D const glob = require('glob') const PurifyCSSPlugin = require('purifycss-webpack') // 去除无用的css plugins: [ new PurifyCSSPlugin({ // 路劲扫描 nodejs内置 路劲检查 paths: glob.sync(path.join(__dirname, 'pages/*/*.html'...

24、Python3网络爬虫开发实战6-Ajax数据爬取-4-分析Ajax爬取今日头条街拍美图

本节中，我们以今日头条为例来尝试通过分析Ajax请求来抓取网页数据的方法。这次要抓取的目标是今日头条的街拍美图，抓取完成之后，将每组图片分文件夹下载到本地并保存下来。 1. 准备工作 在本节开始之前，请确保已经安装好requests库。如果没有安装，可以参考第1章。 2. 抓取分析 在抓取之前，首先要分析抓取...

25、一步一步实现一个符合PromiseA+规范的Promise库（1）

今天我们来自己手写一个符合PromiseA+规范的Promise库。大家是不是很激动呢？？ 才没有。。 &nbsp;&nbsp;&nbsp;&nbsp;我们都知道。在现在的前端开发中，Promise这个东西基本上所有的开发中都会用到。

26、CSS人人都能写自定义Checkbox（+1白话讲解）

背景 那一刻...无数前端开发者想起了自己曾经被Checkbox支配的恐惧...这种在绝大多数浏览器中几乎或完全不能进行样式替代的玩意让开发者们被迫选择默认样式，或者是找一些访问性极差的hack方案... 开始操作 先把基本结构搞出来 &lt;input

27、浅谈Vue内置component组件的应用场景

官方的说明 渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。 &lt;!-- 动态组件由 vm 实例的属性值 `componentId` 控制 --&gt; &lt;component :is="componentId"&gt;&lt;/c

28、教你用 css 写一个拟物化图标

拟物化（Skeuomorphism）风格的图标在iOS7发布之前广为流行。相当长一段时间，无论系统、网页还是第三方应用都争相使用拟物化的设计风格。那时候的dribbble网，各色优秀的拟物化设计作品也争奇斗艳、层出不穷。 下面先展示几张优秀的拟物化设计作品，让

29、优雅的 JavaScript 排序算法（ES6）

面试官：小伙子排序算法了解吗？ 回答：我能写出来 四种冒泡排序 ， 两种选择排序 ， 两种插入排序 ， 两种哈希排序 ， 两种归并排序 ， 两种堆排序 ， 三种快速排序 。 用我自己的方式。 前言 文中所有代码位于位于 此仓库 中，可以下载代码进行练习、推敲。 P.S. 原文显示效...

30、Javascript 正则匹配实现字符串渲染

起始 同许多初学 Javascript 的菜鸟一样，起初，我也是采用拼接字符串的形式，将 JSON 数据嵌入 HTML 中。开始时代码量较少，暂时还可以接受。但当页面结构复杂起来后，其弱点开始变得无法忍受起来： 书写不连贯。每

喜欢这篇文章的朋友，欢迎收藏、分享、评论，帮我上热门，你的支持，是我每日更新的动力！

喜欢前端的朋友可以点击关注一下我微博，每日分享精彩的前端文章！

欢迎点击“阅读原文”，学习今日精华文章～

前端开发博客

——————————————————

领略前端技术 阅读前端开发博客

长按二维码，关注前端开发博客

▼