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