【翻譯】HTML5開發——輕量級Web Database存放庫html5sql.js

文章目錄

•  例子
• 建議
• 使用者指南
• 小結
• 源碼深入

閱讀之前，先看W3C關於WEB Database的一段話：

Beware. This specification is no longer in active maintenance and the Web

 

Applications Working Group does not intend to maintain it further. 

意味著WEB Database規範陷入僵局。

 

html5sql官方網址：http://html5sql.com/

簡述

 　　html5sql是一個讓HTML5 Web Database使用更方便的輕量級JavaScript模組，它的準系統是提供在一個事務中順序執行SQL語句的結構。雖然 Web Database並沒有停止前進的腳步，這個模組僅僅可以簡化與資料庫的互動過程。這個模組還包含有其他很多小細節以便開發人員能夠更簡單，自然便捷的工作。

核心特徵

1、提供以不同方式順序執行SQL語句的能力：
單條SQL語句
一組SQL語句
一組SQL語句對象（當你要想SQL中注入資料或者在SQL執行後調用一個回呼函數時，可能需要使用這種形式）
從一個分割完畢包含SQL語句的檔案中
2、提供一個控制資料庫版本的架構

 例子

　　如果你用過HTML5 web database,你就會發現它有多蛋疼，尤其是當你開始建立你的表時。好了，現在你會發現這些都不是問題。為了更清楚的表明我的意思以及這個模組的能力，看下面的例子：
　　假設你打算建立一個表兵千插入一組資料到這個表裡面。如果你使用html5sql的話，你只需要把所有的語句都放入一個單獨的檔案中，本例中我們取名為Setup-Tables.SQL。這個檔案的形式類似於

本例中我們取名為Setup-Tables.SQL。這個檔案的形式類似於：
CREATE TABLE example (id INTEGER PRIMARY KEY, data TEXT);
INSERT INTO example (data) VALUES ('First');
INSERT INTO example (data) VALUES ('Second');
INSERT INTO example (data) VALUES ('Third');

CREATE TABLE example2 (id INTEGER PRIMARY KEY, data TEXT);
INSERT INTO example2 (data) VALUES ('First');
INSERT INTO example2 (data) VALUES ('Second');
INSERT INTO example2 (data) VALUES ('Third');

　　有了html5sql之後，為了順序執行這些SQL語句（包括建立表），你只需要開啟資料庫，然後添加下面一段代碼就可以了。

 $.get('Setup-Tables.SQL',function(sqlStatements){

    html5sql.process(
//This is the text data from the SQL file you retrieved
        sqlStatements,
function(){
// After all statements are processed this function
            //   will be called.
        },
function(error){
// Handle any errors here
        }
    );
});

 　　藉助於jQuery的get方法，你已經從單獨的檔案（'Setup-Tables.SQL'）獲得了SQL語句，並且按照出現的順序分割執行了。

效能

　　上面的描述聽起來還不錯，不過你可能會問SQL順序執行的時候效能是不是會受損。答案就是，影響不算明顯，至少就我看來目前是這樣。
比如，我用 Google的Chrome案頭版建立一張表，然後向表中順序插入10,000條記錄，整個執行過程的時間有波動，不過平均值處於2-6秒的範圍內，因此我有理由相信html5sql在處理大量資料的時候會有不俗的表現。

 

建議

　　SQL的核心被設計為一種順序執行的語言，某些語句必須在其他的語句前面執行。比方說，在插入記錄之前，你必須先建立一張表。相反的，javascipt是一種非同步、事件驅動的語言。對於開發人員來說，這些非同步特徵增加了HTML5用戶端資料庫規範與說明的複雜性。寫這個庫的時候，W3C已經不再維護Web SQL Database規範了。儘管如此，由於webkit已經實現了設個介面，而且由於webkit核心瀏覽器的龐大使用者群，尤其是行動裝置上，因此這個庫還是有用的。

 　　雖然這個模組減少了HTML5 SQL database的複雜程度，但是並沒有簡化SQL本身，這是有意而為之的。SQL是一門強大的語言，

盲目的簡化它只會弄巧成拙。在我的經驗中，學好SQL才是王道，大勢所趨撒。

 

使用者指南

html5sql模組中內建了3個函數：

 html5sql.openDatabase(databaseName, displayName, estimatedSize)

　　html5sql.openDatabase是對原生openDatabase方法的一個封裝，這個方法開啟一個資料庫連接並返回對串連的引用。
這是所有其他動作之前的第一步。
這個方法有三個參數：
databaseName - 資料庫的名字.任意你喜歡的有效名字，通常可以是“com.yourcompany.yourapp”之類的
displayName - 資料庫描述資訊
estimatedSize - 資料庫大小.5M = 5*1024*1024

 　　如果讀者熟悉web database原生方法的話，會發現上面的封裝中少了版本資訊這個參數。當你需要改變資料庫的表結構時，版本資訊是一個得力的標識工具，

改變版本的這個方法被封裝成html5sql的changeVersion方法。
　　現在，我們建立一個通常的資料庫連接：

 html5sql.openDatabase(

     "com.mycompany.appdb",
     "The App Database"
     3*1024*1024);

2、

 html5sql.process(SQL, finalSuccessCallback, errorCallback)

 html5sql.process()方法是所有功能的載體，一旦你建立了資料庫連接，就可以傳遞SQL語句，剩下的事情就交給html5sql.process()，他會保證SQL順序執行。

html5sql.process()的第一個參數是SQL語句，其傳遞形式有許多種：
(1)、字串形式 - 你可以向process方法傳遞一個簡單字串，形如：
"SELECT * FROM table;"
或者一組用分號（“;”）串連的簡單字串，形如：

"CREATE table (id INTEGER PRIMARY KEY, data TEXT);" +
"INSERT INTO table (data) VALUES ('One');" +
"INSERT INTO table (data) VALUES ('Two');" +
"INSERT INTO table (data) VALUES ('Three');" +
"INSERT INTO table (data) VALUES ('Four');" +
"INSERT INTO table (data) VALUES ('Five');"

(2)、來自獨立檔案的SQL語句。來自獨立檔案的SQL語句的例子跟上面的例子一樣，沒有本質區別。
(3)、一組SQL語句字串，你可以向html5sql.process()傳遞一組SQL語句，形如：

 [
     "CREATE table (id INTEGER PRIMARY KEY, data TEXT);",
     "INSERT INTO table (data) VALUES ('One');",
     "INSERT INTO table (data) VALUES ('Two');",
     "INSERT INTO table (data) VALUES ('Three');",
     "INSERT INTO table (data) VALUES ('Four');",
     "INSERT INTO table (data) VALUES ('Five');"
 ]

(4)、一組SQL語句對象。這是一種最實用的形式，直接傳遞一組SQL語句對象。SQL語句對象的結構域原生executeSQL 方法的參數一致，有三個部分：
SQL[string]——包含SQL語句的字串，其中可以包含替換符“?”
data[array]——一組需要插入到SQL語句中替換?符號的資料，其中SQL語句中?的數量必須與data中資料的數量一致
success (function)——執行完SQL語句後回調的函數，可以處理SQL語句的執行結果。另外，如果這個方法返回一個數組，這個返回的數組還可以作為下一條SQL語句的data參數來執行。這樣就允許你在SQL執行中調用將上一條SQL語句的結果，在使用外鍵的情況中，這個比較常見。
或許最簡單的定義以及使用這個對象的方式是只用對象字面量。通用的模板類似下面的形式：

 {
    "sql": "",
    "data": [],
    "success": function(transaction, results){
//Code to be processed when sql statement has been processed
    }
 }

 因此，一個簡單的SQL對象參數執行個體如下：

  [
    {
      "sql": "INSERT INTO contacts (name, phone) VALUES (?, ?)",
      "data": ["Joe Bob", "555-555-5555"],
      "success": function(transaction, results){
//Just Added Bob to contacts table
      },
    },
    {
      "sql": "INSERT INTO contacts (name, phone) VALUES (?, ?)",
      "data": ["Mary Bob", "555-555-5555"],
      "success": function(){
//Just Added Mary to contacts table
      },
    }
  ]

　　上面的對象中，唯一與原生executesql()不同的是，沒有error部分的處理方式，這是因為有一個通用的錯誤處理回呼函數來處理出現error的情況，從而避免每條語句都進行error定義。這個通用的錯誤處理函數就是 html5sql.process()的第三個參數。

小結

html5sql.process()總共有三個參數，
SQL - 上面敘述的任一種形式均可
finalSuccessCallback - 一個最終的，在所有SQL成功執行完畢後觸發
errorCallback - 處理本過程中的所有錯誤的通用函數，發生任何錯誤時，當前事務會復原，資料庫版本不改變。
總結一下，這個方法的一個完整樣本如下：

 html5sql.process(
     [
         "DROP TABLE table1",
         "DROP TABLE table2",
         "DROP TABLE table3",
         "DROP TABLE table4"
     ],
function(){
         console.log("Success Dropping Tables");
     },
function(error, statement){
         console.error("Error: " + error.message + " when processing " + statement);
     }
 );

3、

html5sql.changeVersion("oldVersion","newVersion",SQL,successCallback,errorCallback)

　　html5sql.changeVersion()是建立、遷移資料庫以及處理版本所需要的方法。這個方法會檢測目前的版本與舊的版本參數（oldVersion）是否一致，如果吻合的話，就會執行參數中的SQL語句，並改變資料庫的版本為 newVersion參數所示的值。
oldVersion - 需要修改的資料庫的版本號碼，預設初始值為""
newVersion - 你賦的新值
SQL - 你要執行的SQL語句.具體說明參見html5sql.process()部分
finalSuccessCallback - 成功執行後調用的函數
errorCallback - 通用資料處理函數，與html5sql.process()中一樣， 發生錯誤的時候，整個交易回復，並且不改變版本號碼。

 

源碼深入

 

　　本JS庫最大的問題就是如果要同時操縱多個資料庫，那麼就會引起混亂，這一點作者似乎並沒有做多考慮。另外就是對於這種批量執行SQL語句的錯誤恢複處理感覺還是不夠完善。

補充一：

html5sql.openDatabase()其實有四個參數

html5sql.openDatabase = function (name, displayname, size, whenOpen) {
                     html5sql.database = openDatabase(name, "", displayname, size);
                     readTransactionAvailable = typeof html5sql.database.readTransaction === 'function';
if (whenOpen) {
                         whenOpen();
                     }
                 };

最後的whenOpen是在擷取資料庫引用的時候觸發的。

補充二：
　　另外還有兩個用於調試的屬性，logErrors和logInfo:預設都是false，設定為true的時候可以看到每一步操作的過程。由於調用的是控制台的console.log，可能在某些瀏覽器上引發錯誤。

補充三：

　　對於process方法，不論你採用什麼形式的SQL參數，最終都會被轉換成SQL對象的形式。
　　當SQL語句包含的僅僅只有SELECT操作時，內部使用的是readTransaction方法，注意一下readTransaction與transaction的區別。
這邊用的是readTransaction，這是為了保證不對錶進行寫操作，這是一種安全的舉措，當然也可以用transaction。不過readTransaction方法存在一定的相容性問題，所以使用之前應該保證檢測無誤。

轉載請註明來自小西山子【http://www.cnblogs.com/xesam/】
本文地址：http://www.cnblogs.com/xesam/archive/2012/03/10/2389365.html