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

如何用 js 获取虚拟键盘高度？；小哥哥教你撸一个JS计算器；深入解析Node.js中5种发起HTTP请求的方法；你所不知道的JSON.stringify；2017 一些非常棒的 Sublime Text 3 主题；前端学习之stylus+babel+gulp初体验；WebSocket应用安全问题分析；基于webpack的前后端分离开发环境实践

如何用 js 获取虚拟键盘高度？前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，what？没有方案还聊个什么？别急，别急，接下来我们一起来扒一扒关于软键盘高度和 input 的问题我们先来看一个…
小哥哥教你撸一个JS计算器计算器 Demo 估计会是很多移动端、网页前端新手最佳的第一个上手项目。话说之前学 Android 时从不觉得写个计算器 Demo 会有多难。然而上星期花了几天的时间用原生 JavaScript、CSS、HTML 写了一个计算器 Demo。然而就是这么一个小小的项目还是能让我学到挺多的东西，其中最让我受益的就是明白一个良好的架构对一个软件项目来说是有多么的重要！
深入解析Node.js中5种发起HTTP请求的方法创建HTTP请求使现代编程语言的核心功能之一，也是很多程序员在接触到新的开发环境时最先遇到的技术之一。在Node.js中有相当多的解决方案，其中有语言内置功能，也有开源社区贡献的开发库。下面咱们来看一下比较流行的几种方式。
你所不知道的JSON.stringify 译者按: 老司机们，你知道JSON.stringify还有第二个和第三个可选参数吗？它们是什么呢？ JSON已经逐渐替代XML被全世界的开发者广泛使用。本文深入讲解JavaScript中使用JSON.stringify的一些细节问题。首先简单回顾一下JSON和JavaScript：不是所有的合法的JSON都是有效的JavaScript；JSON只是一个文本格式；JSON中的数字是十进制。
2017 一些非常棒的 Sublime Text 3 主题 Sublime Text 是编程时非常流行的编辑器之一。Sublime 有些功能可以使编程变得有趣。Sublime 在打开速度、处理大文件效率、内存占用等多个方面相对于其他编辑器都有很大优势，并且它非常易于扩展。在安装 Sublime Text 插件之前，我们需要先安装 Package Control，可以参考这篇文章来安装 Package…
前端学习之stylus+babel+gulp初体验前言嗨，还在老老实实的书写CSS代码么？还在为javascript语句的有些兼容性而苦恼么？想提高开发速度吗？让我们沐浴在知识的阳光下，愉快的敲代码吧。好了，我要讲话了，接下来跟着我进入stylus，babel，lgulp的世界吧。一、stylus Sty
WebSocket应用安全问题分析 WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。WebSocket通信协议于2011年被IETF定为标准RFC 6455，WebSocket API也被W3C定为标准，主流的浏览器都已经支持WebSocket通信。 WebSocket协议是基于TCP协议上的独立的通信协议，在建立WebSocket通信连接前，需要使用HTTP协议进行握手，从HTTP…
基于webpack的前后端分离开发环境实践背景随着互联网应用工程规模的日益复杂化和精细化，我们在开发一个标准web应用的早已开始告别单干模式，为了提升开发效率，前后端分离的需求越来越被重视，前端负责展现/交互逻辑，后端负责业务/数据接口，基本上也成为了我们日常项目分工中的标配，但是前后端分离一直以来都是一个工程概念，每个团队在实现工程中都…
面向 JavaScript 开发人员的 ECMAScript 6 指南（1 ）：新 JavaScript 中的变量声明等功能作者：Ted Neward 关于本系列ECMAScript 6 于 2015 年 6 月被采纳，是第一个为某种语言编写的 JavaScript 标准，它不只是帮助将现代 Web 联系在一起，而且为现代 Web 提供了强大的支持。在本系列中，编程语言
对近期前端圈口水之争的一些思考写在前面 1.大漠穷秋同学以略显偏激的ng对比vue一文引起网络上的口诛笔伐，最终以致歉信和辞职信告终2.知乎上未知姓名同学回答为什么使用React的问题，其中夹杂着一些对vue的个人观点，引来了vue作者的讨伐以上…
JavaScript常见的继承方式 JavaScript继承常用的几种方法飙车上高速，快速掌握js继承的多种方式。首先需要了解原型链机智：在ECMAscript中描述了原型链的概念，并将原型链作为实现继承的主要方法，其基本思想就是利用原型让一个引用类型继承另一个引用类型的属
前端每周清单半年盘点之 React 与 ReactNative 篇前端每周清单半年盘点之 React 与 ReactNative 篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目…
自定义 Babel 和 ESLint 插件是如何提高生产率与用户体验的原文地址：How writing custom Babel & ESLint plugins can increase productivity & improve user experience 原文作者：Kent C. Dodds 译文出自
React源码之Diff算法React框架使用的目的，就是为了维护状态，更新视图。为什么会说传统DOM操作效率低呢？当使用document.createElement()创建了一个空的Element时，会需要按照标准实现一大堆的东西，如下图所示。此外，在对DOM进行…
温习javascript之Array的使用 Array数组对象是用于构造数组的全局对象; 它是高阶，类似列表的对象。我们可以创建一个数组 var array = new Array(); var array = new Array(20);//数组的成员数量20 或 v
React Component写法的最佳实践原文：Our Best Practices for Writing React Components . 这里意译。有些点在之前的文章里提到过： #2 如果组件带有state或者方法，就使用Class写法。 Class写法如果组件带有sta
Node.js 性能调优之内存篇(四)——cpu-memory-monitor
Node.js v8.4.0 发布，添加内置 http2 实验支持 Node.js v8.4.0 发布了。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。 Node.js 使用高效、轻量级的事件驱动、非阻塞 I/O 模型。主要更新内容： HTTP2 通过 –exposed-http2 标志添加了内置 http2 的实验支持。 #14239 Inspector require() 现在在检查器控制台…
【全文搜索引擎 ElasticSearch 入门教程】全文=> 　　全文搜索属于最常见的需求，开源的 ElasticSearch （以下简称 Elastic）是目前全文搜索引擎的首选。　　它可以快速地储存、搜索和分析海量数据。维基百科、Stack Overflow、Github 都采用它。　　Elastic 的底层是开源库 Lucene。但是，你没法直接用 Lucene，必须自己写代码去调用它的接口。Ela…
2017-08-16 前端日报2017-08-16 前端日报精选理解 JavaScript 的 async/awaitJavaScript专题之偏函数[译]理解 Node.js 事件驱动机制PokemonGo：LBS游戏开发前端面试中的常见的算法问题Canary DevTools Update: top-level await is …
GitLab [Webhooks] 实现自动化服务器部署简介我们在部署我们的web应用时我们一般会寻求一些云平台服务器部署当然也可以直接在服务器里拉取远程仓库的代码当然我们也可以实现通过Webhooks(钩子)来实现服务器与远程仓库代码的同步这样一来我们在本地…
GitChat · 前端 | 从软件工程角度看大前端技术栈来自 GitChat 作者：韩亦乐前言我们都知道，大学几乎是没有 Web 前端课的。以我所在的大学为例，唯一引导我们了解 JavaScript 的也只是‘人机界面’和‘Web应用开发’选修课。再者，由于这些选修课的课时短、面向的…
学习JavaScript ES 2017: padStart & padEnd ES 2017推出 padStart 和 padEnd 。学习如何使用他们你可能在三分钟内就能掌握。 String Padding padStart() 和 padEnd() 方法用来把一个字符串填到另一个字符串，直到结果字符串到达提供的长度。字符串将在必要时会重复。 padStart() ：从字符串左边开始填充 padEnd() ：从字符串右边开始填充 …
在 APICloud 项目中使用 Webpack 前言最近项目所需，所以开始学习并且使用 APICloud 此款 hybrid APP 开发框架。粗略的看了下文档和部分 Demo 后，已经对 APICloud 开发有一定基础的了解。在这种过程令我有一点疑惑，APICloud 的开发流程和普通的 Web APP 开发其实是很相似的，但是却没有对目前主流的构建工具有先关的教程。我发现虽然官方提供了一个…
探索 ReactJS 中的 CSS 架构我们生活在一个新的时代，每一天都充满了各种各样的新工具和范式。我们总是试图将旧有的架构应用在新技术上，而那样极可能以失败告终。其中的一个例子便是 BEM—— 一个 CSS 命名约定，它解决的是那些可能不会再次出现的问题。先来讲一讲重要的背景知识。 BEM 是什么？ BEM 是 CSS 的一个命名约定，…
我们是如何将 Cordova 应用嵌入到 React Native 中 > 重写一个应用是一件简单的事，可是演进一个应用则是一件复杂的工作。过去的一年多里，我在工作上的主要职责是：手机 APP 开发。日常主要是编写基于 Ionic 和 Angular 的混合应用，并想方设法地帮助客户将之与 React Native 相结合。在完成了嵌入 WebView 后，重写插件等一系列工作后，便想记录一下这个…
Vuet 1.x 允许你定义飙车过程的集中式状态管理模式 Vuet Vuet
【想要成为软件开发中的王者，需要明白的 21 条准则】全文=> 　　本文笔者收集了 21 条有关软件开发的准则和技巧：这些观点可能互相矛盾，但仔细品味也会发现其不同点，可以对软件开发者有一定的启发。记住，它们并不是真理，只是观点而已。　　01、软件开发者的工作不是“写代码”，而是解决业务问题，“采用的新框架”常常不能解决业务问题…
ONE-ReactNative 首先说说写这个项目的初衷，rn用了快一年半的时间，身边也有很多朋友开始学习rn，从他们学习的方式方法中我深深的体会到，对于一个初学者他们最需要的是什么。因此我写了这个项目，或许你会认为这个项目太过于简单，但是这里面用到的知识却是最基础也最容易忽略的。传送门简
Node.js 性能调优之代码篇(一)——使用原生模块
vue-pano：基于 WebGL 的 vue 全景图组件基于 WebGL 的全景漫游 vue 组件，支持移动设备。扫描如下二维码或访问 https://chichou.github.io/vue-pano/ 查看演示。全景图片拍摄和准备全景图片可使用三脚架固定的相机
#开源项目#【Vue 可视化布局工具：Vue-Layout】详见： Vue-Layout 是一个基于 UI 组件的 Vue 可视化布局与代码生成工具。