我一直很难理解Javascript语言的继承机制。
它没有”子类”和”父类”的概念，也没有”类”（class）和”实例”（instance）的区分，全靠一种很奇特的”原型链”（prototype）模式，来实现继承。
我花了很多时间，学习这个部分，还做了很多笔记。但是都属于强行记忆，无法从根本上理解。

下面，我尝试用自己的语言，来解释它的设计思想。彻底说明白prototype对象到底是怎么回事。其实根本就没那么复杂，真相非常简单。

1、从历史说起

要理解Javascript的设计思想，必须从它的诞生说起。
1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器，轰动一时。但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。比如，如果网页上有一栏”用户名”要求填写，浏览器就无法判断访问者是否真的填写了，只有让服务器端判断。如果没有填写，服务器端就返回错误，要求用户重新填写，这太浪费时间和服务器资源了。

Read More

说明

　　该教程绕开了javascript的一些基本的语法知识，直接讲解javascript中最难理解的两个部分，也是和其他主流面向对象语言区别最大的两个部分——原型和闭包，当然，肯定少不了原型链和作用域链。帮你揭开javascript最神秘的面纱。

　　为什么要偏偏要讲这两个知识点？

　　这是我在这么多年学习javascript的经历中，认为最难理解、最常犯错的地方，学习这两个知识点，会让你对javascript有更深层次的理解，至少理解了原型和作用域，就不能再算是javascript菜鸟了。另外，这两方面也是javascript与其他语言不同的地方，学习这样的设计，有助于你开阔眼界，帮助你了解编程语言的设计思路。毕竟，你不能只把眼睛盯在一门语言上。

　　闲话不多讲，相信奔着这个话题来的朋友，也知道javascript原型和作用域的重要性。

Read More

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。

一、变量的作用域

要理解闭包，首先必须理解Javascript特殊的变量作用域。
变量的作用域无非就是两种：全局变量和局部变量。
Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

1
2
3
4
5

var n=999;
function f1(){
　　alert(n);
}
f1(); // 999

另一方面，在函数外部自然无法读取函数内的局部变量。

1
2
3
4

function f1(){
　　var n=999;
}
alert(n); // error

这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

1
2
3
4
5

function f1(){
　　n=999;
}
f1();
alert(n); // 999

二、如何从外部读取局部变量？

出于种种原因，我们有时候需要得到函数内的局部变量。但是，正常情况下，这是办不到的，只有通过变通方法才能实现。
那就是在函数的内部，再定义一个函数。

1
2
3
4
5
6

function f1(){
　　var n=999;
　　function f2(){
　　　　alert(n); // 999
　　}
}

Read More

1.元素的偏移量

元素的偏移量包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意：这里并不包括外边距）。

2.客户区大小

元素的客户区大小指的是元素内容机器内边距占据空间的大小。

Read More

CSS3的提出使得CSS不再是单纯的样式表，只要运用得到，就可以实现一些我们很棒的动画效果，最近项目有需求需要实现一个环形进度条，一开始没有思路，在看了《CSS Secret》之后觉得有受启发，便记录下这个过程。在过去，实现一个这样的进度条难免要拼接大量图片，CSS3和HTML5的出现使得这个过程变得简单无比。
首先，我们需要一个元素来承载我们的样式：

1

<div class="pie"></div>

事实上，如果要实现环形图，只要实现饼图，然后在其上覆盖一层遮罩即可，所以我们可以先从如何实现饼图开始：

1
2
3
4
5
6
7
8

.pie {
    width : 200px;
    height : 200px;
    border-radius: 50%;
    background: #ddd;
    margin: 0 auto;
    position: relative;
}

我们首先通过.pie实现了一个圆形，并将其居中方便我们进行观察，效果如下：

Read More

相信凡是接触过编程的人对函数这个概念必然不会陌生，几乎所有的编程语言都会引入函数这个概念，而函数的实质就是封装一丢执行流程的组合，方便我们在各处进行调用，在面向对象没有出现之前，函数式编程曾经是主流的编程模式。

由于需要在团队做一个有关Javascript函数的分享，顺便就整理了一些内容记录下来。Javascript的函数是我们在coding时不可避免的工具，然而我们很少会去追本溯源地挖掘函数究竟是什么？事实上，就好像一个组装好的玩具，如果不将其拆开，似乎也能玩得得心应手，但却总觉得少了些什么，不如拆拆看，说不定会有有趣的发现。

一、Javascript函数到底是什么？

关于Javascript函数到底是什么，《Javascript高级程序设计》给出了定义————函数是对象，函数名是指针。是的，函数是对象，但它似乎与我们平常所见的Javascript对象有着诸多不同，比如：

1
2
3
4

function foo(num1, num2){
    return num1 + num2;
}
console.log(typeof foo); //'function'

对函数使用typeof，会单独打印出function，除此以外，函数还有诸多奇怪之处。但不管怎么样，这并不影响函数是对象的事实，我们知道，Javascript的所有对象都存在一个构造器，而函数的构造器就是Function，观察如下代码：

1
2

var foo = new Function("num1", "num2", "return num1 + num2");
console.log(foo(1, 2)); //'3'

使用new + 构造函数的方式创建对象，这和我们平常所见到的创建对象的方式并没有什么两样，事实上，尽管我们并不推荐使用这种方法创建函数，但不论是用函数声明还是函数表达式都必然会经过这个过程，这对于我们理解函数是对象，函数名是指针有着重要意义。

Read More

方法一

安装插件，搜索avatar，选择WP User Avatar，点击现在安装

方法二

调用ssl 头像链接

https还是没被墙的，而且速度还不错，直接调用这个最简单了。
如果你的网站启用了ssl则不需要了，否则functions.php 加入如下代码

1
2
3
4
5

function get_ssl_avatar($avatar) {
  $avatar = preg_replace('/.*\/avatar\/(.*)\?s=([\d]+)&.*/','<img src="https://secure.gravatar.com/avatar/$1?s=$2" class="avatar avatar-$2" height="$2" width="$2">',$avatar);
  return $avatar;
}
add_filter('get_avatar', 'get_ssl_avatar');

Read More

安装插件搜索WP SMTP，从搜索结果中选择Easy WP SMTP点击现在安装，如下图：

配置邮件服务信息

Read More

有的时候，我们需要在内网工作组中分享一些文件或是后台接口没有及时给出，你又想要模拟真实数据，直接在项目里创建plist也可以做到这种需求，但难免让工程变得冗余且看起来比较Low。这个时候就看出配置本地服务器的重要性了，不用时刻等着后台接口的更新，只需要根据接口文档自己模拟真实数据，即方便又显得高大上。

Mac自带了Apache环境，我们要做的只是稍微配置一下

环境：Mac OS X 10.12

启动Apache

在终端输入：sudo apachectl start，这样就将Mac自带的Apache启动了，在浏览器输入“http://localhost”，会显示“It works!”，说明服务器已经启动成功了。Apache默认的根目录在“/Library/WebServer/Documents/”下。

配置服务器

在Finder中创建一个”Sites”的文件夹，直接创建在/Users/wan(当前用户名)目录下，如图：

• 切换工作目录下：cd /etc/apache2
• 备份文件，只需要执行一次：sudo cp httpd.conf httpd.conf.bak
• 如果操作出现错误！可以使用命令，恢复备份的 httpd.conf 文件：sudo cp httpd.conf.bak httpd.conf

• 用vim编辑httpd.conf文件，httpd.conf文件时Apache的配置文件：sudo vim httpd.conf

  Read More

看了慕课网关于vertical-align的视频讲解，感觉讲的挺深，所以总结了一下
vertical-align的百分比值相对于line-height计算
IE6/7下line-height不支持小数

vertical-align起作用的前提

该属性应用于inline水平或者table-cell元素

inline水平

inline:img,span,strong,em等
inline-block:input,button（ie8+，ie6/7会把inline-block当作inline）

table-cell元素

td
所以默认情况下支持vertical-align的有：图片，按钮，文字，单元格

抛出一个问题

想实现图片的垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<p>
  <img src="http://www.insgeek.com/public/insgeek2.0/img/indexpec/enleft.jpg" width='100' alt="">
</p>
</body>
</html>

1
2
3
4
5
6
7
8

p{
  width:100%;
  height:200px;
  background-color: #ccc;
}
img{
  vertical-align:middle;
}

Read More