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

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理；一个只有 99 行代码的 JS 流程框架（一）；前端特效05：绝对震撼的16行JS代码实现地球自转效果；转眼人到中年：前端老程序员无法忘怀的一次百度电话面试；前端特效06：4D炫酷光影效果；js深入学习绕不开的原型知识；回顾 2017，展望 2018 JavaScript 发展趋势；JS的中的 for in 循环有什么问题？

1、从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。 ———-超长文+多图预警，需要花费不少时间。———- 如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内…
2、一个只有 99 行代码的 JS 流程框架（一）

张镇圳，腾讯Web前端高级工程师，对内部系统前端建设有多年经验，喜欢钻研捣鼓各种前端组件和框架。最近一直在想一个问题，如何能让js代码写起来更语义化和更具有可读性。上周末的时候突发奇想，当代码在运行的时候，其实跟我们做事情是类似的，都是做完一步接着下一步，并且这些事情有些是可规划的，有些是需要…
3、前端特效05：绝对震撼的16行JS代码实现地球自转效果

今天，小编将与大家分享web前端特效荟萃系列第五期，喜欢把玩儿炫酷效果的小伙伴快快看过来^_^ ，希望大家喜欢呦～第五期，给大家分享一个使用 16行Javascript代码实现的地球自转效果，带给你屌炸天的动画效果，绝对震撼！。相关代码如下： <!doctype html> <html lang="en"> <he…
4、转眼人到中年：前端老程序员无法忘怀的一次百度电话面试

等待，山雨欲来 2010年9月22日，中秋，记得那天下着零星的小雨。大部分同学都已回了家，深秋的校园显得格外空旷寂寥。平时车来人往的校道，也只剩三三两两的行人低着头走着。匆匆忙忙吃完早餐，一个人背着书包来到了教学楼，找了僻静的角落坐下。看看手机，8:45左右，离电话面试还有大概15分钟。心里有些紧张，毕竟…
5、前端特效06：4D炫酷光影效果

今天，小编将与大家分享web前端特效荟萃系列第六期，喜欢把玩儿炫酷效果的小伙伴快快看过来^_^ ，希望大家喜欢呦～第六期，给大家分享一个使用CSS及javascript实现的4D炫酷光影效果。相关代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo…
6、js深入学习绕不开的原型知识

最近在看underscore源码，涉及到js原型相关的知识，于是重温了一遍，在此做下记录。 js原型是其语法的一个难点，也是一个重点，要深入学习js必须掌握的点。要想读懂别人的框架和库，了解这些基础知识是必不可少的。 js原型主要为了提取公共属性和方法，实现对象属性和方法的继承。说到原型，可能就有几个相关的词： p…
7、回顾 2017，展望 2018 JavaScript 发展趋势

原文出处 The Top JavaScript Trends to Watch in 2018 – Hacker Noon 如果2017年你被项目折磨的死去活来，那么这篇文章就是为你准备的。你可以把本文作为一个指南，为2018规划您的学习计划。 React vs. Vue.js 没有多少人相信Vue将成…
8、JS的中的 for in 循环有什么问题？

答案:for循环语句 for in *循环 js中for循环 for循环 forin8 for in foreach…回答问题,赢新手礼包苦等1分钟: 陈小春有没有演过只会工作不会做爱的电…
9、Webpack 4.0.0 beta.0 发布，不再支持 Node.js 4

Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle – 通常只有一个，由浏览器加载。 Webpack 4.0.0 已发布首个 beta 测试版本，带来了大量…
10、最完整的前端框架Vue.js介绍

编辑推荐: 本文来自于51cto ,Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。本文详细介绍，希望可以帮助正在学习的你。摘要 2016年最火的前端框架当属Vue.js了，很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。授…
11、《React 学习之道》The Road to learn React (简体中文版)

通往 React 实战大师之旅：掌握 React 最简单，且最实用的教程。前言《React 学习之道》这本书使用路线图中的精华部分用于传授 React，并将其融入一个独具吸引力的真实世界 App的具体代码实现。如何掌握 React 存在特别多的路线图
12、CompatWebView：WebView 的 JavaScriptInterface 注入漏洞解决方案

CompatWebView CompatWebView是为了解决WebView的JavaScriptInterface注入漏洞漏洞介绍：CVE-2012-6636 CVE-2013-4710 官方说明：addJavaScriptInterface This method can be used to allow JavaScript to control the host …
13、年终跳槽小结-前端篇

年底了，又将迎来一波跳槽小高峰。算下来工作也两年半了，最终还是决定换个环境继续折腾。跳槽的目的无疑是为了更好的发展以及更高的薪酬。然而我并不打算讨论这些“政治问题”，而是想回顾下这些年来，自己在技术…
14、React + Electron 搭建一个桌面应用

当你冲这个标题点进来的时候，我猜你一定知道 React 是什么，更多详情请戳这里，就不介绍React了，一个神般存在的前端框架。另外，浏览器和移动端横行的时代，为什么还需要桌面应用？我就不解释了，反正优点很多，做为技术多学一点总没错。 Electron 简单介
15、vue无缝滚动

vue-seamless-scroll 一个简单的基于vue.js的无缝滚动在线文档demo 小demo English Document 安装 NPM {代码…} 使用 ES6 详情的demo页面 example-src/App.vue {代码…} 普通的使用方法 (script标签引入)…
16、vue实现前进刷新，后退不刷新

最近在用vue尝试着做移动端的项目。希望实现前进刷新、后退不刷新的效果。即加载过的界面能缓存起来（返回不用重新加载），关闭的界面能被销毁掉（再进入时重新加载）。例如对a->b->c 前进（b,c）刷新，c->b->a 后退（b,a）不刷
17、了不起的 Gatsby.js

Amway Gatsby.js 是一个基于 React 的静态网站生成器 Blazing fast static site generator for React 前一阵看 React 官网文档的时偶然发现的 Kyle Mathews 小哥在 2015 年开了这个坑到目前已有 17k+ 的 star，…
18、Node.JS高效压缩解压zip文件：将child_process执行结果输入stdout流

在 Node.js 中有很多与zip压缩解压相关的库，比如 node-unzip, adm-zip, archiver等。不过最近在低端ARM芯片压缩大目录时，会非常慢。其实 Node.JS 是不太适合计算密集型的压缩与解压指令的，在较便宜的嵌入式设备上的性能并不是很好。并且archiver/node-unzip 这些包也非常大，要占用几M的空。其实使用 7zip(wi…
19、利用NODEJS+Puppeteer实现服务器保存网页为图片和PDF

今年5月在github上创建的项目，属于比较新的chromium无头浏览器类库。 Puppeteer在项目中的实际使用基础安装选用Puppeteer的主要原因有两点， 1：GOOGLE官方维护，活跃度很高，个人觉得前途光明。 2：我们的产品在chrome上适配最好。目前最新版本是 0.13.0 ，我们采用 0.12.0 版本，因 …
20、[译]从2.4万篇文章中挑出的最棒的 JavaScript 学习指南（2018版）

译者注：原文作者研究了近2.4万篇 JavaScript 文章得出这篇总结，全文包含学习指南、新人上手、Webpack、性能、基础概念、函数式编程、面试、教程案例、Async Await、并发、V8、机器学习、数据可视化、调试、单元测试等章节，非常适合用于对自己 JavaScript 技术栈的比对，用于查漏补缺，适合收藏阅读。有删减。文中如有…
21、前端工程师的未来在哪里？

阿里妹导读：很多童鞋在上次的问卷调查里表示，希望多推出一些前端方向的内容。今天为大家分享一篇关于前端工程师职业发展的文章，抛砖引玉，期待与大家一起交流探讨。我是成曰，目前在蚂蚁金服数据平台部任职前端工程师，从事数据中台产品的研发。目前对前端架构与质量、用户体验、TypeScript比较感兴趣。 …
22、良好的HTML编码风格

首发于fxm5547的博客 HTML编码规范 1 前言 HTML作为描述网页结构的超文本标记语言，在百度一直有着广泛的应用。本文档的目标是使HTML代码风格保持一致，容易被理解和被维护。 2 代码风格使用 2 个空格做为一个缩进层级，不允许使用 4 个空格
23、vue-cli之webpack3构建全面提速优化

前言伴随着vue的全球化，各种vue的组件框架越来越完善，从早期的element-ui到vux，iview等越来越多高质量的项目，使用vue进行前端构建已然是一件工程化，模块化，敏捷化的事情在这其中，相信很多人都会选择官方的vue-cli初始化工程模板，然
24、从 18000 篇中脱颖而出的 45 个最棒的 React.js 学习指南（2018 版）

原文 – Learn React.js from Top 45 Tutorials for the past year (v.2018) 原文作者 – Mybridge 原文地址 – https://medium.mybridge.co/learn-react-js-from-top-45-tutorials-for-the-past-year-v-2018-28b7f4d4b2c4 译者 – hijiangtao 译文地址 – https://hijiangtao.github.io/2018/01/23/learn-react-js-f…
25、如何用 React 实现滚动动画

简评：滚动动画让组件向下滚动时出现在页面上。这篇文章是介绍如何使用 React 和 CSS3 做到这一点。这里将通过构建一个简单的例子来学习这个滚动动画。首先构建 Header 组件。 {代码…} 添加样式。 {代码…} …
26、vue引入新版 swiper,vue-awesome-swiper填坑

关于新版 vue-awesome-swiper 问题为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的swiper不会自动播放？为什么我的s
27、从2.4万篇文章中挑出的最棒的 JavaScript 学习指南（2018版）

从2.4万篇文章中挑出的最棒的 JavaScript 学习指南(2018版) 标签: javascript …积分:142 排名:千里之外原创:0篇转载:4篇译文:13篇评论:0条文章…
28、ShadowNode: 以更轻量级的方式使用 Node.js

好久不见，Yorkie 最近做了一个小东西，在此分享给大家！先放个链接： Rokid/shadow-node 从名字来看，他可不是一个 Node.js 的 C++ Addon，而是可以运行 Node.js 程序的另一个运行时（Runtime），相比 Node.js，具有更快的启动速度以及更小的内存占用、更加节省内存的模块加载方式！原来一个 Node.js 应用…
29、基于 keras-js 快速实现浏览器内的 CNN 手写数字识别

在这篇文章中，我会快速地介绍如何使用 keras 训练一个简单的识别 MNIST（一个手写数字数据集）的 CNN（卷积神经网络），并且把训练好的网络应用到 web 浏览器内。 DEMO 地址：starkwang.github.io/keras-js-de…
30、web图像优化(5)

避免使用有损编解码器重新压缩图像建议始终从原始图像压缩。重新压缩图像有后果。假设您使用了已经被压缩的质量为60的JPEG。如果您使用有损编码重新压缩此图像，则会变得更糟。每轮新一轮的压缩都会引入分代丢失 – 信息将会丢失，并且压缩伪像将开始建立
31、Vue 2.0学习笔记：使用Vue创建Modal组件

Modal弹框在Web应用或者Web页面上非常常见，很多时候在不同的项目都会重写这样的一个Modal弹框。为了能偷懒，思考了一下，能不能写一个组件，比如说使用Vue创建一个组件，一个Modal组件，让其能在各个Web页面或者应用上使用。在这篇文章中，学习一下如何使用 transition 和 slots 来创建可重用的Modal组件。 Modal构…
32、每日一博 | Vue 框架之 goods 组件开发

一、布局 Flex Flex 布局，可以简便、完整、响应式地实现各种页面布局，Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 // 指定为 Flex 布局 display: flex； // 主要属性 flex: none | [ <‘flex-grow’> <‘flex-sh…
在 JavaScript 中，(a ==1 && a== 2 && a==3) 有可能是 true 吗？原链接：https://stackoverflow.com/questions/48270127/can-a-1-a-2-a-3-ever-evaluate-to-true 更多文章参见： https://github.com/elevenbeans/elevenbeans.github.io 一个有趣的问题：在 JavaScript 中，(a ==1 && a== 2 && a==3)是否有可能为true？这是一道我被某科技公…
34、我们编写 React 组件的最佳实践

刚接触 React 的时候，在一个又一个的教程上面看到很多种编写组件的函数，尽管那时候 React 框架已经相当成熟，但是并没有一个固定的规则去规范我们去写代码。在过去的一年里，我们在不断的完善我们的做法，直到…
35、软件工程师需要了解的网络知识：从铜线到HTTP

软件工程师需要了解的网络知识：从铜线到HTTP（一）—— 前言 2018-1-26   /   阅读数：830   /   分类：操作系统写作目标本文面
36、CSS Grid 系列(下)-使用Grid布局构建网站首页

by Chris House 译者：若愚老师想要更好的阅读体验可在饥人谷技术博客查看原文要看懂这篇文章，推荐先简单过一遍姊妹篇 CSS Grid 系列(上)-Grid布局完整指南当我开始一个项目，并开始计划如何布局主页时，我的…
37、Node.js系列-http

前言：最近一直忙着公司项目的事，战友们的留言也没空回复，博客也有段时间没有更新了，年底了就是一个的忙啊~~~（ps：同感的也给个赞吧）现在前端的就是一直地更新一直有新的东西出来，什么ES2015，ES2016，到现在已经ES2018
38、前后端分离实践：基于vue实现网站前台的权限管理

Javascript做为当下的热门语言，用途很广泛，从前端到后端处处可见其存在，该技术如今在我们项目内部也大量使用来开发诸如CMS系统以及其他其他一些数据分析系统的前端页面，为此个人非常感兴趣并将其作为帽子卡的扩展内容来进行课余学习。 Jav
39、前端每周清单第 48 期：Slack Webpack 构建优化，CSS 命名规范与用户追踪，Vue.js 单元测试

前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注前端之巅微信公众号（ID: frontshow），及时获取前端每周清单。新闻热点国内国外，前
40、JavaScript框架短暂的生命周期

看新闻很累？看技术新闻更累？试试下载InfoQ手机客户端，每天上下班路上听新闻，有趣还有料！根据Stack Overflow一项新的分析，JavaScript框架的生命周期是非常短暂的。但是这个数据也展现了主流框架的寿命和满足特定需求的框架的寿命是有所差异的。在一篇博客文章中，Stack Overflow的开发人员Ian A…
41、Laravel框架中缩小Vue应用的体积

这两天写一个很小的Laravel+Vue的前后端分离应用，前端的代码文件并不多，但webpack打包生成的app.js居然有3M，生成的production版也有1.4M，放到自己的服务器上，那速度完全无法忍受。于是探究起如何缩小应用体积。定位导致应用体积大的原因这里使用 webpack-bundle-analyzer ，该插件可以将内容束显示为很直观…

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

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

关注我

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

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

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