[vue.js] v-model.lazy的使用時機

vue.js的v-model directive是一個非常方便的東西

由於v-model是使用two way data binding

所以只要修改就會立即顯示

但有時候我們也會希望v-model不要這麼快就幫我們sync

尤其是使用者在填寫表單(form)的時候

我們會希望使用者填完之後才觸發

這時候就可以使用v-model.lazy

加上.lazy這個內建的modifier讓data sync在change event事件後才去處理

vuejs v2:

<input v-model.lazy="name">

參考來源:

https://vuejs.org/v2/guide/forms.html#lazy

Advertisements

javascript ES6 的箭頭函式(arrow function)

javascript ES6的arrow function是方便的syntax sugar,可以幫助我們寫出更簡潔的js code

在arrow function還沒出現前,針對特定element綁定事件大致會像這樣:

document
.getElementById('my-btn')
.addEventListener("click", function(e) => {
alert('before es6');
});

將以下的anonymous function替換成arrow function的寫法:

document
.getElementById('my-btn')
.addEventListener("click", (e) => {
alert('arrow function');
});

只有一個參數時,可省略括號:

document
.getElementById('my-btn')
.addEventListener("click", e => {
alert('arrow function');
});

若只有一行statement時,可以省略大括號

document
.getElementById('my-btn')
.addEventListener("click", e => alert('arrow function'));

其實從以上的範例還真看不出來arrow function強大的地方XD
頂多就只有省略function這個關鍵字和大括號而已
但其實這只是arrow function的其中一種寫法
更方便的用法還在後頭~

arrow function讓你不用.bind(this)

我們都知道javascript的this是一個很tricky的東西
和Java、C#、PHP等OOP的語言的this所代表的涵意是不太一樣的

言規正傳,如果不使用arrow function在setTimeout的callback中要取得object instance的this
就要使用.bind把object instance的this綁定給setTimeout的callback

function UserModel(id) {
    this.id = id;
    this.name = '';

    setTimeout(function() {
	this.name = 'from remote';
    }.bind(this), 1000);
}

var userModel = new UserModel(1);
console.log(userModel.name);

但如果使用arrow function就簡單的多了,不需要加上.bind(this)

function UserModel(id) {
    this.id = id;
    this.name = '';

    setTimeout(() => {
	this.name = 'from remote';
    }, 1000);
}

var userModel = new UserModel(1);
console.log(userModel.name);

結論

ES6的arrow function可以讓我們少寫一些程式碼
更容易處理this的指向,進而寫出更簡潔易懂的程式碼

[PHP] 為什麼應該使用MySQL Native Driver(mysqlnd)來取代MySQL Client Library(libmysqlclient)

還記得以前第一次自己架設LAMP開發環境的時候,就已經注意到安裝有這兩個package了

但那時候還不曉得有何差別,只記得書上叫我裝php5-mysql就照著裝XD

前陣子碰到一個需要安裝mysqlnd才能解決的問題,正好趁這個機會來瞭解一下差別

MySQL Native Driver is a replacement for the MySQL Client Library (libmysqlclient)

在PHP文件的myslqnd章節內一開頭就說明了mysqlnd是用來取代libmysqlclient

為何PHP官方會建議使用mysqlnd?

 

mysqlnd是屬於PHP Project的一部份

不像libmysqlclient是使用MySQL license,mysqlnd是使用PHP license這也避免了一些因為license所衍生的問題(看看前陣子Oracle告Google的新聞就知道為什麼了!)

mysqlnd的功能比libmysqlclient還多

從PHP 5.3.0開始mysqlnd library 已經是內建在PHP的library,mysqlnd提供的一些功能像是query caching、lazy connections、SSL這些在libmysqlclient的沒辦法用的

詳細差異請參閱Library feature comparison

mysqlnd的效能比libmysqlclient還好

由於mysqlnd是用C寫的PHP extension,所以它是使用PHP memory management system也支援PHP memory limit和memory_get_usage(),安裝mysqlnd可以使用memory_get_usage()來追蹤記憶體的使用情形,而是在libmysqlclient是不可能的,因為libmysqlclient要使用C語言的function malloc(),在官網有舉一個例子

One example of the memory efficiency is the fact that when using the MySQL Client Library, each row is stored in memory twice, whereas with the MySQL Native Driver each row is only stored once in memory.

libmysqlclient在儲存每一筆資料row到memory的時候會存兩次

而mysqlnd只會存一次

 

參考來源:

http://php.net/manual/en/mysqlnd.overview.php

http://php.net/manual/en/mysqlinfo.library.choosing.php

http://php.net/manual/en/intro.mysqlnd.php

https://dev.mysql.com/downloads/connector/php-mysqlnd/

讓Git untrack已經進repository的檔案

初學Git的人都知道,可以使用.gitignore來忽略檔案

但如果這個檔案已經進到repository了呢?

一旦檔案已經commit到repository,只把該檔案加到.gitignore的話是沒有用的

還要將那個檔案變成untracked的狀態,這時候可以使用

git rm --cached i-am-a-file-name

將檔案untrack後,並commit這次的異動

再把檔案加到.gitignore

就大功告成了

關於git config的層級

安裝完git後為了方便性,需要初始化一些設定

這個動作可以透過git config來完成

git config有分為三種不同的層級,以下是由高到低的優先權

 

1.檔案庫層(–local參數可省略)的設定會在.git資料夾中的config檔

$ git config --local user.name "Tony Ciou"

 

2.使用者層(global)的設定會在家目錄的.gitconfig檔案內

$ git config --global user.name "Tony Ciou"

 

3.系統層(system)的設定會在/etc/gitconfig檔案內

$ git config --system user.name "Tony Ciou"

 

一般來說安裝git後至少會初始化以下的設定

$ git config --global user.name "YOUR NAME"
$ git config --global user.email "YOUR EMAIL ADDRESS"
$ git config --global core.editor "YOUR CODE EDITOR"

讓Git識別檔案的大小寫

前陣子和朋友一起開發一個小專案的時候遇到的問題

我明明建立了一個新的檔案,但我朋友pull之後卻看不到

因為同一個資料夾有兩個檔案很相似:

test.php

Test.php

當下就直覺跟檔案名稱的大小寫有關

查了一下文件之後發現要解決這個問題其實還滿簡單的,只要修改一下git config

git config core.ignorecase false

由於Windows和MacOS的檔案名稱是不分大小寫的(case-insensitive),也就是說以上的兩個檔案會被識別為同一個

我自己的筆電是裝Linux所以從來沒有遇過這個問題,因為Linux的檔案名稱是分大小寫(case-sensitive)

同理,如果把core.ignorecase改成true那麼在Linux上也可以達到檔案不分大小寫(case-insensitive)

解決無法在Virtualbox Guest OS Shared Folder建立Link

建立好VM的shared foleder後發現無法在該目錄建立Link

找了一下只需要在Host OS下個一行指令就能解決

Linux:

VBoxManage setextradata VM_NAME VBoxInternal2/SharedFoldersEnableSymlinksCreate/SHARE_NAME 1

Windows:

VBoxManage.exe setextradata VM_NAME VBoxInternal2/SharedFoldersEnableSymlinksCreate/SHARE_NAME 1

VM_NAME: VM(Guest OS)的名字
SHARE_NAME: Shared Foleder的名字 (不含”sf_”前綴字)

記得重啟VM!
參考來源:http://serverfault.com/questions/345341/cant-create-symlinks-in-virtualbox-shared-folders