Heim >Web-Frontend >js-Tutorial >Eine eingehende Analyse des Datenaustauschs und der Datenübertragung in JavaScript_Javascript-Kenntnissen

Eine eingehende Analyse des Datenaustauschs und der Datenübertragung in JavaScript_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:04:032661Durchsuche

Datenaustausch und Datentransfer ergänzen einander. Lassen Sie uns dieses Thema gemeinsam besprechen. Zunächst muss gesagt werden, dass sowohl das Teilen als auch das Weitergeben einen Spielraum haben. Der Geltungsbereich ist der Wirkungsbereich, der gemeinsam genutzt werden kann. Wenn er diesen Geltungsbereich überschreitet, bedeutet dies, dass eine bereichsübergreifende Datenübertragung erforderlich ist.

Geltungsbereich

1.ui-Bereich

Jede UI-Datei verfügt standardmäßig über eine entsprechende ui.js. Sie fungieren als geschlossener Bereich. In ui.js wird das UI-Objekt basierend auf der ID der Komponente in der UI-Datei abgerufen. Verschiedene UI-Dateien können Komponenten mit derselben ID definieren. Auf in ui.js definierte Variablen kann nur in diesem js zugegriffen werden.

2.Seitenumfang

Jedes Mal, wenn openPage aufgerufen wird, wird eine neue Seite über der alten Seite geöffnet. Nachdem sich closePage schließt, wird die abgedeckte alte Seite angezeigt. Zusätzlich zur Haupt-UI-Datei kann jede Seite auch viele andere UI-Dateien enthalten, und diese UI-Dateien befinden sich im selben Seitenbereich.
Wenn die Seite geschlossen wird, werden alle auf der Seite erstellten Objekte freigegeben.

3.App-Bereich

Dies ist der größte Bereich. Solange die App nicht beendet wird, ist dieser Bereich immer gültig.

app.js gehört zum App-Bereich, da es zu keiner Seite gehört.

Kurz gesagt, der App-Bereich enthält mehrere Seitenbereiche und der Seitenbereich enthält mehrere UI-Bereiche.

Speicherfreigabe

Im Vergleich zu Dateien und Datenbanken sind Speicheroperationen viel schneller und eignen sich für Operationen mit relativ kleinen Datenmengen. Der Nachteil besteht darin, dass es nach dem Schließen der App freigegeben wird. deviceone teilt den Speicher auf folgende Weise.

1. Speicheroperation von do_Global (App-Bereich)

Dies ist die gemeinsame Nutzung von Daten im App-Bereich. Bei diesem Teil des Speichers handelt es sich tatsächlich um ein Schlüssel-Wert-Paar, und ein Schlüssel entspricht einem Wert. Beachten Sie daher, dass der vorherige Wert überschrieben wird, wenn Sie einen Schlüssel neu zuweisen. Die Verwendungsweise ist sehr einfach. Sehen Sie sich das folgende Beispiel an: Lesen und Schreiben erfolgen auf unterschiedlichen Seiten.

//在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);// 格式化 

2. Globale Javascript-Variablen (Seitenbereich)

Verwenden Sie die Eigenschaften von JavaScript, um globale Variablen zu definieren. Normalerweise können Sie globale Variablen definieren, um Daten in verschiedenen UI-Dateien auf derselben Seite zu teilen. Sehen Sie sich das folgende Beispiel an: Lesen und Schreiben erfolgen in verschiedenen UI-Dateien, jedoch im selben Seitenbereich. Es ist auch sehr einfach zu bedienen, es gibt zwei Möglichkeiten:

Obwohl es sehr praktisch ist, wird es nicht empfohlen, da es zu gelegentlich zu verwenden ist. Wenn es sich um eine gemeinsame Entwicklung oder ein komplexes Projekt handelt, ist es schwierig, ihn zu finden und zu debuggen, wenn Sie auf einen Fehler stoßen.

// 在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"]; 

3. Javascript-Variablen (UI-Bereich)

Das bedarf keiner großen Erklärung, es handelt sich um eine normale js-Variablendefinition, die nur im aktuellen ui.js-Bereich gültig ist.

var key1 = "value1"; 

4. Speichermodus von SQLite

SQLite befindet sich normalerweise im Dateimodus. Es gibt eine spezielle Situation, in der Sie SQLite direkt im Speicher verwenden können. Die Verwendung von SQL-Anweisungen macht den Vorgang viel flexibler.

Es kann nur einen Speichermodus geben und der Name ist auf:memory: festgelegt.

Es wird später in der Einführung der SQLite-Datenbank ausführlich vorgestellt.

Dateifreigabe

Dies ist leicht zu verstehen. Die Dateifreigabe ist App-bezogen und kann nach dem Neustart der App aufgerufen werden. Sie können die do_Storage-Komponente verwenden, um Inhalte in eine Datei an einer beliebigen Stelle in der App zu schreiben und den Inhalt dann aus einer Datei an einer anderen Stelle zu lesen. Sehen Sie sich das folgende Beispiel an: Lesen und Schreiben erfolgen auf unterschiedlichen Seiten. Hierbei ist zu beachten, dass das Lesen und Schreiben von Dateien normalerweise asynchron erfolgt. Sie müssen sicherstellen, dass der Inhalt geschrieben wurde, bevor Sie ihn lesen können

// 在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);// 格式化 

do_SQLite-Komponente greift auf Datenbankdaten zu

Diese Komponente ist eine MM-Komponente, was bedeutet, dass mehrere Instanzen erstellt werden können. Alle MM-Komponenten haben standardmäßig einen Seitenbereich und können auch einen App-Bereich haben. Der dritte Parameter beim Erstellen einer MM-Komponente gibt den Umfang an.

Hier ist zu beachten, dass das Lesen und Schreiben von SQLite normalerweise asynchron erfolgt. Sie müssen sicherstellen, dass der Inhalt geschrieben wurde, bevor Sie ihn lesen können


1. App-Bereich:

// 创建一个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); 

2. Seitenumfang:

// 创建一个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) 

数据传递

数据传递涉及到跨作用域,比如不同的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关闭的时候传递过来的数据");
}

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn