使用 Gradle 自動初始化 Spock

第一次接觸gradle是從v1.7這個版本開始的(2013年)
工作上則是使用v2.2版本(2014年)，開發上測試是使用junit
但私底下都使用Spock來測試我自己寫的程式
因為寫過Spock後就不會想寫junit了… 只是工作上就是規定使用junit…也只能乖乖配合

最近升級gradle順便看一下有支援哪些新的功能，發現從v2.11開始可以直接建立Spock的專案了
gradle v2.11 release-notes

再往前查看了一下，發現早在v2.6版開始就有支援Spock，只是沒有指令可以直接建立Spock測試，所以只能算半成品吧，直到v2.11後才算完整
gradle v2.6 release-notes

指令很簡單，只需打一行

1
gradle init --type java-library --test-framework spock

想到以後就不需要再自己引入Spock，太感動了
gradle真的是越來越方便，難怪Android會使用gradle來建立專案

展開全文 >>

提升Socket傳送Large file的速度

在工作上遇到前端上傳large file後需再透過socket傳送給某個service處理
這裡的service是用C#實現，所以是client (Java) -> server (C#)
在傳送前一開始就會拿到一個完整的byte array
若只是幾kb的小檔案最快的做法當然是直接
write(byte[] bytes, 0, bytes.length);
但是遇到這麼大的檔案不可能這麼做，根據經驗會爆掉的機會很高，只能分成多次寫入
最先想到的是用NIO的方式ByteBuffer.allocate(size)方式建立緩衝，取得SocketChannel後分批將buffer內的資料透過channel送出，想必處理速度會快很多
但經過測試各種方法後，發現直接取得檔案大小後直接切好buffer大小，接著操作OutputStream直接寫入的處理的速度是最快的
在此情境下NIO(buffer)處理比直接寫OutputStream(stream)還慢有可能是網路傳輸還是以stream方式傳輸或者與service方的socket server實現的方式有關吧(server端是C#實現)…
若client和server都是使用Java感覺應該會是NIO略勝一籌

其實這個做法其實跟Java本身提供的BufferedOutputStream做法一樣
只是不需要另外檢查buffer是否寫滿(因為這個做法在一開始就知道要切到哪一個byte)
也少了一層FilterOutputStream (它們的轉換關係 BufferedOutputStream -> FilterOutputStrean -> OutputStream)
而是選擇直接操作OutputStream，所以才可以做到如此快速

提醒一下
這個方式比較不適合用在”讀檔”後使用socket傳送大檔案
因為讀檔可以邊讀邊傳(寫入)可以有效降低memory的使用量，所以直接串BufferedOutputStream
或者使用ByteBuffer串channel，畢竟使用NIO從硬碟讀取大的檔案速度會比傳統Java I/O快很多

最終的程式碼如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
private static final int BYTE_BUF_SIZE = 8192;

private boolean sendCmd(String ip, int port, byte[] byteArray){
    boolean isSuccess = true;
    Socket socket = null;
    int bufSize = BYTE_BUF_SIZE;// buffer limit
    int byteArrayLength = byteArray.length;
    int writeCount = byteArrayLength / bufSize;// how many times to write
    int byteRemain = byteArrayLength % bufSize;// how many bytes are left
    int offset = 0;
    try {
        socket = new Socket(ip, port);
        OutputStream out = socket.getOutputStream();
        for(int count=0; count<writeCount; count++){
            out.write(byteArray, offset, bufSize);
            offset += bufSize;
        }
        if(byteRemain > 0){// have the remaining bytes
            out.write(byteArray, offset, byteRemain);
        }
        out.flush();
        out.close();
        socket.shutdownOutput();
    } catch (IOException e) {
        logger.warn("use socket send command fail!!, ip: {}, port: {} exceptionMsg:{}", ip, port, e);
        isSuccess = false;
    }finally {
        if(socket != null){
            try {
                socket.close();
            } catch (IOException e1) {
                logger.warn("socket close fail: {}", e1);
                isSuccess = false;
            }
        }
        return isSuccess;
    }
}

展開全文 >>

你真的了解Java中的Thread運作嗎？ - 容易讓人誤解的synchronized method

今天下午聽到討論java的同事說“在method上面加上synchronized後，當多個thread執行此method時，同一時間只會有一個thread可以進入執行，但沒有synchronized的method不會被鎖住可以進入執行，因為thread是鎖method的”
前面敘述是OK的，但最後一句話聽起來怪怪的…“thread是鎖method的”，這個說法有點不妥

在某個method上面增加synchronized很直覺的會認為只是會鎖此method，但若實際寫code去驗證的話，在使用javap查看.class檔案會發現不是針對method鎖而是將整個object當作鎖，與synchronized(this)幾乎是一樣的效果，反之若使用某個object當作key如synchronized(key)，此時key就可以當作進入區間的唯一鑰匙，就看誰先搶到進入

以另外一個角度來看，Java的wait(), notify(), notifyAll()都是定義在Object，而不是在thread上，如果thread在sychronized區塊不是針對Object做鎖的動作，那它就需要一個唯一可以當作鎖的依據，可以在sychronized區塊某些情況下釋放鎖給其他thread，很明顯thread中是沒有定義這個東西，還是需要透過Object內的wait()去blocked和notify()做wakeup thread

很多時候程式實際運作與自己想像是有落差的，不論是書上寫的或者在技術blog上讀到的都不一定是對的，只有自己嘗試寫code執行過才會知道

展開全文 >>

從無到有DIY chart (二)

增加曲線效果，點與點之間的線條轉折變得更加柔和，效果如下

Chart

主要增加的程式碼如下，參考chart.js繪製曲線的方式，自己試做看看，主要是針對點與點之間距離的計算出bezier curve的control point

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
for(let index=1; index<(dataLength-1); index++){
    const prePoint = this._dataSet[index - 1];
    const currentPoint = this._dataSet[index];
    const nextPoint = this._dataSet[index + 1];
    /*
        use pre point p(x0, y0) and next p(x2, y2) point to calc current point p(x1, y1) offset scale
    */
    const deltaX = nextPoint.x - prePoint.x;
    const deltaY = nextPoint.y - prePoint.y;
    const distance = this._distance(prePoint, nextPoint);
    const cos = deltaX / distance;
    const sin = deltaY / distance;
    /*
        calc current point distance between two points pre and next
    */
    const preRelativeDistance = this._distance(prePoint, currentPoint);
    const nextRelativeDistance = this._distance(currentPoint, nextPoint);
    /*
        calc actual offset by current point and pre point
        ps: actual offset = current point - (scale * two point distance * tension)
    */
    const preControlPointX = currentPoint.x - (cos * preRelativeDistance * this._LINE_TENSION);// _LINE_TENSION = 0.2
    const preControlPointY = currentPoint.y - (sin * preRelativeDistance * this._LINE_TENSION);
    /*
        calc actual offset by current point and next point
    */
    const nextControlPointX = currentPoint.x + (cos * nextRelativeDistance * this._LINE_TENSION);
    const nextControlPointY = currentPoint.y + (sin * nextRelativeDistance * this._LINE_TENSION);
    
    this._curveDataSet.push({
        oriPoint: currentPoint,
        pre: {x: preControlPointX, y: preControlPointY}, 
        next: {x: nextControlPointX, y: nextControlPointY},
    });
}

使用 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 繪製出曲線
其中cp1x, cp1y 第一個控制點，而cp2x, cp2y 第二個控制點，最後一組參數x, y 為繪製的終點座標

1
2
3
4
5
6
7
8
9
10
11
12
13
for(const [index, point] of this._dataSet.entries()){
    if(index == 0){
        this._ctx.moveTo(point.x, point.y);
        continue;
    }
    const preControlPoint = this._curveDataSet[index - 1];
    const controlPoint = this._curveDataSet[index];
    this._ctx.bezierCurveTo(
        preControlPoint.next.x, preControlPoint.next.y, 
        controlPoint.pre.x, controlPoint.pre.y, 
        point.x, point.y
    );            
}

展開全文 >>

從無到有DIY chart (一)

目前工作中的前端開發因規範與IE向下相容只能使用es5，要使用比較新的js語法只能透過underscore.js來實現
但最近看了許多關於es6的資料，想要來練習一下
若單純練習語法就太無聊了，所以決定使用es6的語法來DIY一個chart

首先使用class定義Chart的Object
在使用es6之前，只能透過擴展prototype達成method共用

1
2
3
4
5
6
7
8
9
var Chart = function(){
    this._canvas;
)

Chart.prototype = {
    _init: function(){
        this._canvas = document.getElementById(this._id);
    }
}

現在有了class就不需要再分開寫了，看起來直覺多了

1
2
3
4
5
6
7
8
9
class Chart{
    constructor(params){
        this._canvas;
    }
    
    _init(){
        this._canvas = document.getElementById(this._id);
    }
}

首先初始化canvas，canvas可以想像成是一個畫布，我們必須設定畫布的大小和透過getContext('2d')取得渲染環境

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
constructor(params){
    this._id = params.id;
    this._canvas;
    this._canvasWidth;
    this._canvasHeight;
    this._ctx;

    this._init();
}

_init(){
    this._canvas = document.getElementById(this._id);
    if(!this._canvas.getContext){
        throw "can't get canvas context!";
    }
    this._canvasWidth = this._canvas.width;
    this._canvasHeight = this._canvas.height;
    this._ctx = this._canvas.getContext('2d');
}

接著將chart的資料設置到canvas上，因為對於canvas而言原點是從左上角(0,0)的座標開始，所以使用原始資料直接打出點的話，會發現會上下相反，所以需要將y軸進行反轉

因為還沒有想到chart要使用哪種顏色，就先使用亂數產生吧…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
_initDataSet(){
    for(const [index, point] of this._matrix.entries()){
        var reverseY = this._canvasHeight - point[1];
        this._dataSet.push({
            index: index,
            x: point[0],
            y: reverseY,
            color: this._randomColor()
        });
    }
}

_randomColor(){
    return '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
}

我們的chart需要有畫布的外框且資料兩點需要使用直線串連起來

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
constructor(params){
    this._LINE_TENSION = 0.2
    this._LINE_WIDTH_ORI = 2;
    this._LINE_WIDTH_FOCUS = 5;
    this._COLOR_GRAY = 'gray';
    this._COLOR_WHITE = 'white';
}

_initFrame(){
    this._drawRect({
        x: 0,
        y: 0,
        width: this._canvasWidth,
        height: this._canvasHeight,
        lineWidth: this._LINE_WIDTH_ORI,
        color: this._COLOR_GRAY
    });
}

_initLines(){
    let prePoint;
    for(const [index, point] of this._dataSet.entries()){
        if(index == 0){
            prePoint = point;
            continue;
        }
        this._drawLine(prePoint, point);
        prePoint = point;
    }
}

draw(){
    this._initFrame();
    this._initLines();
}

執行一下看看效果
chart

有了簡單的雛形後，接著可以慢慢慢慢進行優化，增加新功能

像現在我想凸顯每個資料點，將點放大，所以需要增加繪製圓形的function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
_drawCircle(point){
    this._ctx.lineWidth = point.lineWidth;
    this._ctx.beginPath();
    this._ctx.arc(point.x, point.y, point.radius, 0, 2 * Math.PI);
    this._ctx.strokeStyle = point.color;
    this._ctx.fillStyle  = point.color;
    this._ctx.fill();
    this._ctx.stroke();
}

draw(){
    this._initFrame();
    this._initLines();
    this._initCircles();
}

執行一下看看效果
chart

市面上大部份cahrt都可以透過滑鼠去取得最近資料點，所以我們的chart也來要增加此功能

首先在canvas增加mousemove事件，用於取得目前滑鼠的座標，接著算出每個資料點與目前滑鼠之間的距離 (這次參考Flot Charts的做法)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
_bindMouseEvent(){
    const _self = this;
    this._canvas.addEventListener("mousemove", (event) => {
        const rect = _self._canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
        _self._findNearPointByMouse({x: x, y: y});
    });
}

_drawFocusPoint(point){
    this._drawCircle({x: point.x, y: point.y, radius: this._radius, lineWidth: this._LINE_WIDTH_FOCUS, color: point.color});
}

_findNearPointByMouse(mousePos){
    let minDistancePoint;
    let minDistance = Number.MAX_VALUE;
    for(var index=0, size= this._dataSet.length; index<size; index++){
        const currentPos = this._dataSet[index];
        const distanceBetweenTwoPoints = this._distance(currentPos, mousePos);
        
        if(minDistance > distanceBetweenTwoPoints){
            minDistancePoint = currentPos;
            minDistance = Math.min(minDistance, distanceBetweenTwoPoints);
        }
    }
    if(!this._preFocusPoint){
        this._drawFocusPoint(minDistancePoint);
        this._preFocusPoint = minDistancePoint;
        return;
    }
    /*
    if pre point isn't self, it's need to render
    */
    if(this._preFocusPoint.index !== minDistancePoint.index){
        this.render();
        this._drawFocusPoint(minDistancePoint);
    }
    this._preFocusPoint = minDistancePoint;
}

_distance(point1, point2){
    return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
}

執行一下看一下效果 (這裡為了顯示實際效果， 所以就直接執行js而不是使用貼圖，瀏覽器必須支援es6才能看見，畢竟沒有透過babel進行轉換)

Chart

以下是完整的程式碼，看起來與java有點像…
也可以到我github上去下載完整的程式碼，今天的練習就到此結束了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
class Chart{
    constructor(params){
        this._LINE_TENSION = 0.2
        this._LINE_WIDTH_ORI = 2;
        this._LINE_WIDTH_FOCUS = 5;
        this._COLOR_GRAY = 'gray';
        this._COLOR_WHITE = 'white';
        
        this._id = params.id;
        this._matrix = params.matrix;
        this._radius = params.radius;
        this._dataSet = [];
        this._curveDataSet = [];
        
        this._canvas;
        this._canvasWidth;
        this._canvasHeight;
        this._ctx;
        this._preFocusPoint;

        this._init();
    }

    _init(){
        this._canvas = document.getElementById(this._id);
        if(!this._canvas.getContext){
            throw "can't get canvas context!";
        }
        this._canvasWidth = this._canvas.width;
        this._canvasHeight = this._canvas.height;
        this._ctx = this._canvas.getContext('2d');
        
        this._initDataSet();
        this._bindMouseEvent();
        this.draw();
    }

    _initDataSet(){
        for(const [index, point] of this._matrix.entries()){
            var reverseY = this._canvasHeight - point[1];
            this._dataSet.push({
                index: index,
                x: point[0],
                y: reverseY,
                color: this._randomColor()
            });
        }
    }

    _initFrame(){
        this._drawRect({
            x: 0,
            y: 0,
            width: this._canvasWidth,
            height: this._canvasHeight,
            lineWidth: this._LINE_WIDTH_ORI,
            color: this._COLOR_GRAY
        });
    }
    
    _initLines(){
        let prePoint;
        for(const [index, point] of this._dataSet.entries()){
            if(index == 0){
                prePoint = point;
                continue;
            }
            this._drawLine(prePoint, point);
            prePoint = point;
        }
    }
    
    _initCircles(){
        const _self = this;
        this._dataSet.forEach((point) => {
            _self._drawCircle({
                x: point.x, 
                y: point.y, 
                radius: _self._radius, 
                lineWidth: _self._LINE_WIDTH_ORI,
                color: point.color
            });
        });
    }
    
    _bindMouseEvent(){
        const _self = this;
        this._canvas.addEventListener("mousemove", (event) => {
            const rect = _self._canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            _self._findNearPointByMouse({x: x, y: y});
        });
    }
    
    _randomColor(){
        return '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
    }
    
    _drawRect(params){
        this._ctx.lineWidth = params.lineWidth;
        this._ctx.strokeStyle = params.color;
        this._ctx.beginPath();
        this._ctx.rect(params.x, params.y, params.width, params.height);
        this._ctx.stroke();
    }
    
    _drawLine(point1, point2){
        this._ctx.lineWidth = point2.lineWidth;
        this._ctx.strokeStyle = point2.color;
        this._ctx.beginPath();
        this._ctx.moveTo(point1.x, point1.y);
        this._ctx.lineTo(point2.x, point2.y);
        this._ctx.stroke();
    }
    
    _drawCircle(point){
        this._ctx.lineWidth = point.lineWidth;
        this._ctx.beginPath();
        this._ctx.arc(point.x, point.y, point.radius, 0, 2 * Math.PI);
        this._ctx.strokeStyle = point.color;
        this._ctx.fillStyle  = point.color;
        this._ctx.fill();
        this._ctx.stroke();
    }
    
    _drawFocusPoint(point){
        this._drawCircle({x: point.x, y: point.y, radius: this._radius, lineWidth: this._LINE_WIDTH_FOCUS, color: point.color});
    }
    
    _findNearPointByMouse(mousePos){
        let minDistancePoint;
        let minDistance = Number.MAX_VALUE;
        for(var index=0, size= this._dataSet.length; index<size; index++){
            const currentPos = this._dataSet[index];
            const distanceBetweenTwoPoints = this._distance(currentPos, mousePos);
            
            if(minDistance > distanceBetweenTwoPoints){
                minDistancePoint = currentPos;
                minDistance = Math.min(minDistance, distanceBetweenTwoPoints);
            }
        }
        if(!this._preFocusPoint){
            this._drawFocusPoint(minDistancePoint);
            this._preFocusPoint = minDistancePoint;
            return;
        }
        /*
        if pre point isn't self, it's need to render
        */
        if(this._preFocusPoint.index !== minDistancePoint.index){
            this.render();
            this._drawFocusPoint(minDistancePoint);
        }
        this._preFocusPoint = minDistancePoint;
    }
    
    _distance(point1, point2){
        return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
    }
    
    _clear(){
        this._ctx.clearRect(0, 0, this._canvasWidth, this._canvasHeight);
    }
    
    /* public */
    draw(){
        this._initFrame();
        this._initLines();
        this._initCircles();
    }
    
    render(){
        this._clear();
        this.draw();
        console.log('render');
    }
}

展開全文 >>

標準常態分佈的機率密度函數

前陣子在做SPC逆向工程…
為此還買了一本簡體書“程序員的數學2 概率與統計”來複習一下統計的觀念
皇天不負苦心人，在經過多天的努力，最終成功的產出與“SPC參考對象”相同的結果
為了找到正確的偏移量，在此期間不知實作了多少種不同的標準差…

下一個任務是需要產生機率密度函數去看資料的離散程度…
至於什麼是常態分佈，可以到常態分佈wiki上看，應該會比我自己說還要詳細
一直很好奇為什麼要定義成鐘型，看了下面的youtube影片就才了解，這是自然界的一種規律(巧合？)

許多球從中間落下（期望值的位置），最終形成的結果接近於鐘型

上面簡介完了，接著進入主題，開始剖析標準常態分佈的機率密度函數的公式
$ f(x) = {1 \over \sqrt{2\pi}}\exp(-{x^2 \over 2}) $

如果直接從wiki看完公式後，很容易實作出來，只是我更想知道公式背後的原理
以下是我看書和上網查完資料後，根據自己理解所歸納的結果(趁印象深刻趕快記錄下來)

這時需要將公式拆成兩個部分來看
現在先看 $ f(x) = \exp(-{x^2}) $ 這部分：

為什麼要使用 $ -x^2 $ 呢？
我們知道$ x^2 $函數是開口向上的鐘型形狀，如下圖所示(以下圖片都是透過Maxima產生)：
x^2
但我們要的鐘型是開口向下，想要開口向下只需要乘上-1，即 $ -x^2 $
-x^2

接下來看整個 $ \exp(-{x^2}) $
因為經過 $ -x^2 $ 的函數所得的的值是“恆負”的(除了頂點值為0)，永遠落在第二和第三象限
但是當 $ -x^2 $ 當作常數為底的指數時，透過函數所得到的值是“恆正”的，就會落在第一和第四象限上
以下是 $ 3^{-x^2} $的函數圖形
x^2
其實任何常數指數為 $ -x^2 $ 都為鐘型圖形，如下圖為$ 100^{-x^2} $的函數圖形
x^2

雖然取任何常數都可以形成鐘型，那為什麼要取exp當作底呢？
主要是需要它的部分特性，主要有以下五點：

  1. 左右對稱(以0為中心點，常數c與-c的值會得到相同值)
  2. x軸為0時(中心點)， $ f(0) $ 會取得最大值(鐘型的最高點)
  3. 隨著x值逐漸遠離0時(中心點)，值會漸漸縮小，且值“不會是負的”(這點很重要，因為機率值不可為負的)
  4. 當x趨近於無窮大或趨近於負無窮大時，值趨近於0
  5. 比較好做積分…(連續型的機率是透過計算面積的方式去獲得區間範圍內的機率所以要做積分)

但是只有 $ f(x) = \exp(-{x^2}) $ 是不夠的，因為對機率來說，總體 $ P(\Omega) = 1 $
所以從負無限大到無限大做積分整個 $ f(x) $的總面積必須是1
嘗試對 $ \exp(-{x^2}) $從負無窮大到無窮大做積分，得到以下結果
x^2
總面積會是 $ \sqrt{\pi} $ ，所以要讓值為1的方法就是除以 $ \sqrt{\pi} $
最終會得到 $ f(x) = {1 \over \sqrt{\pi}}\exp(-{x^2}) $
我們得到了常態分佈的機率密度函數，但還不能稱為“標準”常態分佈的機率密度函數
因為要達到“標準”的要求還需要有以下三個特性：

  1. 期望值( $ \mu $ )為0
  2. 變異數( $ Var $ )為1
  3. 標準差( $ \sigma $ )為1

記做 $ N(\mu, \sigma) $， 求 $ N(0, 1) $
但目前得到的機率分佈函數是 $ N(0, {1 \over \sqrt{2}}) = {1 \over \sqrt{\pi}}\exp(-{x^2}) $ 這不符合標準的定義，不是我們要的

我們先從wiki上看看連續型隨機變數求期望值和變異數的公式:

$ E[X] = \int xf(x)dx $
$ Var(x) = E[(x-\mu)^2] $

因為標準的期望值為0，則 $ \mu = 0 $ ，帶入後得到 $ Var(x) = E[x^2] $

先令$ g(x) = af(ax) $，其中a是一個大於零的常數，我們需要求出a值
a值需要滿足 $ \int x^2g(x) = Var(x) $ 積分等於1
$ \int x^2g(x) $ 積分後求得 $ 1 \over {2a^2} $，因為 $ {1 \over {2a^2}} = 1$
所以得到$ a = {1 \over \sqrt{2}} $可滿足 $ Var(x) = 1 $ 且 $ \mu = 0 $
也可以求得 $ \sigma = \sqrt{Var(x)} = 1 $，滿足前面所提到的三個條件
$ N(0, 1) = {1 \over \sqrt{2}} f({x \over \sqrt{2}}) $ 帶入公式後得到 $ f(x) = {1 \over \sqrt{2\pi}}\exp(-{x^2 \over 2}) $
這樣就符合“標準”常態機率密度函數

在理解後再回頭看公式，就不覺得怪了
以上所做的一切努力都是為了“湊出”滿足機率定義的函數

展開全文 >>

Linux 如何避免重複執行特定jar

因為Linux是真正多人多工，若是在不同電腦上遠端登入
執行同一個特定jar，就會造成重複執行
所以在一般情況下，會寫script 做成 service
再透過 start stop restart 去執行

但是有些時候我們只是要執行一個Java的小程式
不會想要花費時間將它製作成 service
所以只需寫一個script，去檢查特定程式的JVM是否已經啟動
若是已經啟動的話就刪除目前執行的JVM

應該有其他指令可以做到直接刪除，這裡只是提供一種強制停止JVM的思路

kill jar JVM, if exist .sh
1
2
3
4
5
6
7
8
9
10
#!/bin/bash

PID=$(ps aux | grep jar-[0-9] | awk '{print $2}')
echo "PID: "$PID
if [ -z $PID ]; then
	echo "not exist PID"
else
    echo "kill PID: "$PID
    kill -9 $PID
fi

第3行 ps aux 是找出所有目前執行中的process
接著使用 grep 找出特定的process，因為這個jar會帶版號
例如： jar-1.1.jar 或是升級後 jar-1.2.jar
所以多判斷帶版號的regex
最後執行 awk 印出第2欄（因為第2欄是process的PID）
第5行是檢查PID是否為空字串
若PID不是空字串就表示JVM已經存在需要執行第9行去強制刪除JVM
PS: 要不要刪除JVM就看個人了，因為這是用在開發中的jar，需要重新執行，所以使用kill

這樣一個簡單的script就完成了，現在只需要在執行jar前呼叫此.sh檔
就可以避免重複執行了

展開全文 >>

使用 WeakReference 解決 Android 發生 memory leak 問題

源由:
前陣子在幫忙維護Android APP
因為客戶反映此APP在運行一天之後輕則沒有反應，重則crash…
所以需要常常重啟APP

在Android Studio上觀察了一下memory
執行了一段時間後發現記憶體會不正常增長，就算手動執行GC也無法釋放
初步研判是發生了memory leak
馬上做heap dump
再使用MAT稍微分析了一下

果然…
activity的context沒有被正常釋放掉
主因是activity將自身的context傳給了AsyncTask去執行跟Server拿資料的任務
因為此APP是屬於Web Service，需要頻繁的執行request
所以同時間會產生多個AsyncTask
最終造成多個AsyncTask需等待其他AsyncTask完成任務
但又佔用activity的context，所以activity無法釋放

簡單的說就是AsyncTask的生命週期比activity的生命週期還要長
所以activity沒辦法回收memory

確認問題的原因後，接下來就好辦了

首先是解決activity context無法釋放的問題
在這裡我是將傳入activity context宣告成WeakReference
WeakReference是Java的弱引用，可以讓 activityContext 可以被系統正常GC
不會因AsyncTask長期佔用 activityContext 造成 memory 無法釋放的問題發生
這個問題其實也可以使用SoftReference，它與WeakReference的差別在於
WeakReference平時在做GC時就會被回收，而SoftReference則是JVM分配的記憶體滿了時做GC時才回收
此場景在於task用完即可回收，不需要累積到記憶體滿了才回收，所以適合使用WeakReference

WeakReference 使用方式
1
2
3
4
5
WeakReference<Context> contextRef = new WeakReference<Context>(activityContext);
if(null != contextRef.get()){//判斷有無被系統GC
    Context context = contextRef.get();
    //可以執行到這，就表示 context 還未被系統回收，可繼續做接下來的任務
}

但是最佳的做法應該是不要隨意傳遞activity的context，因為他的生命週期非常短暫
若真的需要使用context的話應該使用application context，而不是activity context
因為application context是APP的context，所以不像activity context一直不斷被創建和釋放
只是application context不能用來更新UI

若想使用activity context去更新UI的話，也應該要回歸到activity內部執行
而不是讓外部的Object直接引用，無形中提高了memory leak發生的風險

展開全文 >>

比較好的nested map寫法

最近在幫忙修正Android的bug時，看到了一段複雜if else的code
仔細的看了一下，才知道是使用一個三層的nested map結構來幫資料做group

輸入資料為n*m的matrix

1
2
String[][] dataMatrix = {{"level 1", "level 2", "level 3", "data 1"},
                         {"level 1", "level 2", "level 3", "data 2"}};

但是原始的code寫的滿複雜的，為了方便說明就簡化一下，寫成程式碼 1

程式碼 1:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
//Map<level 1, Map<level 2, Map<level 3, List<data>>>>
Map<String, Map<String, Map<String, List<String>>>> map = new HashMap<>();
String level1 = "level 1";
String level2 = "level 2";
String level3 = "level 3";

if(map.containsKey(level1)){
    if(map.get(level1).containsKey(level2)){
        if(map.get(level1).get(level2).containsKey(level3)){
            map.get(level1).get(level2).get(level3).add("data 1");
            map.get(level1).get(level2).get(level3).add("data 2");
        }else{
            map.get(level1).get(level2).put(level3, new LinkedList<>());
            map.get(level1).get(level2).get(level3).add("data 1");
            map.get(level1).get(level2).get(level3).add("data 2");
        }
    }else{
        map.get(level1).put(level2, new HashMap<>());
        if(map.get(level1).get(level2).containsKey(level3)){
            map.get(level1).get(level2).get(level3).add("data 1");
            map.get(level1).get(level2).get(level3).add("data 2");
        }else{
            map.get(level1).get(level2).put(level3, new LinkedList<>());
            map.get(level1).get(level2).get(level3).add("data 1");
            map.get(level1).get(level2).get(level3).add("data 2");
        }
    }
}else{
    map.put(level1, new HashMap<>());
    if(map.get(level1).containsKey(level2)){
        if(map.get(level1).get(level2).containsKey(level3)){
            map.get(level1).get(level2).get(level3).add("data 1");
            map.get(level1).get(level2).get(level3).add("data 2");
        }else{
            map.get(level1).get(level2).put(level3, new LinkedList<>());
            map.get(level1).get(level2).get(level3).add("data 1");
            map.get(level1).get(level2).get(level3).add("data 2");
        }
    }else{
        map.get(level1).put(level2, new HashMap<>());
        if(map.get(level1).get(level2).containsKey(level3)){
            map.get(level1).get(level2).get(level3).add("data 1");
            map.get(level1).get(level2).get(level3).add("data 2");
        }else{
            map.get(level1).get(level2).put(level3, new LinkedList<>());
            map.get(level1).get(level2).get(level3).add("data 1");
            map.get(level1).get(level2).get(level3).add("data 2");
        }
    }
}

System.out.println(map.get(level1).get(level2).get(level3).get(0));
System.out.println(map.get(level1).get(level2).get(level3).get(1));

程式碼 1 的寫法用了三層的巢狀，也包含許多重複的判斷邏輯，不但不容易閱讀，也不利於後續的維護和修改…
看到這段程式碼時，當下真的有種想幫他重構的衝動
但想一想此段code沒有bug，只是醜了點，若重構既花時間也沒有實質效益
最終只在程式碼 1 的上方增加註解，寫了個比較好的作法，就是下方的程式碼 2

程式碼 2:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//Map<level 1, Map<level 2, Map<level 3, List<data>>>>
Map<String, Map<String, Map<String, List<String>>>> map = new HashMap<>();
String level1 = "level 1";
String level2 = "level 2";
String level3 = "level 3";

if(!map.containsKey(level1)) {
    map.put(level1, new HashMap<>());
}
if(!map.get(level1).containsKey(level2)) {
    map.get(level1).put(level2, new HashMap<>());
}
if(!map.get(level1).get(level2).containsKey(level3)) {
    map.get(level1).get(level2).put(level3, new LinkedList<>());
}

map.get(level1).get(level2).get(level3).add("data 1");
map.get(level1).get(level2).get(level3).add("data 2");

System.out.println(map.get(level1).get(level2).get(level3).get(0));
System.out.println(map.get(level1).get(level2).get(level3).get(1));

程式碼 2 的寫法可以輕鬆地在執行過程中自動做初始化
因為第7~9行就可以將level 1為null的可以性完全排除，在第7行後level 1就不可能是null
以此類推第10行和第13行都可以自動幫level 2和level 3做初始化，所以後面只需專注於放資料即可
不管之後增加幾層map都不需要寫成複雜的巢狀判斷式

隔天想了一下，如果沒有什麼特殊需求，其實只需要將三層的key組合成一個唯一的字串即可…
就如同下方的程式碼 3

程式碼 3:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//Map<level 1 + level 2 + level 3, List<data>>
Map<String, List<String>> map = new HashMap<>();

String level1 = "level 1";
String level2 = "level 2";
String level3 = "level 3";

String combinKey = level1 + level2 + level3;

if(!map.put(combinKey)) {
    map,put(combinKey, new LinkedList<>());
}

map.get(combinKey).add("data 1");
map.get(combinKey).add("data 2");

System.out.println(map.get(combinKey).get(0));
System.out.println(map.get(combinKey).get(1));

若是能夠使用 java 8 的 stream 的話就更簡單了，如同下方的程式碼 4

程式碼 4:
1
2
3
4
5
6
7
8
9
10
Map<String, List<String>> map = Arrays.stream(dataMatrix).collect(
                Collectors.toMap(
                    kv -> kv[0] + kv[1] + kv[2],
                    kv -> Lists.newArrayList(kv[3]),
                    (newVal, oldVal) -> {
                        newVal.addAll(oldVal);
                        return newVal;
                    }
                )
            );

結論：
我一直認為寫出簡潔易讀且好維護的程式碼是身為一個軟體開發者該有的素養
不是只求程式會跑就好，這樣只會累積一些不必要的技術債…
所以我覺得每個開發者，都應該買本“clean code 無瑕的程式碼 + 番外篇”來讀一讀
時時提醒自己不要埋地雷給別人踩，顯現自己的專業

此時想起我放在辦公室的clean code一書被同事們借來借去，現在也不知道流浪到哪位同事的辦公桌上…

展開全文 >>

更換hexo themes

稍微嘗試更換hexo themes
雖然原生的landscape theme的介面已經很簡潔
但還是想要更精簡一些

比較了幾個比較知名的theme
最後決定使用yilia這個theme
介面簡潔乾淨而且RWD的效果也不錯
除了不支援舊版IE以外沒什麼好挑惕的
也順便學習設定disqus當作留言板

展開全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

全端工程師<br><br>60% Java<br>40% Javascript<br>