Thinking more...

node 是有一個 path 的 package，但這個 package 會依賴 process 來取得平台環境，以決定要用 win32 或是 posix 來處理路徑。

但我其實只是要簡單的取得父路徑跟從路徑取出檔案或目錄名稱，不需要這樣麻煩。上網找到這篇：Javascript functions for basename and dirname 。它的實作是使用 regular expression 來處理，所以傳回的並不是單純的字串，而是一個陣列 RegExMatchArray 。參考 MDN 的 String.prototype.match() 來做調整，簡單的說，陣列的第一個元素就是處理的結果，所以只要先判斷傳回值是否為  null ，然後再傳回第一個元素即可。

// Typescript
/**
 * 取得父路徑
 */
export function dirname(path: string): string {
  let newPath = '';
  // 找符合 '/aaa/bbb/ccc/' 的字串
  const regExMatchArray = path.match(/.*\//);
  // 沒有找到，傳回 '/'
  if (regExMatchArray === null ) {
    newPath = '/';
  }
  else {
    // 有找到
    newPath = regExMatchArray[0];
    // 看最後字元是否為 '/'，是的話，就移除。
    if (newPath.endsWith('/')) {
      newPath = newPath.substring(0, newPath.length - 1);
    }
    // 最後結果的長度為0，加上 '/'
    if (newPath.length === 0) {
      newPath = '/';
    }
  }
  return newPath;
}

/**
 * 取得檔名或目錄名
 */
export function basename(path: string): string {
  // 把 '/' (含)之前的字元都替換成空字串
  return path.replace(/.*\//, '');
}

照一般的作法，會是用操作 DOM 的方式來產生出 XML，但這樣很繁瑣，找了好幾個函式庫，最後是找到 object-to-xml (Github網址)，使用方法很簡單：

var objectToXML = require('object-to-xml');

var obj = { 
  '?xml version=\"1.0\" encoding=\"iso-8859-1\"?' : null,
  request : {
    '@' : {
      type : 'product',
      id : 12344556
    },
    '#' : {
      query : {
        vendor : 'redhat',
        name : 'linux'
      }
    }
  }
};

console.log(objectToXML(obj));
/*


  
    redhat
    linux
  

*/

在 '@' 裡的，都是屬性，而在 '#' 裡的則是子 element 。
在 typescript 裡，要用

import * as objectToXML from 'object-to-xml';

來匯入使用。

主要看這篇：Classes
大致用法跟 C#/Java 差不多，幾個特別的地方：

1. readonly ：成員可以加上 readonly 來修飾，表示是唯讀。
2. 有 getter/setter：可以用 get/set 這兩組 accessor 讓 method 變成屬性。

   class Employee {
       private _fullName: string;
   
       get fullName(): string {
           return this._fullName;
       }
   
       set fullName(newName: string) {
           this._fullName = newName;
       }
   }
   

3. static：類似 java/c# 那樣的用法，原本 javascript 是沒有的。
4. abstract 修飾：可以加在 class 前面，也可以加在 method 前面，用法跟 java/C# 相似。

後面提到的 constructor functions 是一個進階技巧，不過感覺上用到機會不大。

今天是看這篇：Interfaces
TypeScript 有 anonymous interface ，就像下面的程式一樣：

// 有點 anonymous interface 的味道
function printLabel1(labelledObj: { label: string }) {
    console.log(labelledObj.label);
}

// 也可以明確的用 interface 寫
interface LabelledValue {
    label: string;
}

function printLabel2(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
}

在宣告成員時，如果加入 ? ，表示可有可無，這個寫法應該是參考了 Ruby 的作法

interface SquareConfig {
    color?: string;
    width?: number;
}

用 readonly 修飾詞則是表示唯讀

interface Point {
    readonly x: number;
    readonly y: number;
}

如果要需告一個唯讀的陣列，可以用 ReadonlyArray

let ro: ReadonlyArray = a;

我覺得 Function types 比較不是那麼直覺，不容易看懂

interface SearchFunc {
    (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    let result = source.search(subString);
    return result > -1;
}

大抵來說就是 python 的 \__call\__ 或是 c++ 的 operator()。
Indexable type 也是不太直覺

interface StringArray {
    [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

大抵來說就是 python 的 \__item\__ 或是 c++ 的 operator[]。
要讓類別實作介面是用 implements 關鍵字

interface ClockInterface {
    currentTime: Date;
}

class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

下面這例子是想要限定 ClockInterface 裡的 constructor 必須符合 ClockConstructor 規範的作法，第一眼不太容易看懂。

interface ClockConstructor {
    new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {
    tick();
}

// 傳進來的 ctor 必須符合 ClockConstructor 的規範，要有 hour 跟 minute 這兩個 number 型別的參數。
function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
    return new ctor(hour, minute);
}

class DigitalClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("beep beep");
    }
}
class AnalogClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("tick tock");
    }
}

let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

介面也可以繼承，跟類別一樣，是用 extends，而且允許繼承多個

interface Shape {
    color: string;
}
interface PenStroke {
    penWidth: number;
}
interface Square extends Shape, PenStroke {
    sideLength: number;
}

蠻令我驚訝的是，Interface 可以繼承 class ... @_@

JavaScript 提出了兩個新的關鍵字：let 與 const。使用 let 可以避免使用 var 的一些奇妙現象；而 const 就是跟 C 的 const 一樣，避免再次指定值給這個變數。
Variable Declarations 裡提了許多 JavaScript 使用 var 宣告變數時的奇妙現象，然後解說為什麼要改用 let。這部份我偷懶跳過去了，我的想法是，就都改用 let 吧。
另外有提到 Destructuring，就是類似 Python 的 unpack ：

// JavaScript/TypeScript
let input = [1, 2];
let [first, second] = input;

Python 則是：

# Python
first, second = (1, 2)

也跟 Python 3 一樣，有取 remain items 的效果：

let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // outputs 1
console.log(rest); // outputs [ 2, 3, 4 ]

Object destructuring 是個比較特別的東西，意思跟 destructuring 差不多，但對象是 object，也就是可以將 object 的某幾個屬性放到變數裡。

let o = {
    a: "foo",
    b: 12,
    c: "bar"
}
let { a, b } = o;
({ a, b } = { a: "baz", b: 101 });  // 這樣也可

也支援 remaining items 的方法：

let { a, ...passthrough } = o;

Object destructuring 還支援 default values，意思是如果 wholeObject 沒有 b 屬性時，就把 b 指定為 1001：

function keepWholeObject(wholeObject: { a: string, b?: number }) {
    let { a, b = 1001 } = wholeObject;
}

也可以應用到 function 上，我覺得這個例子比較清楚，可以應用在只取物件的某幾個屬性來使用時：

function f({ a, b } = { a: "", b: 0 }): void {
    // ...
}
f(); // ok, default to { a: "", b: 0 }

Spread 算是陣列相加的一個 syntax sugar，可以把 first, second 塞到 bothPlus 這陣列裡去：

let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];

也可以應用在 object 上，目前想到可以用來做 object proxy 或是 composite 之類的，不過不適合也不一定。

let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = { food: "rich", ...defaults };

今天是看這篇：Basic Types
裏面直接建議用 ES6 的 let 替代 var 了。

• boolean：布林型態
• number：數字型態，沒有 integer, long, float, double 之類的，只有 number，JavaScript 裡的數字都是 float。
• string：字串
• array：陣列，在型別後面加上 []，例如： let list: number[] = [1, 2, 3]; ，要注意的是，無法指定固定個數。
• tuple：就 tuple ，有點像陣列，但能指定每個元素的型態，這跟 Python 不一樣。例如：

  let x: [string, number];
  let x = ["Hello", 100];
  let y: [string, number] = ["John", 200];
  y[2] = "Doe";
  console.log(y);  // 輸出 [ 'John', 200, 'Doe' ]
  

• enum：列舉，用法跟其他語言大致相似：

  enum Color {Red, Green, Blue};
  let c: Color = Color.Green;
  // 比較特別的用法
  let colorName: string = Color[2];
  console.log(colorName);  // 輸出 Blue
  

• any：任意型態，但要注意的是跟其他語言所指的 Object 型別不同，TypeScript 有獨立一個 Object 型別。說起來跟 C# 的 dynamic 比較相似。

  let notSure: any = 4;
  notSure.ifItExists(); // 通過編譯，因為可能在執行時期就有 ifItExists()
  notSure.toFixed(); // 通過編譯，因為可能在執行時期就有 toFixed()
  
  let prettySure: Object = 4;
  prettySure.toFixed(); // 編譯錯誤，編譯時會有 Object 型別沒有 toFixed 的錯誤。

• void：就 void ，表示不會傳回任何東西
• null：就 null ，可以把任何型態的變數指定為 null
• undefined：就 undefined，可以把任何型別的變數指定為 undefined
• never：表示絕對不會傳回變數，

  // 只會丟出例外
  function error(message: string): never {
      throw new Error(message);
  }
  // 裏面是不會結束的迴圈
  function infiniteLoop(): never {
      while (true) {
      }
  }

Type assertion ，有 C/C# 強制轉型的意味。

let someValue: any = "this is a string";
let strLength: number = (someValue).length;
// 也可以用類似 c# as 的語法
let strLength: number2 = (someValue as string).length;

以下是看 Quick start 的紀錄：

• Type annotation：一般動態語言是沒型別的，但 TypeScript 加上了這部份的支援，這可以讓開發者在編譯時期就預先發現型別錯誤，也可以編譯出更有效率的程式，讓程式執行的更快。語法像是 Go 或 Pascal (知道這語言的人應該不多了)，是在變數後面加上 :type，例如：

  var str:string="hello world";

• Interface：介面，沒啥特別的，看範例比較快

  interface Person {
      firstName: string;
      lastName: string;
  }
  
  function greeter(person: Person) {
      return "Hello, " + person.firstName + " " + person.lastName;
  }
  
  var user = { firstName: "Jane", lastName: "User" };
  

• Class：大致上跟 java 的用法相似，不過在看到 QuickStart 範例時，還是驚訝了一下，主要是因為 TypeScript 語法並沒有明確指定類別實作了 Person 介面，但這個類別所產生的物件仍可以直接丟到只接介面的函式裡。後來仔細看了一下，才知道是因為 TypeScript 的 constructor (建構子)裡的參數加了 public，那麼會自動將這個參數放到同名的屬性去，也因此就符合了 Person 介面的要求。

  class Student {
      fullName: string;
      // 這裡的 public firstName，等同是函式裡有 this.firstName=firstName
      constructor(public firstName, public middleInitial, public lastName) {
          this.fullName = firstName + " " + middleInitial + " " + lastName;
      }
  }
  
  // 故意不要有 lastName
  class Employee {
      constructor(public firstName) {
      }
  }
  
  interface Person {
      firstName: string;
      lastName: string;
  }
  
  // 因為 Student 裡有 firstName, lastName 屬性，視同實作了 Person
  function greeter(person : Person) {
      return "Hello, " + person.firstName + " " + person.lastName;
  }
  
  var user = new Student("Jane", "M.", "User");
  var employee = new Employee("John");
  console.log(greeter(user));
  // console.log(greeter(employee));  // 加了這行，編譯會發生錯誤，告知 employee 不符合 Person 介面
  

我習慣用的環境是 Ubuntu，目前用的是 16.04 Xenial。
第一步是安裝，安裝 nodejs 有幾種方法：

1. 從 nodejs.org 下載 tarball，手動安裝。
2. 用 debian package 來安裝 (nodesource)
3. 用 nvm 來安裝

之前有用過 nvm 了，這次我選擇用 debian package 來安裝 LTS 版的 nodejs。

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

安裝好，就可以利用 npm 來安裝 TypeScript 了。不過，因為我不想把 typescript 安裝在系統路徑 (一般是用 sudo npm install -g typescript)，所以我多設定了 .npmrc 以及環境變數：

prefix = /home/user/.local
root = /home/user/.local/lib/node_modules
binroot = /home/user/.local/bin
manroot = /home/user/.local/share/man

export LOCAL_PATH="$HOME/.local"
export MANPATH="$LOCAL_PATH/share/man:$MANPATH"
export NODE_PATH="$LOCAL_PATH/lib/node_modules:$NODE_PATH"
export PATH="$LOCAL_PATH/bin:$PATH"

在設定好以後，使用 npm install -g 時，會將這些套件安裝到自己的 $HOME/.local 目錄下。
在使用 npm install -g typescript 以後，我另外安裝了去年推出的 yarn。

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt install yarn

首先寫一個 hello.ts

console.log("Hello world.");

然後用 tsc 來將 hello.ts 編譯為 hello.js: tsc hello.ts ，最後就可以用 node 執行 hello.js 印出 "Hello world."

我是參考這篇教學：Learn to Build Modern Web Apps with the AngularJS Tutorial

教學裡使用的是 yeoman ，這真的有方便。首先要安裝 nodejs 跟 npm，在 Ubuntu 13.10 裡，就用 sudo apt-get install nodejs npm 就行了，如果是 Ubuntu 12.04，得另外裝 chris lea 的 PPA，再 update/install。教學裡的第一步，就是安裝 yeoman，用 sudo npm install -g yo 來安裝，可是我不太喜歡直接裝到 /usr 系統資料夾去，所以找了一下，看能不能像 Python 的 pip install xxx –user 一樣裝到使用者目錄下。

搜尋的結果是可以的，但需要做些設定。設定值大致如下：
這樣就可以不用 sudo，然後用 npm install yo 就可以把相關模組都裝到使用者目錄下了，而且相關的指令也都可以用。

參考資料：

• tnovelli.net – HOWTO: Install Node+NPM as user (not root)
• node.js – Install NPM into home directory with distribution nodejs package (Ubuntu) – Stack Overflow

學校圖書館換新系統了，所以，又懶得打勾。這次修正兩個網頁，一個是強制一次顯示出30筆資料，要不然一次只有10筆，還要翻頁才能繼續。另外一個就根據原來的稍稍調整名字，碰到問題的是，上下有兩個「續借」，想要在兩個的旁邊都加上"Check all"跟"Uncheck all"，可是卻只能加上一個。後來追蹤以後才發現，當我加了第一次"Check all"與"Uncheck all"以後，getElementsByTagName()傳回的陣列(elements)居然自動也跟著變大了，所以後面的「續借」按鈕就沒找到。我的解法就先用 list 把這兩個「續借」按鈕都紀錄起來，後續再用另外一個迴圈去一次處理。

星期天利用Google reader看文的時候，看到Fred大的這篇：Android 問題百出之 2.3.x 的 JavaScript Interface，我就心想，完了，我踩到雷。因為最近正好在實驗WebView Javascript與Java部份，回家一試，果真如此，真的頭很大。
再上網找了一下，發現很早以前就有人回報這個問題，喂，我說Google啊，那為什麼不修?!(怒)，這個討論串很長，連PhoneGap開發小組也都有回。結果沒辦法，只能參考Fred大的文去改了。可是改了以後，卻怎麼樣都不能動，連原來的會導向到LogCat的部份都失效了，試了好久，又去StackOverflow找，找了幾篇，像：Uncaught TypeError when using a JavascriptInterface...等等，但還是不行，真的讓人摸不著頭緒。
後來是發現 onConsoleMessage 應該是要加 @Override 的，現在卻不用了，上網去Android reference找，才發現我搞錯類別名稱了。一個是WebChromeClient，而Fred大文章裡用的是WebViewClient，搞清楚，修改程式以後，這才讓我有了log利器，能用這個來去找到Javascript修補程式的錯誤，並修正。
為了要可以自動化為類別產生javascript修補程式的步驟，我運用了Annotation去標記需要產生Javascript代碼的函式，這樣就可以運用reflection的方式去找到這些函式，並產生程式，以注入到WebView裡面去。為了避免老是改程式，我也利用了Google瀏覽器，直接把產出的Javascript程式，放到Google瀏覽器的網址列去執行，這樣很快就知道哪裡有錯誤，並且修正。
總之，大概就是這樣子，解決了。

有些科目的教材好多，用滑鼠可能會按到死。本想用 curl 來硬幹的，可是從登入頁面一路解析到教材下載頁面的時候，發現 ASP.NET 的頁面還真是難搞，後來選擇放棄。

於是想了一下看Firefox有沒有現成的AddOn可用，有，的確是有，那是DownthemAll，可是，教材下載頁面的"下載"是用javascript埋起來，所以必須解析div的onclick屬性，把真正的連結拿出來。這時候GreaseMonkey又再次派上用場，就是你啦!!於是就弄了這個userscript，他會在原來的下載圖形下方增加一個download連結，這樣DownthemAll就可以抓到。要用的話，可以直接到userscripts.org這邊安裝，下面是原始碼：

還是忍不住寫了，畢竟每次要為十幾本書打勾還是蠻累的。基本上就是多加兩個按鈕，一個幫我全打勾，一個幫我取消打勾。不過第二個按鈕好像永遠都用不到，這就是所謂的 over design 嗎? :-p

承蒙jnlin跟gslin二位pixnet開發者的幫忙，現在連後端都不用刻了，只要搞定前台的javascript就可以去PIXNET album撈圖。就用jQuery.getScript()與PIXNET API 吐jsonp就可以達成。

然後也參考這篇Asynchronous Image Loading with jQuery，為圖片加上了動態載入的效果。目前比較傷腦筋的問題就排版問題，發生的情況有以下幾個：一個是當圖寬高值過大時，一個是當圖片數目過多時。這再想辦法好了。

之後可能會來看OAuth吧，看可不可以自動去 PIXNET blog 、blogger、facebook 貼文，就不用手動複製然後貼上了。

對了，網址是http://pixnetalbummaker.appspot.com

前兩年有使用過，可是最近想起來時，卻發現什麼記憶都不剩，只記得好像是解決 cross domain 的方案。上網找了一下，終於讓我給想起來了，下面用我懂的話來寫，這樣下次又忘記時，可以很快想起來。

在利用 xmlhttp(或form) post/get 時，目標的網址(action)跟目前網頁的網址必須是在同一個網域上，否則會無法post/get。該怎麼解決呢？就要利用所謂的 jsonp。jsonp 是利用動態安插 script tag 的方式來繞過 cross domain 的限制，script tag 裡的 src 不受 cross domain 的限制，一般來說，src 裡的網址會多加一個參數 callback (當然，不一定要叫作callback)，也就是說，後端收到這個 request 時，會去進行處理(一般會處理為json資料)，最後輸出時，會輸出 javascript ，並且將 json 資料傳入你指定的 callback並執行，這樣就完成了。

本來以為 PIXNET API 可以直接利用 jsonp，就不需要另外刻後台來拉資料，結果今天去看時，發現沒有，大概是之前眼花了吧...

最近把Google reader的tag都設到書籤裡去，想說這樣會比較快。
可是卻遇到一個問題，某些tag要看的時候想用Expanded，但某些tag卻想用List。本想說Google reader是不是可以藉著設URL Parameter的方式來解決這問題，查了Unofficial 的 Google reader API，卻沒找到答案。

只能手動 Hack 了。

啟用神兵 Firebug 查看以後，Google reader要show Expanded/List，是送 POST 到 https://www.google.com/reader/api/0/preference/set?client=scroll ，然後帶上3個參數：T、k、v ，T 用途不明，k 總是 is-card-view，v 在 Expanded 時是 true，List 時則是 false。

所以，看來是沒辦法，除非是書籤改用 javascript，寫成 bookmarklet 的方式才能達成。

雖然官方的網頁上是日文，我看不太懂，不過好在他提供的範例很容易了解，看來是不難用。

如果想要用 gtk+webkit+竹取js 來顯示直書，問題大概就會出在翻頁上了。用Space/Shift+Space 或 PgUp/PgDown 都可以翻頁，但如果想改變某些按鍵的行為，如 h/l 、Left/Right、Up/Down 來做翻頁的話，可能就要再找資料來看了。

想用這來改寫pymbook看看。