SPA路由机制详解（看不懂不要钱~~）
前言总所周知，随着前端应用的业务功能起来越复杂，用户对于使用体验的要求越来越高，单面（SPA）成为前端应用的主流形式。而大型单页应用最显著特点之一就是采用的前端路由跳转子页面系统，通过改变页面的URL，在不重新请求页面的情况下，更新页面视图。更新视图但是浏览器不重新渲染整个页面，只是重新渲染部分子页面，加载速度快，页面反应灵活，这是 SPA 的优势，这也是前端路由原理的核心，这会给人一种仿佛在...
[译] 我从没理解过 JavaScript 闭包
正如标题所说，JavaScript 闭包对我来说一直是个迷。我 看过 很多 文章，在工作中用过闭包，甚至有时候我都没有意识到我在使用闭包。 最近参加一个交流会，有人用某种方式向我解释了闭包，点醒了我。这篇文章我也将用这种方式来解释闭包。这里要称赞一下 CodeSmith 的优秀人才和他们的《JavaScript The Hard Parts》系列。
高效遍历匹配Json数据，避免嵌套循环
工作中经常会遇到这样的需求：1.购物车列表中勾选某些，点击任意一项，前往详情页，再返回购物车依旧需要呈现勾选状态2.勾选人员后，前往别的页面，再次返回，人员依旧程勾选状态3.等等....数据结构如下：// 缓存数据var students = [{ id: 35, name: '小明', age: 25, address: '环球中心',checked:true},{ id: 36, name: ...
[译] axios 内部设计分析
在前端开发过程中，我们经常遇到需要用到异步请求的场景。所以，一个功能齐全的 HTTP 请求库，可以极大的减少开发时间，提高开发效率。 axios 是近几年非常热门 HTTP 请求库。目前在 Github 已经有超过 40k 的 stars，也得到很多权威人士的推荐。 因此，有必要去了解一下 axios 是如何设计的、是如何实现 HTTP 请求库的。写这篇文章时 axios 的版本是 0.18.0，我们以此版本为例，来解读分析源码细节。axios 的源码是在 lib 目录下，以下涉及到的路径都是相对 lib 目录。
JavaScript七种非常经典的创建对象方式
JavaScript创建对象的方式有很多，通过Object构造函数或对象字面量的方式也可以创建单个对象，显然这两种方式会产生大量的重复代码，并不适合量产。接下来介绍七种非常经典的创建对象的方式，他们也各有优缺点。（内容主要来自于《JavaScript高级程序设计》，还参考了一下别人写的文章）一、工厂模式function createPerson(name, job) {var o = new ...
JavaScript系列 事件
一步，一步前進の一步事件是文档或者浏览器窗口中发生的一些交互瞬间。JS注册事件处理程序来预订事件，当事件发生的瞬间来执行相应的代码，进而实现 JS 和 HTML(即文档或者浏览器窗口) 的交互。事件流事件流描述的是从页面中接收事件的顺序。用手指戳一下屏幕上的同心圆的中心，先点到的是最外围的大圆，还是最核心的小圆呢？这个就是事件流要处理的本质问题。早起的 IE 和 Netscape 对此...
【资源集合】 ES6 元编程（Proxy & Reflect & Symbol）
导读几年前 ES6 刚出来的时候接触过 元编程（Metaprogramming）的概念，不过当时还没有深究。今天在应用和学习中不断接触到这概念，比如 mobx 5中就用到了 Proxy 重写了 Observable 对象，觉得有必要梳理总结一下。本文不生产代码，只当代码、文档的搬运工。所以本文并非是一篇传统意义上的教程，更类似于 github awesome这样列表文章。1、理解元编程Sy...
现代JS中的流程控制：详解Callbacks 、Promises 、Async/Await
JavaScript经常声称是_异步_。那是什么意思？它如何影响发展？近年来这种方法有何变化？请思考以下代码：result1 = doSomething1();result2 = doSomething2(result1);大多数语言都处理每一行同步。第一行运行并返回结果。第二行在第一行完成后运行无论需要多长时间。单线程处理JavaScript在单个处理线程上运行。在浏览器选项卡中执行...
DOM系列：DOM事件的传播
通过前面的DOM事件模型和事件绑定的姿势两节的学习，我们对JavaScript中的DOM事件有了一定的基础。但忽略了有关事件如何被触发的重要细节。事件传播让我们从事件传播开始。事件传播是事件冒泡和事件捕获的总称。先来看一张图，这张图在前面的文章中有也出现过，但没有深入的介绍。先上图吧！W3C规范中定义了三个事件阶段，依次是捕获阶段、目标阶段和冒泡阶段。事件对象按照上图的传播路径依次完成...
2018年你需要知道的13个JavaScript工具库
为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。JavaScript依然是2018年最受欢迎、最流行的编程语言，所以它的生态系统也十分完善。JavaScript小小的标准库不足以应付各种开发需求。在Github上，有许多流行的JavaScript库。在这里，我整理了一个列表推荐给大家：1. Lodash & Underscore也许大多数童鞋都已经...
JavaScript中常见的十五种设计模式
在程序设计中有很多实用的设计模式，而其中大部分语言的实现都是基于“类”。在JavaScript中并没有类这种概念，JS中的函数属于一等对象，在JS中定义一个对象非常简单（var obj = {}），而基于JS中闭包与弱类型等特性，在实现一些设计模式的方式上与众不同。本文基于《JavaScript设计模式与开发实践》一书，用一些例子总结一下JS常见的设计模式与实现方法。文章略长，自备瓜子板凳...
JS 中的offset、scroll、client总结
经常碰到offset、scroll、client这几个关键字，每次都要各种实验，这里总结一下。两张图镇楼，随时翻阅1. offsetoffset 指偏移，包括这个元素在文档中占用的所有显示宽度，包括滚动条、padding、border，不包括overflow隐藏的部分offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的父级元素中最近的（在...
Promise必知必会 - 前端开发
前端开发中经常会进行一些异步操作，常见的异步有：网络请求：ajaxIO操作： readFile定时器：setTimeout博客地址回调最基础的异步解决方案莫过于回调函数了前端经常会在成功时和失败时分别注册回调函数const req = new XMLHttpRequest();req.open('GET', URL, true);req.onload = function () {...
精读《手写 SQL 编译器 - 回溯》 - 前端精读
1 引言上回 精读《手写 SQL 编译器 - 语法分析》说到了如何利用 Js 函数实现语法分析时，留下了一个回溯问题，也就是存档、读档问题。我们把语法分析树当作一个迷宫，有直线有岔路，而想要走出迷宫，在遇到岔路时需要提前进行存档，在后面走错时读档换下一个岔路进行尝试，这个功能就叫回溯。上一篇我们实现了 分支函数，在分支执行失败后回滚 TokenIndex 位置并重试，但在函数调用栈中，如果...
JavsScript之浅拷贝与深拷贝
在开发的过程中，我们往往需要复制一个数据，在复制基本数据类型的时候不会出现问题，如string、number、null等。但是我们复制一个引用类型的数据时，往往会出现问题，如array、object。浅拷贝看下面这段代码123var arr1 = [1,2,3];var arr2 = arr1;arr2.push(4)我们打印一下看看arr1``arr2的结果12arr1: [1, 2, ...
DOM系列：DOM事件模型_JavaScript, DOM, DOM系列, DOM事件
通过上一节的学习，对DOM事件有了一个简单的了解。但这只是学习DOM事件相关知识的起步点。今天来了解一下DOM事件的模型。基本事件模型在Web应用程序或Web网站中，可以通过使用者操作或系统的事件，达到相应的响应。而在JavaScript中，事件在未得到标准化之前，各浏览器就有一个事件模型 —— 基本事件模型（Basic Event Model）。在基本事件模型中，要在某个事件发生时，调用...
一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends
说实在话，以前我只需要知道“寄生组合继承”是最好的，有个祖传代码模版用就行。最近因为一些事情，几个星期以来一直心心念念想整理出来。本文以《JavaScript高级程序设计》上的内容为骨架，补充了ES6 Class的相关内容，从我认为更容易理解的角度将继承这件事叙述出来，希望大家能有所收获。1. 继承分类先来个整体印象。如图所示，JS中继承可以按照是否使用object函数（在下文中会提到），将继承分...
Async 函数的使用及简单实现
解决回调地狱的异步操作，Async 函数是终极办法，但了解生成器和 Promise 有助于理解 Async 函数原理。由于内容较多，分三部分进行，这是第三部分，介绍 Async 函数相关。第一部分介绍 Generator，第二部分介绍 Promise。在这部分中，我们会先介绍 Async 函数的基本使用，然后会结合前两部分介绍的生成器和 Promise 实现一个 async 函数。1）As...
译你应该了解的基本JavaScript库和框架
JavaScript已经存在了20多年，它是一种不断发展的语言。最近，这门语言经历了快速的发展，这让我想知道，如今广为人知的现代前端JavaScript技术几年后是否还会有用。尽管如此，通过使用最新的工具和框架来实现更好的开发工作流，走在前面是很重要的。本文探讨了您应该立即学习的各种JavaScript库、框架和工具。前言JavaScript环境已经变得巨大。它有自己的生态系统，包括库、框...
HTML 5 Drag and Drop 入门教程
在 HTML 5 之前，想要实现 Drag and Drop（拖拽/拖放）一般需要求助于 JQuery，所幸HTML 5 已经把 DnD 标准化，现在我们能“轻易”地为几乎任意元素实现拖放功能。只是它的难度取决于你对 API 的理解程度，而官方文档并不好懂。这篇文章会一步步带你了解它的 API。最终效果如下：...