RxJS 學習之旅 實現簡易RxJS

本片文章主要通過實現rxjs一些簡單操作符，來進一步了解rxjs

你應該了解的函式實現與組合應用

初識rxjs與搭建倉庫

rxjs基礎概念與使用

操作符篇

簡易實現observable

本篇文章可以學到什麼?

深入了解observablejs 基礎知識(類、原型)

observable 即rxjs世界中的生產者:

它其實是乙個建構函式並接收訂閱者的引數，

提供例項方法讓其可以訂閱(foreach)

function

observable
(foreach)

接收引數形式有兩種:

onnext、onerror,oncompleted函式，

或者,onerror(){},oncompleted(){}}

呼叫建構函式並傳遞如下格式資料,onerror(){},oncompleted(){}}

observable.prototype=

,()=>{},..)if(
typeof onnext===
'function'),
oncompleted:oncompleted||
function()
})}// call is foreach(,onerror:()=>{}})
elseif(
typeof onnext===
'object'
)else
}}

const observable=

newobservable
(subscriber=>
,1000)}
)observable.
foreach(,
onerror()
,oncompleted()
})

返回的例項提供dispose方法用於取消監聽

observable.

fromevent
=function
(dom,eventname)}}
)}

**tip:**返回例項的目前是為了鏈式呼叫

observable.prototype=

)=>)}
)},filter
(conditionfunction)},
(e)=>observer.
onerror
(e),()
=>observer.
oncompleted()
)})}
,take
(num)},
function
onerror
(e),
function
oncompleted()
);return subscription;})
}}

const btn=document.

getelementbyid
('clickbtn');
const $btn=observable.
fromevent
(btn,
'click').
filter
(e=>e.pagex>20)
.map
(e=>e.pagex+
"px").
take(1
)const subscription=$btn.
foreach(,
onerror
(e),
oncompleted()
})

上面是本篇文章的全部內容,這只是乙個簡單的demo和基礎操作符的實現,其它操作符可以自行探索～

es6+ typescript版本

inte***ce

observer
inte***ce
unsubscribable
type isubscribe
=(p: observer)
=> unsubscribable
class
observable
public
subscribe
(observer)
map(projectionfunction)
)=>
catch
(error)}
,...otherprops
});return subscription;})
}filter
(conditionfunction)},
error
(e),
completed()
})})
}take
(num)},
error
(e),
completed()
});return subscription;})
}retry
(num)
,completed()
,error
(err)
else}}
)}processrequest
(num)
;return currentsub
})}static
concat
(...observables)
else
,error
(err)
,completed()
})}}
processobservable()
return}}
)}static
fromevent
(dom: htmlelement, eventname)}}
)}static
timeout
(time)
, time)
;return}}
)}}// *****************
// 用於測試
// *****************
var btn = document.
getelementbyid
('clickbtn');
var ob = observable.
fromevent
(btn,
'click').
filter
(e => e.pagex >20)
.map
(e => e.pagex +
"px").
take(1
)// var ob=observable.timeout(500);
const subscription = ob.
subscribe(,
completed()
})

Unity Shader學習 簡易PBS實現

簡單根據公式實現了一下基於物理的著色，坑的地方還是有不少，單純的公式搬過來效果會不正確，這裡根據網上資料以及自己調整稍微修改了一下部分計算。高光項 cook torrance，漫反射項 disney 左邊為實現的效果，右邊為unity2017自帶standard shader部分 shader un...

rax學習（二） 實現乙個簡易的TodoList

rax系列由易到難完成一些小demo來培養學習的興趣。後面會講一些自己對rax框架的認識和理解，學習完成一些示例之後會開始研究原始碼實現以及rax為什麼能相容多端。todolist是乙個簡單的小例子，可以算作是學習rax練手的demo。環境和前一篇相同,輸入完成新增一項，並且清除輸入框 點選項加刪除...

QT學習之路 5 乙個簡易畫板的實現

1 設計用乙個繼承qmainwindow的類作為整個畫板程式的主介面，乙個繼承qwidget的類作為畫板，然後乙個shape基類，另外有很多圖形類繼承了這個基類。這是程式的整體框架。2 細節方面，在主介面類中定義了很多個action，每個action就是乙個畫一種圖形的操作，然後定義了訊號和槽函式，...