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

基于 HTML5 Canvas 实现地铁站监控；这一次，彻底弄懂 JavaScript 执行机制；CSS 在线交互式速查表；WEB 前端菜鸟，感觉很迷茫，该怎么做？；不使用 JS 匿名函数的三个理由；程序员小知识：JS数组常用方法操作；探究 CSS 解析原理；原生js的常用方法

《基于 HTML5 Canvas 实现地铁站监控》鉴于监控系统在国内的需求量较大，对于大范围的监控，如地铁站，更是需要监控系统来防止意外的发生，今天我们给大家介绍一下如何创建一个地铁站监控系统的前端部分。（by hightopo）
#前端技术#【这一次，彻底弄懂 JavaScript 执行机制】详见：一篇文章搞懂 JavaScript 的执行机制，希望你有所收获。本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascr
#前端技术#【CSS 在线交互式速查表】详见：这是一个可交互的 CSS 速查表，能够帮助你了解 CSS 的属性、盒模型、渐变、背景、按钮、选择器的使用。前端er，转存吧。
WEB 前端菜鸟，感觉很迷茫，该怎么做？前几天看到这样的问题先说问题吧：感觉前端涉及到的东西太多了，自己也很浮躁，看了挺多书，可是代码缺敲得却不多。技术菜，又什么都想学，比如现在纠结要不要先学scss或者php或者angularjs,backbone等框架，还是深入学习html5+css3？然后看了一些招聘要求发现又有一些坑要填，经常处于焦躁状态，感觉心好累，然后…
《不使用 JS 匿名函数的三个理由》无论你在什么时候读代码，您都必须注意到匿名函数。有时它们被称为 lambda，有时是匿名函数，不管怎样，我认为他们是不好使用的。（by oschina ）
程序员小知识：JS数组常用方法操作今天igeek手册与大家分享的是： JS数组常用方法操作，希望大家看完能有所收获哦～ 1、push 添加最后一项在数组末尾添加一项，并返回数组的长度, 可以添加任意类型的值作为数组的一项。 var arr = ; arr.push(6) // arr: arr.push(‘aa’) // arr: arr.push(undefi…
探究 CSS 解析原理吃早饭的时候，同事随意问了一句：“你知道 CSS 是怎么解析的吗？”，我一头雾水。对哦，作为前端，每天都在与 CSS 打交道，我竟然忽视了最基本的原理。一、浏览器渲染开篇，我们还是不厌其烦的回顾一下浏览器的渲染过程，先上图：正如上图所展示的，我们浏览器渲染过程分为了两条主线： …
原生js的常用方法前言：随着前端市场日新月异的发展，现如今的市场要的不只是会切切图的小仔、小妹了，而是需要真正懂原生js闭包，继承，原型链，node,以及熟读源码的大神，那么我们也不能太落后各位大神，撸起袖子，重新拾起原生js吧！以下是个人总结，也有一些是copy大神的，现在
HTML5原生拖拽/拖放 Drag & Drop 详解前言拖放（drap && drop）在我们平时的工作中，经常遇到。它表示：抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。我从几个方面学习并实践这个功能。拖放的流程对应的事件我们先看下拖放的流程：选中 —> 拖动
H5 的 Notification 特性：Web 的桌面通知功能目前，web网页使用桌面通知功能的越来越多，包括微博，腾讯视频等大厂站，桌面通知功能是H5的一个API-Notifications。它允许网页或应用程序可以发出通知，通知将被显示在页面之外的系统层面上（通常使用操作系统的标准通知机制，但是在不同的平台和浏览器上的表现会有差异），这样即使应用程序空闲或在后台也可以向用户…
一次 H5 「保存页面为图片」的踩坑之旅最近丁香医生的产品大佬又双叒叕搞事情，想要在 H5 中做一个医生邀请提问的功能，可以将医生的二维码名片分享出去，支持移动、PC 和微信。之前的图片是由后端生成的，并且会缓存三天，导致信息更新不及时。由前端来做就能避免这些问题。我一听，这好说，不就是个保存图片的功能么，简单看看需求：完善卡片信息…
前端本地文件操作与上传前端无法像原生APP一样直接操作本地文件，否则的话打开个网页就能把用户电脑上的文件偷光了，所以需要通过用户触发，用户可通过以下三种方式操作触发：通过input type=”file” 选择本地文件通过拖拽的方式把文件拖过来在编辑框里面复制粘贴第一种是最常用的手段，通常还会自定义一个按钮，然后盖在…
纯 CSS 实现波浪效果通常实现波浪的曲线需要借助贝塞尔曲线，本文转换思路，通过圆角和 CSS 动画实现了一种波浪效果。
美化表单的CSS高级技巧学习一些新的和旧的选择器，你可以根据需求、有效性和更多的方式来美化表单。表单一直以来对于CSSer来说都是一件不易的事情，很难用CSS处理好表单要样式。但是有一些很少使用的选择器，却赋予我们不一样的能力，可以让我们很好的控制 input 元素和其周边元素的样式，而且是根据功能来调整不同的样式，这些往往都是通…
一道小小的题目引发对javascript支持正则表达式相关方法的探讨这道题目是在群里日常闲聊时，公司同事抛出来的，具体是出自哪里本人没去考察。先先说说题目：写一个方法把一个数字末尾的连续 0 变成 9 ，如 1230000 变成 1239999 一道很简单的题目，直接正则就能搞定，也许你会写： function zoreToNine(num){ return (num + ”).replace(/0/g,9); } //或…
如何优雅的编写 JavaScript 代码非常全面的编写优雅的 JavaScript 代码指南，从代码风格到工程实践都有介绍。
CSS3 径向渐变语法及辅助理解案例 10 则本文展示了 10 例常见的 radial-gradient 使用案例，相信一定可以覆盖你的使用场景~
也许vue+css3做交互特效更简单1.前言做项目就难免会开发交互效果或者特效，而我最近开发的项目一直在使用vue，开发技术栈方面，理所当然就使用了vue+css3开发，过程中发现使用vue+css3开发特效，和javascript/jquery+css3的思维方式不一样，…
另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新目的：vue-cli构建的vue单页面应用，某些特定的页面，实现前进刷新，后退不刷新，类似app般的用户体验。注：此处的刷新特指当进入此页面时，触发ajax请求，向服务器获取数据。不刷新特指当进入此页面时，不触发ajax请求，而是使用之前缓存的数据，以便减少
基于mongodb+express+vue+axios+bootstrap的掘金最热文章收藏评论分析灵感来源最近浏览技术文章的时候，偶然看到一篇关于分析简书热荐文章中代码块数量的文章，链接我翻了一遍了历史记录也没有发现，可能被“吃了”把，好吧不管他的文章在哪了。看了那边文章后，我对掘金的首页开始了非分之想（嘿嘿嘿嘿~~,掘金君不要怪我奥！！）灵感初现看了
生产环境中选择性的部署ES6+ 来自Google工程师的一种更好的配置ES6+方法 TL；NR 通过检测浏览器是否支持<script type="module">让用户加载对应的JS文件，对现代浏览器用户提供ES6+代码的文件，对老版本用户提供编译成ES5并结合
VUE组件间的数据传递众所周知，Vue 是基于组件来构建 web 应用的。组件将模块和组合发挥到了极致。Vue 是虽说吸取了 AngularJs 的 MVVM的思想，但是它是单向数据流的，也就是说子组件无法直接改变父组件状态。下面总结出常用的组件消息传递的方式。父组件向子
《设计稿自动生成可用页面的展望》这篇文章只打算描述我加入支付宝之后，在设计稿生成代码这个方向上自己做的尝试和看到的团队中的尝试。不谈行业历史，不争论方向。文章以现状的形成和我的想法演进为主脉络，文末会提到我所看到的新契机。（by 侯振宇）
iOS 开发是否要采用 React Native？前言 React Native 是 Facebook 2015年开源的 Javascript 框架，旨在使用 Javascript 高效开发手机端 App。配合着多个显而易见的优势和 Facebook 强大的宣传机器，它立刻成为国内外大小公司的明星开发框架。开源社区的参与激情、各方博客的宣传追捧，从其 Github 上 56000+ 星和 13000+ Fork 就可见一斑。 …
mongodb+express+vue代码实现掘金最热文章收藏评论分析关于本篇文章的思路介绍在：juejin.im/post/5a1293…，看代码之前可以先看一下实现的效果；刚把掘金最热文章收藏评论分析的思路发出去后，就收到很多掘金好友的喜欢和阅读，这也让我更有信心把整个实现过程一步一步记录下来，让有兴趣的前端童鞋也可以熟悉前
一个JS效果竟然要研究一天，我是不是不适合做前端？前言今天这篇文章的标题，显然是要搞事情。一个JS交互效果，居然花费了一天的宝贵时间才研究出来，我是不是不太适合做前端？别急，搬好小板凳，正文从这开始～本来今天下班回来感觉有点累，想着今天就别学了吧…
《微信 JS API 支付教程》最近一个项目中用到了微信开发，之前没有做过支付相关的东西，算是拿这个来练练手，刚开始接触支付时候很懵逼，加上微信支付开发文档本来就讲得不清楚，我是彻底蒙圈了，参考了很多代码之后，算是有一点思路了。（by StormMa）
Fis3构建迁移Webpack之路Webpack从2015年9月第一个版本横空初始至今已逾2载。它的出现，颠覆了一大批主流构建如Ant、Grunt和Gulp等等。腾讯NOW直播IVWEB团队之前一直采用Fis构建，本篇文章主要介绍从Fis迁移到webpack遇到的问题和背后的…
详解 JavaScript 与 ECMAScript 的区别译者按：简单的说，ECMAScript是标准，而JavaScript是实现。原文: What’s the difference between JavaScript and ECMAScript? 译者: Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。对于新手来说，大概会搞不清楚JavaScript与E…
浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完成前端的部署操作。如果我现在给你一台新注册的云主机，那么你应该怎么做才能把一个前端工程部署到一台云主机上，成为一个可以访问的网页呢？今天我们就来聊聊前端的部署~一、构成
《浏览器端创建可下载文件》前一段时间碰到一需求，前端对从后端获取数据进行纯前端筛选过滤操作后，希望保存下文件，由于内容格式相对简单，经调研采用 Blob URL方式实现。（by ymfe – 李欣悦）
由React Router引起的组件重复渲染谈Route的使用姿势 React Router 4 把Route当作普通的React组件，可以在任意组件内使用Route，而不再像之前的版本那样，必须在一个地方集中定义所有的Route。因此，使用React Router 4 的项目中，经常会有Route和其他组件出现在同一个组件内
js的四种for循环深入了解 JavaScript 中的 for 循环来源：www.codeceo.com 在ECMAScript5（简称 ES5）中，有三种 for 循环，分别是：在2015年6月份发布的ECMAScript6（简称 ES6）中，新增了一种循
[译] 你可以用 GitHub 做的 12 件 Cool 事情原文链接 1 在 GitHub.com 编辑代码我将从我认为大家都知道的一件事情开始(尽管我是直到一周前才知道)。当你在 GitHub 查看文件时(任何文本文件，任何仓库中)，右上角会有一个小铅笔图标，点击它就可以编辑文件了。完成之后点击 Propose file change 按钮 GitHub 将会自动帮你 fork 该项…
HTTP/2 之服务器推送 (Server Push) 最佳实践 HTTP/1.X出色地满足互联网的普遍访问需求，但随着互联网的不断发展，其性能越来越成为瓶颈。IETF在2015年发布了HTTP/2标准, 着重于提高HTTP的访问体验, HTTP2优势主要包括: 二进制传输、头部压缩、多路复用和服务器推送(ServerPush)。截止目前, 大部分CDN厂商已经宣布支持HTTP/2，然而”支持”大多省略了服务器…
如何用 ESLint 检查 TypeScript 代码 ESLint 是一个代码检查工具，主要用来发现代码错误、统一代码风格，目前已被广泛的应用于各种 JavaScript 项目中。它通过插件化的特性极大的丰富了适用范围，搭配 typescript-eslint-parser 之后，甚至可以用来检
寻找真凶Echarts or Angular寻找真凶Echarts or Angular 这是一篇故事，就如同技术，我们所追求的不是一个结局，而是那些深受启发与共鸣的过程，那是我们成长的经验与生产力的积淀！故事开始于“疯了”的ionic3应用页面打开，什么也没做5s里…
关于Angular样式封装引导这是一个很简单的话题，但是你很难在搜索到一篇比较完整的介绍它的文章，或者说单纯的告诉你 ViewEncapsulation 的用法而已，这在实际项目中远远不够的。一、封装模式分别为： Native 原
Node.js Best Practices 简读版原文链接前言这是一个简读版，没有翻译原文Read More里的内容，不过比较重要的内容我都将它提取出来了。另外，下文PS:开头的内容是我个人的一些补充，并非出自原文。目录项目结构错误处理代码风格测试和总体质量 …
理解ES6的 Iterator 、Iterable 、 Generator 什么是迭代器(Iterator)？满足迭代器协议的对象。迭代器协议: 对象的next方法是一个无参函数，它返回一个对象，该对象拥有done和value两个属性： done(boolean): 如果
Git 原生钩子的深度优化前言 Git 是最流行的版本控制工具，和大多数版本控制工具一样，Git 也拥有钩子特性，用户可以利用钩子实现一些附加功能，在《Pro Git v2》中，对钩子类型，消息格式等有详细介绍： 8.3 Customizing Git – Git Hooks。代码托管平台也会使用钩子，一般是使用 Server-Side Hooks。包括 pre-receive up…
函数声明、函数表达式、匿名函数、立即执行函数详解定义函数的方式有三种：

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

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

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

最常用的是函数声明和函数表达式。
Web 网页爬虫对抗指南（一）从本质上来讲，阻止Web 爬虫就意味着你需要让脚本和机器难以从你的网站上获取它们所需的数据，但不能让那些真正的用户和搜索引擎爬取数据变得困难。然而不幸的是，要做到这一点很难，你需要在防止Web 爬虫和降级真实用户和搜索引擎的可访问性之间进行权衡。为了阻止Web 爬虫（也称为Webscraping，Screensc…
使用 ViewContainerRef 探索Angular DOM操作英文原版:Exploring Angular DOM manipulation techniques using ViewContainerRef _翻译：giscafer说明：根据个人理解翻译，不完全词词对应。_ 每当我读到关于使用Angular DOM的操作时，我总是会看到其中的一个…
使用 babel , Karma, Jasmine, Istanbul 实现 ES6 测试覆盖率目前我们很多项目都开始使用的是 ES6 进行开发，但是我们在测试的时候都是需要转换到 ES5 才能运行我们的测试，但是我们又需要代码的测试覆盖率。下面将一步步的帮助您完成基于 ES6 源码的代码覆盖率报告的生成。开始我们先初
搭建jest+gitlab-ci前端自动化测试环境用 jest + gitlab-ci 搭建前端UI自动化测试环境前言下面以 github创建仓库为例测试领域中比较麻烦的就是前端UI测试gitlab地址： https://gitlab.com/yunqiangwu/devops-test
《京保养》基于Vue+Vuex的单页面应用实践接到《京保养》项目需求，了解到是移动端项目，运用于微信公众号及京东 APP 。通过与后端研发沟通，后端将提供所有的数据展示接口，这样最终商定使用前后端分离技术，而作为前端这边就非常适合选择基于 webpack + Vue 的单页面应用来实现。前期组内