20180718 前端开发日报

嗨,送你一张Web性能优化地图;面试官:请简述一下vue-cli命令行工具,你能自己手写一个吗?;face-api.js:一个在浏览器中进行人脸识别的 JavaScript 接口;如何使用JavaScript控制台改进工作流程;vue 实践技巧合集;Angularjs中不同类型的双向数据绑定;重新认识JavaScript面向对象:从ES5到ES6;2018年推出的10个JavaScript动画库

  1. 嗨,送你一张Web性能优化地图 嗨,送你一张Web性能优化地图 本文作者: Berwin ,W3C性能工作组成员,360导航高级前端工程师。Vue.js早期用户,《深入浅出Vue.js》(正在出版)作者。 http://github.com/berwin 我们都知道对于Web应用来说性能很重要。然而性能优化相关的知识却非常的庞大并且杂乱。对于性能优化需要做些什么以及性能瓶颈是…
  2. 面试官:请简述一下vue-cli命令行工具,你能自己手写一个吗? 还记得我们在写vue 项目的时候用脚手架vue-init的主要作用是根据指定模板生成项目原型嘛?那么vue-init怎么实现的呢? 其实就是在vue-cli package.json中增加下面的代码 { "bin": { "vue": "bin/vue", "vue-init": "bin/vue-init", //执行vue-init 的…
  3. face-api.js:一个在浏览器中进行人脸识别的 JavaScript 接口 号外!号外!现在人们终于可以在浏览器中进行人脸识别了!本文将为大家介绍「face-api.js」,这是一个建立在「tensorflow.js」内核上的 javascript 模块,它实现了三种 卷积神经网络 (CNN)架构,用于完成人脸检测、识别和特征点检测任务。 face-api.js:https://github.com/justadudewhohacks/face-api.js …
  4. 如何使用JavaScript控制台改进工作流程 作为Web开发人员,很有必要了解如何调试代码。后台开发我们经常使用外部库来记录日志,并在某些情况下格式化显示日志,前端我们会使用断点和控制台,但是我们浏览器的控制台比我们想象的要强大得多。 当我们考虑控制台时,首先想到的是console.log,对吧?但是它比我们想像中使用的方法多得多。现在我们来看一下如何充…
  5. vue 实践技巧合集 前言 本文纯属个人平时实践过程中的一些经验总结,算是一点点小技巧吧,不是多么高明的技术,如果对你有帮助,那么不胜荣幸。 本文不涉及罕见API使用方法等,大部分内容都是基于对vue的一些实践而已。由于涉嫌投机取巧,可能会带来一些不符合规范的副作用,请根据项目要求
  6. Angularjs中不同类型的双向数据绑定 Angularjs1.X中两种不同的双向数据绑定 聊聊 Angularjs1.x中那些活见鬼的事情。 一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题。 1.1数据从html流向controller 也就是从 视图层 流向 模型层 ,原生html中需要…
  7. 重新认识JavaScript面向对象:从ES5到ES6 一. 重新认识面向对象 1. JavaScript是一门面向对象的语言 在说明JavaScript是一个面向对象的语言之前, 我们来探讨一下面向对象的三大基本特征: 封装 , 继承 , 多态 。 封装 把抽象出来的属性和对方法组合在一起,且属性值被保护在内部,只有通过特定的方法进行改变和读取称为封装。 我们以代码举例, …
  8. 2018年推出的10个JavaScript动画库 查看JavaScript开发人员的一些优秀动画库,包括HTML,CSS和JavaScript代码示例! 现代网站的客户端提供高质量的动画,这导致了对JavaScript动画库的需求的增加。幸运的是,供应似乎与需求相匹配,并且有很多选择。但是,选择哪个库可能会引起很多麻烦。许多图书馆有可能在一年中变得更好,并且将成为创建动画的首选解…
  9. 于是,我们给前端分享会定义了一个未定义的名字 经过我司前端小伙伴们的投票,我们即将对外开放的前端分享会终于正式定名为 Undefined 分享会啦(撒花~)而这篇文章就是关于分享会本身的一个小分享 XD 我个人私底下是挺喜欢和其他同学扯些和技术有关的话题的,相信和我类似的开发小伙伴们也一定不少。不过在个
  10. 前端测试框架——认识Jest Jest是什么? Jest的slogan是令人愉快的JavaScript测试,顾名思义,就是用来测试JavaScript代码的。 Jest有以下的特点: 高速和沙盒。Jest以最大化性能并行化的测试运行。控制台消息都是缓冲并输出测试结果。沙盒测试文件和自动
  11. 论 Rust 和 WebAssembly 对源码地址索引的极限优化 Tom Tromey 和我尝试使用 Rust 语言进行编码,然后用 WebAssembly 进行编译打包后替换 source-map (源码地址索引,以下行文为了理解方便均不进行翻译)的 JavaScript 工具库中性能敏感的部分。在实际场景中以相同的基准进行对比操作,WebAssembly 的性能要比已有的 source-map 库 快上 5.89 倍 。另外,多次测试结果也…
  12. 前端测试框架Jest——语法篇 使用匹配器 使用不同匹配器可以测试输入输出的值是否符合预期。下面介绍一些常见的匹配器。 普通匹配器 最简单的测试值的方法就是看是否精确匹配。首先是toBe() test('two plus two is four', () => { expect(2
  13. WebAssembly在那些情况下会优于JavaScript 在识别和描述核心元素的过程中,我们分享了构建SessionStack时使用的一些经验法则,这是一个轻量级但健壮且高性能的JavaScript应用程序,以帮助用户实时查看和重现其Web应用程序的缺陷。 这次我们来分析WebAssembly的工作原理,以及在如下几个方面和JavaScript进行比较:加载时间,执行速度,垃圾回收,内存使用情况,…
  14. Vue mixins浅谈使用方法及需要注意的点 前言 大家好啊,我又来了这次继续我们上周的话题Vue mixins,经过几天的研究发现Vue mixins并不能代替Vuex全局状态管理或者eventvue传递参数,究竟为什么请先看下面的讲解。 浅谈Vue mixins 个人理解mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改 说了这么多我想大…
  15. Vue源码阅读前必须知道javascript的基础内容 前言 vue目前是前端使用频率较高的一套前端mvvm框架之一,提供了数据的响应式、watch、computed等极为方便的功能及api,那么,vue到底是如何实现这些功能的呢?在探究vue源码之前,必须了解以下几点javascript的基本内容,通过了解这些内
  16. Redux源码分析–bindActionCreators篇 这是Redux源码分析系列的第四篇文章,当这篇文章结束之后Redux源码分析系列也该告一段落了。这篇文章主要想谈谈bindActionCreators这个函数的实现原理,为了更好的理解这个函数我会恰当地引入一些应用代码。 1. ActionCreator创建
  17. 基于 HTML5 结合互联网+的电力接线图“互联网+”思维让数据的搜集和获取更加便捷,并且随着大数据的深度开发和应用,数据分析预测对于提升用户体验有非常重要的价值,同时也为不同行业、不同领域的合作提供了更广阔的空间。传统的发电企业是一个资金、…
  18. React 回忆录(二)为什么使用 React? Hi 各位,欢迎来到 React 回忆录! 在本章中,我将介绍 React 框架的五大特点:虚拟DOM,组件化,声明式代码,单向数据流和纯粹的JavaScript语法。但在介绍这五大特点之前,让我们先简要说明一下 React 出现的时代背景。 01. Re
  19. Laya实战-打地鼠JS版本的ES6重构 前言 在上一篇文章《从零开始制作微信小游戏-弹一弾》中,我使用了纯原生的Canvas搭配Matter物理引擎,制作了一个弹一弾的微信小游戏,在其文末我提到了未来会写一篇使用专业游戏引擎制作H5游戏的文章 这一篇文章就是这个目的。目前国内主流成熟的H5游戏引擎有
  20. Git存储数据的原理 · 语雀 Git存储数据的方式Git 是一个内容寻址文件系统,也就是说他实际上是一个键值对数据库(key-value data store)。Git 存储一份数据,然后返回一个40位的 Hash 值作为键值,通过这个键值,我们就能找到所存储的数据。 – .git/
  21. redux中间件的源码的一些理解 这是redux应用了middleware之后的处理事件的流程图,这跟node中的中间件的功能如出一辙,下面我们来看它的源码是如何实现的function applyMiddleware() { for (var _len = arguments.length
  22. React拾遗:从10种现在流行的 CSS 解决方案谈谈我的最爱 (下) If you are not paying for the product, you are the product. 当一个商品是“免费”的,那往往你成了商品。 终于有时间静下心学点东西,把这个系列最后一篇填上。 中篇 介绍了 tachyons, 本篇介绍
  23. Angular Elements 及其运作原理 原文: Angular Elements: how does this magic work under the hood? 现在,Angular Elements 这个项目已经在社区引起一定程度的讨论。这是显而易见的,因为 Angular Element
  24. Web Worker 初探 以前我们总说,JS是单线程没有多线程,当JS在页面中运行长耗时同步任务的时候就会导致页面假死影响用户体验,从而需要设置把任务放在任务队列中;执行任务队列中的任务也并非多线程进行的,然而现在HTML5提供了我们前端开发这样的能力 – Web Workers AP
  25. React 学习路线图(2018 版) 此学习路线将指引你在 2018 年成为 React 开发者 此仓库是 react-developer-roadmap 的中文版。 下面的思维导图展示了 React 的学习路线以及在学习道路上所需要学习的东西。我画此图的目的主要是为了让问我“我接下来要学什么才能成为 React 开发者?”的人有一个清晰的目标。 免责声明 此…

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流