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

转变思维，更好地理解js程序设计；小哥哥教你撸一个JS计算器；谈谈JS中的高级函数；JavaScript闭包，只学这篇就够了；如何用 js 获取虚拟键盘高度？；浏览器的 16ms 渲染帧；2017 一些非常棒的 Sublime Text 3 主题；你所不知道的JSON.stringify

转变思维，更好地理解js程序设计从事前端开发很久了，有幸在刚开始时就认识了一个教我面向对象思维的人，这种思维方式一直受用到今天。所以很想写一篇关于这方面的一点感受。对于一个码农来说，这样的文章不太好写，没有生动的图片，没有代码展示。但我觉得很重要，所以很想写出来。 js中
小哥哥教你撸一个JS计算器计算器 Demo 估计会是很多移动端、网页前端新手最佳的第一个上手项目。话说之前学 Android 时从不觉得写个计算器 Demo 会有多难。然而上星期花了几天的时间用原生 JavaScript、CSS、HTML 写了一个计算器 Demo。然而就是这么一个小小的项目还是能让我学到挺多的东西，其中最让我受益的就是明白一个良好的架构对一个软件项目来说是有多么的重要！
谈谈JS中的高级函数该文章详细阐述了JS中常用的若干个高级函数，讲述了它们的原理以及实现细节，并通过例子演示了它们的用法
JavaScript闭包，只学这篇就够了闭包不是魔法这篇文章使用一些简单的代码例子来解释JavaScript闭包的概念，即使新手也可以轻松参透闭包的含义。其实只要理解了核心概念，闭包并不是那么的难于理解。但是，网上充斥了太多学术性的文章，对于新…
如何用 js 获取虚拟键盘高度？前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，what？没有方案还聊个什么？别急，别急，接下来我们一起来扒一扒关于软键盘高度和 input 的问题我们先来看一个…
浏览器的 16ms 渲染帧由于现在广泛使用的屏幕都有固定的刷新率（比如最新的一般在 60Hz），在两次硬件刷新之间浏览器进行两次重绘是没有意义的只会消耗性能。浏览器会利用这个间隔 16ms（1000ms/60）适当地对绘制进行节流，因此 16ms 就成为页面渲染优化的一个关键时间。尤其在异步渲染中，要利用流式渲染就必须考虑到这个渲染帧间隔。 …
2017 一些非常棒的 Sublime Text 3 主题 Sublime Text 是编程时非常流行的编辑器之一。Sublime 有些功能可以使编程变得有趣。Sublime 在打开速度、处理大文件效率、内存占用等多个方面相对于其他编辑器都有很大优势，并且它非常易于扩展。在安装 Sublime Text 插件之前，我们需要先安装 Package Control，可以参考这篇文章来安装 Package…
你所不知道的JSON.stringify 译者按: 老司机们，你知道JSON.stringify还有第二个和第三个可选参数吗？它们是什么呢？ JSON已经逐渐替代XML被全世界的开发者广泛使用。本文深入讲解JavaScript中使用JSON.stringify的一些细节问题。首先简单回顾一下JSON和JavaScript：不是所有的合法的JSON都是有效的JavaScript；JSON只是一个文本格式；JSON中的数字是十进制。
【HTTP】协议详解Author :Jeffrey 引言 HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在WWW中使用的是HTTP/1….
理解 Node.js 事件驱动机制学习 Node.js 一定要理解的内容之一，文中主要涉及到了 EventEmitter 的使用和一些异步情况的处理，比较偏基础，值得一读。阅读原文大多数 Node.js 对象都依赖了 EventEmitter 模块来监听和响应事件，比如我们…
深入解析Node.js中5种发起HTTP请求的方法创建HTTP请求使现代编程语言的核心功能之一，也是很多程序员在接触到新的开发环境时最先遇到的技术之一。在Node.js中有相当多的解决方案，其中有语言内置功能，也有开源社区贡献的开发库。下面咱们来看一下比较流行的几种方式。
《如何做有效的Code Review？我有这些建议》代码评审是保证代码质量的一种有效手段，做得好的话，对公司来讲是一笔收益颇高的时间投资。但实践起来往往变成了炫耀编程技能、固执己见、恶言相向、同事关系恶化的事，这该如何是好？（maifans 译，欢迎加入翻译组：全文
咦？浏览器都能做人脸检测了？ Shape Detection API 的发布已经有一些时日，其主要的提供的能力是给予前端直接可用的特征检测的接口（包括条形码、人脸、文本检测）。本文将简单的对其进行介绍，对前端进行人脸检测进行普适性的讲解。（本文不讲算法～望轻拍）
前端学习之stylus+babel+gulp初体验前言嗨，还在老老实实的书写CSS代码么？还在为javascript语句的有些兼容性而苦恼么？想提高开发速度吗？让我们沐浴在知识的阳光下，愉快的敲代码吧。好了，我要讲话了，接下来跟着我进入stylus，babel，lgulp的世界吧。一、stylus Sty
黑客是这样写JavaScript的注* XSS攻击即Cross Site Scripting，通常在网页链接地址Url中注入JS代码来达到攻击手段，很多大厂都中过招，如：Twitter，新浪微博，示例代码：http://www.demo.cn/=<script>alert(document.cookie)</script> 其实此代码并不能在所有浏览器上执行，但仅需要一部分浏览器(如IE6) 可用，即可达到攻击效果。…
【一张图告诉你最流行的7个JavaScript框架特点】分享最流行的7个JavaScript框架特点。详见（来自：葡萄城控件技术团队博客）
JS 面向对象程序设计面向对象(Object-Oriented, OO)的语言有一个标志，那就是都有类的概念，通过类可以创建任意多个具有相同属性和方法的对象。而ECMA-262把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或函数”。其对象的创建主要有两种方式，对象字面量面向对象(Object-Oriented, OO)的语言有一个标志，那就是都有类的概念，通过类可以创建任意多个具有相同属性和方法的对象。而ECMA-262把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或函数”。其对象的创建主要有两种方式，对象字面量
人人都要学会使用的ES6语法与技巧使用箭头函数简单实现高阶函数扁平化 {代码…} 来个复杂一点的看看是什么样子？ {代码…} 能说出最后输出的结果是啥吗？ JSON内部可以直接书写不带function后缀的函数 {代码…} 使用default与不使用default声…
Angular2、AngularJS、React、vue.js过去一年的Google趋势分析Angular2、AngularJS、React、vue.js过去一年的Google、百度趋势分析最近在学angular，但是在国内的话似乎是vuejs比较火，百度指数只有国内数据分析，于是翻了下墙上谷歌趋势搜索了以下关键词，包括angualr、ang…
前端图片预览方式图片预览方法图片预览现在大多数基于HTML5提供的接口FileReader，而FileReader给我们提供了四个方法1.readAsArrayBuffer： result属性中二进制数据缓冲区2.readAsBinaryString： result属性中包含文件原始二进制…
超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等超多经典 canvas 实例普及：<canvas> 元素用于在网页上绘制图形。这是一个图形容器，您可以控制其每一像素，必须使用脚本来绘制图形。注意：IE 8 以及更早的版本不支持 <canvas> 元素。贴士：全部…
跨域那点事，JSONP的秘密如果你是一个WEB开发人员，你肯定遇到过跨域的问题。什么是跨域？我先假装你们不知道(^..^嘻嘻)，域名你们都知道，比如www.baidu.com，www.jd.com等都属于域名，如果我想在京东的页面中通过一个关键字来请求百度获取搜索结果，这就是一个跨域请求。举个例子：民间一位姓陈的人家有一手上好的酿酒本事。他们家立下规矩…
一套Vue的单页模板：N3-admin趁着周末偷来一点闲，总结近期的工作和学习，想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下。首发于个人博客；blog.lxstart.net项目路径: https://github.com/N3-compone…ps:…
饿了么大前端出品：一个用于调试 RESTful 接口的 HTTP 服务器中间件中文文档 Introduction restc is an HTTP server middleware, aiming to enhance de
纯前端解决跨域问题背景跨域是由浏览器的同源策略引起的，是指页面请求的url地址，必须与浏览器上的url地址处于同域上（即域名，端口，协议相同）。这是为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对JavaScript施…
使用vue构建移动应用在移动应用中很多功能都是必不可少的，使用vue构建移动应用自然也就需要实现这些功能。之所以写这篇文章，是希望大家能更多的将注意力放在项目的核心业务上，而不是过多的关注通用功能。
Vue + Electron制作网易云音乐客户端就在两个月前公司需求快速开发一款桌面应用软件，嗯，快速。并且提供了技术方案Nwjs，起初不知道这款框架的存在，网上查找了一波，发现更牛逼的一款快速搭建桌面应用的框架，那么它就是electron。可快速开发跨平…
学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作者：Samer Buna 译文出自：掘金翻译计划本文永久链接：github.com/xitu/gold-m… 译者：Cherry 校对者：LeviDing、原文地址：Learning React.js is easier than you think 原文作者：Samer Buna 译文出自：掘金翻译计划本文永久链接：github.com/xitu/gold-m… 译者：Cherry 校对者：LeviDing、
Express 实战（二）：Node.js 基础在上一篇文章中，我们简单的介绍了 Node.js 。了解到它基于 JavaScript、天生异步、拥有大量的第三方类库。本文将会在之前的基础上，对 Node.js 进行更深入的介绍。其中主要内容包括： Node 的安装如何使用第三方模块生态第三方模块的安装一些简单的使用示例开发过程中的一些建议和技巧在…
Vue.js路由懒加载作者：Joshua Bemenderfer 原文地址: lazy-loading-routes 译者：jeneser 当你的SPA（单页应用程序）变得复杂时，打包构建后的Javascript包会变得非常大，以至于严重影响页面的加载时间。幸运的是：vue-router支…
页面滚动时自动显示隐藏导航效果（jQuery）介绍一个简单的导航效果，当用户向下滚动页面时自动隐藏导航，在用户向上滚动页面时自动显示导航。支持IE9+，Chrome，Safari，FireFox… 自动显示隐藏导航这种交互出现已经有一段时间了，特别是在移动设备上。这种UX模式背后的想法简单而有效：我们
2017 JS 开发指南过去几年可能你一直在写接口。也许一直在优化你们公司数据的搜索速度，也可能在为微波炉写嵌入式程序。是否记得那时你摆弄Prototype.js，已经过去好长一段时间了。现在你决定是时候提升自己的前端技能了，这时你将看到这样一幅风景: 当然你不是在里面寻找某人，而且随机寻找25个人，你甚至都不知道他们的名字…
重温vue双向绑定原理解析摘要：因为项目刚开始用的vue框架，所以早期也研究了一下他的代码看过相关文章的解析，说说也能说个七七八八。不过今天再去看以前的demo的时候，发现忽然一知半解了，说明当时可能也没有理解透，所以写篇文章让自己理解的更深一些。本篇文章大多数知识点实在学习了这篇摘要：因为项目刚开始用的vue框架，所以早期也研究了一下他的代码看过相关文章的解析，说说也能说个七七八八。不过今天再去看以前的demo的时候，发现忽然一知半解了，说明当时可能也没有理解透，所以写篇文章让自己理解的更深一些。本篇文章大多数知识点实在学习了这篇
#HTML5#【避免常见的6种HTML5错误用法】一、不要使用section作为div的替代品人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说，就是直接用作替代品(用于样式)。在XHTML或…请戳→ #前端开发博客#
#jQuery#【jquery鼠标经过导航菜单来回弹性滑动】鼠标经过导航来回滑动，也就是鼠标滑过导航的时候下面一条横线随着鼠标滚动，当鼠标离开菜单时自动滚回原来的位置，本文分享我的两种做法。 #前端开发博客#
让 CSS 完成背景图加载完毕后显示之解析 IOING 的 onload url 原理WEB 之所以看起来很 WEB，除了自身慢的问题还有因为它具备了一些独有的特性，比如链接跳转，物理像素，不能获取软键盘高度等具有 WEB 特色的问题。而今天我想讲一点大家都不在意的一个问题，图片流式加载的问题 …
Webpack 打包优化之速度篇在前文 Webpack 打包优化之体积篇中，对如何减小 Webpack 打包体积，做了些探讨；当然，那些法子对于打包速度的提升，也是大有裨益。然而，打包速度之于开发体验和及时构建，相当重要；所以有必要对其做更为深入的研究，以便完善工作流，这就是本文存在的缘由。减小文件搜索范围在使用实际项目开发…
每个前端都该了解的“DNS域名解析”详解 DNS：Domain Name System（域名服务系统） DNS的常见用法：将服务器名称和 IP 地址进行关联,但它还可以将邮件地址和邮件服务器进行关联,以及为各种信息关联相应的名称。
anime.js 实战：实现一个 SVG 形变（morphing）动画这个实例来看看如何使用anime.js来实现一个形变（morphing）动画。至于什么是morphing动画，看完下面这个图就知道了。简而言之，就是不同形状之间能平滑的转换。这个用SVG来做羹适合不过了，因为SVG本身的形状就是有
小型 Web 页项目打包优化方案背景目前团队中新的 Web 项目基本都采用了 Vue 或 React ，加上 RN，这些都属于比较重量级的框架，然而对于小型 Web 页面，又显得过大。早期的一些项目则使用了较原始的 HTML 页面构建技术，但业务逻辑基本无法复用。近半年做过几个小型 Web 页面，在不断学习前端知识的同时，也在重构并摸索小型 Web 项目可…
WebSocket应用安全问题分析 WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。WebSocket通信协议于2011年被IETF定为标准RFC 6455，WebSocket API也被W3C定为标准，主流的浏览器都已经支持WebSocket通信。 WebSocket协议是基于TCP协议上的独立的通信协议，在建立WebSocket通信连接前，需要使用HTTP协议进行握手，从HTTP…
探索 vue-spa 全家桶项目,解析配置,目录结构,路由以及状态管理的实现,附源码 1.简介项目是一个简单的权限管理页面,分为3个页面,首页,账户中心,登录页通过vue-router 对于路由做权限控制,首页无需登录,跳转账户中心会自动检索是否登录,登录之后首页的登录按钮变为退出按钮,页面之间的的状态管理全部通过vuex进行管理项目演 1.简介项目是一个简单的权限管理页面,分为3个页面,首页,账户中心,登录页通过vue-router 对于路由做权限控制,首页无需登录,跳转账户中心会自动检索是否登录,登录之后首页的登录按钮变为退出按钮,页面之间的的状态管理全部通过vuex进行管理项目演
如何从零开始搭建高性能直播平台本文来自作者七夜在 GitChat 上精彩分享，「阅读原文」看看大家与作者做了哪些交流。前言现在直播已经成为移动互联网时代一个新的重要流量入口，从YY、斗鱼到花椒直播，直播已经成为人们分享交流的新方式，应用场景众多，主要分为：金融类直播：金融直播可应用于实时…
对近期前端圈口水之争的一些思考写在前面 1.大漠穷秋同学以略显偏激的ng对比vue一文引起网络上的口诛笔伐，最终以致歉信和辞职信告终2.知乎上未知姓名同学回答为什么使用React的问题，其中夹杂着一些对vue的个人观点，引来了vue作者的讨伐以上…