我的新博客20170620

发表于 2017-06-20

标题

111111

metabase学习

发表于 2017-05-31

什么是Metabase

Metabase 是一个简单又强大的数据分析工具，可以把数据分析常用的查询放到一个易于操作的界面上来进行，这样，不懂SQL的业务人员也可以快速的掌握业务数据。

安装

最简单的安装方式就是到Metabase官网上去下载它的jar包。然后切换到jar包的目录下，执行

1	java -jar metabase.jar

当然你需要有java的运行环境，java的版本需要1.7及以上。

运行

上述步骤会启动一个使用默认参数的Metabase应用，在命令行窗口内你能看到一些启动的日志。一旦Metabase完全启动日志是这样子的：

2015-10-14 22:17:50,960 [INFO ] metabase.core :: Metabase Initialization COMPLETE
2015-10-14 22:17:51,004 [INFO ] metabase.core :: Launching Embedded Jetty Webserver with config:
{:port 3000, :host "localhost"}
2015-10-14 22:17:51,024 [INFO ] org.eclipse.jetty.server.Server :: jetty-9.2.z-SNAPSHOT
2015-10-14 22:17:51,049 [INFO ] org.eclipse.jetty.server.ServerConnector :: Started ServerConnector@30aba609{HTTP/1.1}{localhost:3000}
2015-10-14 22:17:51,050 [INFO ] org.eclipse.jetty.server.Server :: Started @35910ms

PS:我再这一步的时候，一开始启动报错，错误信息如下：

05-31 17:29:53 [1mERROR metabase.driver[0m :: Failed to connect to database: Timed out after 5000 milliseconds.
java.lang.AssertionError: Assert failed: Unable to connect to Metabase h2 DB.
(binding [*allow-potentailly-unsafe-connections* true] (require (quote metabase.driver)) ((resolve (quote metabase.driver/can-connect-with-details?)) engine details))
        at metabase.db$verify_db_connection.invokeStatic(db.clj:334)
        at metabase.db$verify_db_connection.invoke(db.clj:327)
        at metabase.db$verify_db_connection.invokeStatic(db.clj:330)
        at metabase.db$verify_db_connection.invoke(db.clj:327)
        at metabase.db$setup_db_BANG_.invokeStatic(db.clj:382)
        at metabase.db$setup_db_BANG_.doInvoke(db.clj:376)
        at clojure.lang.RestFn.invoke(RestFn.java:421)
        at metabase.core$init_BANG_.invokeStatic(core.clj:103)
        at metabase.core$init_BANG_.invoke(core.clj:82)
        at metabase.core$start_normally.invokeStatic(core.clj:187)
        at metabase.core$start_normally.invoke(core.clj:181)
        at metabase.core$_main.invokeStatic(core.clj:279)
        at metabase.core$_main.doInvoke(core.clj:274)
        at clojure.lang.RestFn.invoke(RestFn.java:397)
        at clojure.lang.AFn.applyToHelper(AFn.java:152)
        at clojure.lang.RestFn.applyTo(RestFn.java:132)
        at metabase.core.main(Unknown Source)

经过一系列的折腾发现，原来是我PC上装了vagrant，每一个vagrant虚拟机实例都会创建一个虚拟网卡，把这些虚拟网卡禁用了就好了。

vue源码学习笔记

发表于 2017-05-03

读一读优秀开源框架的代码，是对技术提升比较有帮助的一条途径，之前用vue做过一个小项目，觉得真心不错，想读一读源码又不知道从哪入手，正巧某天刷知乎时，看到有人问到如何读vue的源码，尤神亲答，推荐了一篇博客，转录在此，原文见Vue.js 源码学习笔记

程序结构梳理

在浏览器里敲下URL到底发生了什么？

发表于 2017-04-24

我将该过程分为了以下六步：

1. DNS域名解析

在浏览器DNS缓存中搜索
在操作系统DNS缓存中搜索
读取系统hosts文件，查找其中是否有对应的ip
向本地配置的首选DNS服务器发起域名解析请求

2. 建立TCP连接

为了准确地传输数据，TCP协议采用了三次握手策略。发送端首先发送一个带SYN（synchronize）标志的数据包给接收方，接收方收到后，回传一个带有SYN/ACK(acknowledegment)标志的数据包以示传达确认信息。最后发送方再回传一个带ACK标志的数据包，代表握手结束。在这过程中若出现问题中断，TCP会再次发送相同的数据包。
TCP是一个端到端的可靠的面向连接的协议，所以HTTP基于传输层TCP协议不用担心数据的传输的各种问题。

3. 发起HTTP请求

浏览器发起HTTP请求报文，报文分为报文头和报文体。
报文头包括：

请求的方法（get、post等等）
URI
Http版本
Host请求资源所处的互联网主机名和端口
User-Agent浏览器和用户代理名称等信息
Cache-Contol 操作缓存机制
Cookie信息
具体参考下图：

4. 接受响应结果

服务器接受到请求后会返回响应报文，浏览器接受处理，响应报文也分报文头和报文体，具体如下：

报文头中包含响应状态码，表示网页服务器的http响应状态：

消息（1字头）
1*类型的状态码，代表请求已被接受，需要继续处理。这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束。由于 HTTP/1.0 协议中没有定义任何 1xx 状态码，所以除非在某些试验条件下，服务器禁止向此类客户端发送 1xx 响应。

略

成功（2字头）
这一类型的状态码，代表请求已成功被服务器接收、理解、并接受

200 OK
- 请求已成功，请求所希望的响应头或数据体将随此响应返回。
204 No Content
- 服务器成功处理了请求，但不需要返回任何实体内容，并且希望返回更新了的元信息。响应可能通过实体头部的形式，返回新的或更新后的元信息。如果存在这些头部信息，则应当与所请求的变量相呼应。
- 如果客户端是浏览器的话，那么用户浏览器应保留发送了该请求的页面，而不产生任何文档视图上的变化，即使按照规范新的或更新后的元信息应当被应用到用户浏览器活动视图中的文档。
- 由于204响应被禁止包含任何消息体，因此它始终以消息头后的第一个空行结尾。
206 Partial Content
- 服务器已经成功处理了部分 GET 请求。类似于 FlashGet 或者迅雷这类的 HTTP下载工具都是使用此类响应实现断点续传或者将一个大文档分解为多个下载段同时下载。
301 Moved Permanently
- 被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个 URI 之一。如果可能，拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定，否则这个响应也是可缓存的。
- 新的永久性的URI 应当在响应的 Location 域中返回。除非这是一个 HEAD 请求，否则响应的实体中应当包含指向新的 URI 的超链接及简短说明。
- 如果这不是一个 GET 或者 HEAD 请求，因此浏览器禁止自动进行重定向，除非得到用户的确认，因为请求的条件可能因此发生变化。

排序算法解析--冒泡排序、快速排序

发表于 2017-04-14

时间复杂度是度量算法执行的时间长短，而空间复杂度是度量算法所需存储空间的大小。

算法的时间复杂度记做：T(n)=O(f(n))

在计算时间复杂度的时候，先找出算法的基本操作，然后根据相应的各语句确定它的执行次数，再找出T(n)的同数量级（它的同数量级有以下：1、Log2n、n、nLog2n、n的平方、n的三次方、2的n次方、n!），找出后，f(n)=该数量级，如冒泡排序的时间复杂度为T(n)=O(n*n)。

冒泡（Bubble）排序

冒泡排序（BubbleSort）的基本思想是：依次比较相邻的两个数，将小数放在前面，大数放在后面。如此重复下去，直至最终完成排序。

时间复杂度为O(n*n)，适用于排序小列表。

var arr = [3,1,4,2,5,21,6,15,63];
function sortA(arr){
    for(var i=0;i<arr.length-1;i++){
        for(var j=i+1;j<arr.length;j++){
            //获取第一个值和后一个值比较
            var cur = arr[i];
            if(cur>arr[j]){
                // 因为需要交换值，所以会把后一个值替换，我们要先保存下来
                var index = arr[j];
                // 交换值
                arr[j] = cur;
                arr[i] = index;
            }
        }
    }
    return arr;
}

快速排序

快速排序（Quicksort）是对冒泡排序的一种改进，它的基本思想是：通过一趟排序将要排序的数据分割成独立的两部分，其中一部分的所有数据都比另外一部分的所有数据都要小，然后再按此方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行，以此达到整个数据变成有序序列。

时间复杂度为O(nlog2n)，适用于排序大列表。

var arr = [3,1,4,2,5,21,6,15,63];
function sortA(arr){
    // 如果只有一位，就没有必要比较
    if(arr.length<=1){
        return arr;
    }
    // 获取中间值的索引
    var len = Math.floor(arr.length/2);
    // 截取中间值
    var cur = arr.splice(len,1);
    // 小于中间值放这里面
    var left = [];
    // 大于的放着里面
    var right = [];
    for(var i=0;i<arr.length;i++){
        // 判断是否大于
        if(cur>arr[i]){
            left.push(arr[i]);
        }else{
            right.push(arr[i]);
        }
    }
    // 通过递归，上一轮比较好的数组合并，并且再次进行比较。
    return sortA(left).concat(cur,sortA(right));
}

对象的深度克隆

发表于 2017-04-13

js中的对象

谈到对象的克隆，必定要说一下对象的概念。

js中的数据类型分为两大类：原始类型和对象类型。

原始类型包括：数值、字符串、布尔值、null、undefined
对象类型包括：对象即是属性的集合，当然这里又两个特殊的对象—-函数（js中的一等对象）、数组（键值的有序集合）。

好了既然对象分为这两类，这两种类型在复制克隆的时候是有很大区别的。原始类型存储的是对象的实际数据，而对象类型存储的是对象的引用地址（对象的实际内容单独存放，为了减少数据开销通常存放在内存中）。ps：说到这里，大家要知道，对象的原型也是引用对象，它把原型的方法和属性放在内存当中，通过原型链的方式来指向这个内存地址。

克隆的概念

浅度克隆：原始类型为值传递，对象类型仍为引用传递。

深度克隆：所有元素或属性均完全复制，与原对象完全脱离，也就是说所有对于新对象的修改都不会反映到原对象中。

浅克隆的表现

原始类型

//数值克隆的表现
var a="1";
var b=a;
b="2";
console.log(a);// "1"
console.log(b);// "2"

//字符串克隆的表现
var c="1";
var d=c;
d="2";
console.log(c);// "1"
console.log(d);// "2"

//布尔值克隆的表现
var x=true;
var y=x;
y=false;
console.log(x);// true
console.log(y);// false

从上面的代码大家可以看出，原始类型即使我们采用普通的克隆方式仍能得到正确的结果，原因就是原始类型存储的是对象的实际数据。

对象类型

前面说过，函数式一等对象，当然也是对象类型，但是函数的克隆通过浅克隆即可实现

var m=function(){alert(1);};
var n=m;
n=function(){alert(2);};
console.log(m());//1
console.log(n());//2

大家能看到，我们直接通过普通赋值的方式，就实现了函数的克隆，并且不会影响之前的对象。原因就是函数的克隆会在内存单独开辟一块空间，互不影响。

好了，说了这个特殊的”关系户“以后，我们来说说普通的”选手“。为了方便后续的代码表现，我这里定义一个复杂的对象类型oPerson。下面看一下对象类型的浅复制有什么危害：

var oPerson={
    oName:"rookiebob",
    oAge:"18",
    oAddress:{
        province:"beijing"
    },    
    ofavorite:[
        "swimming",
        {reading:"history book"}
    ],
    skill:function(){
        console.log("bob is coding");
    }
};
function clone(obj){
    var result={};
    for(key in obj){
        result[key]=obj[key];
    }
    return result;
}
var oNew=clone(oPerson);
console.log(oPerson.oAddress.province);//beijing
oNew.oAddress.province="shanghai";
console.log(oPerson.oAddress.province);//shanghai

通过上面的代码，大家能看到，经过对象克隆以后，我修改oNew的地址，发现原对象oPerson也被修改了。这说明对象的克隆不够彻底，那也就是说深度克隆失败！

深克隆的实现

function deepClone(obj,newObj){
   var newObj = newObj || {};
   for(var key in obj){
     if(type of obj == "object"){
       newObj[key] = (obj[key].constructor === Array) ? [] : {};
       deepClone(obj[key] , newObj[key]);
     }else{
       newObj[key] = obj[key];
     }
   }
   return newObj;
}

box-sizing属性的理解

发表于 2017-04-13

说到 IE 的 bug，一个臭名昭著的例子是它对于“盒模型”的错误解释：在 IE5.x 以及 Quirks 模式的 IE6/7 中，将 border 与 padding 都包含在 width 之内。这为前端工程师的工作平添了不少麻烦，几户每个需要定义尺寸的 box 都要思量一下：是否触发了“盒模型 bug”？

同时，由于另一撮浏览器对标准的遵从，我们在精确定义一个在有限空间内显示的 box 时，也需要计算一下：留给它的空间只有那么大，刨去 border 和 padding，我们该把它的 width 写成多少呢？

这种情况在 CSS3 时代有了改善，得益于这个叫做 box-sizing 的属性：

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~

常见的跨域的解决方法以及其优缺点

发表于 2017-04-12

1. JSONP

只要说到跨域，就必须聊到 JSONP，JSONP全称为：JSON with Padding，可用于解决主流浏览器的跨域数据访问的问题。

Web 页面上调用 js 文件不受浏览器同源策略的影响，所以通过 Script 便签可以进行跨域的请求：

首先前端先设置好回调函数，并将其作为 url 的参数。
服务端接收到请求后，通过该参数获得回调函数名，并将数据放在参数中将其返回
收到结果后因为是 script 标签，所以浏览器会当做是脚本进行运行，从而达到跨域获取数据的目的。

优点：

它不像XMLHttpRequest 对象实现 Ajax 请求那样受到同源策略的限制
兼容性很好，在古老的浏览器也能很好的运行
不需要 XMLHttpRequest 或 ActiveX 的支持；并且在请求完毕后可以通过调用 callback 的方式回传结果。

缺点：

它支持 GET 请求而不支持 POST 等其它类行的 HTTP 请求。
它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面或 iframe 之间进行数据通信的问题

2. CORS

CORS 是一个 W3C 标准，全称是”跨域资源共享”（Cross-origin resource sharing）它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 ajax 只能同源使用的限制。

CORS 需要浏览器和服务器同时支持才可以生效，对于开发者来说，CORS 通信与同源的 ajax 通信没有差别，代码完全一样。浏览器一旦发现 ajax 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。

优点：

使用简单方便，更为安全
支持 POST 请求方式
缺点：
CORS 是一种新型的跨域问题的解决方案，存在兼容问题，仅支持 IE 10 以上

3. Server Proxy

服务器代理，顾名思义，当你需要有跨域的请求操作时发送请求给后端，让后端帮你代为请求，然后最后将获取的结果发送给你。

4. postMessage

postMessage 是 HTML5 新增加的一项功能，跨文档消息传输(Cross Document Messaging)，目前：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 都支持这项功能，使用起来也特别简单。

创建一个 iframe，使用 iframe 的一个方法 postMessage 可以想 http://localhost:8081/b.html 发送消息，然后监听 message，可以获得其他文档发来的消息。

<script>
    //子页面
    window.addEventListener('message', function(e) {
        if(e.source != window.parent) {
	    return;
        }
        let data = e.data;
        console.log('b.html 接收到的消息:', data);
        parent.postMessage('我已经接收到消息了!', e.origin);
    });
</script>

学习Javascript闭包

发表于 2017-04-12

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。
下面就是我的学习笔记，对于Javascript初学者应该是很有用的。

变量的作用域

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

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

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

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

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

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

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

出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。

那就是在函数的内部，再定义一个函数。

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

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的”链式作用域”结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！

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

闭包的概念

上一节代码中的f2函数，就是闭包。
各种专业文献上的”闭包”（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数”。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包的用途

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢？请看下面的代码。

function f1(){
　　var n=999;
　　nAdd=function(){n+=1}
　　function f2(){
　　　　alert(n);
　　}
　　return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

这段代码中另一个值得注意的地方，就是”nAdd=function(){n+=1}”这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

使用闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

事件委托的原理与实现

发表于 2017-04-12

首先，我们设定一个列表

<ul id="parent-list">
	<li id="post-1">Item 1</li>
	<li id="post-2">Item 2</li>
	<li id="post-3">Item 3</li>
	<li id="post-4">Item 4</li>
	<li id="post-5">Item 5</li>
	<li id="post-6">Item 6</li>
</ul>

我们假设要给每个li添加不同的事件，你可以给每个独立的li元素添加事件监听器，但有时这些li元素可能会被删除，可能会有新增，监听它们的新增或删除事件将会是一场噩梦，尤其是当你的监听事件的代码放在应用的另一个地方时。但是，如果你将监听器安放到它们的父元素上呢？你如何能知道是那个子元素被点击了？

简单：当子元素的事件冒泡到父ul元素时，你可以检查事件对象的target属性，捕获真正被点击的节点元素的引用。下面是一段很简单的JavaScript代码，演示了事件委托的过程：

//找到父元素，添加监听器。。。  
document.getElementById('parent-list').addEventListener('click', function (e) {  
    //e.target是被点击的元素  
    //如果被点击的是li元素  
    if(e.target && e.target.nodeName == 'Li') {  
        //执行操作，，，  
        console.log('List item', e.target.id.replace('post-'), "was clicked")  
    }  
})