官網(wǎng)原文:https://www.fusetools.com/learn/fusejs#reactive-operators
反應式操作符 Reactive operators
FuseJS配備了整套從其它Observable
生成新Observable
的反應式操作符,這意味著如果原始的Observable
發(fā)生了變化,則用反應式操作符生成的新的Observable
也會發(fā)生變化。
注意狞玛!只有當最后生成的
Observable
是被使用的溶耘,比如數(shù)據(jù)綁定或是需要它的值霹娄,反應式操作才會計算出結果去生成這個Observable
的值。舉例說权埠,如果你對一個Observable
集合用了map(func)操作零聚,然后想用console.log
在終端顯示出這個映射函數(shù)的結果宽闲,這些內(nèi)容可能不會顯示,這是因為作為結果的Observable
沒有做數(shù)據(jù)綁定握牧,遇到這種情況,你可以為了debug去手動添加一個訂戶娩梨。
where(condition)
將條件為真的值返回成一個新的Observable
沿腰。
新的Observable
時刻觀察著舊的Observable
, 當舊的值發(fā)生變化時,新的馬上隨之更新狈定。
fruits = Observable(
{ name: 'Apple' , color: 'red' },
{ name: 'Lemon' , color: 'yellow' },
{ name: 'Pear' , color: 'green' },
{ name: 'Banana', color: 'yellow' });
goodFruits = fruits.where(function(e){
return e.color === 'yellow';
});
如果根據(jù)條件產(chǎn)生了一個Observable
颂龙,where
操作符也會觀察這這個條件。
map(func)
對一個Observable
里的每個值都調(diào)用一遍參數(shù)函數(shù)纽什,結果返回成一個新的Observable
措嵌。
var numbers = Observable(1, 4, 9);
var roots = numbers.map(function(number) {
return Math.sqrt(number);
});
上例中,變量roots
里值由numbers
的數(shù)字求平方根組成芦缰,numbers
里的值保持不變企巢。
count()
從一個Observable
得出其包含值的總數(shù),然后存為另一個計數(shù)用的Observable
让蕾。當原來的Observable
新增或刪除項時浪规,計數(shù)的Observable
數(shù)字也隨之改變。
books = Observable("UX and you",
"Observing the observer",
"Documenting the documenter");
numBooks = books.count(); //result: 3
count(condition)
和上一條比探孝,多了一個過濾條件笋婿,意思是只有條件為true
的才計數(shù)。
not()
取反顿颅,將一個Observable
的相反值返回成新的Observable
, 比如一個Observable
的值為true
缸濒,則返回false
, 反之亦然。
falseValue = Observable(false);
trueValue = falseValue.not();
filter(condition)
只有通過給定條件的才會返回為另一個變種的Observable
,不然保持原有Observable
的值庇配。
這方法只用考慮Observalbe
的首值或單獨值斩跌。
expand(func)
將一個只包含一個數(shù)組的Observable
拆散,把數(shù)組里的所有值作為單獨項組合成另一個Observable
讨永。
Observable([1,2,3]).expand() -> Observable(1,2,3)
訂閱更新 Subscribing to updates
addSubscriber(func)
手動使一個Observable
對變化做反應滔驶,只需要使用addSubscriber
方法。這樣當發(fā)生變化時卿闹,func
就會運行揭糕。
removeSubscriber(func)
當對一個Observable
值操作完成后,注意別忘了刪除訂閱(subscription)锻霎,否則內(nèi)存垃圾會越來越多著角。
username.removeSubscriber(usernameLogger);
其它
depend()
failed(message)
setValueExclusive(value, excludingObserver)
給一個Observable
賦值而不通知excludingObserver
。
var observable = Observable(1);
var shouldGetNotification = function() { }
var shouldNotGetNotification = function() { }
observable.addSubscriber(shouldGetNotification);
observable.addSubscriber(shouldNotGetNotification);
observable.setValueExclusive(2, shouldNotGetNotification);
toString()
返回一個形容該Observable
的字符串旋恼,包括其內(nèi)容吏口。
var testObservable = Observable(1, "two", "3");
testObservable.toString(); // "(observable) 1,two,3"
話題
Observable
可以用來做很多事情:
- 數(shù)據(jù)綁定Data Binding
- 異步編程Asynchronous programming
- 反應式編程Reactive programming
APIs 應用程序編程接口
Polyfills 兼容代碼
FuseJS在所有支持平臺上的運行環(huán)境為EcmaScript5.1。這里沒有瀏覽器什么事兒冰更,F(xiàn)useJS只是提供了一個瀏覽器標準庫的子集产徊。為了讓第三方庫能工作,F(xiàn)useJS用一些Polyfills
兼容代碼提供特色功能蜀细,典型的就是瀏覽器的功能舟铜。這些代碼目前并不完備,所以有問題請到論壇發(fā)帖奠衔。
fetch
這是主要做HTTP request的方式谆刨。
下面是一個fetch
的示例,首先用一個JavaScript對象轉成JSON數(shù)據(jù)归斤,POST
到服務器端痊夭,然后服務器端返回JSON數(shù)據(jù),再轉成另一個JavaScript對象脏里。
var status = 0;
var response_ok = false;
fetch('http://example.com', {
method: 'POST',
headers: { "Content-type": "application/json"},
body: JSON.stringify(requestObject)
}).then(function(response) {
status = response.status; // Get the HTTP status code
response_ok = response.ok; // Is response.status in the 200-range?
return response.json(); // This returns a promise
}).then(function(responseObject) {
// Do something with the result
}).catch(function(err) {
// An error occured parsing Json
});
- 完整的
fetch
的文檔見于MDN她我。
XMLHttpRequest
FuseJS支持XMLHttpRequest
, 具體見MDN。
Promise
對于Promise
迫横,F(xiàn)useJS也有支持鸦难,具體見MDN。
setTimeout
延時兩秒再運行一個函數(shù):
setTimeout(function() { alert("Alert"); }, 2000);
用setTimeout
做一個循環(huán):
function poller() {
// Do work (...)
// And again in 1 second
setTimeout(poller, 1000);
}
- 關于
setTimeout
參見MDN
Storage
Storage
API可以用來將文本保存為應用目錄下的文件员淫。
var storage = require('FuseJS/Storage');
write 寫入
將字符串寫入指定的文件合蔽。
storage.write(filename, value)
-
filename
- 文件名 -
value
- 需要寫進文件的內(nèi)容
返回的是一個含有布爾值的Promise
, 可以告知內(nèi)容寫入文件成功與否。
storage.write("filename.txt", "filecontent");
read 讀取
storage.read(filename)
-
filename
- 要讀取的文件
返回的是一個包含文件內(nèi)容字符串的Promise
介返。
storage.read("filename.txt").then(function(content) {
console.log(content);
}, function(error) {
console.log(error);
});
保存文件的實際目錄在不同的平臺上也不盡相同拴事。
writeSync 同步寫
同步寫入數(shù)據(jù)到應用文件夾沃斤, 如成功寫入則返回true
:
var wasWritten = storage.writeSync("filename.txt", "filecontent");
警告:此調(diào)用易堵塞,如果寫入大量數(shù)據(jù)刃宵,請使用
Storage.write
衡瓶。
readSync 同步讀
在應用的文件夾里同步讀取文件內(nèi)的數(shù)據(jù):
var data = storage.readSync("filename.txt");
警告: 此調(diào)用易堵塞,如果讀取大量數(shù)據(jù)牲证,請使用
Storage.read
哮针。
deleteSync 同步刪
從應用的文件夾里刪除一個文件,成功后返回true
:
var data = storage.readSync("filename.txt");
Lifecycle 生命周期
用JavaScript響應Lifecycle
的事件:
var lifecycle = require('FuseJS/Lifecycle');
lifecycle.onEnteringForeground = function() {
initialize();
};
下列生命周期事件將被提升:
App的開始事件是隱式的坦袍,這就是當你的JS代碼頭一次被評估時十厢。
-
onEnteringForeground
- App脫離掛起狀態(tài),開始運行捂齐。App開始時可以得到該事件蛮放。 -
onEnteringBackground
- App脫離運行狀態(tài),將被掛起奠宜。 -
onEnteringInteractive
- App進入高度交互狀態(tài)包颁,開始接受事件。 -
onExitedInteractive
- App部分被遮蓋或不再是焦點狀態(tài)(比如你拖出系統(tǒng)通知欄的時候)压真。 -
onTerminating
- App將被關閉
Phone 電話
Phone
API用來初始化一個呼叫請求:
var phone = require('FuseJS/Phone');
phone.call("number");
Camera 攝像頭
可以讓你使用設備的攝像頭拍照娩嚼。
var camera = require('FuseJS/Camera');
示例:
camera.takePicture({ targetWidth: 640, targetHeight: 360}).then(function(file)
{
// file is a standard JavaScript File object
// file.path contains the path to the saved image on the device
}).catch(function(e) {
console.log(e);
});
如果不想根據(jù)EXIF數(shù)據(jù)自動地旋轉照片,你可以給原始請求加上一個correctOrientation
值滴肿。
takePicture function
用設備的攝像頭拍照岳悟;。
camera.takePicture({ targetWidth: width, targetHeight: height, correctOrientation: shouldCorrect })
選項對象包括下列屬性:
-
targetWidth
- 想要拍的照片寬度嘴高,單位為像素,如果省略和屎,缺省值為上次的拴驮。 -
targetHeight
- 想要拍的照片高度,單位為像素柴信,如果省略套啤,缺省值為上次的。 -
correctOrientation
- 如果想要糾正照片的朝向随常,就設為true
潜沦。
該方法在拍照成功后返回一個Promise
,最后生成一個file
對象指向存儲盤上的JPG圖片绪氛。
提示:targetWidth
和targetHeight
只是建議值唆鸡,最終拍攝的照片可能是任何尺寸。(WTFT娌臁)
Vibration
使用設備的震動功能争占。
var vibration = require('FuseJS/Vibration');
用例:
vibration.vibrate(0.8);
震動0.8秒燃逻。
InterApp
InterApp
模塊是專門為簡化App之間通訊而設計的。
var interApp = require('FuseJS/InterApp');
目前它就處理兩件事:
- 用一個Uri請求啟動另一個App
- 接受另一個App的Uri啟動請求
URI = Universal Resource Identifier 統(tǒng)一資源標識符
launchUri(uri)
用字符串參數(shù)調(diào)用該方法臂痕,F(xiàn)use就會請求系統(tǒng)打開目標App并處理Uri伯襟。
interApp.launchUri ('purple://some/uri')
onReceivedUri(uri)
這是一個回調(diào)函數(shù),用來告知其它App正用一個Uri啟動你的App握童。所以要接受這個通知姆怪,首先得給你的App定義一個Uri scheme
, How?Fuse里很簡單澡绩,只要在unoproj
文件的Mobile
字段加上一個UriScheme
元素即可稽揭,如下所示:
"Mobile": {
"UriScheme": "YourScheme",
...
},
就這樣,每當設備上一個有著YourScheme
字段的Uri
被打開時英古,你的App就會被打開淀衣,并用完整的Uri
調(diào)用onReceivedUri
回調(diào)函數(shù)。
當上面的調(diào)用發(fā)生時召调,如果你的App已經(jīng)打開了onReceivedUri
膨桥,這時App會暫時脫離交互模式,別擔心唠叛,這是完全正常的只嚣。
在你的JavaScript代碼里使用該回調(diào)函數(shù),如下所示:
var interApp = require('FuseJS/InterApp');
interApp.onReceivedUri = function(uri) {
console.log ("js recieved Uri: " + uri);
};