👩🏼‍💻 🤷 🐙 非同期IndexedDB APIのラッパー 👩🏼‍🔬 🧑🏿 🖇️

今週の週末、非同期API IndexedDBを扱うことができました。

mozillaの例の解析フィールドは、コードができるほど良くないように思えました。

そして、非同期APIのラッパーを作成するために、IndexedDBで~~psionic~~スキルを開発することにしました。

正直に言うと、私は記事を書くのが好きではありません。なぜなら、私はいつも言葉を読むのが面倒で、コードを読むのが好きだからです。

あなたもコードが好きなら、私はgithubに投稿しました

実際、この記事では、ラッパーの使用例に書かれている内容について説明します。

コードについては、多くの人が考えていると思いますので、私が今読んだ、または最近読んだ、ここに書いたコードを見てください...

はい、時々彼らはそのゴミをすべらせます。私はこのコードに哲学的かつユーモアをもって関わっています。親愛なる読者の皆さん、私はあなたを笑わせないことを心から願っています。

現在のAPIで気に入らなかったこと

html5 /ブラウザーの標準開発者が提供しているものには、いくつかの欠点があります。

呼び出しチェーンを実装するには、追加のコードを記述する必要があります。
論理操作用のイベントハンドラを作成します。リポジトリを作成してそれを埋め、エンティティを更新/作成し、カーソルを完成させます。
複数のブラウザをサポートします。現在、多くのブラウザはこれらまたはIndexedDBの機能を実装していません。たとえば、countおよびonupgradeneededはWebkitにはありません。
冗長性-ほぼ同じことを行う多くの機能を思い出してください。例：IDBObjectStore.get、IDBObjectStore.openCursor、IDBIndex.openKeyCursor、IDBIndex.openCursor

ストレージの作成を例にとってみましょう。個人的には、そのようなコードは扱いにくいようです。コードが次のようになった場合、私はそれを好んだでしょう：

var init = function （ event ） {
if （ db。containsts （ 'customers' ））
帰る
db。 createStore （ 'customers' 、 { keyPath ： 'ssn' } ）
。 createIndex （ 'name' 、 {ユニーク： false } ）
。 createIndex （ 'age' 、 {ユニーク： false } ）
。 createIndex （ 'email' 、 {ユニーク： true } ）
。 complete （ function （ event ） {
コンソール。 info （「顧客の作成」、イベント） ;
} ）
。追加（ customerData ）
。エラー（ errorHandler ）
。成功（関数（イベント） {
コンソール。 info （「追加成功」、イベント） ;
} ） ;
} ;

このコードは、例のコードよりもわずかに機能的です。たとえば、次のようなすべての操作でイベントが登録されます。

作成と入力の完了の追加処理があります-完了
エラー処理
追加成功

また、クライアントによって以前にインストールされたアプリケーションではなく、Webで作業が実行されます。そのため、ページを初めて読み込むことができます。データベースを操作するコンテキストにいくつかのイベントを追加したいと思います。たとえば：

var db = new inDB （ { 名前： 'testDatabase' 、バージョン： 42 } ）
。エラー（ errorHandler ）
//準備する前に
。 init （ init ）
。 versionChange （ function （ event ） {
コンソール。 log （ 'version changed、timeStamp：' 、 event。timeStamp 、 '、new version：' 、 this。version ） ;
} ）
// 2012-02-22現在、WebKitはまだこれを実装していません。
。 upgradeNeeded （ function （ event ） {
コンソール。 log （ 'onupgradeneeded、newVersion：' 、 event。newVersion 、 '、oldVersion： '、event。oldVersion 、 '、timeStamp：' 、 event。timeStamp 、 event ） ;
初期化。呼び出し（これ、イベント） ;
} ）
。 ready （ function （ event ） {
// ...
} ） ;

つまりバージョンの変更について学習し、ストレージを初期化してデータを入力し、リポジトリの準備ができたら作業を開始します。 ~~非同期、コンポートが追加され~~ます。

私があなたを納得させていないなら、読書は無意味です。

私のやり方

私については、これらの考慮事項で十分でした。モジラの例の後半で見たものは、それ以上好きではなかったからです。つまり例に感謝しますが、そのように生きたいとは思いません）。このように見えたらもっと気に入ったでしょう。

db。 openStore （ '顧客' ）
。 get （ '444-44-4444' ）
。エラー（ errorHandler ）
。成功（関数（イベント） {
コンソール。 log （この .result ） ;
} ） ;

そして、次のような別のインデックスの場合：

db。 openStore （ '顧客' ）
。 get （ 'name' 、 'Artur' ）
// ...

カーソルからデータを選択するには、実行コンテキストと、操作の開始、中間値、終了のブロックを分けたいです。次のようなものです。

db。 openStore （ '顧客' ）
。 get （ function （ query ） {
クエリを返す
。 bound （ 'age' 、 30、60 、 true 、 true ） ; //すべて30歳> x && <60
//設計による1つの述語indexeddb、getの後にwhereを使用してください
} ）
。 where （ function （ item ） {
返品メール substr （ -8 ）。 toLowerCase （）！= 'home.org' ;
} ）
。エラー（ errorHandler ）
。 start （ function （ context ） {
コンテキスト。結果 = [ ] ;
コンソール。 time （「IDBKeyRangeですべて取得」） ;
} ）
。終了（ function （ context ） {
コンソール。 timeEnd （「 IDBKeyRangeですべてを取得」、コンテキスト、結果） ;
} ）
。 success （ function （ event 、 context ） {
var customer = this 。結果。値 ;
コンソール。 info （「IDBKeyRangeによって取得」、 customer.ssn 、 customer 、 event 、 this ） ;
if （ customer。ssn == '111-11-1111' ） {
顧客。年齢 = 6 ;
//カーソルのみ
コンテキスト。更新（顧客） ;
}
コンテキスト。結果。プッシュ（顧客） ;
} ） ;

このようなアーキテクチャのデータベースへの非同期アクセスがindb.jsでどのように見えるかというビジョンを実装しました。

食べるものがまだあります。たとえば、ストレージオブジェクトの変更/作成に関するイベントを登録できます。データベースまたはストレージを削除する方がはるかに簡単です。

PS：FFでサンプルコードを実行する場合、IndexedDBエンジンの実装に奇妙なバグがあります。 customer.age = 6を変更した場合; ++ customer.age; その後、データベースを再作成すると、41歳ではなく60歳のマリアの年齢になります。また、5秒のタイムアウトでクリーンアップの前にスクリプトを再起動すると、すべてが正常になります。

UPD 1：FFで実行するには、ファイルシステムからではなく、任意のホストで実行する必要があります（localhostが実行します）。

UPD 2：サーバー側については、 http：//tamejs.org/を参照できます。リンクについてはAndrey Kozlovに感謝します）

非同期IndexedDB APIのラッパー

現在のAPIで気に入らなかったこと

私のやり方

More articles: