An in-depth analysis of data sharing and data transfer in JavaScript

データ共有とデータ転送は相互に補完的なものです。この問題について一緒に議論しましょう。まず最初に言っておきたいのは、共有と受け渡しの両方に範囲があるということです。スコープとは、同じスコープ内のデータを共有できる範囲のことであり、このスコープを超える場合は、クロススコープを使用する必要があります。

範囲

1.ui スコープ

各 ui ファイルには、デフォルトで対応する ui.js があります。これらは閉じたスコープとして機能します。 ui.js では、ui オブジェクトは ui ファイル内のコンポーネントの ID に基づいて取得されます。異なる ui ファイルが同じ ID を持つコンポーネントを定義できます。 ui.js で定義された変数には、この js でのみアクセスできます。

2.ページスコープ

openPage が呼び出されるたびに、新しいページが開かれ、この新しいページは古いページで覆われ、closePage が閉じた後、覆われた古いページが表示されます。メインの UI ファイルに加えて、各ページには他の多くの UI ファイルを含めることもでき、これらの UI ファイルは同じページスコープ内にあります。
ページを閉じると、ページ内に構築されているすべてのオブジェクトが解放されます。

3.アプリのスコープ

これは最大のスコープであり、アプリが終了しない限り、このスコープは常に有効です。

app.js はどのページにも属していないため、アプリスコープに属します。

つまり、app スコープには複数のページスコープが含まれ、ページスコープには複数の ui スコープが含まれます。

メモリ共有

ファイルやデータベースと比較して、メモリ操作ははるかに高速であり、比較的少量のデータの操作に適しています。欠点は、アプリを閉じた後に解放されることです。 deviceone は次の方法でメモリを共有します。

1. do_Global のメモリ操作 (アプリスコープ)

これはアプリ範囲のデータ共有です。このメモリ部分は実際にはキーと値のペアであり、1 つのキーが 1 つの値に対応するため、キーを再割り当てすると、以前の値が上書きされることに注意してください。使用方法はとても簡単です。次の例を参照してください。読み取りと書き込みは別のページにあります。

//在index.ui.js里设置值，可以设置为任何json对象，函数对象例外。
global.setMemory("key1", 1);
global.setMemory("key2", "value1");
global.setMemory("key3", [ "a", "b", "c" ]);
global.setMemory("key4", {
"k1" : "v1",
"k2" : "v2",
"k3" : "v3",
"k4" : "v4"
}); 
var label = ui("do_Label_2");
// 在memory/index.ui.js里获取值，可直接返回json对象
var global = sm("do_Global");
var content = {};
content.key1 = global.getMemory("key1");
content.key2 = global.getMemory("key2");
content.key3_2 = global.getMemory("key3")[1];
content.key4_k3 = global.getMemory("key4")["k3"];
label.text = JSON.stringify(content, null, 2);// 格式化

Copy after login

2. Javascript グローバル変数 (ページスコープ)

JavaScript の特性を使用してグローバル変数を定義する通常、同じページ上の異なる UI ファイルでデータを共有するためにグローバル変数を定義できます。次の例を参照してください。読み取りと書き込みは異なる ui ファイル内で行われますが、同じページスコープ内にあります。使い方も非常に簡単で、次の 2 つの方法があります:

非常に便利ですが、共同開発や複雑なプロジェクトの場合、バグを見つけてデバッグするのが困難になるため、使用することはお勧めできません。

// 在test1.ui.js里设置js的全局变量，二种方式。
// 1.不要加var前缀的变量定义,
key1 = "value1";
// 2. 把全局变量定义在deviceone对象上
deviceone.key2 = {
"k1" : "v1",
"k2" : "v2",
"k3" : "v3",
"k4" : "v4"
} 
// 在test2.ui.js里获取test1.ui.js里定义的全局变量，二种方式。
var content = {};
content.key1 = key1;
content.key2_k3 = deviceone.key2["k3"];

Copy after login

3. Javascript 変数 (UI スコープ)

これについては多くの説明は必要ありません。これは通常の js 変数定義であり、現在の ui.js スコープでのみ有効です。

var key1 = "value1";

Copy after login

4. sqlite のメモリモード

SQLite は通常はファイルモードですが、SQLite をメモリ内で直接使用できるため、SQL ステートメントを使用すると操作がより柔軟になります。

メモリモードは 1 つだけあり、名前は:memory: に固定されます。

sqliteデータベースの紹介で後ほど詳しく紹介します。

ファイル共有

これは理解するのが簡単です。ファイル共有はアプリスコープであり、アプリの再起動後にアクセスできます。 do_Storage コンポーネントを使用すると、アプリ内の任意の場所にコンテンツをファイルに書き込み、別の場所にあるファイルからコンテンツを読み取ることができます。次の例を参照してください。読み取りと書き込みは別のページにあります。ここで注意すべき点は、ファイルの読み取りと書き込みは通常は非同期であるということです。
を読み取る前に、その内容が書き込まれていることを確認する必要があります。

// 在index.ui.js里写文件file1和file2,可以直接写json对象
var key1 = "value1";
storage.writeFile("data://file1", key1, function(data, e) {
// 回调到这里才真正把内容写完，如果在执行到这里之前去读文件有可能读不到数据
})
var key2 = {
"k1" : "v1",
"k2" : "v2",
"k3" : "v3",
"k4" : "v4"
};
storage.writeFile("data://file2", key2, function(data, e) {
// 回调到这里才真正把内容写完，如果在执行到这里之前去读文件有可能读不到数据
}) 
// 在datacache/index.ui.js里获取值，可直接返回json对象
var datacache = sm("do_DataCache");
var content = {};
content.key1 = datacache.loadData("key1");
content.key2_3 = datacache.loadData("key2")["k3"];
label.text = "datacache/index.ui.js里获取值，可直接返回json对象 \n"
+ JSON.stringify(content, null, 2);// 格式化

Copy after login

do_SQLite コンポーネントがデータベースデータにアクセスします

このコンポーネントは MM コンポーネントです。つまり、複数のインスタンスを作成できます。すべての MM コンポーネントはデフォルトでページスコープですが、アプリスコープにすることもできます。 MM コンポーネント作成の 3 番目のパラメーターはスコープを示します。

ここで、SQLite の読み取りと書き込みは通常は非同期であることに注意してください。読み取る前に、コンテンツが書き込まれていることを確認する必要があります。

1. アプリのスコープ:

// 创建一个app作用域的sqlite对象，第二个参数是这个对象的标示，第三个参数标示作用域是app
var sqlite_app = mm("do_SQLite", "sqlite_app_id1", "app")
function test_sqlite() {
// 在index.ui.js里利用这个对象创建一个数据库test.db
sqlite_app.open("data://test.db");
var stu_table = "drop table if exists stu_table"
// 同步执行一个SQL语句
sqlite_app.executeSync(stu_table);
// 创建表SQL语句
stu_table = "create table stu_table(_id integer primary key autoincrement,sname text,snumber text)";
// 同步执行一个SQL语句
sqlite_app.executeSync(stu_table);
var stu_sql = "insert into stu_table(sname,snumber) values('xiaoming','01005');"
+ "insert into stu_table(sname,snumber) values('xiaohong','01006');"
+ "insert into stu_table(sname,snumber) values('xiaoliu','01007')";
// 异步执行一个SQL语句
sqlite_app.execute(stu_sql, function(data, e) {
// 回调到这里才真正把数据插入完，如果在执行到这里之前去查询数据有可能读不到数据
deviceone.print("insert finished!")
}) 
// 根据"sqlite_app_id1"这个id获取一个app作用域的sqlite对象，第二个参数是这个对象的标示，第三个参数标示作用域是app
var sqlite_app = mm("do_SQLite", "sqlite_app_id1", "app")
// 在sqlite/index.ui.js里利用这个对象查询test.db，因为这个对象已经打开了数据库，所以不需要再open了
// 创建查询SQL语句
var stu_query = "select * from stu_table";
// 同步执行一个查询语句
var result = sqlite_app.querySync(stu_query);
label.text = "在sqlite/index.ui.js里利用这个对象查询test.db里的stu_table表的第二条数据
"
+ JSON.stringify(result[1], null, 2);

Copy after login

2. ページ範囲:

// 创建一个page作用域的sqlite对象，唯一的id标示是memory_db_id1
var sqlite_app = mm("do_SQLite", "memory_db_id1", "page");
// 在test1.ui.js里利用这个对象创建一个内存数据库,这个名字必须写死是:memory:
sqlite_app.open(":memory:");
// 创建表SQL语句
var stu_table = "drop table if exists stu_table;"
// 内存数据库执行速度快，可以尝试都用同步
// 同步执行一个SQL语句
sqlite_app.executeSync(stu_table);
stu_table = "create table stu_table(_id integer primary key autoincrement,sname text,snumber text)";
// 同步执行一个SQL语句
sqlite_app.executeSync(stu_table);
var stu_sql = "insert into stu_table(sname,snumber) values('laoming','1');"
+ "insert into stu_table(sname,snumber) values('laohong','2');"
+ "insert into stu_table(sname,snumber) values('laoliu','3')";
// 同步执行一个SQL语句
sqlite_app.executeSync(stu_sql); 
// 在test2.ui.js里查询在test1.ui.js里创建的数据库表
// 根据memory_db_id1这个标示来获取已经创建好的sqlite对象
var sqlite_app = mm("do_SQLite", "memory_db_id1", "page");
// 创建查询SQL语句
var stu_query = "select * from stu_table";
// 同步执行一个查询语句
var result = sqlite_app.querySync(stu_query);
label.text = "在test2.ui.js里查询在test1.ui.js里创建的内存数据库表的第三条记录\n"
+ JSON.stringify(result[2], null, 2)

Copy after login

数据传递

数据传递涉及到跨作用域，比如不同的ui文件传递数据，不同的page传递数据。

其中最重要也是最常用的方式就是消息机制

1.消息机制

这个环节我们在文档再里详细介绍。

总之，消息机制可以在跨ui作用域传递数据，也可以跨page作用域传递数据。

2.openPage和closePage传递数据。

这个数据传递是跨page作用域，但是只限于相隔二层page之间。比如在page1的基础上打开page2，page1把一些数据传递给page2；page2关闭自身，露出page1，又可以把数据传递回page1. 数据传递可以是任何json对象。
这是一个常规而且非常好的方式，建议都这么使用。

// 在index.ui.js里openPage页面open_close_page/index.ui,传递数据
var d = {
"k1" : "v1",
"k2" : "v2",
"k3" : "v3",
"k4" : "v4"
};
app.openPage({
source : "source://view/open_close_page/index.ui",
data : d,
statusBarState : "transparent"
});
}
// 接受页面open_close_page/index.ui 关闭的时候传递回来的数据
page.on("result", function(data) {
if (data)
nf.alert(JSON.stringify(data, null, 2));
}) 
// 从index.ui.js传递过来的数据通过getData获取值，可直接返回json对象
var data = page.getData();
label.text = "从index.ui.js传递过来的数据通过getData获取值，可直接返回json对象 \n"
+ JSON.stringify(data, null, 2);// 格式化
function close_me() {
// 关闭自身，把数据传递回下一层page
app.closePage("我是从open_close_page/index.ui关闭的时候传递过来的数据");
}

Copy after login

关于本文给大家介绍的js数据共享和数据传递的相关知识就给大家介绍这么多，希望对大家有所帮助！