熱血漢誌 - 技術新鮮人到技術經理人，必懂的事

Object.keys 今天同事詢問下，才發現有這個好東西，Object.keys 使用方式 可以將 Object Key 值轉換成 Array 格式。 var o = { name: 'Caesar', atts : { sex: 'male', age: 99, }, home: true }; var userArrays = Object.keys(o); console.dir(userArrays); 結果會顯示 [ 'name', 'atts', 'home' ] 使用方式十分簡單，直接呼叫 Object.keys 這個方式就可以，記得裡面必須傳入 Object 屬性的物件，傳入 非 Object 則會顯示 Error。 透過此方法，可以直接取得 Object 中 第一層 Key 值 ，組合成一串 Array ，Array 的索引值 (index) 從第 0 個開始。 這樣的方式通常使用於 iterator ，會搭配 forEach 來使用。或者是需要取出使用者傳遞的物件參數。這些情況下都可能使用到這個方式。 因為將 Object 轉成 Array 之後，可以快速透過 Array.join 的方式，將字串重新組合，不用再寫迴圈處理。 後記 當然這個方法只限定於當代的瀏覽器，至於比較早期的，可以用底下的程式，模擬， if (!Object.keys) Object.keys = function(o) { if (o !== Object(o)) throw new TypeError('Object.keys called on a non-object'); var k=[],p; for (p in o) if (Obj...

[].slice function on JavaScript 這幾天學習 CoffeeScript ，裡面有許多好玩的 syntax sugar ，當然 JavaScript 原生不會有這種產物，很明顯是沿用 Python, Ruby 語言的優雅之處。 裡面有個部分有個奇妙的使用方式，介紹如下， Coffee code awardMedals = (first, second, others...) -> gold = first silver = second rest = others 編譯後的 JavaScript code awardMedals = function() { var first, others, second; first = arguments[0], second = arguments[1], others = 3 <= arguments.length ? __slice.call(arguments, 2) : []; gold = first; silver = second; return rest = others; }; 裡面用到了有趣的 Array.slice ，用模擬的方式來實踐 others… 這樣的語法糖衣。 原理說明 原理是直接採用 Array.slice ，通常這個方法都是用在陣列裡面，不過在這邊是用來做傳參考參數的指定。 Array 這個原生 Object 可以直接使用 [] 來使用， others = (3 <= arguments.length) ? __slice.call(arguments, 2) : []; 從呼叫的方法 (function) 直接使用 arguments 取得所有帶進去 function 中的參數，傳進去的參數數目必需要大於限制，這邊是 3 ，接著才會將第三個以後傳入的參數做分割。 這邊使用了 call 這個方法，不太曉得的人可以，call 會直接執行此 slice 這個方法。 使用 call 這樣的方式執行，第一個傳遞進去的變數，就是 this ，需要告訴這個方法，呼叫者是誰 (傳說中的 JavaScript, what is this)。 後面就可以依...

Mac installed software 最近也用了 Mac 一段時間，分享一下目前 Mac 裡面到底安裝了哪些東西，順便整理一下自己的硬碟，因為是自己要使用的軟體清單列表，就不一一描述功能，如果對於軟體名稱不熟悉，可以透過 Google 詢問。 如果有更好用的軟體，歡迎討論 Sublime text 2 Text editor Adium instanst message Yahoo 中文輸入法 中文輸入法 Welly Connect to BBS AppCleaner remove application completely Google Chrome Chrome browser Mozilla Firefox Firefox Browser Evernote Evernote for Mac Skitch Screen Capature iTerm2 terminal connect tool iwork iWork 2012 MS Office Microsoft Office for Mac Xcode Xcode Adobe Reader PDF Reader Adobe PhotoShop Adobe PhotoShop MacTubs YouTube video downloader VLC Player VLC Player for Streaming video Divvy window align tool [flip for Mac - wmv player] SmartGit Filezilla Windows 遠端桌面 Caffine homebrew Dropbox client Google 雲端硬碟 Picasa for Mac Skype Synergy Colloquy - connect to IRC Sequel Pro  MySQL client tool keka  - 解壓縮軟體, 軟體介紹

CoffeeScript Vim plugin CoffeeScript ，也有人稱為 Coffee ，最近開始寫 Coffee，因為有時候很懶得打字，也想要快點把程式建構出來， Coffee 是目前看到可以最偷懶將 JavaScript 寫出來，同時通過 JSLint 的方法之一。 不過通常我都使用 Vim ，這邊就稍微介紹一下 CoffeeScript 在 Vim 裡 面的好工具。 CoffeeScript support for Vim CoffeeScript support for vim 設定方式 直接使用 vim-pathogen  是一種 vim plug auto load 載入模組，設定方式不多介紹。 切到 ~/.vim/bundle vim-pathogen 的路徑下， git clone https://github.com/kchmck/vim-coffee-script.git 接著需要設定一下 vim-pathogen, 在 ~/.vimrc 底下需要設定 call pathogen#infect() 安裝完成 Vimrc 設定 通常會設定幾個快速方法， au BufWritePost *.coffee silent CoffeeMake! au BufWritePost *.coffee :CoffeeCompile watch vert 儲存檔案後，直接編譯，同時觀看 js 結果。 更多設定請參考 CoffeeScript support for vim

watchFile 陷阱與進階討探 這兩天因為之前寫得一個 simple-livereload 無法支援 Windows, Mac ，開始進行小改版，也稍微對 file system ， Path 做些小小測試，其中發現了一個關於 watchfile 小小的問題。 問題探討 先來看一下程式碼 var fs = require('fs'); var fullpath = '/home/clonn/test.html'; fs.watchFile(fullpath, function (curr, prev) { console.log('file update') }); 接著進行檔案執行之後，會發現出現一個問題，當我修改 test.html 的時候，照理來說應該只有出現一次 file update ，可是卻出現 兩次 ，這實在有點不合乎邏輯。 拜了一下 Google 大神之後，終於找到原因，因為 file system 的 watchFile 實做，當關注的檔案片段（data chunk） 被更動的時候，就會觸發(trriger)，接著檔案修改完成，又會重新觸發一次事件，所以導致當一個檔案修改，會被觸發兩次。 處理方法 在 filewatch 的 listen 事件當中會提供 curr, prev，之前和目前的物件(Object) ，接著使用此事件進行時間比對，所以剛才的檔案我們修改如下， var fs = require('fs'); var fullpath = '/home/clonn/test.html'; fs.watchFile(fullpath, function (curr, prev) { if (curr.mtime.getTime() !== prev.mtime.getTime()) console.log('file update'); }); 如此就可以得到正確結果，檔案修改，就只會進行一次觸發。 進階處理 其實 fs.watch, fs.watchFile 會回傳 listener 物件，如果要使用可以將程式碼修改如下， var ...

cloud service 雲端服務集合，目前開發 Node.js 服務大多需要 express， socket.io ，這兩者服務通常會使用到 MongoDB，Redis，但是如果只是為了架設 prototype 而自己搞了一堆環境，簡直就是搞死自己。用 Amazon 又還不到這個階段，而且沒有信用卡，該怎麼辦？ PaaS 以 Node.js 服務來說，目前已經有許多 PaaS 廠商提供免費的服務環境，有底下幾間可以參考。 Nodejitsu dotCloud cloudfoundry heroku 以服務來說，使用經驗上比較推薦使用 Nodejitsu ，首要在於 Socket.io 的支援上，Nodejitsu 可以支援到 Websocket ，另外也提供 https 認證支援，因此不需要特別去買其他的 certification。 另外 Nodejitsu 目前已經是 Joyent ，合作廠商之一，因此 Nodejitsu 的服務器都是架設在 Joyent ，同時支援目前最新版本的 Node.js 版本。

Node.js web template engine - ejs express 在 Node.js 建立 Web 伺服器通常都會使用到的套件，預設直接使jade 為 template engine ，可是依照自己的習慣還是無法接受類似 mastach 的方式，比較能夠接受 Html 混搭程式的架構，尋找一段時間之後，發現 ejs 是一個不錯的選擇。 模組說明 模組網址： ejs 開發者：https://github.com/visionmedia 說明文件： ejs 是一種 html template engine ，用法上比較貼近 html 原生使用方式，例如開發 asp 經常會使用到 <%= variable %> 的方式，直接就可以在 ejs 裡面使用。 以下使用的範例是直接在 Node.js express 裡面進行 html 頁面轉換，但是 ejs 是一個可以直接使用於前端頁面的套件庫，詳細的使用方式可以參考，ejs 相關範例