網頁

搜尋此網誌

2013年11月23日 星期六

Knockout JavaScript Library

Knockout 是一個 JavaScript 的程式庫,簡稱 KO ,Knockout 是基於 MVVM (Model-View-View Model) 的設計模式,主要是提供資料繫結 (data-binding) 的功能,讓 UI 與資料模型之間能夠自動地動態更新。

MVVM 設計模式將 Web Application 分成下列三個部分:
  • Model
    模型是指 Web App處理的資料本身,與 UI 沒有任何關係,通常是伺服端資料庫儲存的資料,瀏覽器透過 Ajax 方式取得。
  • View Model
    檢視模型是指 UI 上資料 (data) 與操作 (operations) 的部分,在 Web App 中是一個 JavaScript 物件,物件的屬性對應至 UI 上的資料,而物件的方法則是操作的部分。
  • View
    檢視是檢視模型中可見的 (visible)、互動的部分,在 Web App 中是 HTML 文件,檢視顯示 View Model 的資訊,將命令傳送給 View Model ,並依據 View Model 的狀態更新顯示內容。
使用 KO 開發  Web App 時,我們通常會在前端(用戶端)撰寫 JavaScript 程式,做為 View Model,並設計  HTML 做為 View 的顯示,在 HTML 中使用 data-bind 屬性繫結 View Model。另一方面,後端(伺服端)則是以 Python 或 PHP 等提供資料庫存取的功能,接收或傳送Model 的 JSON 資料。

Knockout 中最重要的是物件「observable」,當 View Model 物件的屬性是 observable 物件時,KO 將自動提供雙向的資料繫結,在 KO 中有 3 種 observable:
  • ko.observable
  • ko.computed
  • ko.observableArray
一般最常使用的是 ko.observable,提供最基本的資料繫結,適合單一個物件的繫結,而 ko.observableArray 則是多個物件的繫結,KO 用的是陣列方式處理物件集合。最後 ko.computed 則提供將 observable 物件計算出新的 observable 物件,例如姓氏是 ko.observable,而名子是另一個  ko.observable,我們則可以利用 ko.computed 計算出姓名。

有了 MVVM 和 observable 的概念,已經可以著手開發以 KO 為基礎的 Web App 了,剩下只是認識 KO 提供的語彙,所幸內容不多很容易快速上手。如果你常常開發 CRUD 類型的 Web App,可以考慮採用 Knockout 程式庫。

###

2013年11月21日 星期四

JavaScript: The Definitive Guide

溫故知新:複習已經學過的知識,也能有新的認識和體會,這是我閱讀「JavaScript 大全」這本書的心得。不論你是 JavaScript 的初學者,或是已經熟悉 JavaScript 的使用者,這本書都能讓你學習並精通 JavaScript 。

David Flanagan著,黃銘偉譯,JavaScript大全,台北:碁峯資訊,2012。(共1080頁,定價  NT$1200 )
譯自:JavaScript: The Definitive Guide, O'Reilly Media, 1100 pages

「JavaScript 大全」總共分成四個部分,實際上內容只有兩個主幹,分別是核心 JavaScript客戶端 JavaScript。前兩部分說明核心與客戶端 JavaScript,後兩部分則是參考資料,因此這本書兼具學習手冊與參考手冊兩種用途。

核心 JavaScript (Core JavaScript) 這一部分主要講述 JavaScript 程式語言本身,包含程式語言的語彙結構、型別、運算式、運算子、陳述式、物件、陣列、函式等,一切有關程式語言的基本要素。

客戶端 JavaScript (Client-Side JavaScript)這部分則是介紹運行 JavaScript 的環境,包含瀏覽器和 HTML5 所提供的 API,其中一章介紹 jQuery 程式庫,讓開發 Web App更加方便,大致上已經涵蓋客戶端所需的相關知識。

我認為這本「JavaScript 大全」是 JavaScript 的聖經本,厚度與價格都是第一名,建議每位  Web 開發人員都必須擁有一本。
###

2013年11月4日 星期一

Development Environment 開發環境

在 Ubuntu 上面開發 Python 應用程式時,需要準備開發環境 (Development Environment),包含編輯器與 Python 相關套件,過去我常常手動逐一安裝,雖然一一安裝並不麻煩,但卻需要花費時間等待,於是寫了一個 Python Script 讓開發環境完全自動化安裝如下。

這個 Script 會安裝 JRE 用於執行 Eclipse IDE,並且安裝 Web Tools Platform 和 PyDev Eclipse Plugin,還有安裝 bpython 便於操作 Python Interpreter,以及 Python 套件管理程式 (pip)。其他 Git 版本管理工具和 Vim 編輯器也一併安裝。

執行 Eclipse 的參數可以參考 Provisioning platform (p2) 或 Running Eclipse

#!/usr/bin/env python
import subprocess
import sys

# JRE
subprocess.call(['wget',
                 '--no-cookies',
                 '--no-check-certificate',
                 '--header', 'Cookie: gpw_e24=http%3A%2F%2Fwww.oracle.com%2F',
                 'http://download.oracle.com/otn-pub/java/jdk/7u45-b18/jre-7u45-linux-x64.tar.gz'])
subprocess.call(['mkdir', '/usr/java'])
subprocess.call(['tar', 'xzvf', 'jre-7u45-linux-x64.tar.gz', '-C', '/usr/java', '--no-same-owner'])
subprocess.call(['update-alternatives', '--install', '/usr/bin/java', 'java', '/usr/java/jre1.7.0_45/bin/java', '1'])
subprocess.call(['java', '-version'])

# Eclipse
subprocess.call(['wget', 'http://eclipse.stu.edu.tw/technology/epp/downloads/release/kepler/SR1/eclipse-standard-kepler-SR1-linux-gtk-x86_64.tar.gz'])
subprocess.call(['tar', 'xzvf', 'eclipse-standard-kepler-SR1-linux-gtk-x86_64.tar.gz', '-C', '/opt', '--no-same-owner'])
subprocess.call(['chgrp', '-R', 'sudo', '/opt/eclipse/'])
subprocess.call(['/opt/eclipse/eclipse',
                 '-application', 'org.eclipse.equinox.p2.director',
                 '-repository', 'http://download.eclipse.org/releases/kepler',
                 '-destination', '/opt/eclipse',
                 '-installIU', 'org.eclipse.wst.web_ui.feature.feature.group'])
subprocess.call(['/opt/eclipse/eclipse',
                 '-application', 'org.eclipse.equinox.p2.director',
                 '-repository', 'http://pydev.org/updates',
                 '-destination', '/opt/eclipse',
                 '-installIU', 'org.python.pydev.feature.feature.group'])
subprocess.call(['chmod', '-R', '775', '/opt/eclipse'])

# APT package
subprocess.call(['apt-get', 'update'])
subprocess.call(['apt-get', '-y', 'install', 'vim'])
subprocess.call(['apt-get', '-y', 'install', 'bpython'])
subprocess.call(['apt-get', '-y', 'install', 'git'])
subprocess.call(['apt-get', '-y', 'install', 'python-pip'])

# Desktop Menu
f=open('/usr/share/applications/eclipse.desktop','w')
f.write('''[Desktop Entry]
Type=Application
Name=Eclipse
Exec=/opt/eclipse/eclipse
Icon=/opt/eclipse/icon.xpm
Terminal=false
''')
f.close()

# exit
sys.exit()

歡迎大家參考利用。
###

2013年11月1日 星期五

Multiple Instances of Apache2 多網頁伺服器實體

這篇文章記錄如何將 Apache 設定成多個實體執行。所謂的實體 (instance) 指的是一個完整的執行環境,由多個程序 (process) 或執行緒 (thread),與一個設定組態 (configuration) 所組成。一個主機 (host) 上可以同時擁有多個執行實體,但為何需要多個 Apache 實體呢?

如果需要在一台主機上提供多個網站,使用虛擬主機 (virtual host) 的方式就可以達成,其實不需要多個 Apache 實體。不過採用虛擬主機的前提是:這些虛擬主機都是用相同的模組  (module) 的情況,例如所有的虛擬主機都是執行 PHP 而使用 php5_module 模組,或是為了執行 Python 而使用 mod_wsgi 模組。

當然,你也可以一起載入所有的模組,只是這樣不太好,明明我的虛擬主機只要執行 PHP,卻要載入其他 mod_wsgi 、 mod_perl 之類的模組,造成記憶體的浪費,對於電腦資源的利用不是很有效率。因此,面對這種「多語言」的使用情境,我們就有可能需要多個 Apache 實體。

在 Ubuntu 上建立多個 Apache 實體其實不難,先利用 apt-get install apache2 安裝完 Apache 之後,我們可以在範例中找到建立多個 Apache 實體的 script 程式碼,這個 script 基本上就是建立一組全新的設定組態和 daemon 啟動程式。使用語法如下:

usage: /usr/share/doc/apache2/examples/setup-instance <suffix>

例如:bash /usr/share/doc/apache2/examples/setup-instance mysite,就會建立一個新的mysite實體,原本常用的 apache2ctl 指令會變成 apache2ctl-mysite,其他設定檔也會多了「 -mysite」的字尾。

如果你要啟動新的 Apache 實體,記得去利用 Listen 指令修改伺服器的埠號,不然會與原本的 Apache 發生衝突。以上面例子來說,修改 /etc/apache2-mysite/ports.conf 設定檔,然後執行 sudo service apache2-mysite start 就能啟動新的 Apache 實體。

參考文件:
###

熱門文章