20171127 前端开发日报-前端开发博客

一次 H5 「保存页面为图片」的踩坑之旅；纯 CSS 实现波浪效果；前端本地文件操作与上传；函数声明、函数表达式、匿名函数、立即执行函数详解；Chromium 新的弹窗机制以及 HTML 的 dialog 元素；RxJS 5 中文文档；CSS Animations vs Web Animations API；HTML5 按钮元素新属性简介

一次 H5 「保存页面为图片」的踩坑之旅最近丁香医生的产品大佬又双叒叕搞事情，想要在 H5 中做一个医生邀请提问的功能，可以将医生的二维码名片分享出去，支持移动、PC 和微信。之前的图片是由后端生成的，并且会缓存三天，导致信息更新不及时。由前端来做就能避免这些问题。我一听，这好说，不就是个保存图片的功能么，简单看看需求：完善卡片信息…
纯 CSS 实现波浪效果通常实现波浪的曲线需要借助贝塞尔曲线，本文转换思路，通过圆角和 CSS 动画实现了一种波浪效果。
前端本地文件操作与上传前端无法像原生APP一样直接操作本地文件，否则的话打开个网页就能把用户电脑上的文件偷光了，所以需要通过用户触发，用户可通过以下三种方式操作触发：通过input type=”file” 选择本地文件通过拖拽的方式把文件拖过来在编辑框里面复制粘贴第一种是最常用的手段，通常还会自定义一个按钮，然后盖在…
函数声明、函数表达式、匿名函数、立即执行函数详解定义函数的方式有三种：

1. 函数声明： function 函数名称（参数：可选） { 函数体 }

2. 函数表达式： var express= function 函数名称：可选（参数：可选） { 函数体 }

3. 构造函数： var fun =new Function(参数：可选);

最常用的是函数声明和函数表达式。
Chromium 新的弹窗机制以及 HTML 的 dialog 元素 Chromium 团队在 Chrome 51 中移除了 onbeforeunload 事件中使用弹窗的支持。除了 alert/confirm/prompt，我们有更好的替代选择。
RxJS 5 中文文档周刊君最近发现，RxJS 有中文文档啦！
CSS Animations vs Web Animations API Web Animations API 与 CSS Animations 的异同。
HTML5 按钮元素新属性简介本文介绍 HTML5 表单提交按钮新增的 formaction 等 6 个属性，以及它们在实际开发中的应用。
React 性能优化——工具篇本文介绍了一些常用的用于检测 react 代码性能的工具。
Webpack Freestyle 之 Long Term Cache 一起来学习如何用 Webpack 实现持久性缓存。
高效压缩 CSS bundle 通过缩短选择器类名和使用作用域隔离来压缩 CSS bundle。
谷歌是如何构建 Web 框架的 “谷歌的代码库由全球数十个办公的超过 2.5 万名软件开发工程师所共享，平均每天他们会提交 1.6万次代码修改请求，他们是如何做到生产环境的稳定的呢？”
使用Gulp构建前端自动化方案
#前端技术#【CSS 网格布局完全指南】详见：本文翻译自《A Complete Guide to Grid》。在文中，作者将逐步带大家学习 CSS Grid 布局，涉及网格布局的概念、术语、网格容器、网格项以及相应的重点与难点。
美团点评收银台前端可用性保障实践本文主要讨论的是前端可用性相关话题，以在美团点评移动端网页收银台的实践为例，讲解收银台前端是如何保障可用性的。
WebAssembly：解决 JavaScript 痼疾的一颗银弹？凭借着底层技术的跨越式发展，以及浏览器厂商的一致支持，WebAssembly 一定会有一个光明的未来，也许真的可以成为一颗 Web 开发的“银色子弹”。
GPU Accelerated JavaScript：gpujs gpu.js 将自动将专门编写的 JavaScript 函数编译成着色器语言，并使用 WebGL 在GPU上运行。
JS转换转义字符这周在开发后端系统的时候，遇到了需要将后端传过来的转义字符进行转义然后再渲染到html中，因为之前也没有遇到过，所以研究了研究，记录一下。记得上大学时候学习C语言就有提到过转义字符，比如 n 表示回车， t 表示水平制表符等等。其实所有编程语言都有转移字符，转移字符出现的原因基本上就两点： …
美团点评监控平台前端 SDK 开发实践监控究竟要做什么呢？简而言之：及时上报错误，收集有效信息，提供故障排查依据。
Node.JS读取中文TXT编码文件显示乱码问题解决方案 Windows下默认的编码格式是ASNI，其实这并不是真正的编码格式。但Node.JS默认的编码、解码则是目前通用的UTF-8。因此在读取Windows默认的TXT文件时会显示乱码： var fs = require(‘fs’) fs.readFile(‘readme.txt’, function(err, data) { console.log(data.toString()) }) 想要解决这个问题，则可通过将txt文…
现代前端科技解析：数据响应式系统本文将对现代前端框架中的数据响应式系统进行解析，并从零开始一步步实现一个与框架解耦的数据响应式系统。
WebVR 开发教程：深度剖析 WebVR API 1.1 已经发布，2.0 草案也在拟定中，WebVR 走向大众浏览器是早晚的事情。
美团点评点餐 Nuxt.js 实战通过 nuxt.js 我们可以很轻易的搭建出一个可扩展可定制的 SSR 框架，大大减少时间成本。
HTML to React Components 将 HTML 文件转换为 React 组件，酷不酷~
构建 WebGL 应用程序的几种方式本文介绍了几种构建 WebGL 应用程序的框架。
笔记：使用 React Native 重写大型 Ionic 应用本文主要分享基于 React Native 重写 Ionic 应用Growth 过程中遇到的一些坑。
基于拆分包的 React Native 在 iOS 端加载性能优化自从Facebook于2015年在React Conf大会上推出React Native，移动开发领域就掀起了一股学习与项目实践的热潮。ReactNative不仅具有良好的Native性能，更具备web快速迭代的能力。这两大特性使得React Native在推广的过程中顺风顺水，而且在国内互联网公司的应用比国外还火热。58 APP从2016年就开始基于ReactNative进行项目…
JavaScript 混淆代码的逆向分析带你一步步分析混淆后代码，这是对耐心和技术的考验，并非无章可循。