20170917 前端开发周报

用函数式编程对JavaScript进行断舍离;JavaScript作用域和闭包;JavaScript实现H5自动重连技术;深入 JavaScript 数组:进化与性能;聊聊那些使用前端Javascript实现的机器学习类库;使用 CSS 的 font-size-adjust 属性改善网页排版;用Web技术实现移动监测 | Aotu.io「凹凸实验室」;十个免费的web前端开发工具

  1. 用函数式编程对JavaScript进行断舍离 当从业20的JavaScript老司机学会函数式编程时,他扔掉了90%的特性,也不用面向对象了,最后发现了真爱啊!!!
  2. JavaScript作用域和闭包 作用域和闭包在JavaScript里非常重要。但是在我最初学习JavaScript的时候,却很难理解。这篇文章会用一些例子帮你理解它们。我们先从作用域开始。作用域 JavaScript的作用域限定了你可以访问哪些变量。有两种作用域:全局作用域,局部作用域。
  3. JavaScript实现H5自动重连技术 断线重连的需求一断线重连原理二游戏内自动重连不刷新三刷新游戏自动重连重连数据Locationreplace重置url重连四实际项目中处理重连机制最后的总结断线重连的需求。尤其是手机上,会因为网络的不稳定或者其他原因,导致用户的socket链接断开。这个时候如果直接让玩家退出游戏,重新登录,无疑是非常影响用户体验的事情。所以根据这个需求,就有需要程序来实现断线后自动重连回去的技术,是用户能够再次快速开始游戏进行战斗。
  4. 深入 JavaScript 数组:进化与性能 正式开始前需要声明,本文并不是要讲解 JavaScript 数组基础知识,也不会涉及语法和使用案例。本文讲得更多的是内存、优化、语法差异、性能、近来的演进。在使用 JavaScript 前,我对 C、C++、C# 这些已经颇为熟悉。与许多 C/C++ 开发者一样,JavaScript 给我的第一印象并不好。
  5. 聊聊那些使用前端Javascript实现的机器学习类库 机器学习(Machine Learning)在最近几年绝对称的上是大火,越来越多的公司和资本投入了巨大资源和金钱到这个新上位的技术“新宠”中,尤其是随着更多的各种机器学习相关类库的出现和发展,更多新的技术已经被应用到了机器学习中, 现在大家可以看到, Python不再是唯一个老牌机器学习的必用语言, 对于现代神经网络(neural networks)语言不再是一个问题, 你基本可以使用任何的编程语言, 包括今天我们介绍的标准前端开发语言 – Javascript
  6. 使用 CSS 的 font-size-adjust 属性改善网页排版 CSS 中的 font-size-adjust 属性允许开发者基于小写字母的高度指定 font-size ,这可以有效地提高网页文字的可读性。在这篇文章中,你不仅能了解到 font-size-adjust 属性的重要性,并且还能学会如何在你的项目中使用它。
  7. 用Web技术实现移动监测 本文将阐述如何通过 Web 技术实现简易的移动监测效果,并附上一些有意思的案例。移动侦测,英文翻译为“Motion detection technology”,一般也叫运动检测,常用于无人值守监控录像和自动报警。通过摄像头按照不同帧率采集得到的图像会被 CPU 按照一定算法进行计算和比较,当画面有变化时,如有人走过,镜头被移动,计算比较结果得出的数字会超过阈值并指示系统能自动作出相应的处理。
  8. 十个免费的web前端开发工具 十个免费的web前端开发工具 By Jake Rocheleau 网络技术发展迅速,部分技术难以保持 每年都有新的工具出现,这同时也意味着许多旧的工具倒在了新技术的发展之路上。
  9. Facebook 和 GitHub 两大巨头联手推出 Atom-IDE 今日,GitHub 宣布与 Facebook 合作推出了 Atom-IDE —— 它包括一系列将类 IDE 功能带到 Atom 的可选工具包。

    初次发布的版本包括更智能、感知上下文的自动完成;导航功能,如大纲视图和 goto-definition,以及其他有用的功能;还包括错误、警告提醒和格式化文档功能。

  10. JavaScript中的RegExp对象 正则表达式(regular expression)是一种表达文本模式(即字符串结构)的方法,有点像字符串的模板,常常用作按照“给定模式”匹配文本的工具。比如,正则表达式给出一个 Email 地址的模式,然后用它来确定一个字符串是否为 Email 地址。JavaScript 的正则表达式体系是参照 Perl 5 建立的。 新建正则表达式有两种方法。
  11. #前端开发那些事#【走向 JavaScript 函数式编程】详见:走向JavaScript函数式编程 本文描述了 JavaScript 函数式编程的若干重要特征,以及一些实践建议。旨在帮助非函数式编程的同学,能快速切入到函数式编程的理念。(作者:Jeremy_young)

    走向 JavaScript 函数式编程

  12. Node.JS中如何快速扫描端口并发现局域网内的Web服务器地址(80) 在 Node.JS 中进行端口扫描还是比较方便的,一般会有广播和轮询两种方式。即使用广播和扫描,使用广播发出的消息有时会被路由器屏蔽,所以并不可靠。使用node.js中的net模块,可以直接尝试向目录主机的某个端口进行连接,如果能建立连接,则说明该地址存在服务器。
  13. BetterScroll:在移动端滚动场景的应用 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件( GitHub地址 ),适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。 为了满足这些场景,它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置,让滚动更加流畅,同时还提供了很多 API 方法和事件,以便我们更快地实现滚…
  14. 学习 JavaScript:9 个常见错误阻碍你进步 很多人尝试学习 JavaScript ,但是不久就放弃了。然后他们就告诉自己,“JavaScript 太复杂了”,更有甚者说,“我不是前端开发的料”。

    这种情况挺让人悲伤的。其实根本不必放弃,所要做的仅仅是换一种不同的学习方法。

    在这篇文章中,我们将介绍一些最常见的错误学习方法,并了解如何避免这些错误。许多技巧不仅适用于 JavaScript,甚至可以用到 web 开发上,所以也算是一种福利。

  15. Redux 还是 Mobx,让我来解决你的困惑 我在去年大量的使用了 Redux,但我最近都在使用 Mobx 来做状态(state)管理。似乎现在社区里关于该选什么来替代 Redux 很自然地成为了一件困惑的事。开发者不确定该选择哪种解决方案。这个问题并不只是出现在 Redux 与 Mobx 上。无论何时,只要存在选择,人们就会好奇最好的解决问题的方式是什么。我现在写的这些是为了解决 Redux 和 Mobx 这两个状态管理库之间的困惑。
  16. 为什么我们要做三份 Webpack 配置文件 时至今日,Webpack 已经成为前端工程必备的基础工具之一,不仅被广泛用于前端工程发布前的打包,还在开发中担当本地前端资源服务器(assets server)、模块热更新(hot module replacement)、API Proxy 等角色,结合 ESLint 等代码检查工具,还可以实现在对源代码的严格校验检查。
  17. 前端常见跨域解决方案(全)什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: {代码…} 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。
  18. 在 Node.js 中使用原生 ES 模块 从版本 8.5.0 开始,Node.js 开始支持原生 ES 模块,可以通过命令行选项打开该功能。新功能很大程度上得归功于 Bradley Farias。
  19. 探索webpack模块以及webpack3新特性 本文从简单的例子入手,从打包文件去分析以下三个问题:webpack打包文件是怎样的?如何做到兼容各大模块化方案的?webpack3带来的新特性又是什么?
  20. 你所不知道的 CSS 动画技巧与细节 怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画。

    废话少说,直接进入正题,本文提到的动画不加特殊说明,皆指 CSS 动画。

  21. 四个小视频,带你走出React表单的哪些坑 在前端与用户发生最多的交互行为都产生在表单里,在React中表单组件不同于其他组件,因为它们会缓存用户的录入信息和录入状态,由此也带来了React对表单处理的一些特殊性。你是不是经常会在学习或者React中对于使用表单有所疑惑,有很多小伙伴会陷入表单的坑中,并走不出来。技术胖专门写一篇文章来讲述React中表单的使用。
  22. css3 pointer-events 介绍 css3 pointer-events pointer-events 是什么? 顾名思义,pointer-events 是一个用于 HTML 指针事件的属性。 pointer-events 可以禁用 HTML 元素的 hover/focus/active 等动态效果。
  23. 前端性能优化之加载技术 在这个前端用户体验越来越重要的时代,你的页面稍微有点卡顿,都难以挽留用户。而作为一名有追求的前端,势必要力所能及地优化我们前端页面的性能。今天,就来谈一谈那些前端性能优化的加载技术,利用这些技术可以很好地提高网站的响应速度和用户体验。 页面渲染 在理解真正的优
  24. 手把手 | 30行JavaScript代码,教你分分钟创建神经网络 作者:Per Harald Borgen 编译:高宁,Saint,钱天培 *本文含大量代码,如需原文请从文末来源链接获取。 自己搭建神经网络太复杂? 别怕! 今天我们将手把手教你如何用30行代码轻松创建一个神经网络 。 在本篇文章中,你将学到 如何使用Synaptic.js( https://synaptic.juancazala.com/#/ …
  25. 我遇到的前端面试题2017本文首发于我的博客:http://dunizb.com 前段时间找工作,经历了好几个公司的面试,得到一些信息,和大家分享: 大部分公司(创业公司)都趋向于招一个牛逼的前端而不是三四个平庸的前端 性能优化、ES6必问 招聘…
  26. Vue组件库的那些事儿,你都知道吗? 前段时间一直在研究Vue组件库,终于在组内派上了用场。来给大家贡献一篇关于Vue组件库的相关知识。经验不多,如果有不合理的地方还请多多指出哦~~~  前段时间一直在研究Vue组件库,终于在组内派上了用场。来给大家贡献一篇关于Vue组件库的相关知识。经验不多,如果有不合理的地方还请多多指出哦~~~ 
  27. 【前端日报:JavaScript实现自动重连和Web技术实现移动监测】JavaScript作用域和闭包;JavaScript实现H5自动重连技术;JavaScript中的RegExp对象;探索webpack模块以及webpack3新特性;在 Node.js 中使用原生 ES 模块;用Web技术实现移动监测 ​​​

    JavaScript实现自动重连和Web技术实现移动监测
  28. Javascript 代码重构,美化你代码 前言 同样一个功能,可以用很多方法来实现,有时候由于项目时间紧张,导致很多时候只是实现了功能,往往忽视了代码质量。下面几种代码重构方法,以便大家可以写出更漂亮的代码。本文内容是我的读书笔记
  29. 使用 Chrome DevTools 调试 JavaScript 彻底地摒弃 console.log 调试!了解如何在Chrome开发者工具中使用断点来调试代码。 作为一名新开发人员,查找和修复 bug 可能非常困难。 你可能会随机使用 console.log(),试图查看代码的工作工作情况。 那么我现在告诉你,你不
  30. 用于前端的模板引擎 说起模板引擎,很多人会认为这是后台的东西(如PHP的Smarty、Java的Velocity),跟前端没有关系。然而,随着前端的逻辑变得越来越复杂,引入模板技术已经是非常必要了。 模板引擎的主要功能就是 把变化的数据融入到不变的模板中 ,并生成最终结果。目前,前端的主要数据格式无非是 XML 和 JSON 。 如果…
  31. Vue中的路由:分页获取数据以及路由更新 最近一直在忙着做项目,也渐渐开始有些疲倦了,感觉如果一直做一些重复的事情,还真的是很容易厌倦的,所以也是时候停下来,总结一下自己这段时间遇到的一些小问题以及一些小感悟吧。项目中用到的是vue,但其实说实话,对于其背后的核心以及真正的理念,自己还不是很清楚,就先
  32. 纯前端实现人脸识别-提取-合成 最近火爆朋友圈的军装照H5大家一定还记忆犹新,其原理是先提取出照片中的面部,然后与模板进行合成,官方的合成处理据说由天天P图提供技术支持,后端合成后返回给前端展示,形式很新颖效果也非常好,整个流程涉及的人脸识别和图像合成两项核心技术在前端都有对应的解决方案,因
  33. GitHub 上 8 月份最火的开源项目】今天我们将介绍 GitHub 上 8 月份最受欢迎的 10 个开源项目,在这些项目中,你有在用或用过哪些呢?详见 ​​​

    GitHub 上 8 月份最火的开源项目
  34. 一步步带你做vue后台管理框架(二)——上手使用 系列教程《一步步带你做vue后台管理框架》第二课 github地址:vue-framework-wz
  35. angular4 从零到实战讲解 angular是一个比较完善的前端MVC框架,包含了模板,数据双向绑定,路由,服务,过滤器,依赖注入等等所有的功能,基本上只要你做web开发,angular都会提供一个,换句话说,相对于一些其它的只关注前端某一方面的框架来说,学习angluar这么一个框架,往
  36. CSS Checkbox 合集 各种样式的 CSS 复选框,任君挑选,兼容 IE9 + 和所有现代浏览器。
  37. vue应用产品之iShow H5编辑器 什么都不说,先上demo github地址: github.com/qiuyaofan/i… 文档: qiuyaofan.github.io/iShow/ 网站在线地址: qiuyaofan.github.io/ishowPage 今年年初,开始断断续续打磨自己的vue编辑器,到现在也有半年有余。目前是ishow1.0版本,后续会不断完善,也欢迎大家贡献自己的想法,共同进步。如果喜欢这…
  38. 五年 Web 开发者 star 的 github 整理说明 前端从业几年,积累了不少 github开源库 。 有时候想查阅以前star的库,但不好找,github大多库都是英文说明,对中文开发者不太友好,这里整理下收集的github库,方便需要的时候查阅。 其实老早就有整理github上资源的想法,现在才付诸行动。 正在写的时候收到 稀土圈公众号开源库 功能上线的通知,英雄…
  39. 20170909 前端开发周报】最全前端性能优化秘籍(一)(二);5分钟极速上手 CSS Grid;JS高级技巧;JavaScript 专题之函数记忆;你真的需要一个CSS实用工具集吗?;一篇文章讲清楚React的基础概念;不仅仅是面试,JavaScript 开发者都应该知道的十个概念。 ​​​

    20170909 前端开发周报
  40. 使用 CSS 栅格和 Flexbox 打造 Trello 布局 原文地址:Building a Trello Layout with CSS Grid and Flexbox 原文作者:Giulio Mainardi 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:sunui 校 原文地址:Building a Trello Layout with CSS Grid and Flexbox 原文作者:Giulio Mainardi 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:sunui 校
  41. 【技术分享】妙用JavaScript绕过XSS过滤 2017-09-15 09:58:09 阅读:242次 来源: portswigger.net 作者:blueSky 译者: blueSky 预估稿费:200RMB 投稿方式:发送邮件至linwei#360.cn,或登陆网页版在线投稿 前言 在一年一度的AppSec Europe会议上, Sebastian Lekies,Krzysztof Kotowicz和Eduardo Vela Nav…
  42. 带着问题来比较一下 2017 年的 Angular, React 和 Vue Angular vs. React vs. Vue: A 2017 comparison Deciding on a JavaScript framework for your web application can be overwhelming. Angular vs. React vs. Vue: A 2017 comparison Deciding on a JavaScript framework for your web application can be overwhelming.
  43. 前端实现导出数据到excel文件 网页中的实现方式 引入所需的依赖文件
  44. 你真的会用 Babel 吗? 引入 这个问题是对自己的发问,但我相信会有很多跟我一样的同学。对于 babel 的使用,近半年来一直停留在与 webpack 结合使用,以及在浏览器开发环境下。导致很多 babel 的包,我都不清楚他们是干嘛的。比如 babel-register,还有 bab
  45. javascript腾讯面试题学习封装一个简易的异步队列 点击按钮的时候,用回调函数嵌套方式,这里我加入3个li,就已经快受不了了,这就是javascript著名的回调地狱,那么在这里,我用循环简化一下: 恩,确实简化了,但是这种面向过程的方式,耦合性太强,下面呢,我就把这个封装成一个通用队列 第一步:封装一个队列,
  46. #开源项目#【基于 React 的 SVG 地图组件:React-Simple-Maps】详见: React Simple Maps 是一个用于创建 SVG 地图的组件库,它具备添加地图细节的各类组件,它们可为地图的各个区域添加文字注释、标记以及自定义颜色。Demo 地址: ​​​

    React-Simple-Maps
  47. #CSS3#【学习css3动画属性Transition】发现在线的css3手册中都没有提到这个属性。应该是写得不全吧,不过搜索百度的时候发现第一个位置的那个的确是有的。赞一个。下面进入学习的阶段。请戳→ #前端开发博客# ​​​

    学习css3动画属性Transition
  48. 【JS】类型检测 前言 js 中的类型检测也是很重要的一部分,所以说这篇文章我们就来讲一下怎么对 JavaScript 中的基本数据类型进行检测。其实这也是在读 Zepto 源码中学习到的,所以阅读源码对我们的提升还是很有帮助的。本文基于参考了前辈们的文章之后个人理解此文写的有不当的地方,请各位大佬指正。 其实常规方法主要有四种 …
  49. Javascripts数组原生方法集合 Javascripts数组原生方法集合
  50. 前端实现图片上传预览 前端上传图片预览 此文将介绍两种方法来实现前端上传图片预览。 方法1:FileReader

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流