Une analyse approfondie du partage et du transfert de données dans les compétences JavaScript_javascript

Le partage et le transfert de données sont complémentaires, discutons ensemble de cette problématique. La première chose à dire est que le partage et la transmission ont tous deux une portée. La portée est la zone d'effet. Les données dans la même portée peuvent être partagées si elles dépassent cette portée, cela signifie une portée croisée et le transfert de données doit être utilisé.

Portée

Portée 1.ui

Chaque fichier ui a un ui.js correspondant par défaut. Ils agissent comme un périmètre fermé. Dans ui.js, l'objet ui est obtenu en fonction de l'identifiant du composant dans le fichier ui ; différents fichiers ui peuvent définir des composants avec le même identifiant. Les variables définies dans ui.js ne sont accessibles que dans ce js.

Portée de 2.pages

Chaque fois que openPage est appelé, une nouvelle page sera ouverte. Cette nouvelle page sera couverte par l'ancienne page. Après la fermeture de closePage, l'ancienne page couverte sera exposée. En plus du fichier d'interface utilisateur principal, chaque page peut également contenir de nombreux autres fichiers d'interface utilisateur, et ces fichiers d'interface utilisateur se trouvent dans la même étendue de page.
Lorsque la page est fermée, tous les objets construits dans la page seront libérés.

Portée 3.app

Il s'agit de la plus grande portée. Tant que l'application ne se ferme pas, cette portée sera toujours valide.

app.js appartient à la portée de l'application car il n'appartient à aucune page.

En bref, la portée de l'application contient plusieurs portées de page et la portée de la page contient plusieurs portées d'interface utilisateur.

Partage de mémoire

Par rapport aux fichiers et aux bases de données, les opérations de mémoire sont beaucoup plus rapides et conviennent aux opérations avec des quantités de données relativement petites. L’inconvénient est qu’il est publié après la fermeture de l’application. deviceone partage la mémoire des manières suivantes.

1. Opération de mémoire de do_Global (portée de l'application)

Il s'agit du partage de données à l'échelle de l'application. Cet élément de mémoire est en fait une paire clé-valeur, et une clé correspond à une valeur, sachez donc que si vous réattribuez une clé, la valeur précédente sera écrasée. La méthode d'utilisation est très simple. Référez-vous à l'exemple suivant, la lecture et l'écriture se font sur des pages différentes.

//在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. Variables globales Javascript (portée de la page)

Utilisez les caractéristiques de JavaScript pour définir des variables globales. Vous pouvez généralement définir des variables globales pour partager des données dans différents fichiers d'interface utilisateur sur la même page. Reportez-vous à l'exemple suivant, la lecture et l'écriture se font dans des fichiers ui différents, mais dans la même portée de page. C'est aussi très simple à utiliser, il y a deux manières :

Bien que ce soit très pratique, il n'est pas recommandé car il est trop simple à utiliser. S'il s'agit d'un développement collaboratif ou d'un projet complexe, si vous rencontrez un bug, il sera difficile de le localiser et de le déboguer.

// 在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. Variables Javascript (portée de l'interface utilisateur)

Cela n'a pas besoin de beaucoup d'explications, il s'agit d'une définition de variable js normale, qui ne peut être valide que dans la portée actuelle de ui.js.

var key1 = "value1"; 

4. Mode mémoire de sqlite

SQLite est généralement en mode fichier. Il existe une situation particulière dans laquelle vous pouvez utiliser SQLite directement dans la mémoire. Il convient aux structures de données complexes et l'utilisation d'instructions SQL rendra l'opération beaucoup plus flexible.

Il ne peut y avoir qu'un seul mode mémoire, et le nom est fixe : mémoire :.

Il sera présenté en détail plus tard dans l'introduction de la base de données SQLite.

Partage de fichiers

C'est facile à comprendre. Le partage de fichiers est limité à l'application et est accessible après le redémarrage de l'application. Vous pouvez utiliser le composant do_Storage pour écrire du contenu dans un fichier n'importe où dans l'application, puis lire le contenu d'un fichier à un autre endroit. Référez-vous à l'exemple suivant, la lecture et l'écriture se font sur des pages différentes. Ce qu'il faut noter ici, c'est que la lecture et l'écriture des fichiers sont généralement asynchrones. Vous devez vous assurer que le contenu a été écrit avant de pouvoir le lire
.

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

Le composant do_SQLite accède aux données de la base de données

Ce composant est un composant MM, ce qui signifie que plusieurs instances peuvent être créées. Tous les composants MM sont limités à la page par défaut et peuvent également être étendus à l'application. Le troisième paramètre de création du composant MM indique la portée.

Il convient de noter ici que la lecture et l'écriture de SQLite sont généralement asynchrones. Vous devez vous assurer que le contenu a été écrit avant de pouvoir le lire
.

1. Portée de l'application :

// 创建一个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. Portée de la page :

// 创建一个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数据共享和数据传递的相关知识就给大家介绍这么多，希望对大家有所帮助！