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

使用babel避免webpack编译运行时模块依赖；vue监听对象及对象属性；#hello，JS：11JS脚本异步加载专题；webpack打包（有面试题）；前端架构之vue+axios 前端实现登录拦截（路由拦截、http拦截）；计算树结点路径的一种Javascript的实现；React组件隔离；Generator：JS执行权的真实操作者

使用babel避免webpack编译运行时模块依赖引言 babel是一个非常强大的工具，作用远不止我们平时的ES6 -> ES5语法转换这么单一。在前端进阶的道路上，了解与学习babel及其灵活的插件模式将会为前端赋予更多的可能性。本文就是运用babel，通过编写babel插件解决了一个实际项目中的问
vue监听对象及对象属性监听整个对象，使用watch就行 {代码…} 监听对象中具体属性的变化，需要使用watch配合computed {代码…}
#hello，JS：11JS脚本异步加载专题前言：在梳理知识点的时候，发现作为浏览器渲染中的机制之一——异步加载机制，当用户访问站点，需要下载各种资源，例如JS脚本，CSS，图片，iframe等，它是实现现代网站进行加载页面时一种必不可少的手段。查资料加上老师拓展课程均对于异步加载机制还有很多方法可以
webpack打包（有面试题）1.打包入口 {代码…} 2.css文件处理引入css css-loader 在较新的版本中使用mini-css-extract-plugin提取css文件 3.本地开发服务器：webpack-dev-server 路径重定向，支持https，浏览器中可以显示编译错误，可以…
前端架构之vue+axios 前端实现登录拦截（路由拦截、http拦截）前言：之前写了一个node的jwt认证，为了能和node对应，跑通整个流程，前端将设置登录拦截，分别为路由拦截，http拦截。更多文件请看 github地址和node server 对应：前端架构之node jwt认证大致流程：在进行路由跳转时，利用vue-r
计算树结点路径的一种Javascript的实现树结构如下： {代码…} 主要算法如下： {代码…} {代码…} 运行结果： {代码…}
React组件隔离用技术改变生活，用生活完善技术。来自微播易一枚向全栈方向努力奔跑的前端工程师。微信同步:wDxKn89 前言组件隔离适用范围同一个页面引用多个相同的自定义公共组件(该类组件拥有自己的Redux)并且这些组件之间有交互。案例背景在一个页面中存在两个
Generator：JS执行权的真实操作者ES6提供了一种新型的异步编程解决方案：Generator函数（以下简称G函数）。它不是使用JS现有能力按照一定标准制定出来的东西（Promise是如此出生的），而是具有新型底层操作能力，与传统编程完全不同，代表一种新…
聊聊 Git 原理说起Git，相信大家都很熟悉了，毕竟作为程序猿，每天的业余时间除了吃饭睡觉就是逛一下全世界最大的开（tong）源（xing）代（jiao）码（you）网站GitHub了。在那里Git是每个人所要具备的最基本的技能。今天我们不聊Git的基本应用，来聊一聊Git的原理。<!– more –> Git给自己的定义是一套内存寻址文件…
如何读取 JSON 里嵌套的深层数据？我这儿有各语言通用方案前言使用JSON格式进行多个端特别是前后端之间通信已成为主流方案之一， PHP、java、objectC、JavaScript 这几种语言是我所在团队接触比较多的主要开发语言。有一个问题有时候，很多时候，从接口给出的数据会存在数据嵌套现象，比如在一款记
Web 应用架构入门之 11 个基本要素译者：读完这篇博客，你就可以回答一个经典的面试题：当你访问Google时，到底发生了什么？原文：Web Architecture 101 译者：Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。当我还是小白的时候，如果知道Web应用架构就好了！ …
vuex工作原理详解前言 vuex作为vue官方出品的状态管理框架，以及其简单API设计、便捷的开发工具支持，在中大型的vue项目中得到很好的应用。作为flux架构的后起之秀，吸收了前辈redux的各种优点，完美的结合了vue的响应式数据，个人认为开发体验已经超过了Rea
我用Vue和React构建了相同的应用程序，这是他们的差异在工作中使用了Vue之后，我已经对它有了相当深入的了解。同时，我也对React感到好奇。我阅读了React的文档，也看了一些教程视频，虽然它们很棒，但我真正想知道的是React与Vue有哪些区别。这里所说的区别，并不是指它们是否都具有虚拟DOM或者它们如何渲染页面。我真正想要做的是对它们的代码进行并排比较，并搞清楚在使…
使用 Vue 编写一个长按指令原文链接：Building a long press directive in Vue 译者：OFED 使用 Vue 编写一个长按指令有没有想过只需按住一个按钮几秒钟就能在你的 Vue 应用中触发一个功能？有没有想过创建一个按钮，按下一次就可以清除单次
【2018年7月GitHub开源项目排行榜】最近，7 月份最热门的 GitHub 项目已经诞生，本文列举了 9 个最热门的开源项目，以供开发者参考和使用。
前端每日实战：112# 视频演示如何用纯 CSS 创作切换背景的按钮悬停效果效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 [链接] 可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。 [链接] …
前端单测的那些事前言因为经常需要维护一些大型的业务项目和一些自己的开源项目，所以为了更好的“规范”代码质量和迭代的稳定性，开始写了一些单测。下面也主要是自己的一些总结吧，由于测试工具和框架很多，这里只介绍一些browser端常用的测试工具，文中如果有问题也欢迎拍正！！
【2018年7月份GitHub上最热门的JavaScript项目】7 月份 GitHub 上最热门的JavaScript项目排行已经出炉啦，在本月的名单中，又有哪些热门的新项目加入呢？一起来看看。详见
通过Recompose库掌握React函数组件原文地址：https://blog.usejournal.com/mastering-react-functional-components-with-recompose-d4dd6ac98834 原文作者：Ilya Suzdalnitski
什么是 Dweb？(中英) 原文：hacks.mozilla.org/2018/07/int… 作者：Dietrich Ayala 发表时间：July 31, 2018 译者：西楼听雨  发表时间：2018/8/18 原文是 Mozilla 开发者网站发布的关于 Dw
ES6指北【5】——展开语法(spread syntax)展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。(译者注: 字面量一般指 [1, 2, 3] 或者 {name: “m…
前端架构之node jwt认证前言：这次使用node express jwt实现一个小小的认证，数据库之类的慢慢在添加上去，先跑通整个流程，基本上是可以使用到项目里面的了。这次就不用gulp编译了，添加了log4.js一个错误日志，还稍微做了一下压测。就不详细展开了，有兴趣的可以下载来看：
React 源码全方位剖析当时在各种前端框架或库充斥市场的情况下，出现了大量优秀的框架，比如 Backbone、Angular、Knockout、Ember 这些框架大都采用了 MV* 的理念，把数据与视图分离。而就在这样纷繁复杂的时期，React 诞生于 Faceboo…