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

Data sharing and data delivery go hand in hand. Let's discuss this issue. The first thing to say is that sharing and passing are both scoped. Data can be shared within the same scope. Beyond this scope, data must be passed across the scope.

scope

1. ui scope

Each ui file has a corresponding ui.js by default. They act as a closed scope. ui. In js, you can get an ui object based on the component's id; Different ui files can define components of the same id. ui. js Variables defined in ui. js are accessible only in js.

2. page scope

Each call to openPage will open a new page. This new page will be on top of the old page. When closePage closes itself, it will reveal the covered old page. In addition to the main ui file, each page can contain many other ui files that are in the same page scope.
When page is closed, all objects built in page are freed.

3. app scope

This is the maximum scope and will remain in effect as long as app does not exit.

app.js belongs to the scope of app because it does not belong to any page.

In summary, the app scope contains multiple page scopes, and the page scope contains multiple ui scopes.

Memory sharing

Compared to files and databases, memory operations are much faster and suitable for relatively small data volume operations. The drawback is that app is released when it is turned off. ES67en shares memory in the following ways.

1. memory operation for do_Global (app scope)

This is data sharing for the app scope. This block of memory is essentially a key-value pair, one key for each value, so be aware that if you reassign to one key, the previous value will be overwritten. It's very simple to use. Refer to the following example, read and write in separate page.

// in index.ui.js You can set it to anything json Objects, with the exception of function objects. 
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");
//  in memory/index.ui.js Retrieves the value from the json object 
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);//  formatting  

2. Javascript global variables (page scope)

Global variables are defined using JavaScript's own features. In general, global variables can be defined to achieve data sharing in ui files that are different from those in 1page. Refer to the example below, read and write in separate ES96en files, but in a single ES97en scope. It is also very simple to use, there are two ways:

While convenient, it is not recommended because it is too casual to use, and if you are working on a collaborative or complex project, bug can be difficult to locate and debug.

//  in test1.ui.js Set in the js Of the global variable, 2 Kind of way. 
// 1. Don't add var The variable definition of the prefix ,
key1 = "value1";
// 2.  Define global variables in deviceone On the object 
deviceone.key2 = {
"k1" : "v1",
"k2" : "v2",
"k3" : "v3",
"k4" : "v4"
} 
//  in test2.ui.js get test1.ui.js Global variables defined in the 2 Kind of way. 
var content = {};
content.key1 = key1;
content.key2_k3 = deviceone.key2["k3"]; 

3. Variables in Javascript (ui scope)

This does not require much explanation, but is a normal js variable definition that is only valid in the current ui.js scope.

var key1 = "value1"; 

4. Memory mode of sqlite

sqlite is usually a file mode, there is a special case can be directly used in memory sqlite, suitable for more complex data structure, text operation trouble way, using sql statement operation will be much more flexible.

There can only be one memory mode with the fixed name \:memory\:.

More on this later where the sqlite database is covered.

File sharing

File sharing is app scoped, and app rebooted is also accessible. The do_Storage component can be used anywhere in app to write to a file and then read the content from a file in another place. Refer to the following example to read and write in different page respectively. The important thing to note here is that file reads and writes are usually asynchronous and you need to make sure that the content has been written before you can read it.

//  in index.ui.js Write file file1 and file2, I can just write json object 
var key1 = "value1";
storage.writeFile("data://file1", key1, function(data, e) {
//  This is where the callback is actually written, and if you read the file before executing it, you may not be able to read the data 
})
var key2 = {
"k1" : "v1",
"k2" : "v2",
"k3" : "v3",
"k4" : "v4"
};
storage.writeFile("data://file2", key2, function(data, e) {
//  This is where the callback is actually written, and if you read the file before executing it, you may not be able to read the data 
}) 
//  in datacache/index.ui.js Retrieves the value from the json object 
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 Retrieves the value from the json object  \n"
+ JSON.stringify(content, null, 2);//  formatting  

The do_SQLite component accesses database data

This component is an MM component, meaning that multiple instances can be created. All MM components are in the page scope by default, or can be in the app scope. Create the third parameter of the MM component to mark the scope.

The important thing to note here is that SQLite reads and writes are usually asynchronous and you need to make sure that the content is written before you can read it

1. app scope:

//  create 1 a app The scope of sqlite The object, the first 2 A parameter is the identifier of the object 3 The parameter identifier scope is app
var sqlite_app = mm("do_SQLite", "sqlite_app_id1", "app")
function test_sqlite() {
//  in index.ui.js Create using this object in the 1 A database test.db
sqlite_app.open("data://test.db");
var stu_table = "drop table if exists stu_table"
//  Synchronous execution 1 a SQL statements 
sqlite_app.executeSync(stu_table);
//  Create a table SQL statements 
stu_table = "create table stu_table(_id integer primary key autoincrement,sname text,snumber text)";
//  Synchronous execution 1 a SQL statements 
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')";
//  Asynchronous execution 1 a SQL statements 
sqlite_app.execute(stu_sql, function(data, e) {
//  This is where the callback actually inserts the data, and if you query the data before executing it there, you may not read the data 
deviceone.print("insert finished!")
}) 
//  According to the "sqlite_app_id1" this id To obtain 1 a app The scope of sqlite The object, the first 2 A parameter is the identifier of the object 3 The parameter identifier scope is app
var sqlite_app = mm("do_SQLite", "sqlite_app_id1", "app")
//  in sqlite/index.ui.js Use this object in the query test.db Because this object already opens the database, it is not needed open the 
//  Create a query SQL statements 
var stu_query = "select * from stu_table";
//  Synchronous execution 1 Query statement 
var result = sqlite_app.querySync(stu_query);
label.text = " in sqlite/index.ui.js Use this object in the query test.db In the stu_table The table first 2 The data \n"
+ JSON.stringify(result[1], null, 2); 

2. page scope:

//  create 1 a page The scope of sqlite The object, 1 the id Labeling is memory_db_id1
var sqlite_app = mm("do_SQLite", "memory_db_id1", "page");
//  in test1.ui.js Create using this object in the 1 Three in-memory databases , The name must be written dead :memory:
sqlite_app.open(":memory:");
//  Create a table SQL statements 
var stu_table = "drop table if exists stu_table;"
//  Memory database execution speed is fast, you can try to use synchronization 
//  Synchronous execution 1 a SQL statements 
sqlite_app.executeSync(stu_table);
stu_table = "create table stu_table(_id integer primary key autoincrement,sname text,snumber text)";
//  Synchronous execution 1 a SQL statements 
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')";
//  Synchronous execution 1 a SQL statements 
sqlite_app.executeSync(stu_sql); 
//  in test2.ui.js The query in test1.ui.js The database table created in the 
//  According to the memory_db_id1 This flag is used to retrieve the ones that have been created sqlite object 
var sqlite_app = mm("do_SQLite", "memory_db_id1", "page");
//  Create a query SQL statements 
var stu_query = "select * from stu_table";
//  Synchronous execution 1 Query statement 
var result = sqlite_app.querySync(stu_query);
label.text = " in test2.ui.js The query in test1.ui.js The number of in-memory database tables created in the 3 records \n"
+ JSON.stringify(result[2], null, 2) 

The data transfer

Data transfer involves crossing scopes, such as different ui files passing data and different page passing data.

One of the most important and common approaches is the messaging mechanism

1. Message mechanism

We'll cover this in more detail in the documentation.

In summary, the messaging mechanism can pass data across ui scopes as well as across page scopes.

2.openPage and closePage transfer data.

This data transfer is across the page scope, but only between page 2 layers apart. For example, on the basis of ES200en1, open ES201en2, ES202en1 to pass some data to ES203en2; page2 closes itself to reveal page1, which in turn can pass data back to page1. Data passing can be any json object.
This is a general and very good way to do it. It is recommended to do it all.

//  in index.ui.js In the openPage page open_close_page/index.ui, To transfer data 
var d = {
"k1" : "v1",
"k2" : "v2",
"k3" : "v3",
"k4" : "v4"
};
app.openPage({
source : "source://view/open_close_page/index.ui",
data : d,
statusBarState : "transparent"
});
}
//  Accept the page open_close_page/index.ui  Data passed back when closed 
page.on("result", function(data) {
if (data)
nf.alert(JSON.stringify(data, null, 2));
}) 
//  from index.ui.js The incoming data is passed through getData Gets the value, which can be returned directly json object 
var data = page.getData();
label.text = " from index.ui.js The incoming data is passed through getData Gets the value, which can be returned directly json object  \n"
+ JSON.stringify(data, null, 2);//  formatting 
function close_me() {
//  Close itself, pass the data back 1 layer page
app.closePage(" I am from open_close_page/index.ui Data passed when closed ");
}

This article introduces js data sharing and data transfer related knowledge to introduce so much, I hope to be helpful to you!