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

前端工程化总结；vue+webpack搭建单文件应用和多文件应用webpack.config.js的写法区别；JavaScript 最新特性实现的三大黑科技；CSS3实现音量控制动画；基于 socket.io 和 Vue2 开发的你画我猜前后端项目；我们前端是怎么找到工作的；Angular 4 基础教程；vue-schart ： vue.js 的图表组件

前端工程化总结为什么会出现前端工程化这个概念？当前端业务日益复杂化和多元化，就会出现许多问题。比如说：如何提高开发效率？如何保证项目的可维护性？如何提高项目的开发质量？多人合作，架构分层，模块设计，解耦，抽象，…
vue+webpack搭建单文件应用和多文件应用webpack.config.js的写法区别1.前言这几天，都遇到过有人问过相似的问题，就是用vue和webpack搭建目录的时候，怎么把单页面应用的配置改成多文件应用，或者是怎么把多文件应用的配置改成单文件应用。这个情况，我之前有处理过，公司的同事教…
JavaScript 最新特性实现的三大黑科技依次执行多项异步任务有时候，我们希望批量执行一组异步任务，但是不是并行，而是依次执行，这组任务是动态的，在一个数组里，当然我们可以用 for 循环然后一个一个 await 执行，但是还有另外一种方式： async function taskReducer(promise, action){ let res = await promise; return action(res); }…
CSS3实现音量控制动画先上效果图，由于时间关系，记录下实现过程。仔细观看效果，实现思路及用到的css3如下：采用svg绘制喇叭主体(假定喇叭由左右2个path组成)，动效实现：1，插入声波弧线并将位置matrix到喇叭口的竖线上: {代码…}…
基于 socket.io 和 Vue2 开发的你画我猜前后端项目没有参考任何源码, 完全独立编写基于 socket.io 和 vue 全家桶的《你画我猜》在线多人游戏前后端项目, 因为是使用 socket.io 框架, 通信功能几乎全是异步方式实现的, 所以遇到了不少异步及监听机制的坑, 在 client 端遇到的问题已经通过 removelistener 方法解决, 同时也遇到过 node 的单线程机制导致的全局污染的坑, 后…
我们前端是怎么找到工作的文章背景：结束d2之行或周末的前端群线下见面会，跟一些待毕业的学生或正在这个行业的从业者交流后我深切的感触到：在如今信息大爆炸的今天，搜索引擎这么方便的前提下，除了少部分乘上校招快车的幸运儿之外，大…
Angular 4 基础教程本系列教程的主要内容来源于 egghead.io get-started-with-angular 视频教程，但针对视频中的介绍的知识点做了适当地补充，建议有兴趣的同学直接查看该视频教程。另外建了个群有兴趣的朋友可以加一下 QQ 群：Angu…
vue-schart ： vue.js 的图表组件介绍 vue-schart 是使用vue.js封装了sChart.js图表库的一个小组件。支持vue.js 1.x & 2.x 仓库地址：https://github.com/lin-xin/vue-schart sChart.js 作为一个小型简单的图表库，没有过多的图表类型，只包…
JS 正则表达式火拼系列——正则表达式回溯法原理学习正则表达式，是需要懂点儿匹配原理的。而研究匹配原理时，有两个字出现的频率比较高：“回溯”。听起来挺高大上，确实还有很多人对此不明不白的。因此，本文就简单扼要地说清楚回溯到底是什么东西。 —— 由虾编分享
说说 Javascript 原型链在写复杂的 JavaScript 应用之前，充分理解原型链继承的工作方式是每个 JavaScript 程序员必修的功课。 —— 由Jackshi分享
探究http-proxy-middleware源码（探索在node-http-proxy基础上的封装处理和思考）一、http-proxy-middleware 与 node-http-proxy 配置http-proxy-middleware可以很容易地在connect, express, browser-sync实现http代理 http-proxy-middleware 是基于node-http-proxy实现的中间件二、简要介绍ht…
Alloy 前端周刊第 10 期分享前端好文 —— 由Joeyguo分享
postcss-lazysprite: 一种生成CSS 雪碧图的懒惰姿势本文原文链接：https://devework.com/postcss-…，转载请注明原始来源，谢谢！ postcss-lazysprite 是一个基于PostCSS 开发的用于生成雪碧图图片及其CSS 的插件，经过半年持续迭代，现已稳定用在微信旗下两款产…
七大 GitHub 生产力工具简评：GitHub 是一个面向开源及私有软件项目的托管平台，同时它也为程序员提供了生产力工具，旨在帮助开发者更高效地构建软件。本文给大家推荐七种高效生产力工具。 1. Oh My Zsh 获得超过 43000 颗 star，Oh My Zsh 可以说是 Github 上最受欢迎的生产力工具了。它是一款社区驱动的命令行工具，基于 …
为您的 Node 性能选择最佳的 JS 引擎 Node.js 8 的发布非常令人兴奋，并且是社区内的一件大事。该平台已附带一套全新功能。此外，开发者最关注的就是性能。 —— 由justjavac分享
构建离线优先的 React 应用长久以来，在开发移动端应用（包括 Web 应用，以下简称「应用」）时，我们习惯性地将「离线」当作一种错误来对待。作为应用的创建者，我们在越来越稳定和快速的办公网络下设计和开发着这些应用，渐渐地对那些做不到时刻在线的用户们失掉了同理心。实际上这些「掉了线」的用户离我们并不远，他们也许是通勤路上不得不…
VS Code React/Redux/react-router 代码片段插件，让你写 React 写到飞起来也可以来 Github 提交改进建议，或者你想要的功能袄~ —— 由余博伦是讨厌鬼分享
React 是如何重新定义前端开发的 Virtual DOM / reconciliation algorithm, React 如此流行到底有哪些原因呢？ —— 由余博伦是讨厌鬼分享
JavaScript 进阶之路——认识和使用 Promise，重构你的 Js 代码 Promise 可能大家都不陌生，因为 Promise 规范已经出来好一段时间了，同时 Promise 也已经纳入了 ES6，而且高版本的 chrome、firefox 浏览器都已经原生实现了 Promise，只不过和现如今流行的类 Promise 类库相比少些 API。 —— 由Magiccwl分享
javaScript作用域与闭包首先给js的作用域这个话题打标签：2，var, 全局变量，局部变量，函数，undefined, 作用域提升，赋值不会提升，ReferenceError, 同名覆盖。打完标签之后，我们来说跟作用域有关的几条铁打的规则：1: JS的作用域有2…
#CSS3#【rem与em的使用和区别详解】rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体…请戳→ #前端开发博客#
react脚本架工具前端使用React.js+webpack进行组件化开发越来流行了.想使用react.js进行组件化开发,但又不想学习太多新知识(比如如何配置webpack等), 使用脚本手架工具自然为上上之选. reactweb-cli 用于快速创建react web 项目….
面对前端六年历史代码，如何接入并应用 ES6 解放开发效率作者/分享人：Lucas，现就职于百度知识搜索部：主导并参与了多个产品线大型技术重构；为部门引入并应用多项新技术；曾工作在巴黎，就职于法国能源和苏伊士集团：独立负责欧洲天然气运输和购买费用计算系统；曾就职于巴黎银行，实习期独立负责投行征信系统的开发；曾就职于硅谷和巴黎互联网BePATIENT集团，负责跨端医…
JS 的平凡之路 — 我们到底可以通过多少种方式修改元素样式本篇文章主要介绍JS操作CSS的各种方法。一、前言一般我们在项目中引入CSS样式，可以通过link标签引入外部样式表，也可以通过style标签引入样式，最后可以直接在元素的行内设置style属性值，不过这里有一点要注意： sty
angular自定义指令详解在运用angularjs的时候，运用自定义指令可以写一些组件，非常方便。这里给大家分享一些关于angular自定义指令的知识。 1. 定义对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素 …
《JavaScript 中回调地狱的今生前世》JavaScript 由于某种原因是被设计为单线程的，同时由于 JavaScript 在设计之初是用于浏览器的 GUI 编程，这也就需要线程不能进行阻塞。所以在后续的发展过程中基本都采用异步非阻塞的编程模式。（by rccoder）
#前端技术#【Web 前端知识体系精简】详见：在本文中，作者将对 Web 前端知识体系进行简单的梳理，旨在帮助大家审查自己的知识结构是否完善。