今天想來研究一下這些東西：

1.CSS Layout(CSS grid)
2.Node.js基本
3.JS 進階練功

• RXJS

1.CSS Layout

• 參考自這篇第一段，把相關資料＋演講先看看
  • CSS flexbox
  • CSS grid - 今天重點
    • 參考資料1
    • 先參考資料2
    • 推推推薦整理
    • 影片：
      難
      先
    • 先另外一位鐵人參賽者寫滿好的，可以先看這篇再去看document
  • CSS Box Alignment Module - 推測是所有的統整＋使用說明(還沒看)

3.Node.js基本
有點雜亂，放入學習筆記。

node

A introduction

module
了解什麼是 Node.js模組？如何載入模組？


module Types  -Node.js 有三大類的模組
1. Core Modules (原生模組)
2. Local Modules (自建模組)
3. Third Party Modules (第三方模組)


node.js 是一個輕量的framework, 它的原生模組功能, 可以被編譯成二進制位元存取，也可以單刀直入做一些本地自動化功能操作。
有幾個重要的(以下連結，可以進入，知道其使用方法)：
http：它包含可以用來建立http server 的一些類別, 方法, 及事件。
url：它包含可以解析url的一些方法。
querystring：它包含可以處理由client端傳來querystring的一些方法。
path：它包含可以處理一些檔案或資料夾路徑的方法。
fs：它包含檔案的存取／操作的一些類別，方法及事件。
util：它包含一些可供程序者使用的效能函式。

載入module

var module = require(‘module_name’);
只有在自創module時，require() 裡要寫清楚檔案path，如果是原生模組或是npm時，則不需要。
可以直接搜尋資料夾，而不指定檔案
把整個資料夾，當成一個package，所以，它會自動在這資料夾裡去找package 定義檔，預設為package.json，之後，再根據定義檔裡面的關鍵字 main所描述的檔名，載入檔案。
如果，資料夾不存在package.json，則，預設會自動尋找檔名為 index.js的檔案。



自建模組，也可以包裝成npm，供Node.js 社群使用。
一個javascript檔案，就是一個模組！
所以，在建立模組時，應該根據其功能，寫成一個Javascript的檔案。

ex 登入模組 log.js

//略
module.exports = log  //這一部很重要，只要，模組(程式)要給別的模組(程式)使用，必須加這個！！


 module.exports 或 exports 。它們是一個特別的object，可以將 javascript裡任何型別的宣告，變成一個模組，供其他的應用程式或模組使用。



exports是一個物件，所以，我們可以直接分派 屬性，函式(方法)及物件 給它。


A-2NPM
一個可以安裝，更新，解除安裝 Package 的 command line 工具，在我們安裝完NodeJS，它也早已經隨之安裝了。

npm 的操作有分成全域及區域，全域操作，即會影響整個電腦裡node.js的應用程式。區域操作即只會影響個別資料夾。

local

要在區域安裝過程中，加入npm 安裝modules的附加資訊(dependencies)，在local 資料夾裡的package.json檔案。

npm install xxx –save 


global
通常儲存在　/AppData/Roaming/npm/node_modules (windows環境)

npm install -g xxx
npm update  xxx
npm uninstall xxx

A-3 debug
 debug node.js 用三種不同的工具。
1. Node.js 原有的debugger
    1. 指令
        1. setBreakpoint(), sb() – 設定中斷點於目前所在行數
        2. setBreakpoint(line), sb(line) – 設定中斷點給特定行數
        3. setBreakpoint(‘fn()’), sb(…) – 設定中斷點在函式的第一句
        4. setBreakpoint(‘script.js’, 1), sb(…) – 設定中斷點,在指定檔名的第一行。（用於程式中有載入別的檔案時）
        5. clearBreakpoint(‘script.js’, 1), cb(…) – 清除中斷點,在指定檔名的第一行。（用於程式中有載入別的檔案時）
    2. 看變數
        1. watch , watchers 看所有watch 
        2. 刪除某項watch資訊則，可用 unwatch(“exp")
    3. 常用指令
        1. next, n 執行至下一行。
        2. cont, c 繼續執行並停在下一個debuggers;
        3. step, s 進入函式逐一除錯。
        4. out Step, o 跳出函式的逐一除錯。
        5. watch 加入表示式及變數至watch
        6. watcher 查看所有被加入的watch的值。
        7. Pause 暫停執行程式
2. Node Inspector
    1. npm install -g node-inspector
    2. 
3. Build-in debugger in IDEs



 B Basic

B.1-Node.js 內建的 Web Server 介紹及使用
了解如何建立簡單的web server 以後，我們要了解如何處理 node.js 原生模組 http 的 request 及 response。

* request 物件可以用來得到一些從http server 發過來的請求，例如url、http header 及data。

* response 物件則送出回應給 Http 送來的請求。

用req.url 確認request過來的url，再根據這些發送response。

發送response，首先要先設定response header，用 writeHead() 方法；
接著再寫回應的網頁body內容，用write()方法；
最後，我們送出response，用 end() —這個不是結束喔！

也可以回應 JSON格式的檔案，給web server。(這個之後在介紹RESTful時，很好用喔！)

res.writeHead() 的參數，內容格式 為 application/json

 res.writeHead 瀏覽器會根據這個回應格式，正確的將資料呈現在瀏覽器上。


res.writeHead() 寫出的東西是出現在http的header，不是在body中喔。
<meta name='content-type' content='text/html'>則是在body，不是在header



b.2-Node.js 檔案系統 again

 fs module ，是用來操作實體檔案，可以同步或非同步存取檔案系統操作。
一般建議使用　非同步存取　檔案，性能高、速度快、無阻塞。


fs.readFile(fileName [,options], callback)

* fileName: 檔案的完整路徑及檔名，格式字串。
* options: options 可能是一個物件或字串，包含"編碼"及"flag"。這裡預設的編碼是 utf8 , flag是 “r"。
* call back: 是帶兩個參數的function，err及file data，當我們執行readFile完成時, 要做的事, 例如: 回傳file data。

fs.writeFile() 寫入檔案，如果檔案存在，會覆寫原本檔案資料；否則會自動新增檔案並寫入資料

fs.writeFile(filename, data[, options], callback) 寫入檔案

fileName: 檔案的完整路徑及檔名，格式字串。
● data: 要寫入的檔案內容。
● options: options 可能是一個物件或字串，包含"編碼"及"flag"。這裡預設的編碼是 utf8 , flag是 “w"。
● call back: 只帶一個錯誤參數err的function，當我們執行writeFile完成時, 要做的事。例如: 寫入成功的訊息顯示；失敗時，丟出err。

新增內容至檔案(不覆蓋)
fs.appendFile(）


開啟檔案，進行讀/寫操作。
fs.open(path, flags[, mode], callback)
參數：
* path: 檔案的完整路徑及檔名，格式字串。
* flag: 用flag代表操作行為。可以參考下圖！
* mode: mode代表文件的權限，預設為0666代表可讀可寫。
* call back: 是帶兩個參數的function，err及file data，當我們執行open完成時, 要做的事, 例如: 打開成功的訊息顯示；失敗時，丟出err。

要在open操作時，也讀取文件時，該怎麼做呢？
可以在fs.open時，執行 fs.read()。

fs.read(fd, buffer, offset, length, position, callback)

* fd: 透過 fs.open() 方法返回的文件描述符。
* buffer: 數據寫入的緩衝區。
* offset: 緩衝區寫入的寫入偏移量。
* length: 要從文件中讀取的字元數。
* position: 文件讀取的起始位置，如果 position 的值為null，則會從當前文件游標的位置讀取。
* callback: 回呼函式，有三個參數err, bytesRead, buffer。
err 為錯誤訊息， bytesRead 表示讀取的字元數，buffer 為緩衝區對象。

fs.close(fd, callback)  關閉檔案
fd: 透過 fs.open() 方法返回的文件描述符。
call back: 只帶一個錯誤參數err的function，當我們執行close完成時, 要做的事。例如: 失敗時，丟出err。




fs.unlink(path, callback);
刪除存在的文件。
path: 檔案路徑。callback: 只帶一個錯誤參數err的function，當我們執行unlink完成時, 要做的事。例如: 刪除成功的訊息顯示；失敗時，丟出err。



b.3-Node.js EventEmitter 事件監聽 again

eventEmitter 就是一個自訂事件觸發，在一般瀏覽器中，Javascript 事件綁定通常使用addlistener，通常觸發事件範圍會有限，像通常使用的事件綁定，click, hover, focus, 等..當我們想要自訂個觸發事件為’FirstEvent’，則必須自訂它自己的觸發事件（函式），因此，有了EventEmitter。
(函式可以被附加在這個物件，當物件被執行時，觸發這個函式，這些函式叫監聽函式。)

!EventEmitter的常見模式
有二種EventEmitter 使用上的常見模式：
1. 從函式return EventEmitter 物件
    1. emit可以寫在 function裡。
2. 繼承EventEmitter 類別
    1.  引用EventEmitter的建構函式去觸發行為，這裡就必須要用到繼承方法
    2.  可以用 util.inherits()，它是utility module的方法，所以，一開始就必須用require(‘util’)載入該模組。

3.JS 進階練功 （待更新）

• RXJS