前言 这次的 why what or how 主题：JavaScript 对象 & 原型。 此类文章在百度上一搜一大把，其实不用再写了。但是本着把这个问题解释得清清楚楚、明明白白的想法，还是开始写了。 原因如下： 1. 面试宝典类文章，放张图片一糊弄，让人觉得自己理解了。 2. 解释类文章，告诉你一堆语法，对语法一顿解释，告诉你就是这样的，还是没说清楚。 3. 很少有文章单独解释这个点！但这个点是基础！真的很重要！ 所以，本篇文章想说一说对象 & 原型。但为了确保能顺利理解，请先看完 JS 变量存储？栈 & 堆？NONONO！。因为该篇文章会从变量存储的角度解释 JavaScript 对象 & 原型，请确保看完，再看这篇文章。
前言 JavaScript 以单线程的形式运行在宿主环境下，并采用回调的形式来解决异步任务。 为什么是单线程？ JavaScript 最开始出现，是为了给 Web 页面增添一些动态效果，那么就避免不了获取页面上的元素信息。如果 JavaScript 以多线程的形式运行在浏览器内，两个线程内的 JavaScript 同时获取或修改某个页面上的元素，那么浏览器该让哪个 JavaScript 线程拥有获取或修改该元素的权限呢？由于元素信息会经常发生变化，那么，又该如何同步各个线程内所保存的元素信息呢？ 所以，综合以上问题，JavaScript 是单线程的原因就显而易见了。单线程执行时，对于元素信息的引用在同一时间仅可能只有一个，那么以上所有问题都不存在了。 什么是异步任务？ 任何代码在执行时，都会碰到一些需要大量时间运算或等待的代码。在浏览器环境下，常见的就是 HTTP 任务，比如资源加载（图片的 onload 事件）、Ajax 请求（XMLHttpRequest 的 onload 事件），还有页面元素的点击事件以及定时器等。 以上任务都极其耗时，而且会受环境影响。
前言 通过浏览器下的 Event Loop，可以得知 JavaScript 是一门事件驱动的语言，JavaScript 主线程通过不断调用事件队列中的事件来完成异步任务。那么，Node.js 下是否也是如此？ Node.js 下的事件队列 在 Node.js 官网有这样一篇文章：The Node.js Event Loop, Timers, and process.nextTick()。 该文章主要讲述了 Node.js 中如何处理以及实现 Event Loop。 主要包含以下内容： 事件队列 不同于浏览器，Node.js 下有 6 个事件处理阶段，其执行顺序和队列名称如下： ┌───────────────────────────┐ ┌─>│ timers │ │ └─────────────┬─────────────┘ │ ┌─────────────┴─────────────┐ │ │ pending callbacks │ │ └─────────────┬─────────────┘ │
前言 作为程序员，技术的落实与巩固是必要的，因此想到写个系列，名为 why what or how，每篇文章试图解释清楚一个问题。 这次的 why what or how 主题：现在几乎所有人都知道了 HTML5，那么 H5 相比于 HTML4 到底有什么区别呢？ 升级版？标准版！ HTML5 作为 HTML 标准的第 5 版，于 2014 年发布。相信关注过 HTML5 发展史的朋友都知道，该版本是 WHATWG 和 W3C 握手言和后诞生的，是 W3C 组织与浏览器厂商相互妥协的结果。其中的绝大部分规范都由 WHATWG 组织制定，之后由 W3C
前言 作为程序员，技术的落实与巩固是必要的，因此想到写个系列，名为 why what or how，每篇文章解释清楚一个问题。 作为 why what or how 的第一章，先选一个较为简单的话题：什么是 HTML？ 释义 HTML——HyperText Markup Language，超文本标记语言。 标记语言，一类以固定的形式描述文档结构或是数据处理细节的语言，一般为纯文本形式，其内容作为其他程序的输入。 因此，HTML 是一种用于描述网页的标记语言，纯文本，其内容作为浏览器的输入。浏览器会解析 HTML 文本内容，最终呈现页面。 那么超文本又是什么？ 在网页出现前，人们的阅读习惯是从前往后、从上到下，就像阅读小说，必须从头到尾地看完。思维是单向的，并不存在岔路口。而超文本从字面上理解，就是超出了一般的阅读习惯：看文章时，思维是发散的，
前言 作为程序员，技术的落实与巩固是必要的，因此想到写个系列，名为 why what or how，每篇文章试图解释清楚一个问题。 why what or how 的第二章：什么是 CSS？ 释义 CSS——Cascading Style Sheets，层叠样式表。 CSS 也算是一种标记语言，其内容作为浏览器的输入，浏览器会解析其文本内容，作为 HTML 附加的样式信息，用以修饰标签。 标记语言，一类以固定的形式描述文档结构或是数据处理细节的语言，一般为纯文本形式，其内容作为其他程序的输入。 样式表大家都很清楚，就是记录样式信息的表格，以键值对的形式存在，格式如下： p { font-size: 10px; } 那么何为层叠呢？层叠的意义是什么？ 层叠，字面意思就是层层叠加。我们知道，HTML 的页面结构是树状的，不同标签的层级嵌套最终组合形成了页面。
前言 作为程序员，技术的落实与巩固是必要的，因此想到写个系列，名为 why what or how，每篇文章试图解释清楚一个问题。 这次的 why what or how 主题：什么是 JavaScript？ 释义 JavaScript：一种解释性脚本语言。 解释性脚本语言：一类不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”，但其内容的执行不需要提前编译的语言。通常作为别的程序的输入。 JavaScript 是一种用于描述网页逻辑、处理网页业务的解释性脚本语言。它使用纯文本，其内容作为浏览器的输入，由浏览器负责解释、编译和运行。 目前，JavaScript 也成功应用于服务端。服务端的 JavaScript 用于描述业务逻辑，其内容作为 Node.js 的输入，由 Node.js 负责解释、编译和运行。 JavaScript
前言 这次的 why what or how 主题：单页应用的 router 模式，Hash、History 是什么？ router 作为单页应用中的重要组成，有两种模式供我们选择。那么，这两种模式有何区别，各自的优势又在哪里？ 想要深入对比两种模式的区别，我们首先要知道什么是路由？ 什么是路由？ 路由定义如下：路由是 URL 的路径，也就是 URL 中的 path 部分。一个路由对应一个具体资源，可能是文件，也可能是数据。 在单页应用出现之前，路由已在服务端被广泛使用，那么前端何时开始有了路由？ 伴随着浏览器性能的提升、网速加快以及 Ajax 技术的成熟，部分前端程序员发现，使用 JavaScript 在前端维护模板，再用 Ajax 从服务端获取数据，就能将模板和数据拼成动态页面呈现给用户。随着这项技术日渐成熟，
前言 作为程序员，技术的落实与巩固是必要的，因此想到写个系列，名为 why what or how，每篇文章试图解释清楚一个问题。 这次的 why what or how 主题：如何使用背景，或者说如何将背景使用到极致？ 背景作为 CSS 中的老牌属性，相信大家并不陌生，相关属性也不少。希望大家在看这篇文章时，先放下对背景的固有印象，跟着下面的思路，深入地了解浏览器是如何使用这些属性的。 既然想要深入了解，cosplay 成浏览器，体验一把背景绘制，是再好不过的了。 那么我们正式成为浏览器，拿起画笔，画出代码所规定的背景。 绘制 假设浏览器就是我们，需要解析以下这段 CSS，并为元素绘制背景： .box1 { background-color: #000; background-image: url(image.png); background-size: 40px 40px;
前言 作为程序员，技术的落实与巩固是必要的，因此想到写个系列，名为 why what or how，每篇文章试图解释清楚一个问题。 这次的 why what or how 主题：如何使用 Flex？ 是什么？ Flex——一种布局方式。 在深入了解前，先来看看浏览器的支持情况吧： 一片绿色，那还等什么呢？赶紧掌握呀~ 先了解一下布局的发展史，在了解历史的基础上再回头看看 Flex。以史为镜，可以知兴替嘛~ 布局发展史 * Table 作为 HTML 的老牌元素，Table 虽然作为表格存在，但是很长一段时间却被用来布局，大致的过程就是将设计稿按照表格切好，然后在表格响应位置放上内容。虽然笔者没有经历过这个阶段，但想想也是很复杂的。之前在学校的时候，学校的官网就是用表格来写的页面，不知道现在改了没有。 * div + css 可以说这是目前大多数网站的布局方式，按照
前言 这次的 why what or how 主题：JavaScript 类型转换。 什么是类型转换，以及为什么要进行类型转换？相信绝大多数熟悉面向对象的开发者都知道：是为了匹配类型！ 但这是 JavaScript 的世界，可以说原本就没有类型系统，那么为什么 JavaScript 的世界也有类型转换？ 为了容错！并且 JavaScript 世界的类型转换也不是发生在对象上，而是在基础类型！ 类型！ 刚说完 JavaScript 没有类型，怎么又开始说类型了？ 这里指的是基础类型。相信大家对 JavaScript 数据类型已经有了充分了解，这里不再啰嗦，主要有以下 7 种： * 数值：1、1.0、1e10 * 字符串："string"、"foo"
前言 这次的 why what or how 主题：JavaScript 变量存储。 无论哪门语言，变量都是组成程序的基础。变量可以绑定数字、对象；在 JavaScript 中，函数同样可以作为值被变量绑定。 那么如此重要的变量，在 JavaScript 中究竟是如何进行存储的？ 栈 & 堆 ? 栈（Stack）又名堆栈，它是一种运算受限的线性表。限定仅在表尾进行插入和删除操作的线性表。 在百度上搜索 JavaScript 变量存储，能看到很多文章，无外乎一个结论： 对于原始类型，数据本身是存在栈内，对于对象类型，在栈中存的只是一个堆内地址的引用。 但是，我突然想到一个问题：如果说原始类型存在栈中，那么 JavaScript 中的闭包是如何实现的？ 当然想要深究这个问题，有必要先把栈（Stack）和堆（Heap）给说说清楚。