20170815 前端开发日报

JavaScript 闭包，只学这篇就够了

闭包不是魔法这篇文章使用一些简单的代码例子来解释 JavaScript 闭包的概念，即使新手也可以轻松参透闭包的含义。其实只要理解了核心概念，闭包并不是那么的难于理解。但是，网上充斥了太多学术性的文章，对于新...

谈谈 JS 中的高级函数

该文章详细阐述了 JS 中常用的若干个高级函数，讲述了它们的原理以及实现细节，并通过例子演示了它们的用法

转变思维，更好地理解 js 程序设计

从事前端开发很久了，有幸在刚开始时就认识了一个教我面向对象思维的人，这种思维方式一直受用到今天。所以很想写一篇关于这方面的一点感受。对于一个码农来说，这样的文章不太好写，没有生动的图片，没有代码展示。但我觉得很重要，所以很想写出来。js 中

跨域那点事，JSONP 的秘密

如果你是一个 WEB 开发人员，你肯定遇到过跨域的问题。什么是跨域？我先假装你们不知道(^..^嘻嘻)，域名你们都知道，比如 www.baidu.com ，www.jd.com 等都属于域名，如果我想在京东的页面中通过一个关键字来请求百度获取搜索结果，这就是一个跨域请求。举个例子：民间一位姓陈的人家有一手上好的酿酒本事。他们家立下规矩...

使用 vue 构建移动应用

在移动应用中很多功能都是必不可少的，使用 vue 构建移动应用自然也就需要实现这些功能。之所以写这篇文章，是希望大家能更多的将注意力放在项目的核心业务上，而不是过多的关注通用功能。

date-fns —— 轻量级的 JavaScript 日期库

在 JavaScript 中处理日期是一件非常让人头疼的事情。原生的日期方法往往是冗长且不一致的，这给开发人员带来很大的困惑。但现在，好消息来了。现在已经有不少库，能让处理日期变得不再那么痛苦。这些库之于 JavaScript 原生的日期方法，就好比 jQuery 之于原生 DOM API。举个例子。这是一个对 S

Vue 组件通信实践记录

组件通信几乎所有的 mvvm 框架中都要涉及组件通信的功能（吐槽一下 knockout,毕竟是鼻祖就先不说它了）。而且目前的前端形式来看，组件化是一个项目的基础。所以选好一个合适的框架后，随着组件的不断增加，业务的复杂度提升，组件之间的通信变得尤为重要。实践方法

Express 实战（二）：Node.js 基础

在上一篇文章中，我们简单的介绍了 Node.js 。了解到它基于 JavaScript、天生异步、拥有大量的第三方类库。本文将会在之前的基础上，对 Node.js 进行更深入的介绍。其中主要内容包括：Node 的安装如何使用第三方模块生态第三方模块的安装一些简单的使用示例开发过程中的一些建议和技巧在...

探索 vue-spa 全家桶项目,解析配置,目录结构,路由以及状态管理的实现,附源码

1.简介项目是一个简单的权限管理页面,分为 3 个页面,首页,账户中心,登录页通过 vue-router 对于路由做权限控制,首页无需登录,跳转账户中心会自动检索是否登录,登录之后首页的登录按钮变为退出按钮,页面之间的的状态管理全部通过 vuex 进行管理项目演 1.简介项目是一个简单的权限管理页面,分为 3 个页面,首

一个移动微应用，让你掌握 React 开发核心理念

基于 react + redux + react-router 构建的移动端单页微应用，适合于 react、redux、react-router 核心概念的理解与掌握。

重温 vue 双向绑定原理解析

摘要：因为项目刚开始用的 vue 框架，所以早期也研究了一下他的代码看过相关文章的解析，说说也能说个七七八八。不过今天再去看以前的 demo 的时候，发现忽然一知半解了，说明当时可能也没有理解透，所以写篇文章让自己理解的更深一些。本篇文章大多数知识点实在学习了这篇摘要：因为项目刚开始用的 vue 框架，所以早期也研究了一下他的代码看过相关文章的解析，说说也能说个七七八八。不过今

编写自己的代码库(css3 常用动画的实现)

1.前言在月初的时候，发了 CSS3 热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）。js 的代码库也发过两次，两篇文章。之前也写了 css3 的热身实战，既然热身完了，是时候开始封装 css3 的代码库了，相比起 js 的...

页面滚动时自动显示隐藏导航效果（ jQuery ）

介绍一个简单的导航效果，当用户向下滚动页面时自动隐藏导航，在用户向上滚动页面时自动显示导航。支持 IE9+，Chrome，Safari，FireFox … 自动显示隐藏导航这种交互出现已经有一段时间了，特别是在移动设备上。这种 UX 模式背后的想法简单而有效：我们

2017 JS 开发指南

过去几年可能你一直在写接口。也许一直在优化你们公司数据的搜索速度，也可能在为微波炉写嵌入式程序。是否记得那时你摆弄 Prototype.js ，已经过去好长一段时间了。现在你决定是时候提升自己的前端技能了，这时你将看到这样一幅风景: 当然你不是在里面寻找某人，而且随机寻找 25 个人，你甚至都不知道他们的名字...

React Web 动画的 5 种创建方式，每一种都不简单

以前一直投入在 React Native 中，写动画的时候不是用 CSS 中的 transitions / animations，就是依赖像 GreenSock 这样的库，最近转向 Web，在 Tweet 得到很多大佬关于 React Web 动画的回应，于是决定分享给大...

学习 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

JS 面向对象程序设计

面向对象(Object-Oriented, OO)的语言有一个标志，那就是都有类的概念，通过类可以创建任意多个具有相同属性和方法的对象。而 ECMA-262 把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或函数”。其对象的创建主要有两种方式，对象字面量面向对象(Object-Oriented, OO)的语言有一个标志，那就是都有类的概念，通过类可以创建任意多个具有

浅谈 Vue 组件传递数据与通信

对于使用 Vue 的新手来说，组件之间的数据传递一直是一个比较头疼的问题，在实际开发中我也踩了些坑，简单的做一个总结：父子组件之间的数据传递

ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解

ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解归纳于笔者的现代 JavaScript 开发：语法基础与实践技巧系列文章。本文首先介绍 ES6 中常用的三种变量声明方式，然后讨论了 JavaScript 按值传递的特性，最后介绍...

** [ js 基础 ] Javascript “继承”**

是时候写一写 “继承”了，为什么加引号，因为当你阅读完这篇文章，你会知道，说是继承其实是不准确的。一、类 1、传统的面向类的语言中的类：类／继承描述了一种代码的组织结构形式。举个例子： “汽车”可以被看作是“交通工具”的一种特例。我们可以定义一个 Vehicle 类和一个 Car 类来对这种关系进行描述...

前端每周清单第 26 期：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧，HeadlessChrome 攻防

作者：王下邀月熊编辑：徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注 [前端之巅] 微信公众号（ ID：frontshow ），及时获取

All About React Router 4

My intentions for this article aren ’ t to rehash the already well-written documentation for React Router 4. I will cover the most c

快速理解 JavaScript 中的 LHS 和 RHS 查询

简述编译原理 JavaScript 程序中的一段源代码在执行之前会经历三个步骤，统称为编译分词 /词法分析解析 /语法分析代码生成先看原书对一个赋值操作的拆解说明：变量的赋值操作会执行两个动作，首先编译器会在当前作用域中声明一个变量（如果之前没有声明过），然...

深入浅出 JavaScript 的 Array.prototype.sort 排序算法

本文要解决的问题 1、找出 Array.prototype.sort 使用的什么排序算法 2、用一种直观的方式展示 Array.prototype.sort 的时间复杂度，看看它有多快？ 3、实际开发中要注意的问题 Array.prototype.sort 各浏览器的...

使用 Node.js 搭建一个 API 网关

原文地址：Building an API Gateway using Node.js 原文作者：Péter Márton 译文出自：掘金翻译计划本文永久链接：github.com/xitu/gold-m … 译者：MuYunyun 校对者：jasonxia23

使用 offline-plugin 搭配 webpack 轻松实现 PWA

谈起 PWA，许多人可能还只停留在“了解”的层面，比较少在实践中真正地尝试过，更多的仅仅是对着网上的教程和例子大概玩过。然而，网络上的例子多是简单的 demo，鲜有与真正的开发相结合，例如和 webpack 的工程化结合。这篇文章将会从一个 webpack plugin

浅谈 redux-form 在项目中的运用

redux-form 的使用心得

使用 Yeoman 定制前端脚手架

首先附上 Yeoman 官网：yeoman.io/ 我制作的前端脚手架：generator-jake-front 以及我在前端同学的分享会上的分享 ppt：yeoman.key 如果想快速制作一个脚手架，并且不需要实现特别复杂的定制化，看完这篇文章足够，如果想要实现

Css Grid 高亮 | Chrome 插件

How to install Download repo Extract zip file Drag 'n drop folder -> Chrome Extensions (chrome://e

20 条实用的 git 命令

个人总结出的一些实用的 git 命令，分享给大家。git config --global color.ui true 让 git 命令默认使用彩色输出。这条命令在 git 2 之后已经成为默认配置，但如果你还在用比较老的版本（例如 CentOS 上的默认...

来自官方博客：Bootstrap 4 Beta 发布

本文翻译自 Boostrap 开发团队官方博客。经过两年的开发，我们终于发布了第一个 beta 版本的 Bootstrap 4。在此之间，我们一共把代码彻彻底底搞砸了至少 27 次，提交了将近 5,000 个 commit，修改了 650+ 个文件，添加了

JavaScript 机器学习库：DeepLearn.js

详见：DeepLearn.js 是由谷歌开源的可实现硬件加速的 JS 机器学习库，它旨在提供高效的机器学习构建模块，使我们能够在浏览器中训练神经网络，并在推断模式中运行预训练模型。

** [干货] vue 源代码简单解析**

最近饶有兴致的又把最新版 Vue.js 的源码学习了一下，觉得真心不错，个人觉得 Vue.js 的代码非常之优雅而且精辟，作者本身可能无 (bu) 意 (xie) 提及这些。那么，就让我来吧：）程序结构梳理 Vue 程序结构 Vue.j...

原文：https://mp.weixin.qq.com/s/r9Mha_23CNVFuzEGKN_6sA

前端开发博客

——————————————————

领略前端技术阅读前端开发博客

扫描二维码，关注前端开发博客

▼