リトルJavaScriptマルチスレッド第1/2ページ
3998 ワード
法宝とはConccurrent.Threadというやつです.実はjsライブラリです.ウェブサイトからソースコードをダウンロードできます.どう使いますか?
簡単です
Conccurrent.Thread.create(f,a 1,a 2,...)fは、関数のパラメータとして、このようにスレッドを作成しました.同時に複数のスレッドを作成することができます.このライブラリは同時に実行されます.他の言語のThreadのような方法を提供します.など.具体的にウェブサイトに行って調べます.
AJAX技術を使った開発サイトが増えていますが、複雑なAJAXアプリケーションを構築するのは難しいです.これらの困難をもたらした主な原因は何ですか?サーバとの非同期通信問題ですか?それともGUIプログラミングの問題ですか?通常この二つの仕事はデスクトッププログラムで行われますが、一体なぜ同じ機能を実現できるAJAXアプリケーションを開発するのがこんなに難しいのですか?
AJAX開発中の難問
この問題を簡単な例で認識しましょう.ツリー構造の掲示板システム(BBS)を確立すると、ユーザーの要求に応じてサーバと対話し、記事ごとの情報を動的にロードすることができます.各文章には四つの関連属性があります.システムでは固有の識別ID、発信者名、文章内容、およびそのサブ記事IDを含む配列情報として利用できます.まず、ゲトアルティクルという関数があると仮定して、記事情報をロードすることができます.この関数が受信したパラメータは、記事のIDをロードし、サーバから記事情報を取得することができます.このオブジェクトには、記事に関連する4つの属性が含まれています.id、name、content、children.ルーチンは以下の通りです
function(id){
var a=get Artarticle(id);
document.writeln(a.name+"
「+a.comセンター」
)
しかし、同じ文章IDでこの関数を呼び出すと、サーバとの間で繰り返し無益な通信が必要となることに気づくかもしれません.この問題を解決するためには、キャッシュ機能を持つget Artarticle WithCache()に相当する関数を使用することが考えられます.この例では、get Artarticle()が返したデータは、グローバル変数として保存されるだけである.
var cache={}
function getArtcleWithCache(id)｛
if(!cache[id]){
cache[id]=get Artarticle(id);
)
return cache[id]
)
今は読み込んだ文章をキャッシュしました.関数background Loadをもう一度考えてみます.これは私たちが前述したキャッシュメカニズムを適用して、すべての文章情報をロードします.その用途は、読者がある文章を読んでいる時に、後ろから全部の文章を読み込むということです.記事データはツリー構造なので、再帰的なアルゴリズムを簡単に書いて、ツリーを巡回してすべての記事をロードします.
Function background Load(ids)｛
for(var i=0;i＜ids.length;i＋)｛
var a=get Artarticle WithCache(ids[i])
background Load(a.Children)
)
)
background Load関数は、ID配列をパラメータとして受信し、IDごとに前に定義されたget ArtarticldWithCache()メソッドを呼び出して、各IDに対応する記事をキャッシュする.その後、記事をロードしたサブ文章ID配列を介してバックグランドロードを再帰的に呼び出すと、記事ツリー全体がキャッシュされます.
今までは、すべてが完璧に見えます.しかし、AJAXアプリケーションを開発した経験がある限り、このような幼稚な実現方法は成功しないということを知っておくべきです.この例が成立した基礎は、デフォルトのget Artarticle()が同期通信を使用しています.しかし、基本的な原則として、JavaScriptはサーバと対話する時に非同期で通信することを要求しています.簡単性としては、各事柄(GUIイベントとレンダリングを含む)を一つのスレッドに置いて処理するのが良いプログラムモデルであり、これはスレッド同期などの複雑な問題を考慮する必要がないからである.一方、彼はアプリケーション開発中の深刻な問題を暴露し、単スレッド環境はユーザー要求に迅速に対応するように見えるが、スレッドが他のことを処理している場合(例えば、getArtarticleを呼び出す)、ユーザーのマウスクリックやキーボード操作に応答できない.
このシングルスレッド環境で同期通信をするとどうなりますか?同期通信は、通信結果を得るまでブラウザの実行を中断します.通信結果を待っている間、サーバからの呼び出しがまだ完了していないため、スレッドはユーザに応答を停止し、呼び出しが戻るまでロック状態を維持する.このため、ブラウザがサーバの応答を待っている間にユーザの行動に応答できないので、凍結したように見えます.get Artarticle WithCache()とbackground Load()を実行すると同じ問題があります.これらはget Artarticle()関数に基づくものです.すべての文章をダウンロードするのにかなりの時間がかかりますので、バックグランドLoad関数にとっては、ブラウザのこの時間内の凍結は非常に深刻な問題です.ブラウザはすでに凍結されています.ユーザが文章を読んでいる時に、まずバックグラウンドにデータをロードすることはできません.このようにすれば、今の文章さえ読めません.
上述したように、同期通信は使用中にこのような重大な問題を引き起こし、JavaScriptは非同期通信を基本原則とする.したがって、非同期通信に基づいて上記のプログラムを書き換えることができます.JavaScriptはイベントドライバのプログラム設計方式で非同期通信プログラムを書くことを要求します.多くの場合、コールバックプログラムを指定しなければなりません.通信応答を受信すると、この関数が呼び出されます.例えば、上記で定義されたget Artarticle WithCache()は、次のように書くことができる.
var cache={}
function get Articice WithCache(id,calback)｛
if(!cache[id]){
calback(cache[id])
}else{
get Artarticle(id,function(a)｛
cache[id]=a
calback(a)
｝
)
)
1 2次のページで全文を読む
簡単です
Conccurrent.Thread.create(f,a 1,a 2,...)fは、関数のパラメータとして、このようにスレッドを作成しました.同時に複数のスレッドを作成することができます.このライブラリは同時に実行されます.他の言語のThreadのような方法を提供します.など.具体的にウェブサイトに行って調べます.
<br>function hello ( ) {
<br>document.body.innerHTML += "H";
<br>document.body.innerHTML += "e";
<br>document.body.innerHTML += "l";
<br>document.body.innerHTML += "l";
<br>document.body.innerHTML += "o";
<br>document.body.innerHTML += ",";
<br>document.body.innerHTML += " ";
<br>document.body.innerHTML += "w";
<br>document.body.innerHTML += "o";
<br>document.body.innerHTML += "r";
<br>document.body.innerHTML += "l";
<br>document.body.innerHTML += "d";
<br>document.body.innerHTML += "!";
<br>}
<br>Concurrent.Thread.create(hello);
<br>
AJAX技術を使った開発サイトが増えていますが、複雑なAJAXアプリケーションを構築するのは難しいです.これらの困難をもたらした主な原因は何ですか?サーバとの非同期通信問題ですか?それともGUIプログラミングの問題ですか?通常この二つの仕事はデスクトッププログラムで行われますが、一体なぜ同じ機能を実現できるAJAXアプリケーションを開発するのがこんなに難しいのですか?
AJAX開発中の難問
この問題を簡単な例で認識しましょう.ツリー構造の掲示板システム(BBS)を確立すると、ユーザーの要求に応じてサーバと対話し、記事ごとの情報を動的にロードすることができます.各文章には四つの関連属性があります.システムでは固有の識別ID、発信者名、文章内容、およびそのサブ記事IDを含む配列情報として利用できます.まず、ゲトアルティクルという関数があると仮定して、記事情報をロードすることができます.この関数が受信したパラメータは、記事のIDをロードし、サーバから記事情報を取得することができます.このオブジェクトには、記事に関連する4つの属性が含まれています.id、name、content、children.ルーチンは以下の通りです
function(id){
var a=get Artarticle(id);
document.writeln(a.name+"
「+a.comセンター」
)
しかし、同じ文章IDでこの関数を呼び出すと、サーバとの間で繰り返し無益な通信が必要となることに気づくかもしれません.この問題を解決するためには、キャッシュ機能を持つget Artarticle WithCache()に相当する関数を使用することが考えられます.この例では、get Artarticle()が返したデータは、グローバル変数として保存されるだけである.
var cache={}
function getArtcleWithCache(id)｛
if(!cache[id]){
cache[id]=get Artarticle(id);
)
return cache[id]
)
今は読み込んだ文章をキャッシュしました.関数background Loadをもう一度考えてみます.これは私たちが前述したキャッシュメカニズムを適用して、すべての文章情報をロードします.その用途は、読者がある文章を読んでいる時に、後ろから全部の文章を読み込むということです.記事データはツリー構造なので、再帰的なアルゴリズムを簡単に書いて、ツリーを巡回してすべての記事をロードします.
Function background Load(ids)｛
for(var i=0;i＜ids.length;i＋)｛
var a=get Artarticle WithCache(ids[i])
background Load(a.Children)
)
)
background Load関数は、ID配列をパラメータとして受信し、IDごとに前に定義されたget ArtarticldWithCache()メソッドを呼び出して、各IDに対応する記事をキャッシュする.その後、記事をロードしたサブ文章ID配列を介してバックグランドロードを再帰的に呼び出すと、記事ツリー全体がキャッシュされます.
今までは、すべてが完璧に見えます.しかし、AJAXアプリケーションを開発した経験がある限り、このような幼稚な実現方法は成功しないということを知っておくべきです.この例が成立した基礎は、デフォルトのget Artarticle()が同期通信を使用しています.しかし、基本的な原則として、JavaScriptはサーバと対話する時に非同期で通信することを要求しています.簡単性としては、各事柄(GUIイベントとレンダリングを含む)を一つのスレッドに置いて処理するのが良いプログラムモデルであり、これはスレッド同期などの複雑な問題を考慮する必要がないからである.一方、彼はアプリケーション開発中の深刻な問題を暴露し、単スレッド環境はユーザー要求に迅速に対応するように見えるが、スレッドが他のことを処理している場合(例えば、getArtarticleを呼び出す)、ユーザーのマウスクリックやキーボード操作に応答できない.
このシングルスレッド環境で同期通信をするとどうなりますか?同期通信は、通信結果を得るまでブラウザの実行を中断します.通信結果を待っている間、サーバからの呼び出しがまだ完了していないため、スレッドはユーザに応答を停止し、呼び出しが戻るまでロック状態を維持する.このため、ブラウザがサーバの応答を待っている間にユーザの行動に応答できないので、凍結したように見えます.get Artarticle WithCache()とbackground Load()を実行すると同じ問題があります.これらはget Artarticle()関数に基づくものです.すべての文章をダウンロードするのにかなりの時間がかかりますので、バックグランドLoad関数にとっては、ブラウザのこの時間内の凍結は非常に深刻な問題です.ブラウザはすでに凍結されています.ユーザが文章を読んでいる時に、まずバックグラウンドにデータをロードすることはできません.このようにすれば、今の文章さえ読めません.
上述したように、同期通信は使用中にこのような重大な問題を引き起こし、JavaScriptは非同期通信を基本原則とする.したがって、非同期通信に基づいて上記のプログラムを書き換えることができます.JavaScriptはイベントドライバのプログラム設計方式で非同期通信プログラムを書くことを要求します.多くの場合、コールバックプログラムを指定しなければなりません.通信応答を受信すると、この関数が呼び出されます.例えば、上記で定義されたget Artarticle WithCache()は、次のように書くことができる.
var cache={}
function get Articice WithCache(id,calback)｛
if(!cache[id]){
calback(cache[id])
}else{
get Artarticle(id,function(a)｛
cache[id]=a
calback(a)
｝
)
)
1 2次のページで全文を読む