20180720 前端开发周报

微前端快速选型指南;2018年值得期待11个Javascript动画库;Vue-cli中的webpack4一步到位填坑记;面试官:请简述一下vue-cli命令行工具,你能自己手写一个吗?;13 个示例快速入门 JS 抽象语法树;嗨,送你一张web性能优化地图;face-api.js:一个在浏览器中进行人脸识别的 JavaScript 接口;2018年推出的10个JavaScript动画库

  1. 微前端快速选型指南 在之前那篇《实施前端微服务化的六七种方式》中,介绍了在实施微前端的过程中,我们采用的一些不同方案的架构方案。在这篇文章中,我将总结如何依据不同的情况来选择合适的方案。 快速选型指南图 我还是直接先给结论: 关键点的相关解释如下: 框架限制。在后台微服务系统里,人们使用其它语...
  2. 2018年值得期待11个Javascript动画库 在浏览网页寻找一个整洁的Javascript动画库时,我发现很多“recommended”的动画库一段时间都没有维护。 经过一些研究,我收集了11个最好的库,在你的应用程序中使用。我还添加了一些,主要是非维护的,有用的库。 使用UI组件时,您还
  3. vue-cli中的webpack4一步到位填坑记 基础介绍 Webpack也在不断的优化迭代;截至目前,已经更新至 v4.16.0;在Webpack4这个版本,它在原有基础上,做了很多优化,也引入了颇多的新特性。在新的版本中,将获得更多模块类型及对.mjs的支持,更好的默认值、更为简洁的模式设置、更加智能的来
  4. 面试官:请简述一下vue-cli命令行工具,你能自己手写一个吗? 还记得我们在写vue 项目的时候用脚手架vue-init的主要作用是根据指定模板生成项目原型嘛?那么vue-init怎么实现的呢? 其实就是在vue-cli package.JSON中增加下面的代码 { "bin": { "vue": "bin/vue", "vue-init": "bin/vue-init", //执行vue-init 的...
  5. 13 个示例快速入门 JS 抽象语法树 文章同步于 Github/Blog Javascript 代码的解析(Parse )步骤分为两个阶段:词法分析(Lexical Analysis)和 语法分析(Syntactic Analysis)。这个步骤接收代码并输出 抽象语法树,亦称 AST。 随着
  6. 嗨,送你一张Web性能优化地图 嗨,送你一张Web性能优化地图 本文作者: Berwin ,W3C性能工作组成员,360导航高级前端工程师。Vue.js早期用户,《深入浅出Vue.js》(正在出版)作者。 http://github.com/berwin 我们都知道对于Web应用来说性能很重要。然而性能优化相关的知识却非常的庞大并且杂乱。对于性能优化需要做些什么以及性能瓶颈是...
  7. face-api.js:一个在浏览器中进行人脸识别的 JavaScript 接口 号外!号外!现在人们终于可以在浏览器中进行人脸识别了!本文将为大家介绍「face-api.js」,这是一个建立在「tensorflow.js」内核上的 javascript 模块,它实现了三种 卷积神经网络 (CNN)架构,用于完成人脸检测、识别和特征点检测任务。 face-api.js:https://github.com/justadudewhohacks/face-api.js ...
  8. 2018年推出的10个JavaScript动画库 查看JavaScript开发人员的一些优秀动画库,包括HTMLCSS和JavaScript代码示例! 现代网站的客户端提供高质量的动画,这导致了对JavaScript动画库的需求的增加。幸运的是,供应似乎与需求相匹配,并且有很多选择。但是,选择哪个库可能会引起很多麻烦。许多图书馆有可能在一年中变得更好,并且将成为创建动画的首选解...
  9. JavaScript中的垃圾回收和内存泄漏 之前接触的js的内存管理方面的内容一直比较零散,最近在这一块做了一些系统的学习.学习过程中的一些总结在这里分享给大家.欢迎批评指正,共同学习,共同进步. 在一部分语言中是提供了内存管理的接口的,例如C语言中的 molloc()和 free(); 而在 Java
  10. 近百高频知识点,十万余字,地表最强前端面试图谱了解下 前言 当你老了,回顾一生,就会发觉:什么时候出国读书,什么时候决定做第一份职业,何时选定对象而恋爱,什么时候结婚,其实都是命运的巨变。只是当时站在三岔路口,眼见风云千樯,你做出选择的那一日,在日记上,相当沉闷和平凡,当时还以为是生命中普通的一天。 一个改变面
  11. 周大侠啊 进击的 JavaScript(四) 之 闭包 原文链接:周大侠啊 进击的 JavaScript(四) 之 闭包 上一节说了执行上下文,这节咱们就乘胜追击来搞搞闭包!头疼的东西让你不再头疼! 一、函数也是引用类型的。 function f(){ console.log("not change") }; v
  12. vue 实践技巧合集 前言 本文纯属个人平时实践过程中的一些经验总结,算是一点点小技巧吧,不是多么高明的技术,如果对你有帮助,那么不胜荣幸。 本文不涉及罕见API使用方法等,大部分内容都是基于对vue的一些实践而已。由于涉嫌投机取巧,可能会带来一些不符合规范的副作用,请根据项目要求
  13. 从零开始搭建React应用(二)——React应用架构 上一篇文章——从零开始搭建 React 应用(一)——基础搭建讲述了如何使用 webpack 搭建一个非常基础的 react 开发环境。本文将详细讲述搭建一个 React 应用的架构。 仓库地址:github.com/MrZhang123/… redux 在我
  14. 如何使用JavaScript控制台改进工作流程 作为Web开发人员,很有必要了解如何调试代码。后台开发我们经常使用外部库来记录日志,并在某些情况下格式化显示日志,前端我们会使用断点和控制台,但是我们浏览器的控制台比我们想象的要强大得多。 当我们考虑控制台时,首先想到的是console.log,对吧?但是它比我们想像中使用的方法多得多。现在我们来看一下如何充...
  15. HTML5点播m3u8(hls)格式视频 HTML5点播m3u8(hls)格式视频 2018年07月18日 20:11 helloweba.net 作者:月光光 标签: 这两年来我们发现越来越多的视频应用使用了m3u8格式的视频,因为可以兼容PC、移动端。相比mp4等视频源,m3u8可以减轻服务器压力(按需加载)。HLS是由苹果公司率先提出的一种协议标准...
  16. 再好好聊一聊 HTTP 中的 Cookie 细节 一、序 Hi,大家好,我是承香墨影! HTTP 协议在网络知识中占据了重要的地位,HTTP 协议最基础的就是请求和响应的报文,而报文又是由报文头(Header)和实体组成。大多数 HTTP 协议的使用方式,都是依赖设置不同的 HTTP 请求/响应 的 Header 来实现的。 本系列《实用 HTTP》就抛开常规的 He...
  17. 关于 Vue.js:那些好的,不怎么样的和糟糕的 编者注:该文章翻译于 Pier Bover 的“ Vue.js: the good, the meh, and the ugly ”,仅供探讨,不代表本站观点。 使用新的框架和库总是会让人兴奋,但也有压
  18. CSS布局指南 特别声明,本文根据@Rachel Andrew的《Getting Started With CSS Layout》一文整理。 在过去几年中,CSS布局已经发生了巨大的变化,现在我们开发网站的方式也发生了巨大变化。现在我们有需要可选的CSS布局
  19. 重新认识JavaScript面向对象:从ES5到ES6 一. 重新认识面向对象 1. JavaScript是一门面向对象的语言 在说明JavaScript是一个面向对象的语言之前, 我们来探讨一下面向对象的三大基本特征: 封装 , 继承 , 多态 。 封装 把抽象出来的属性和对方法组合在一起,且属性值被保护在内部,只有通过特定的方法进行改变和读取称为封装。 我们以代码举例, ...
  20. AJAX API三驾马车: Axios vs . jQuery和Fetch 如果你曾经使用过类似 Angular 框架的经验,你会发现这些框架集成了开发一个应用应该具备的所有功能,例如用于进行HTTP调用的服务( Angular 中的 $HTTP )。 React 是一个视图层框架,用于构建用户界面。在 MVC 架构中,它仅仅负责视图部分。在实际的开发过程中,往往需要我们引入一些第三方组件,比如今天要说的 AJA...
  21. 让你听见的 HTML5 HTML5 多媒体应用现在还没被大部分挖掘出来,像普通的页游只能简简单单的做一些 2D 渲染,主要差距还是在性能上。H5 天生是动态语言,需要经过解析、编译。而且 JS 还是一个弱类型语言,虽然有 JIT 的帮助,但是解析引擎本身就有一个天花板,你无法、或者直接点,不能让 JS 达到原生的效率。但随着技术的发展,浏览器倾...
  22. JS异步执行之setTimeout 0的妙用 干其他的事情,等其他人吃完了(同步代码执行完毕)会有人来通知你,于是你可以去了(开始执行异步代码【setTimeout/setInterval/事件处理程序/ajax回调...
  23. WebP 转换技术图片瘦身实践总结 一、Android系统版本对WebP的支持 Android 系统在 4.0 版本中添加入了 WebP 的支持,并在 4.2.1 版本中加强了它: 4.0+ (Ice Cream Sandwich): 基础的 WebP 支持 4.2.1+ (Jelly Beam MR1): 支持带透明度与无损的 WebP Fresco 默认使用系统的 WebP...
  24. 神奇的 CSS3 混合模式 对于前端开发人员应该都很熟悉Photoshop的图层混合模式,就是几个图层按不同的模式进行混合,实现不同的图像效果。但是当我们前端同学在切这些效果图的时候,基本上就是一刀切的,即使是文字,当字体很炫的话,我们也不得不用切图来替代。实际上在16年css3就新增了一个很有意思的属性 -- mix-blend-mode,我们称之为混合...
  25. 2018年JavaScript现状报告 前言 JavaScript(后面统称JS)在过去五年得到飞速地增长,早期JS实现类似微博的“点赞”这样的功能都需要刷新一次页面。 后来开发者通过JS来制作SPA(单页面应用程序),在浏览器加载一次,后续视图都是通过JS动态生成的。webpack技术出现,解决了SPA页面加载过慢的问题,提升了性能与用户体验(但我觉得是因为4G和1M...
  26. Promise 与 async 使用心得 promise 认识promise 首先介绍下promise,是ES6规范中,新增的一个源生方法,常用于异步编程,取代之前回调套回调的方法。 如何理解promise是一个比较难的点,通俗一点的解释就是,promise就相当于我给你一个承诺(就像字面意思一样),你不需要管他是否执行完成。 用ajax来说,promise在ajax发起的...
  27. JQuery整体简化学习      jQuery是一个轻量的js库,提供了dom选择、操作、兼容完善的事件机制和Ajax的封装,使之有更为简便和简捷的去开发js程序。JQuery的底层是JavaScript、...
  28. Angularjs中不同类型的双向数据绑定 Angularjs1.X中两种不同的双向数据绑定 聊聊 Angularjs1.x中那些活见鬼的事情。 一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题。 1.1数据从html流向controller 也就是从 视图层 流向 模型层 ,原生html中需要...
  29. 详解vue-cli官方脚手架配置 转自鸡汤小弟的总结:可能现在大家都知道前端优秀框架——Vue,下面就总结一下vue-cli 脚手架使用过程,里面的坑,我都真实的踩过! 一、vue-cli安装的先决...
  30. 什么是React Native 最近在网络上看到(译)图解 React这篇介绍 React 的文章。用比喻以及插画的形式科普 React 的相关术语还是蛮有趣的。于是乎自己就翻译了文章原作者讲述 React 术语系列文章中的其余两篇——《What is React Native?》和《Rea

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

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

原文:20180720 前端开发周报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-weekly-20180720.html)