深入浅析JavaScript中数据共享和数据传递_javascript技巧

数据共享和数据传递是相辅相成的,我们一起来讨论这个问题。首先要说的是共享和传递都是有作用域的。作用域就是起作用的区域,在同一个作用域数据可以共享,超过这个作用域就是跨作用域,就得用到数据传递了。

作用域

1.ui作用域

每一个ui文件缺省都有对应的ui.js。他们作为一个闭合的作用域。ui.js里根据ui文件里组件的id来获取ui对象;不同的ui文件可以定义相同id的组件。在ui.js里定义的变量只能在这个js里访问。

2.page作用域

每次调用openPage都会打开一个新的page,这个新的page会盖在旧的page之上,closePage关闭自己后就会露出被盖住的旧的page。每一个page里除了主ui文件以外,还可以包含其它很多ui文件,这些ui文件在同一个page作用域。
当page关闭的时候,所有在page里构建的对象都会释放。

3.app作用域

这个是最大的作用域,只要app没有退出,这个作用域就一直有效。

app.js属于app作用域,因为它不属于任何page。

总之,app作用域包含多个page作用域,page作用域包含多个ui作用域。

内存共享

相对文件和数据库,内存操作的速度快很多,适合于比较少的数据量操作。缺点就是app关闭后就释放了。deviceone通过以下几种方式来共享内存。

1. do_Global的memory操作(app作用域)

这个是app作用域的数据分享。这一块内存其实就是一个键值对,一个key对应一个value,所以要注意如果对一个key重新赋值,就会把以前的value覆盖。使用方法很简单。参考以下的示例,读和写分别在不同的page。

//在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的全局变量(page作用域)

利用JavaScript自身的特性定义全局变量,通常可以定义全局变量来实现同一page下不同ui文件里的数据分享。参考以下的示例,读和写分别在不同的ui文件,但是是在一个page作用域。使用也非常简单,有二种方式:

虽然很方便,但并不推荐使用,因为使用太随意,如果是协作开发或复杂的项目,如果碰见bug,很难定位和调试。

// 在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的变量(ui作用域)

这个不用太多解释,就是正常的js变量定义,只能在当前ui.js作用域有效。

var key1 = "value1"; 

4. sqlite的内存模式

sqlite通常是文件模式,有一种特殊的情况可以直接在内存里使用sqlite,适用于数据结构比较复杂,文本操作麻烦的方式,利用sql语句操作会灵活得多。

内存模式只能有一个,名字固定为\:memory\:.

在后面sqlite数据库介绍的地方再详细介绍。

文件共享

这个大家很好理解,文件共享是app作用域的,而且app重启后也可以访问。可以通过do_Storage组件在app的任何地方把内容写入一个文件,然后在另外一个地方读一个文件把内容读出来。参考以下的示例,读和写分别在不同的page。这里要注意的是文件读写通常是异步的,你得确保内容已经写完了,然后才能读.

// 在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组件都缺省是page作用域,也可以是app作用域。创建MM组件第三个参数标示作用域。

这里要注意的是SQLite读写通常是异步的,你得确保内容已经写完了,然后才能读

1. app作用域:

// 创建一个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表的第二条数据\n"
+ JSON.stringify(result[1], null, 2); 

2. 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数据共享和数据传递的相关知识就给大家介绍这么多,希望对大家有所帮助!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js数据共享
js数据传递
深入浅出javascript、深入理解javascript、深入javascript、javascript深入学习、深入浅出的javascript,以便于您获取更多的相关知识。

时间: 2024-09-26 23:04:35

深入浅析JavaScript中数据共享和数据传递_javascript技巧的相关文章

浅析JavaScript中浏览器的兼容问题_javascript技巧

浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分.我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种能力,即判断当前浏览器是否支持要调用的属性或者方法.下面做了一些简短的介绍. 1.innerText 和 innerContent 1)innerText 和 innerContent 的作用相同 2)innerText IE8之前的浏览器支持 3)innerContent 老版本的Firefox支持 4)新版本的浏览器两种方式都支持 1 // 老版本浏

深入浅析JavaScript中的作用域和上下文_javascript技巧

javascript中的作用域(scope)和上下文(context)是这门语言的独到之处,这部分归功于他们带来的灵活性.每个函数有不同的变量上下文和作用域.这些概念是javascript中一些强大的设计模式的后盾.然而这也给开发人员带来很大困惑.下面全面揭示了javascript中的上下文和作用域的不同,以及各种设计模式如何使用他们. 上下文(Context)和作用域(Scope) 首先需要知道的是,上下文和作用域是两个完全不同的概念.多年来,我发现很多开发者会混淆这两个概念(包括我自己),

浅析JavaScript中的array数组类型系统_javascript技巧

前面的话 数组是一组按序排列的值,相对地,对象的属性名称是无序的.从本质上讲,数组使用数字作为查找键,而对象拥有用户自定义的属性名.javascript没有真正的关联数组,但对象可用于实现关联的功能 Array()仅仅是一种特殊类型的Object(),也就是说,Array()实例基本上是拥有一些额外功能的Object()实例.数组可以保存任何类型的值,这些值可以随时更新或删除,且数组的大小是动态调整的 除了对象之外,数组Array类型可能是javascript中最常用的类型了.而且,javasc

深入浅析JavaScript中的arguments对象(强力推荐)_javascript技巧

1.在JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性.arguments非常类似Array,但实际上又不是一个Array实例.可以通过如下代码得以证实(当然,实际上,在函数funcArg中,调用arguments是不必要写成funcArg.arguments,直接写arguments即可). Array.prototype.testArg = "test"; function funcArg() { alert(funcArg.arg

深入浅析JavaScript中with语句的理解_javascript技巧

JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象. with语句的作用是暂时改变作用域链.减少的重复输入. 其语法结构为: with(object){ //statements } 举一个实际例子吧: with(document.forms[]){ name.value = "lee king"; address.value = "Peking";

浅析JavaScript中的类型和对象_javascript技巧

JavaScript是基于对象的,任何元素都可以看成对象.然而,类型和对象是不同的.本文中,我们除了讨论类型和对象的一些特点之外,更重要的是研究如何写出好的并且利于重用的类型.毕竟,JavaScript这种流行的脚本语言如果能够进行良好的封装,并形成一个庞大的类型库,对于重用是非常有意义的. 网上对于prototype的文章很多,一直没明白核心的思想.最后写了很多例子代码后才明白:prototype只能用在类型上. 以下是一些关于类型和对象的例子,大家看完例子后可能更容易理解类型和对象之间的联系

浅析JavaScript中作用域和作用域链_javascript技巧

学习js,肯定要学习作用域,js作用域和其他的主流语言的作用域还存在很大的区别. 一.js没有块级作用域. js没有块级作用域,就像这样: if(){ var a = 100: console.log(a) //输出100 } console.log(a) //输出100 js中像if,for,switch之类的语句,他们包含的代码块里面的变量,在代码块外面也能被读取,所以说,js没有块级作用域. 二.js的全局变量 js中规定,全局变量都可以看作是window的属性,而且全局变量能够被所有的代

浅析JavaScript中的同名标识符优先级_javascript技巧

一,局部变量先使用后声明,不影响外部同名变量 复制代码 代码如下: var x = 1; // --> 外部变量x function fn(){     alert(x);  // --> undefined 局部变量x先使用     var x = 2; // 后声明且赋值 } fn(); alert(x); // --> 1<BR> 第一点,函数fn内第一句输出x,x是在第二句才定义的.这在JS中是允许的,这里的允许是指不会出现语法错误程序可以运行. 但在其它语言如C,J

浅析JavaScript中的隐式类型转换_javascript技巧

如果把通过函数或方法调用,明确的将某种类型转换成另一种类型称为显示转换 ,相反则称为隐式类型转换 .google和维基百科中没有找到"显示类型转换","隐式类型转换"的字眼.暂且这么称呼. 一. 运算中存在的隐式类型转换 1, "+"运算符 复制代码 代码如下: var a = 11, b = '22'; var c = a + b; 这里引擎将会先把a变成字符串"11"再与b进行连接,变成了"1122".