深入淺析JavaScript中數(shù)據(jù)共享和數(shù)據(jù)傳遞
數(shù)據(jù)共享和數(shù)據(jù)傳遞是相輔相成的,我們一起來討論這個(gè)問題。首先要說的是共享和傳遞都是有作用域的。作用域就是起作用的區(qū)域,在同一個(gè)作用域數(shù)據(jù)可以共享,超過這個(gè)作用域就是跨作用域,就得用到數(shù)據(jù)傳遞了。
作用域
1.ui作用域
每一個(gè)ui文件缺省都有對(duì)應(yīng)的ui.js。他們作為一個(gè)閉合的作用域。ui.js里根據(jù)ui文件里組件的id來獲取ui對(duì)象;不同的ui文件可以定義相同id的組件。在ui.js里定義的變量只能在這個(gè)js里訪問。
2.page作用域
每次調(diào)用openPage都會(huì)打開一個(gè)新的page,這個(gè)新的page會(huì)蓋在舊的page之上,closePage關(guān)閉自己后就會(huì)露出被蓋住的舊的page。每一個(gè)page里除了主ui文件以外,還可以包含其它很多ui文件,這些ui文件在同一個(gè)page作用域。
當(dāng)page關(guān)閉的時(shí)候,所有在page里構(gòu)建的對(duì)象都會(huì)釋放。
3.app作用域
這個(gè)是最大的作用域,只要app沒有退出,這個(gè)作用域就一直有效。
app.js屬于app作用域,因?yàn)樗粚儆谌魏蝡age。
總之,app作用域包含多個(gè)page作用域,page作用域包含多個(gè)ui作用域。
內(nèi)存共享
相對(duì)文件和數(shù)據(jù)庫,內(nèi)存操作的速度快很多,適合于比較少的數(shù)據(jù)量操作。缺點(diǎn)就是app關(guān)閉后就釋放了。deviceone通過以下幾種方式來共享內(nèi)存。
1. do_Global的memory操作(app作用域)
這個(gè)是app作用域的數(shù)據(jù)分享。這一塊內(nèi)存其實(shí)就是一個(gè)鍵值對(duì),一個(gè)key對(duì)應(yīng)一個(gè)value,所以要注意如果對(duì)一個(gè)key重新賦值,就會(huì)把以前的value覆蓋。使用方法很簡(jiǎn)單。參考以下的示例,讀和寫分別在不同的page。
//在index.ui.js里設(shè)置值,可以設(shè)置為任何json對(duì)象,函數(shù)對(duì)象例外。 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對(duì)象 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自身的特性定義全局變量,通常可以定義全局變量來實(shí)現(xiàn)同一page下不同ui文件里的數(shù)據(jù)分享。參考以下的示例,讀和寫分別在不同的ui文件,但是是在一個(gè)page作用域。使用也非常簡(jiǎn)單,有二種方式:
雖然很方便,但并不推薦使用,因?yàn)槭褂锰S意,如果是協(xié)作開發(fā)或復(fù)雜的項(xiàng)目,如果碰見bug,很難定位和調(diào)試。
// 在test1.ui.js里設(shè)置js的全局變量,二種方式。 // 1.不要加var前綴的變量定義, key1 = "value1"; // 2. 把全局變量定義在deviceone對(duì)象上 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作用域)
這個(gè)不用太多解釋,就是正常的js變量定義,只能在當(dāng)前ui.js作用域有效。
var key1 = "value1";
4. sqlite的內(nèi)存模式
sqlite通常是文件模式,有一種特殊的情況可以直接在內(nèi)存里使用sqlite,適用于數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜,文本操作麻煩的方式,利用sql語句操作會(huì)靈活得多。
內(nèi)存模式只能有一個(gè),名字固定為\:memory\:.
在后面sqlite數(shù)據(jù)庫介紹的地方再詳細(xì)介紹。
文件共享
這個(gè)大家很好理解,文件共享是app作用域的,而且app重啟后也可以訪問。可以通過do_Storage組件在app的任何地方把內(nèi)容寫入一個(gè)文件,然后在另外一個(gè)地方讀一個(gè)文件把內(nèi)容讀出來。參考以下的示例,讀和寫分別在不同的page。這里要注意的是文件讀寫通常是異步的,你得確保內(nèi)容已經(jīng)寫完了,然后才能讀.
// 在index.ui.js里寫文件file1和file2,可以直接寫json對(duì)象 var key1 = "value1"; storage.writeFile("data://file1", key1, function(data, e) { // 回調(diào)到這里才真正把內(nèi)容寫完,如果在執(zhí)行到這里之前去讀文件有可能讀不到數(shù)據(jù) }) var key2 = { "k1" : "v1", "k2" : "v2", "k3" : "v3", "k4" : "v4" }; storage.writeFile("data://file2", key2, function(data, e) { // 回調(diào)到這里才真正把內(nèi)容寫完,如果在執(zhí)行到這里之前去讀文件有可能讀不到數(shù)據(jù) }) // 在datacache/index.ui.js里獲取值,可直接返回json對(duì)象 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對(duì)象 \n" + JSON.stringify(content, null, 2);// 格式化
do_SQLite組件訪問數(shù)據(jù)庫數(shù)據(jù)
這個(gè)組件是一個(gè)MM組件,意味著可以創(chuàng)建多個(gè)實(shí)例。所有MM組件都缺省是page作用域,也可以是app作用域。創(chuàng)建MM組件第三個(gè)參數(shù)標(biāo)示作用域。
這里要注意的是SQLite讀寫通常是異步的,你得確保內(nèi)容已經(jīng)寫完了,然后才能讀
1. app作用域:
// 創(chuàng)建一個(gè)app作用域的sqlite對(duì)象,第二個(gè)參數(shù)是這個(gè)對(duì)象的標(biāo)示,第三個(gè)參數(shù)標(biāo)示作用域是app var sqlite_app = mm("do_SQLite", "sqlite_app_id1", "app") function test_sqlite() { // 在index.ui.js里利用這個(gè)對(duì)象創(chuàng)建一個(gè)數(shù)據(jù)庫test.db sqlite_app.open("data://test.db"); var stu_table = "drop table if exists stu_table" // 同步執(zhí)行一個(gè)SQL語句 sqlite_app.executeSync(stu_table); // 創(chuàng)建表SQL語句 stu_table = "create table stu_table(_id integer primary key autoincrement,sname text,snumber text)"; // 同步執(zhí)行一個(gè)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')"; // 異步執(zhí)行一個(gè)SQL語句 sqlite_app.execute(stu_sql, function(data, e) { // 回調(diào)到這里才真正把數(shù)據(jù)插入完,如果在執(zhí)行到這里之前去查詢數(shù)據(jù)有可能讀不到數(shù)據(jù) deviceone.print("insert finished!") }) // 根據(jù)"sqlite_app_id1"這個(gè)id獲取一個(gè)app作用域的sqlite對(duì)象,第二個(gè)參數(shù)是這個(gè)對(duì)象的標(biāo)示,第三個(gè)參數(shù)標(biāo)示作用域是app var sqlite_app = mm("do_SQLite", "sqlite_app_id1", "app") // 在sqlite/index.ui.js里利用這個(gè)對(duì)象查詢test.db,因?yàn)檫@個(gè)對(duì)象已經(jīng)打開了數(shù)據(jù)庫,所以不需要再open了 // 創(chuàng)建查詢SQL語句 var stu_query = "select * from stu_table"; // 同步執(zhí)行一個(gè)查詢語句 var result = sqlite_app.querySync(stu_query); label.text = "在sqlite/index.ui.js里利用這個(gè)對(duì)象查詢test.db里的stu_table表的第二條數(shù)據(jù)\n" + JSON.stringify(result[1], null, 2);
2. page作用域:
// 創(chuàng)建一個(gè)page作用域的sqlite對(duì)象,唯一的id標(biāo)示是memory_db_id1 var sqlite_app = mm("do_SQLite", "memory_db_id1", "page"); // 在test1.ui.js里利用這個(gè)對(duì)象創(chuàng)建一個(gè)內(nèi)存數(shù)據(jù)庫,這個(gè)名字必須寫死是:memory: sqlite_app.open(":memory:"); // 創(chuàng)建表SQL語句 var stu_table = "drop table if exists stu_table;" // 內(nèi)存數(shù)據(jù)庫執(zhí)行速度快,可以嘗試都用同步 // 同步執(zhí)行一個(gè)SQL語句 sqlite_app.executeSync(stu_table); stu_table = "create table stu_table(_id integer primary key autoincrement,sname text,snumber text)"; // 同步執(zhí)行一個(gè)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')"; // 同步執(zhí)行一個(gè)SQL語句 sqlite_app.executeSync(stu_sql); // 在test2.ui.js里查詢?cè)趖est1.ui.js里創(chuàng)建的數(shù)據(jù)庫表 // 根據(jù)memory_db_id1這個(gè)標(biāo)示來獲取已經(jīng)創(chuàng)建好的sqlite對(duì)象 var sqlite_app = mm("do_SQLite", "memory_db_id1", "page"); // 創(chuàng)建查詢SQL語句 var stu_query = "select * from stu_table"; // 同步執(zhí)行一個(gè)查詢語句 var result = sqlite_app.querySync(stu_query); label.text = "在test2.ui.js里查詢?cè)趖est1.ui.js里創(chuàng)建的內(nèi)存數(shù)據(jù)庫表的第三條記錄\n" + JSON.stringify(result[2], null, 2)
數(shù)據(jù)傳遞
數(shù)據(jù)傳遞涉及到跨作用域,比如不同的ui文件傳遞數(shù)據(jù),不同的page傳遞數(shù)據(jù)。
其中最重要也是最常用的方式就是消息機(jī)制
1.消息機(jī)制
這個(gè)環(huán)節(jié)我們?cè)谖臋n再里詳細(xì)介紹。
總之,消息機(jī)制可以在跨ui作用域傳遞數(shù)據(jù),也可以跨page作用域傳遞數(shù)據(jù)。
2.openPage和closePage傳遞數(shù)據(jù)。
這個(gè)數(shù)據(jù)傳遞是跨page作用域,但是只限于相隔二層page之間。比如在page1的基礎(chǔ)上打開page2,page1把一些數(shù)據(jù)傳遞給page2;page2關(guān)閉自身,露出page1,又可以把數(shù)據(jù)傳遞回page1. 數(shù)據(jù)傳遞可以是任何json對(duì)象。
這是一個(gè)常規(guī)而且非常好的方式,建議都這么使用。
// 在index.ui.js里openPage頁面open_close_page/index.ui,傳遞數(shù)據(jù) 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 關(guān)閉的時(shí)候傳遞回來的數(shù)據(jù) page.on("result", function(data) { if (data) nf.alert(JSON.stringify(data, null, 2)); }) // 從index.ui.js傳遞過來的數(shù)據(jù)通過getData獲取值,可直接返回json對(duì)象 var data = page.getData(); label.text = "從index.ui.js傳遞過來的數(shù)據(jù)通過getData獲取值,可直接返回json對(duì)象 \n" + JSON.stringify(data, null, 2);// 格式化 function close_me() { // 關(guān)閉自身,把數(shù)據(jù)傳遞回下一層page app.closePage("我是從open_close_page/index.ui關(guān)閉的時(shí)候傳遞過來的數(shù)據(jù)"); }
關(guān)于本文給大家介紹的js數(shù)據(jù)共享和數(shù)據(jù)傳遞的相關(guān)知識(shí)就給大家介紹這么多,希望對(duì)大家有所幫助!
- IOS 應(yīng)用之間的跳轉(zhuǎn)和數(shù)據(jù)傳遞詳解
- Vuejs第九篇之組件作用域及props數(shù)據(jù)傳遞實(shí)例詳解
- Android開發(fā)之利用Intent實(shí)現(xiàn)數(shù)據(jù)傳遞的方法
- 基于startActivityForResult方法處理兩個(gè)Activity之間數(shù)據(jù)傳遞問題
- Android實(shí)現(xiàn)Activities之間進(jìn)行數(shù)據(jù)傳遞的方法
- Ruby on Rails中MVC結(jié)構(gòu)的數(shù)據(jù)傳遞解析
- jQuery學(xué)習(xí)筆記之 Ajax操作篇(二) - 數(shù)據(jù)傳遞
- asp.net不同頁面間數(shù)據(jù)傳遞的多種方法
- 解析activity之間數(shù)據(jù)傳遞方法的詳解
- 深入理解Activity之間的數(shù)據(jù)傳遞
- WinForm中窗體間的數(shù)據(jù)傳遞交互的一些方法
- Ajax中數(shù)據(jù)傳遞的另一種模式 javascript Object Notation思想(JSON)
- ASP.NET 頁面間數(shù)據(jù)傳遞方法小結(jié)
- C#中數(shù)據(jù)的傳遞以及ToolStripProgressBar
相關(guān)文章
javascript支持firefox,ie7頁面布局拖拽效果代碼
javascript 拖拽 頁面拖拽 拖拽效果的頁面 超級(jí)拖拽 javascript支持firefox,ie7頁面布局拖拽效果代碼 鼠標(biāo)拖拽2007-12-12JavaScript實(shí)現(xiàn)垂直向上無縫滾動(dòng)特效代碼
下面小編就為大家?guī)硪黄狫avaScript實(shí)現(xiàn)垂直向上無縫滾動(dòng)特效代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11使用 Opentype.js 生成字體子集的實(shí)例代碼詳解
這篇文章主要介紹了使用 Opentype.js 生成字體子集,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
![070823更新的一個(gè)[消息提示框]組件 兼容ie7](http://img.jbzj.com/images/xgimg/bcimg7.png)
070823更新的一個(gè)[消息提示框]組件 兼容ie7

ionic實(shí)現(xiàn)可滑動(dòng)的tab選項(xiàng)卡切換效果