刚刚，在调试一个vue的单页面应用时发现一个字体模糊问题！现在来说说问题！

具体页面是这样的，有一个弹框，这个弹框需要水平垂直居中！其实一般情况我们首先想到的是：transform的translate方法!具体方法如：

.main{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);//或transform: translate3d(-50%, -50%,0)
}

这样main这个div就会居中显示了！但是如我一开始说的，这样做这个div里的文字会变得模糊，具体原因我还没了解(需要等这个项目忙完去研究下，很快就这一两天的事！)，所以我们需要改变一下我们的方式这里先说下其中一个也是用CSS3实现的方法，就是比较麻烦，要在main这个div外层再加个div，这个div的class为prant，css如下：

.prant{
  height:100%;
  width:100%;position:absolute;z-index:10002;top:0;left:0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center; 
}

之前有一道面试题困惑我很久，后来在网上搜索了一下，貌似很多人都会进入误区，但到现在为止我还没有看到一个合理的解释这让我很郁闷！
面试题如下：

var foo={n:1};
var bar=foo;
foo.x=foo={n:2};
console.log(foo.x) //输出？

答案是：

console.log(a.x); // undefined

不知道各位有没有答对，至少我是答错了。 遂借此机会好好看看JS连等赋值是怎么回事;在网上查了很多的资料，最后发现两个非常好的联等赋值的栗子（[栗子1](http://segmentfault.com/q/1010000002637728)，[栗子2](http://www.iteye.com/topic/785445)），最后看了一下[小小沧海](https://www.cnblogs.com/xxcanghai/p/4998076.html?utm_source=tuicool&utm_medium=referral)的文章，觉得可以和大家分享下； 首先我们考虑一行代码：A=B=C;赋值语句的执行顺序是从右到左，所以我们猜想一下到底是：B=C;A=C;还是B=C;A=B; 我们都知道若两个对象同时指向一个对象，那么对这个对象的修改是同步的，如：

var a={n:1};
var b=a;
a.n=2;
console.log(b);//Object {n: 2}

所以可以根据这个特性来测试连续赋值的顺序。
首先setter和getter是应用于变量名的，而不是变量真正储存的对象，如下：

今天就来说一说几种我们平时面试和实际应用中的JS排序的实现方法！下面的方法用了ES6中的一些新属性，但整体思路是不变的！

原文：Sorting Algorithms in Javascript

译文：排序算法的JavaScript实现

译者：dwqs

快速排序

let quicksort = function(arr) {
　if(arr.length <= 1)return arr;
　let pivot = Math.floor((arr.length -1)/2);
　let val = arr[pivot], less = [], more = [];
　arr.splice(pivot, 1);
　arr.forEach(function(e,i,a){
　　e < val ? less.push(e) : more.push(e);
　});
　return (quicksort(less)).concat([val],quicksort(more));
}

冒泡排序

let compare = (n1, n2) => n1 - n2;

let bubbleSort = (arr, cmp = compare) => {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i; j > 0; j--) {
      if (cmp(arr[j], arr[j - 1]) < 0) {
        [arr[j], arr[j - 1]] = [arr[j - 1], arr[j]];
      }
    }
  }
  return arr;
};

昨天做一个小的页面时用到了弹框，一般弹框都有close按钮，有时我们为了偷懒直接用个X来做关闭按钮！但这种情况基本很难看，所以我们需要UI给我设计一个关闭按钮，或者我们要用font-face来做这个关闭，这样做起来美观，但是却有一点麻烦！之前我无意间发现一个好玩的方法，简单好用,今天分享一下；

用CSS3设计出来的样式来呈现出关闭按钮的样子，这样以后想设计简单的对话框，就不需要求美工来帮忙画按钮的图片了。先来看看样式:

/ basic style /
.close {
    background: orange;
    color: red;
    border-radius: 12px;
    line-height: 20px;
    text-align: center;
    height: 20px;
    width: 20px;
    font-size: 18px;
    padding: 1px;
}
/ use cross as close button /
.close::before {
    content: “\2716”;
}
/ place the button on top-right /
.close {
    top: -10px;
    right: -10px;
    position: absolute;
}

然后直接把它加到HTML元素上就可以看到效果了：

<div style=”height: 100px; width: 100px; border: 1px solid black; position: relative;”></div>

这主要是利用了在CSS的::before伪属性可以直接添加内容的特点，这样就可以直接设置样式在class上而不用做其它操作。当然这里用::after效果也是一样的。唯一要注意的是如果要指定关闭按钮在特定位置，就需要使用到position:absolut;，相应的其父元素就不能是默认的position:static;。像上边的示例中就使用的是position:relative;以保证按钮呈现在正确的位置上。

对于按钮中的叉按钮，用的是Unicode中的一种标识，以下这些也可以使用：

标识	编码(16进制)	Name
	\2716	粗体乘法
✗	\2717	交叉
✘	\2718	粗体交叉
×	\00D7	乘法符号
⨯	\2A2F	向量乘积
x	\78	小写字母
X	\58	大写字母

只是使用了不同字符后，可能居中位置会有偏差需要重新调整。

再结合JavaScript和CSS3的gradient，就能完成一个看起来还不错的对话框了。效果如下图：

其实我们可以完全用字符编码解决关闭X按钮的美观问题，上面是一种不用美工不用font-face的解决方案，在这个基础上我们也可以发散思维，用另一种方法解决，这里这是做一个简单的介绍，我们可以利用css3的旋转属性，父级有个边框，子级有个边框，把子级旋转九十度，和父级交叉，把父级旋转45°这样也是一个关闭X按钮！

如果大家还有什么好的建议和想法，欢迎留言分享！

快下班了，闲来无事就说说this对象把！
在JavaScript中，this关键字是动态绑定的，或称为运行期绑定，这极大地增强的我们程序的灵活性，同时也给初学者带来了很多困惑。本文总结了this的几个使用场景和常见误区。

#全局环境#
在全局环境中使用 this ，它会指向全局对象。

    console.log(this);          // window对象
    alert(this === window);    // true

#函数调用#
当作为普通函数被调用时，函数内部的的 this 也会指向全局对象。

var obj= “window”;
function Test(){
    var obj = “fun”;
    alert(this.obj);
}
sayName();    // “window”

#作为对象的方法调用#
当作为对象内部的方法被调用时，这里 this 指向这个方法所在的对象

今天无事，聊一聊javascript跨域，面试经常会问到关于跨域的问题，今天我来聊一聊关于跨域的小知识！

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦;

先来说一说什么是跨域

简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

特别注意：

第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，

第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

第三：跨域并非浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但是返回结果被浏览器拦截了。最好的例子是 crsf 跨站攻击原理，请求是发送到了后端服务器无论是否跨域！注意：有些浏览器不允许从HTTPS的域跨域访问HTTP，比如Chrome和Firefox，这些浏览器在请求还未发出的时候就会拦截请求，这是一个特例

虾米是集中跨域方法总结：

Javascript中==是一种比较复杂的运算，他的运算规则容易让人犯错！

在详细介绍前我们来复习一下JS中关于数据类型的知识：

1. JS中的值有两种类型：基本类型、引用类型（对象类型）
2. 基本类型包括：Undefined、Null、Boolean、Number和String等五种类型
3. Undefined类型和Null类型都只有一个值，即undefined和null；Boolean类有两个值：true和false；Number类型的值很多很多；String类型的值有无数个值(理论上)
4. 所有对象都有valueOf()和toString()方法，它们继承自Object，当然也可能被子类重写

现在考虑表达式：

x == y

其中x和y是六种类型中某一种类型的值。

当x和y的类型相同时，x == y可以转化为x === y，而后者是很简单的(唯一需要注意的可能是NaN)，所以下面我们只考虑x和y的类型不同的情况。

不知什么原因，昨晚学习到凌晨两点，今天竟然比闹铃醒的还早！到了公司后感觉浑身上下酸疼！冒虚汗 胃疼 浑身没劲 怎么待着怎么难受！只好在本地研究下git打包备份博客源文件的问题，看看一些帖子文章，js基础理论！ 暂时就不更新什么技术文章了！脑子沉得严重！今天一天都在解决各种坑！今晚看情况，如果能坚持就到十一二点，不能就早点休息！

先简单说下从零开始，就是抛开一切js，从0开始学习js，所以我从js数据类型、DOM、BOM开始一步一个脚印的看！虽然有些乏味，但我觉得既然选择了从零开始就不怕乏味！从0到1的过程一点一点走，这样回味起来才有成就，扎实！

差不多了，坚持不住了！我要躺下了！明天也不更新了，不要以为我挂了，明天周五，要赶路回家！周一见！！！

昨天是帝都发大水的日子，我为了上班徒步了半个多小时到公司，为的是不矿工，等到了下午公司人性化的发邮件，当天考勤异常不扣工资，4点下班，我对这么人性的公司说一句太好了，所以今天更新我在github上第一次文章《github搭建博客》

好了不废话了，下面开始我的搭建工作！

首先我们先要在本地搭环境：

1.安装Node（必须）

2.安装Git（必须）

3.申请GitHub（必须）

注：如上三步我就不做详细介绍怎么安装了，这都是程序猿的基本搭配，实在不会可以google，so一把！下面开始我们的搭建安装博客！（win下搭建）

1）正式安装HEXO　

可以打开CMD或gitBash命令行执行如下npm install -g hexo 安装hexo

2）初始化你的本地hexo项目