JavaScript_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는 어떤 페이지에도 속하지 않기 때문에 앱 범위에 속합니다.

간단히 말하면 앱 범위에는 여러 페이지 범위가 포함되고, 페이지 범위에는 여러 UI 범위가 포함됩니다.

추억공유

파일이나 데이터베이스에 비해 메모리 작업이 훨씬 빠르고 상대적으로 적은 양의 데이터를 다루는 작업에 적합합니다. 단점은 앱이 종료된 후에 출시된다는 점입니다. deviceone은 다음과 같은 방식으로 메모리를 공유합니다.

1. do_Global의 메모리 운용(앱 범위)

앱 범위 데이터 공유입니다. 이 메모리 조각은 실제로 키-값 쌍이며 하나의 키는 하나의 값에 해당하므로 키를 다시 할당하면 이전 값을 덮어쓰게 된다는 점에 유의하세요. 사용방법은 매우 간단합니다. 다음 예를 참조하세요. 읽기와 쓰기는 서로 다른 페이지에 있습니다.

//在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. 자바스크립트 전역 변수(페이지 범위)

JavaScript의 특성을 활용하여 전역 변수를 정의합니다. 일반적으로 전역 변수를 정의하여 동일한 페이지의 다른 UI 파일에서 데이터를 공유할 수 있습니다. 다음 예를 참조하세요. 읽기와 쓰기는 서로 다른 ui 파일에 있지만 동일한 페이지 범위에 있습니다. 사용 방법도 매우 간단하며, 두 가지 방법이 있습니다:

매우 편리하지만 사용하기에는 너무 캐주얼하기 때문에 권장하지 않습니다. 공동 개발이나 복잡한 프로젝트인 경우 버그가 발생하면 이를 찾아 디버그하기가 어렵습니다.

// 在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. 자바스크립트 변수(ui 범위)

이것은 많은 설명이 필요하지 않으며 현재 ui.js 범위에서만 유효할 수 있는 일반적인 js 변수 정의입니다.

var key1 = "value1"; 

4. sqlite의 메모리 모드

SQLite는 일반적으로 메모리에서 SQLite를 직접 사용할 수 있는 특별한 상황이 있습니다. SQL 문을 사용하면 작업이 훨씬 더 유연해집니다.

메모리 모드는 하나만 있을 수 있으며 이름은 고정되어 있습니다: 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);// 格式化 

do_SQLite 구성 요소가 데이터베이스 데이터에 액세스

이 구성 요소는 MM 구성 요소로, 여러 인스턴스를 생성할 수 있습니다. 모든 MM 구성 요소는 기본적으로 페이지 범위이며 앱 범위일 수도 있습니다. MM 구성요소 생성의 세 번째 매개변수는 범위를 나타냅니다.

여기서 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); 

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) 

数据传递

数据传递涉及到跨作用域，比如不同的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数据共享和数据传递的相关知识就给大家介绍这么多，希望对大家有所帮助！