【譯】FuseJS簡介(中)

官網(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

StorageAPI可以用來將文本保存為應用目錄下的文件员淫。

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 電話

PhoneAPI用來初始化一個呼叫請求:

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圖片绪氛。

提示:targetWidthtargetHeight只是建議值唆鸡,最終拍攝的照片可能是任何尺寸。(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);
};
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末艺沼,一起剝皮案震驚了整個濱河市册舞,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌障般,老刑警劉巖调鲸,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異挽荡,居然都是意外死亡藐石,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門定拟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來于微,“玉大人,你說我怎么就攤上這事青自≈暌溃” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵延窜,是天一觀的道長恋腕。 經(jīng)常有香客問我,道長逆瑞,這世上最難降的妖魔是什么吗坚? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任祈远,我火速辦了婚禮,結果婚禮上商源,老公的妹妹穿的比我還像新娘车份。我一直安慰自己,他們只是感情好牡彻,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布扫沼。 她就那樣靜靜地躺著,像睡著了一般庄吼。 火紅的嫁衣襯著肌膚如雪缎除。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天总寻,我揣著相機與錄音器罐,去河邊找鬼。 笑死渐行,一個胖子當著我的面吹牛轰坊,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播祟印,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼肴沫,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蕴忆?” 一聲冷哼從身側響起颤芬,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎套鹅,沒想到半個月后站蝠,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡卓鹿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年菱魔,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片减牺。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡豌习,死狀恐怖存谎,靈堂內(nèi)的尸體忽然破棺而出拔疚,到底是詐尸還是另有隱情,我是刑警寧澤既荚,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布稚失,位于F島的核電站,受9級特大地震影響恰聘,放射性物質發(fā)生泄漏句各。R本人自食惡果不足惜吸占,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望凿宾。 院中可真熱鬧矾屯,春花似錦、人聲如沸初厚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽产禾。三九已至排作,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間亚情,已是汗流浹背妄痪。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留楞件,地道東北人衫生。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像履因,于是被迫代替她去往敵國和親障簿。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容