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


Posted in Javascript onApril 25, 2016

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

作用域

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

Javascript 相关文章推荐
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
jquery常用的12个小功能
Jul 22 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
JS数组方法some、every和find的使用详情
Oct 05 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 #Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 #Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 #Javascript
下雪了 javascript实现雪花飞舞
Aug 02 #Javascript
基于node实现websocket协议
Apr 25 #Javascript
Bootstrap每天必学之导航组件
Apr 25 #Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 #Javascript
You might like
第五节--克隆
2006/11/16 PHP
PHP开发框架总结收藏
2008/04/24 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
PHP7引入的"??"和"?:"的区别讲解
2019/04/08 PHP
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Python内置函数property()如何使用
2020/09/01 Python
python logging模块的使用
2020/09/07 Python
python openssl模块安装及用法
2020/12/06 Python
暑期实习鉴定
2013/12/16 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
党纪处分决定书
2015/06/24 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python