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

Webpack4核心剖析；函数式 JavaScript 快速入门；NodeJS快速上手指南；Vue中的状态管理；异步事件管理：从Promise与async/await到RxJS；掌握react，这一篇就够了；什么时候该用vuex?；基于vue的架构上的一些优化

Webpack4核心剖析 Webpack 是现代Web应用程序的静态模块打包工具，它会递归的构建应用程序各个模块的依赖关系图，然后将所有模块打包成一个或多个 bundle 。截止本文成文之时，Webpack已经更新至 4.0.1 版本，增加了诸多打包和执行性能相关的支持，是目前应用最广泛、社区最活跃的Web前端代码打包方案。 Webpack提出了入口 entr…
函数式 JavaScript 快速入门原文地址：A Quick Introduction to Functional Javascript 原文作者：Angelos Chalaris 译文出自：掘金翻译计划本文永久链接：github.com/xitu/gold-m… 译者：Zheng7426 校
NodeJS快速上手指南本文基于2015年所写的一篇读书笔记整理，彼时 node.js 的版本号还停留在 v0.12.x ，社区也还未完成与 io.js 的最终合并，文中出现的部分API时至今日已经被废弃或者迁移。但是这些API层面的变化都可以对照官方文档找到相应说明以及替代API，总体上并不影响通过本文快速了解整套技术栈的特性。 NodeJS开源项目…
Vue中的状态管理特别声明，本文根据 @Hassan Djirdeh 的《 Managing State in Vue.js 》一文所整理。 Vue中管理应用程序的状态有多种不同的方法，了解状态管理也是学习Vue知识的基础部分，也是很重要的一部分。从这篇文章开始，我们来开始学习Vue应用程序中的状态管理。在这篇文章中会先简单的介绍Vue应用程序中状态管理的大多数方法…
异步事件管理：从Promise与async/await到RxJS 早期的浏览器端异步编程主要依靠回调函数、事件监听、发布/订阅、 Promise的各类polyfill 这四种方式进行，ES6推出之后在完整实现了Promise规范的同时，还引入了 Generator 函数及其衍生的 async/await 语法糖，将JavaScript异步编程带入了全新阶段。而随后诞生的 rxjs 则进一步改善了JavaScript异步编程的体验。 …
掌握react，这一篇就够了react众所周知的前端3大主流框架之一，由于出色的性能，完善的周边设施风头一时无两。本文就带大家一起掌握react。
什么时候该用vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化官方是这么介绍的为什么要判断什么时候使用Vuex 很简单的道理，你总不能什么时候都使用Vuex吧。鲁迅说: –当你无法很好进行数据管理的时候，你才需要用Vuex …
基于vue的架构上的一些优化嗨各位小伙伴好，好久没有写文章了，这次分享一下我们从使用node以来，前端架构上的一些优化如果看过我上一篇文章B站的前端之路的小伙伴可能知道我们从去年开始打烊使用node 到现在已经经历了一年的迭代，承载的访问量也从百万级别扩大到了现在的亿级别，这次补充一些干货吧~ vue如何实现热更新我们都知道，…
高效遍历匹配Json数据，避免嵌套循环工作中经常会遇到这样的需求：1.购物车列表中勾选某些，点击任意一项，前往详情页，再返回购物车依旧需要呈现勾选状态2.勾选人员后，前往别的页面，再次返回，人员依旧程勾选状态3.等等….
原生JS实现轮播图–第一章图片展示首先实现一个功能时，要从整体考虑，将大功能分解为多个小功能，在轮播图的实现中，首先最直观的，是展示出来的和未展示出来的足多张图片、可点击的多个按钮和底部提示圆点，这三部分；其次是在不进行任何操作的情况下，图片会自动朝一个方向循环滚动；最后是点击不同的按钮，图片会朝不同的方向滚动。注：本…
《Web 推送通知》系列翻译 | 第十一篇：FAQ && 第十二篇：常见问题以及错误反馈第十一篇：FAQ 原文地址：FAQ 译文地址：FAQ 译者：刘鹏校对者：杨芯芯、任家乐为什么推送在浏览器关闭的时候不工作这个问题颇有争议，主要是因为有一些场景使得这个问题比较难以追因和理解。让我们先从 Android 开始。Androi
React项目样式管理规范在最近的工作中，大大小小已开发过数个基于React的前端项目，从一开始的单打独斗到现在的多人协作开发，由于缺乏规范，样式管理一直是开发中的痛点，样式污染，难以定制化，依赖性高，各种问题层出不穷。痛定思痛，我们针对开发中遇到的问题并总结开发中的实际经验和网上的主
深入探究ES6之模块系统在上一篇《前端模块化，AMD和CMD的区别总结》中，介绍了commonJS规范下衍生出来的AMD和CMD。多年来，前端的js代码大都是以这种方式组织起来（再早连这个都没有。。。），但是从语言设计本身的层面上讲，官方一直没有设计出javascript的模块系统，
Angular 1.6.x最佳实践总结开发小组在2015年11月的时候，就已经开始尝试使用 webpack + babel + react + reflux 技术栈，但是团队对这种编译式前端开发的反馈并不友好，一方面webpack 1.x版本的打包效率仍然较差，每次保存操作后页面reload速度蜗牛一样缓慢，非常影响开发过程中的心情愉悦指数。另一方面，team的同学们对于传统 jQuery + backbone…
Vue-cli@3.0 插件系统简析作者：肖磊 Vue-cli@3.0 是一个全新的 Vue 项目脚手架。不同于 1.x/2.x 基于模板的脚手架，Vue-cli@3.0 采用了一套基于插件的架构，它将部分核心功能收敛至 CLI 内部，同时对开发者暴露可拓展的 API 以供开发者对 CLI 的
【常见Web安全漏洞】本篇文章将介绍几种常见的web安全漏洞，并给出了防范建议。详见（来自：小米运维）
Dweb: 基于 IPFS 的去中心化 Web 文件系统 (中英) 原文：Dweb: Building Cooperation and Trust into the Web with IPFS 作者：Kyle Drake, Marcin Rataj 发表时间：August 29, 2018 译者：西楼听雨发表时间： 201
《如何更愉快地使用rem —— 别说你懂CSS相对单位》rem是根em（root em）的缩写。rem是和根元素关联的，不依赖当前元素。不管你在文档中的什么地方使用这个单位，1.2rem的计算值是相等的，等于1.2倍的根元素的字号大小。（by Yuying Wu）
前端每日实战：127# 视频演示如何用纯 CSS 创作一个圆环旋转错觉动画（实际上没有任何元素在做旋转运动）效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 [链接] 可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。 [链接] …
VUE实例：使用 CSS Filter 处理图片 CSS 的 filter 函数，可以给图像设置高斯模糊，亮度，调整图像的对比度等的效果，利用 Vue.js 的双向绑定，可以十分方便的实现一个利用 filter 处理图片的应用。实现效果体验地址首先在 data 属性定义用来设置 filter 的值，取值范围大都是从0到100的，然后将这些值使用 v-model 指令绑…
从 1 到完美，用 js 和 react-native 写一个 APPfacebook 在 2013 年开源了 react 后，紧接着在 2015 年就又开源了 react-native，就此打开了用 js 和前端技术写原生 android&ios APP 之路。尽管到目前为止 react-native 最新版本是 0.56.0，还没有发布正式…
原来你是这样的http2……目前HTTP/2.0（简称h2）已经在广泛使用（截止2018年8月根据Alexa流行度排名的头部1千万网站中，h2占比约29%,[链接]）。写此文章的目的是：h2作为较新的技术，并逐渐占有率广泛，虽然目前有更新的QUIC，但其实现思…
React Native Icon方案：react-native-svg 原文地址：github.com/HuJiaoHJ/bl… 网上 React Native 的 icon 实现大都是使用iconfont方案，即：react-native-vector-icons 此方案存在一个问题：强依赖客户端打包，即每新增图标，就需要客户端