first do it, then do it right, then do it better.

子曰：学好Object.defineProperty，你也可以写一个Vuejs
大部分内容参考自Microsoft Docs

Vuejs 的实现中用到了Object.defineProperty() 方法，因此在这里系统的了解了一下此方法。

作用

将属性添加到对象，或修改现有属性的特性。

语法

1

Object.defineProperty(object, propertyname, descriptor)

参数

object
必需。要在其上添加或修改属性的对象。这款有是一个本地JavaScript 对象（即用户定义的对象或内置对象）或DOM 对象。
propertyname
必需。一个包含属性名称的字符串。
descriptor
必需。属性描述符。它可以针对数据属性或访问器属性。

返回值

已修改对象

子曰：前端技术的基石：浏览器
参考浏览器的工作原理：新式网络浏览器幕后揭秘 摘录其中一部分知识点

作为一名网络开发人员，学习浏览器的内部工作原理将有助于您作出更明智的决策，并理解那些最佳开发实践的个中缘由。尽管这是一篇相当长的文档，但是我们建议您花些时间来仔细阅读；读完之后，您肯定会觉得所费不虚。

保罗·爱丽诗 (Paul Irish)，Chrome 浏览器开发人员事务部

浏览器的主要功能就是向服务器发送请求，在浏览器窗口中展示网络资源。

大多数浏览器的用户界面具有以下元素：

• 地址栏：用来输入URL

  1	github.com/JobbyM

• 前进后退按钮

  1 2	window.history.go(1) window.history.go(-1)

• 书签设置选项

  1 2	window.sidebar.addPanel(title, url, '') window.external.AddFavorite(url, title)

• 重新加载当前页面的按钮

  1	window.location.reload()

Web 浏览器的参考架构

浏览器参考架构图

下面是部分概述

1. 用户界面（Uesr Interface）
   包括地址栏、前进/后退按钮、书签等。
2. 浏览器引擎（Browser engine）
   在用户界面和呈现引擎之间传送指令。
3. 呈现引擎（Rendering engine）
   负责显示请求的内容。如果请求的内容是HTML，它就负责解析HTML 和CSS 内容，并将解析后的内容显示在屏幕上。
4. 网络（Networking）
   用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
5. JavaScript 解释器（JavaScript Interpreter）
   用于解析和执行 JavaScript 代码。
6. XML 解析器（XML parser）
7. 用户界面后端（UI Backend）
   用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
8. 数据持久化（Data persistence）
   这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

Mozilla 浏览器架构图

子曰：JS 啊，全是原型
下面相关知识点来自《JavaScript 权威指南（第六版）（中文版）》6.8 对象的三个属性

每一个JavaScript 对象都有与之相关的原型（prototype）、类（class）和可扩展性（extensible attribute）这三个属性。

子曰：原型是JavaScript 对象一个属性

对象的原型属性是用来继承属性的，这个属性如此重要，以至于我们经常把“o 的原型属性” 直接叫做“o 的原型”。

子曰：原型的重要性，或原型是用来干什么的

原型属性是在实例对象创建之处就设置好的。例如，通过对象直接量创建的对象使用Object.prototype 作为它们的原型。而Object.prototype 在使用对象直接量创建对象之前就已经存在了。

子曰：原型是什么时候产生的

在ECMAScript 5 中，将对象作为参数传入Object.getPrototypeOf() 看查询它的原型。在ECMAScript 3 中，则没有与之等价的函数，但经常使用表达式o.constructor.prototype 来检测一个对象的原型。

子曰：如何查询原型

通过new 表达式创建的对象，通常继承一个constructor 属性，这属性指代创建这个对象的构造函数。constructor.prototype 才是对象直接量的真正原型，但对于通过Object.create() 创建的对象则往往不是这样。

子曰：还是如何表示原型，但是提供一个constructor 属性

想要检测一个对象是否是另一个对象的原型（或处于原型链中），请使用isPrototypeOf() 方法。例如，可以通过p.isPrototypeOf(o) 来检测p 是否是o 的原型：

1
2
3
4

var p = {x:1}                     // 定义一个原型对象
var o = Object.create(p)          // 使用这个原型对象创建一个对象
p.isPrototypeOf(o)                // => true: o 继承自p
Object.prototype.isPrototypeOf(o) // => true: p 继承自Object.prototype

子曰：如何检测一个对象是否是另一个对象的原型

Mozilla 实现的JavaScript 对外暴露了一个专门命名为__proto__ 的属性，用于直接查询/设置对象的原型。但并不推荐使用__proto__。

子曰：为什么使用__proto__，__proto__ 的由来

子曰：道生一，一生二，二生三，三生万物
下面相关知识点来自《JavaScript 权威指南（第六版）（中文版）》6.1.3 原型，配图为使用canvas.qq.com 自己创建的

每一个JavaScript 对象（null 除外）都和另一个对象相连。另一个对象就是我们熟知的原型，每一个对象都从原型继承属性。

所有通过对象直接量创建的对象，都具有同一个原型对象，并可通过JavaScript 代码Object.prototype 获得原型对象的引用。

通过关键字new 和构造函数调用创建的对象的原型就是构造函数的prototype 属性的值。因此，同使用{} 创建对象一样，通过new Object() 创建的对象也继承自Object.prototype。同样，通过new Array() 创建的对象的原型就是Array.prototype.

没有原型的对象为数不多，Object.prototype 就是其中之一。它不继承任何属性。

其他原型对象都是普通对象，普通对象都具有原型。所有内置构造函数（以及大部分自定义的构造函数）都具有一个继承自Object.prototype 的原型。例如，Date.prototype 的属性继承自Object.prototype，因此由new Date() 创建的Date 对象的属性同时继承自Date.prototype 和Object.prototype。这一系列链接的原型对象就是所谓的“原型链（prototype chain）”

子曰：学好百分值，考试考百分

首先是确定CSS 中的percentage 都可以应用在CSS 中的哪些属性，以及这些属性的值如何进行计算的，参考CSS 参考手册进行统计。

定位（Positioning）

1. top
   用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。
2. right
   用百分比来定义距离右边的偏移量。百分比参照包含块的宽度。可以为负值。
3. bottom
   用百分比来定义距离底部的偏移量。百分比参照包含块的高度。可以为负值。
4. left
   用百分比来定义距离左边的偏移量。百分比参照包含块的宽度。可以为负值。
   阅读全文 »

特别声明：此篇文章内容来源于@CHRIS COYIER 的Centering in CSS:A Complete Guide

子曰：CSS 居中是一个非常常见的问题，无论是在项目中，还是在各种面试资料中，这篇文章进行了系统的解答
本文为个人翻译

我们总是抱怨使用CSS居中。 为什么要这么辛苦？ 这个问题不是说很难去解决，而是由于不同的情况有很多不同的方式来实现，我们难以抉择去选择那一个方式去解决它。

所以我们希望通过决策树来更处理它。

我需要居中…

简介

在阿里云买了一个云虚拟主机，叫共享虚拟主机普惠版，6 块钱一年。本着练习上手的目的，尝试在阿里云云虚拟主机上安装Z-BlogPHP，一个个人建站的CMS 系统。

云虚拟主机网页空间为200M，MySQL 空间为20M，支持PHP。应该还是错的。

系列文章

1. GitHub Pages Hexo 配置来自阿里云的域名

简介

按照GitHub Pages Hexo 配置来自阿里云的域名 进行了域名配置，但是发现了问题，一开始的https://jobbym.github.io 的协议为https，而现在的http://zouzeir.xyz 的协议为http，现在需要寻找能够将http 转换成https 的方法。

简介

首先是在阿里云上注册了一个新域名，zouzeir.xyz，同时我已经在GitHub Pages 上建立自己的博客：https://jobbym.github.io，现在我希望将zouzeir.com 映射到https://jobbym.github.io 上。

前言

工作之余，按照nswbmw 的一起学Node.js教程，一步一步实现了一个Express + MongoDB 的多人博客，并部署到了Heroku 上。

本篇教程就是在4.15 部署的基础上，按照自己的实际操作记录的部署过程。