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

JavaScript中高阶函数的魅力；作为JavaScript开发人员，这些必备的VS Code插件你都用过吗；基于Vue开发的项目小结；纯css实现瀑布流（multi-column多列及flex布局）；Ajax 与异步数据传输；7 分钟理解 JS 的节流、防抖及使用场景；Webpack4核心剖析；webpack 定制前端开发环境

JavaScript中高阶函数的魅力AOP(面向切面编程)的主要作用就是把一些和核心业务逻辑模块无关的功能抽取出来，然后再通过“动态织入”的方式掺到业务模块种。这些功能一般包括日志统计,安全控制,异常处理等。AOP是Java Spring架构的核心。下面我…
《作为JavaScript开发人员，这些必备的VS Code插件你都用过吗？》如今，Visual Studio Code无疑是最流行的轻量级代码编辑器。而 VS Code的强大无疑来自于它的插件市场。（by 葡萄城官网）
基于Vue开发的项目小结近期项目组在开发一个小程序管理平台，前端是基于vue开发的，这里就我开发的部分做个小结。导航守卫有些时候我们需要在路由发生改变的时候，做一些操作。比如编辑内容如果未保存，需要在跳转前弹窗提示。vue-router 提供的导航守卫就是用来解决这类问题的。在本次项目用到了 beforeRouteLeave ，导航离开组件…
纯css实现瀑布流（multi-column多列及flex布局）瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了
Ajax 与异步数据传输Ajax 全称是异步的 JavaScript 和 XML 。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如…
#前端技术#【7 分钟理解 JS 的节流、防抖及使用场景】详见：由一道面试题引出 JS 函数防抖和函数节流，并通过实例分享其概念与使用场景。（作者：薄荷前端）
Webpack4核心剖析 Webpack 是现代Web应用程序的静态模块打包工具，它会递归的构建应用程序各个模块的依赖关系图，然后将所有模块打包成一个或多个 bundle 。截止本文成文之时，Webpack已经更新至 4.0.1 版本，增加了诸多打包和执行性能相关的支持，是目前应用最广泛、社区最活跃的Web前端代码打包方案。 Webpack提出了入口 entr…
webpack 定制前端开发环境 npm install webpack webpack-cli -g # 或者 yarn global add webpack webpack-cli # 然后就可以全局执行命令了 webpack –help 1.2 webpack 的基本概念 webpack 本质上是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们把多个模块的代码打包 webpack 会把我们项目中使用到的多个代码模…
《JavaScript 的代价》建立交互式网站包括向用户发送 JavaScript 。通常，太多了。你是否经历过在一个手机页面上，它看起来已经加载好了，但是点击一个链接或者试图滚动页面的时候，什么也没发生？（by 开源中国）
NodeJS快速上手指南本文基于2015年所写的一篇读书笔记整理，彼时 node.js 的版本号还停留在 v0.12.x ，社区也还未完成与 io.js 的最终合并，文中出现的部分API时至今日已经被废弃或者迁移。但是这些API层面的变化都可以对照官方文档找到相应说明以及替代API，总体上并不影响通过本文快速了解整套技术栈的特性。 NodeJS开源项目…
异步事件管理：从Promise与async/await到RxJS 早期的浏览器端异步编程主要依靠回调函数、事件监听、发布/订阅、 Promise的各类polyfill 这四种方式进行，ES6推出之后在完整实现了Promise规范的同时，还引入了 Generator 函数及其衍生的 async/await 语法糖，将JavaScript异步编程带入了全新阶段。而随后诞生的 rxjs 则进一步改善了JavaScript异步编程的体验。 …
函数式 JavaScript 快速入门原文地址：A Quick Introduction to Functional Javascript 原文作者：Angelos Chalaris 译文出自：掘金翻译计划本文永久链接：github.com/xitu/gold-m… 译者：Zheng7426 校
Vue中的状态管理特别声明，本文根据 @Hassan Djirdeh 的《 Managing State in Vue.js 》一文所整理。 Vue中管理应用程序的状态有多种不同的方法，了解状态管理也是学习Vue知识的基础部分，也是很重要的一部分。从这篇文章开始，我们来开始学习Vue应用程序中的状态管理。在这篇文章中会先简单的介绍Vue应用程序中状态管理的大多数方法…
从一张搞笑图看JavaScript的语法和特性逛知乎的时候发现@DDDD转了一张图，这张图对js魔法的吐槽可谓非常到位。下面，我们就从这张图出发来详细讲讲js。数字类型与精度问题虽然js是弱类型语言，声明变量时也不需要显式指定类型。但是，数据本身依旧还是有类型的，比如数字和字符串就是以不同形式存在的数据。在js中，所有数字的类型都为number。其中，…
Web加载速度优化清单网页加载速度是衡量一个网页好坏的重要标准，网页遗弃率随网页加载时间的增加而增加。据说近一半的用户希望网页加载时间不超过2s，超过3s一般就放弃该网页。时间就是生命，干等着，谁愿意平白无故地+1s呀，所以今…
前端技术全景展望如果你正在进行前端项目的技术选型，可能就会发现，你已经跟不上前端生态的变化了，甚至令你眼花缭乱，因为现在有太多的技术栈供你选择：React、Flux、Angular、Aurelia、Mocha、Jasmine、Babel、TypeScript、Flow、Vue…这些技术栈的出现试图前端开发变得简单化、模块化、工程化，但有一部分却增加了学习成本和项目…
HTTP2 详解维基百科关于 HTTP/2 的介绍，可以看下定义和发展历史: Wiki RFC 7540 定义了 HTTP/2 的协议规范和细节，本文的细节主要来自此文档，建议先看一遍本文，再回过头来照着协议大致过一遍 RFC，如果想深入某些细节再仔细翻看 RFC RFC7540 Why use it ? HTTP/1.1 存在的问题: 1、TCP …
使用Jest测试JavaScript (入门篇)Jest是 Facebook 的一套开源的 JavaScript 测试框架，它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。并且它对同样是 Facebook 的开源前端框架 React 的测试十…
Vue项目预渲染机制引入实践周末想顺便把已经做好静态页面的webApp项目做一下SEO优化，由于不想写蹩脚的SSR代码，所以准备采用预渲染，本来想着网上有这么多预渲染的文章，随便找个来跟着做不就完了嘛，结果年轻的我付出了整个周末….. 这篇文章就记录一下最后是怎么配置的 T.T 声明：以下配置只保留有必要的生成目录这里使用 …
Js学习笔记：闭包这个周末，注意力都在学习基础Js知识上面，刚好看到了闭包这个神圣的东西，所以打算把这两天学到的总结下来，算是巩固自己所学。也可能有些不正确的地方，也请大家看到了，麻烦在评论下提醒一下，算是互相学习了。
熟悉 Vue ？你能解释这个死循环吗？循环出现的条件： key="Math.random()" 子组件在 created 中输出计算属性并改变 data 与 Vue watcher 的添加机制有关，初步认为是 Vue 的小 bug，dep 对象的 targetStack 管理不当导致 ====
前端每日实战 2018 年 8 月份项目汇总（共 29 个项目）《前端每日实战》专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书！
前端性能优化：2018 年 JavaScript 开销及优化工具和方法 “ 现代前端开发中性能瓶颈依然在于 JavaScript，而且前端项目中 JavaScript 开销越来越大。本文详细介绍了 JavaScript 开销及原因，更是给出了相应的前端性能优化工具和方法。”
一个合理的生产环境的 Web 应用程序应该是什么样子的好的工具的产生使开发与部署变得十分容易，作为一个曾经的云服务从业人员，鼓励大家拥抱云服务。拥抱这些现成的技术栈。
前端实验手札——拖拽旋转图片的实现及思路让我们来看看以下这道题：已知点A(x1,y1)和点B(x2,y2)，求两点求与圆点O(x0,y0)的夹角θ的角度：∠θ=arctan -arctan 是否有股熟悉的味道？涉及
《从零构建前后分离的web项目》：前端了解过关了吗？前端基础架构和硬核介绍技术栈的选择首先我们构建前端架构需要对前端生态圈有一切了解，并且最好带有一定的技术前瞻性，好的技术架构可能日后会方便的扩展，减少重构的次数，即使重构也不需要大动干戈，我通常选型技术栈会参考以下三点：一、提出自身业务的需求 SEO
用JavaScript创建神经网络的有趣教程，一定要让你知道作者 | Daniel Simmons 译者 | 王天宇编辑 | Jane 出品 | AI科技大本营【导读】本文中作者为初学者解释了如何使用 JavaScript 来搭建一个神经网络。不用担心，这不是一份深入介绍隐藏输入层、激励函数或如何使用 TensorFlow 的复杂教程，而是一次轻松实践。即使你不懂神经网络背后的深入内容，也可以完成这个…
妙法攻略：渐变虚框及边框滚动动画的纯 CSS 实现如题。CSS 实现各种边框效果。
浅谈 IBU 酒店大前端在当今互联网+高速崛起的时候，也许大前端这个概念已经成为前端技术老生常谈的话题，但是正正去做好“大前端”，显然并不容易。为什么不容易呢？我觉得最关键的是人才匮乏，虽然互联网发展10多年了。前端技术人员依然稀缺。导致这样问题原因之一是我们教育环境。大家都知道在我们大学里不仅没有前端主修课程，而…
一眼看穿JS继承我们知道JS是OO编程，自然少不了OO编程所拥有的特性，学习完原型之后，我们趁热打铁，来聊聊OO编程三大特性之一——继承。
JavaScript六种非常经典的对象继承方式重点：利用原型让一个引用类型继承另外一个引用类型的属性和方法。构造函数，原型，实例之间的关系：每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。
详解 vue 双向数据绑定的原理，并实现一组双向数据绑定Object.defineProperty是ES5新增的一个API，其作用是给对象的属性增加更多的控制Object.defineProperty(obj, prop, descriptor)参数 obj: 需要定义属性的对象（目标对象）prop: 需被定义或修改的属性名（对象上的…
【Vue】通过自定义指令回顾 v-内置指令Vue.js 的各种指令（Directives）更加方便我们去数据驱动 DOM，例如 v-bind、v-on、v-model、v-if、v-for、v-once 等内置指令，这些指令的职责就是当表达式改变时将某些行为应用到 DOM 上，尽量不去操作增删改 DO…
掌握react，这一篇就够了react众所周知的前端3大主流框架之一，由于出色的性能，完善的周边设施风头一时无两。本文就带大家一起掌握react。
如何实现前端录音功能前端实现录音有两种方式，一种是使用MediaRecorder，另一种是使用WebRTC的getUserMedia结合AudioContext，MediaRecorder出现得比较早，只不过Safari/Edge等浏览器一直没有实现，所以兼容性不是很好，而Web
什么时候该用vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化官方是这么介绍的为什么要判断什么时候使用Vuex 很简单的道理，你总不能什么时候都使用Vuex吧。鲁迅说: –当你无法很好进行数据管理的时候，你才需要用Vuex …
react 学习手记我们通常的做法是，在最外层包裹一个div标签，但是这个div标签最终会渲染到页面中，如果我们不想要让它显示的话，我们可以利用Fragment来解决。
我是如何用 Webpack 虐待代码尺寸的 (第一回合) 徐健：我是如何用 Webpack 虐待代码尺寸的 (第一回合) 徐健：我是如何用 Webpack 虐待代码尺寸的 (第二回合) 徐健：我是如何用 Webpack 虐待代码尺寸的 (第三回合) 沉寂了一段时间, 主要是工作侧重点有一些调整
发布 umi 2.0，可插拔的企业级 React 应用框架距离 umi 1.0 发布已有半年，umi 在这段时间做了大量的重构和改进，438 个 commit，20 个 beta 版本，今天正式发布 2.0 版本，并调整定位为可插拔的企业级 react 应用框架。 umi 是什么？ umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，…
Javascript模块全揽之前写的文章急速Js全栈教程得到了不错的阅读量，霸屏掘金头条3天，点赞过千，阅读近万，甚至还有人在评论区打广告，可见也是一个小小的生态了；）。看来和JS全栈有关的内容，还是有人颇有兴趣的。
一口（很长的）气了解 Babel 挺全面的介绍，有 babel@7 相关的内容。
前端每日实战：125# 视频演示如何用纯 CSS 创作一个失落的人独自行走的动画效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 [链接] 可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。 [链接] …
从零开始制造的Webpack4多页面脚手架（通用所有H5多页面应用） Fork或借鉴请注明出处 @ HeavenBin 如果觉得对你有帮助的话，请也不要吝啬你手中宝贵的Star,使劲砸向我吧！这将是对我最大的鼓励！！！✧(∗≧ꇴ≦)人(≧ꈊ≦∗)✧ 项目构成 ├── build