በጃቫ ስክሪፕት ውስጥ ያልተመሳሰለ ፕሮግራሚንግ (መልሶ መደወል፣ ቃል ኪዳን፣ RxJs)

ሰላም ሁላችሁም። ኦሜልኒትስኪ ሰርጌይ በመገናኘት ላይ። ብዙም ሳይቆይ በሪአክቲቭ ፕሮግራሚንግ ላይ ዥረት አስተናግጄ ነበር፣ እዚያም በጃቫ ስክሪፕት ስለ ተመሳሳይነት ተናግሬ ነበር። ዛሬ ይህንን ጽሑፍ ማጠቃለል እፈልጋለሁ.

ዋናውን ነገር ከመጀመራችን በፊት ግን መግቢያ ማድረግ አለብን። ስለዚህ በትርጉሞች እንጀምር፡ ቁልል እና ወረፋ ምንድን ናቸው?

ቁልል ንጥረ ነገሮቹ በ “በመጨረሻ፣ በመጀመሪያ ውጪ” LIFO መሠረት የተገኙ ስብስብ ነው።

መታጠፍ በመሠረታዊ መርህ ("መጀመሪያ ውስጥ ፣ መጀመሪያ ውጭ" FIFO) ንጥረ ነገሮቹ የተገኙት ስብስብ ነው።

እሺ፣ እንቀጥል።

ጃቫ ስክሪፕት ባለ አንድ ክር የፕሮግራም አወጣጥ ቋንቋ ነው። ይህ ማለት አንድ የአፈፃፀም ክር ብቻ እና አንድ ቁልል ያለው ተግባራት ለመፈጸም የሚሰለፉበት ነው። ስለዚህ ጃቫ ስክሪፕት በአንድ ጊዜ አንድ ኦፕሬሽን ብቻ ነው የሚሰራው ፣ሌሎች ኦፕሬሽኖች ደግሞ እስኪጠሩ ድረስ ተራቸውን ይጠብቃሉ።

የጥሪ ቁልል በቀላል አነጋገር እኛ ባለንበት ፕሮግራም ውስጥ ስላለው ቦታ መረጃን የሚመዘግብ የመረጃ መዋቅር ነው። ወደ ተግባር ዘልለን ከገባን መግቢያውን ወደ ቁልል አናት እንገፋዋለን። ከአንድ ተግባር ስንመለስ ከፍተኛውን ንጥረ ነገር ከቁልል ውስጥ እናወጣለን እና ይህን ተግባር ከየት እንደጠራን እንጨርሳለን። ቁልል ማድረግ የሚችለው ያ ብቻ ነው። እና አሁን በጣም አስደሳች ጥያቄ. ታዲያ እንዴት ነው ተመሳሳይነት በጃቫስክሪፕት የሚሰራው?

እንደውም ከቁልል በተጨማሪ አሳሾች WebAPI ከሚባለው ጋር ለመስራት ልዩ ወረፋ አላቸው። የዚህ ወረፋ ተግባራት በቅደም ተከተል የሚከናወኑት ቁልል ሙሉ በሙሉ ከተጣራ በኋላ ብቻ ነው። ከዚያ በኋላ ብቻ ከወረፋው ላይ ለግድያው ወደ ቁልል ላይ ይቀመጣሉ. በአሁኑ ጊዜ ቢያንስ አንድ ንጥረ ነገር ቁልል ላይ ካለ፣ ወደ ቁልል ውስጥ መግባት አይችሉም። በዚህ ምክንያት ብቻ ተግባራቱን በጊዜ ማብቂያ መጥራት በጊዜ ውስጥ ትክክል አይደለም ምክንያቱም ተግባሩ ሙሉ ሲሆን ከሰልፍ ወደ ቁልል መድረስ አይችልም።

እስቲ የሚከተለውን ምሳሌ እንመልከት እና ደረጃ በደረጃ እንለፍበት። በስርዓቱ ውስጥ ምን እንደሚፈጠርም እንይ.

console.log('Hi');
setTimeout(function cb1() {
    console.log('cb1');
}, 5000);
console.log('Bye');

1) እስካሁን ምንም እየተከሰተ አይደለም. የአሳሹ ኮንሶል ንጹህ ነው፣ የጥሪ ቁልል ባዶ ነው።

2) ከዚያም የትእዛዝ ኮንሶል.ሎግ('Hi') ወደ ጥሪ ቁልል ተጨምሯል።

3) ተፈጸመ

4) ከዚያ console.log ('Hi') ከጥሪ ቁልል ይወገዳል.

5) አሁን ወደ setTimeout(ተግባር cb1() {… }) ትዕዛዝ እንሂድ። ወደ ጥሪ ቁልል ተጨምሯል።

6) የ setTimeout(ተግባር cb1() {… }) ትዕዛዝ ተፈፅሟል። አሳሹ የድር ኤፒአይ አካል የሆነ ሰዓት ቆጣሪ ይፈጥራል። ቆጠራን ያከናውናል።

7) የ setTimeout(ተግባር cb1() {… }) ትእዛዝ ስራውን አጠናቅቆ ከጥሪ ቁልል ተወግዷል።

8) የኮንሶል.ሎግ('ባይ') ትዕዛዝ ወደ ጥሪ ቁልል ተጨምሯል።

9) የኮንሶል.ሎግ('ባይ') ትዕዛዝ ተፈፅሟል።

10) የትእዛዝ ኮንሶል.ሎግ('ባይ') ከጥሪ ቁልል ተወግዷል።

11) ቢያንስ 5000ms ካለፉ በኋላ የሰዓት ቆጣሪው ያበቃል እና cb1 መልሶ ጥሪ ወደ መልሶ ጥሪ ወረፋ ያስቀምጣል።

12) የክስተት loop ተግባር cb1ን ከመልስ ጥሪ ወረፋ ይወስዳል እና ወደ ጥሪ ቁልል ይገፋዋል።

13) የ cb1 ተግባር ተፈፀመ እና ኮንሶሶል.log ('cb1') ወደ የጥሪ ቁልል ይጨምራል።

14) የኮንሶል.ሎግ('cb1') ትዕዛዝ ተፈፅሟል።

15) የትእዛዝ ኮንሶል.ሎግ('cb1') ከጥሪ ቁልል ተወግዷል።

16) ተግባር cb1 ከጥሪ ቁልል ተወግዷል።

በዳይናሚክስ ውስጥ አንድ ምሳሌ እንመልከት፡-

ደህና፣ ተመሳሳይነት በጃቫስክሪፕት እንዴት እንደሚተገበር ተመልክተናል። አሁን ስለ አልተመሳሰል ኮድ ዝግመተ ለውጥ በአጭሩ እንነጋገር።

ያልተመሳሰለ ኮድ ዝግመተ ለውጥ።

a(function (resultsFromA) {
    b(resultsFromA, function (resultsFromB) {
        c(resultsFromB, function (resultsFromC) {
            d(resultsFromC, function (resultsFromD) {
                e(resultsFromD, function (resultsFromE) {
                    f(resultsFromE, function (resultsFromF) {
                        console.log(resultsFromF);
                    })
                })
            })
        })
    })
});

በጃቫስክሪፕት እንደምናውቀው ያልተመሳሰለ ፕሮግራሚንግ ሊሠራ የሚችለው በተግባሮች ብቻ ነው። እንደ ማንኛውም ተለዋዋጭ ወደ ሌሎች ተግባራት ሊተላለፉ ይችላሉ. መልሶ ጥሪ የተወለዱት በዚህ መንገድ ነው። እና ወደ ሀዘን ፣ ልቅነት እና ሀዘን እስኪቀየር ድረስ አሪፍ ፣ አስደሳች እና ግለት ነው። ለምን? አዎ ቀላል ነው፡-

• የኮዱ ውስብስብነት እያደገ ሲሄድ ፕሮጀክቱ በፍጥነት ወደ ግልጽ ያልሆኑ በርካታ ጎጆዎች - "የመልሶ ጥሪ ሲኦል" ይለወጣል.
• የስህተት አያያዝ በቀላሉ ሊታለፍ ይችላል.
• መግለጫዎችን በመመለስ መመለስ አይችሉም።

የተስፋ ቃል በመምጣቱ ሁኔታው ​​ትንሽ የተሻለ ሆኗል.

new Promise(function(resolve, reject) {
    setTimeout(() => resolve(1), 2000);

}).then((result) => {
    alert(result);
    return result + 2;

}).then((result) => {
    throw new Error('FAILED HERE');
    alert(result);
    return result + 2;

}).then((result) => {
    alert(result);
    return result + 2;

}).catch((e) => {
    console.log('error: ', e);
});

• የኮዱን ተነባቢነት የሚያሻሽል የተስፋ ሰንሰለቶች ታዩ
• ስህተቶችን ለመጥለፍ የተለየ ዘዴ ነበር።
• ትይዩ አፈጻጸም ከPromise.ሁሉም ታክሏል።
• የጎጆውን ያልተመሳሰለውን በአሲንክ/በመጠባበቅ መፍታት እንችላለን

የተስፋው ቃል ግን ውስን ነው። ለምሳሌ, ቃል ኪዳን, በከበሮ ሳይጨፍሩ, ሊሰረዙ አይችሉም, እና ከሁሉም በላይ, ከአንድ እሴት ጋር ይሰራል.

ደህና፣ እዚህ ያለችግር ምላሽ ሰጪ ፕሮግራሞችን እየቀረብን ነው። ደክሞኝል? ደህና፣ ጥሩው ነገር፣ አንዳንድ አንጓዎችን ለመፈልፈል፣ አእምሮን ለማፍሰስ እና የበለጠ ለማንበብ መመለስ ትችላለህ። እኔም እቀጥላለሁ።

ምላሽ ሰጪ ፕሮግራሚንግ - በመረጃ ፍሰቶች እና በለውጦች ስርጭት ላይ ያተኮረ የፕሮግራም አወጣጥ ሁኔታ። የውሂብ ዥረት ምን እንደሆነ ጠለቅ ብለን እንመርምር።

// Получаем ссылку на элемент
const input = ducument.querySelector('input');

const eventsArray = [];

// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
    event => eventsArray.push(event)
);

የግብአት መስክ እንዳለን እናስብ። ድርድር እንፈጥራለን፣ እና ለእያንዳንዱ የግቤት ክስተት ቁልፍ፣ ክስተቱን በድርድር ውስጥ እናከማቻለን። በተመሳሳይ ጊዜ, የእኛ ድርድር በጊዜ የተደረደረ መሆኑን ማስተዋል እፈልጋለሁ, ማለትም. የኋለኛው ክስተቶች መረጃ ጠቋሚ ከቀደምቶቹ መረጃ ጠቋሚ ይበልጣል። እንዲህ ዓይነቱ ድርድር ቀለል ያለ የውሂብ ፍሰት ሞዴል ነው, ግን ገና ፍሰት አይደለም. ይህ ድርድር ደህንነቱ በተጠበቀ ሁኔታ ዥረት ተብሎ እንዲጠራ፣ አዲስ ውሂብ ወደ ውስጥ እንደገባ ለተመዝጋቢዎች እንደምንም ማሳወቅ መቻል አለበት። ስለዚህም ወደ ፍሰቱ ፍቺ ደርሰናል።

የውሂብ ዥረት

const { interval } = Rx;
const { take } = RxOperators;

interval(1000).pipe(
    take(4)
)

ፍሰት ውሂቡ መለወጡን ሊያመለክት የሚችል በጊዜ የተደረደረ የውሂብ ድርድር ነው። አሁን ለአንድ ተግባር በተለያዩ የኮዱ ክፍሎች ውስጥ ብዙ ክስተቶችን ማስነሳት የሚያስፈልግዎትን ኮድ ለመፃፍ ምን ያህል ምቹ እንደሚሆን አስቡት። በቀላሉ ለዥረቱ ደንበኝነት እንመዘግባለን እና ለውጦች ሲከሰቱ ይነግረናል። እና የ RxJs ቤተ-መጽሐፍት ይህንን ማድረግ ይችላል።

RxJS ሊታዩ የሚችሉ ቅደም ተከተሎችን በመጠቀም ከተመሳሰሉ እና ክስተት-ተኮር ፕሮግራሞች ጋር አብሮ የሚሰራ ቤተ-መጽሐፍት ነው። ቤተ መፃህፍቱ ዋናውን አይነት ያቀርባል የሚታዘዝበርካታ ረዳት ዓይነቶች (ታዛቢዎች፣ መርሐ ግብሮች፣ ርዕሰ ጉዳዮች) እና ከክስተቶች ጋር ለመስራት ኦፕሬተሮች እንደ ስብስቦች (ካርታ፣ ማጣሪያ፣ መቀነስ፣ እያንዳንዱ እና ተመሳሳይ ከጃቫስክሪፕት አሬይ)።

የዚህን ቤተ-መጽሐፍት መሰረታዊ ፅንሰ-ሀሳቦች እንረዳ።

ታዛቢ፣ ታዛቢ፣ አዘጋጅ

የሚታይ የመጀመሪያው የመሠረት ዓይነት ነው የምንመለከተው። ይህ ክፍል የ RxJs አተገባበር ዋና አካል ይዟል። የደንበኝነት መመዝገቢያ ዘዴን ለመጠቀም መመዝገብ ከሚችል ከሚታይ ዥረት ጋር የተያያዘ ነው።

ታዛቢ ዝማኔዎችን ለመፍጠር ረዳት ዘዴን ይተገብራል ፣ የሚባሉት። ተመልካች. ለአንድ ታዛቢ የእሴቶች ምንጭ ይባላል ባለእንድስትሪ. ድርድር፣ ተደጋጋሚ፣ የድር ሶኬት፣ የሆነ አይነት ክስተት፣ ወዘተ ሊሆን ይችላል። ስለዚህ ታዛቢ ማለት በአምራች እና ታዛቢ መካከል መሪ ነው ማለት እንችላለን።

ሊታዩ የሚችሉ ሶስት አይነት ታዛቢ ክስተቶችን ያስተናግዳል።

• ቀጣይ - አዲስ ውሂብ
• ስህተት - በተለየ ምክንያት ቅደም ተከተል ከተቋረጠ ስህተት። ይህ ክስተት የቅደም ተከተል መጨረሻንም ያመለክታል።
• የተሟላ - ስለ ቅደም ተከተል መጨረሻ ምልክት. ይህ ማለት ምንም ተጨማሪ አዲስ ውሂብ አይኖርም

ማሳያ እንይ፡-

መጀመሪያ ላይ እሴቶቹን 1, 2, 3 እና ከ 1 ሰከንድ በኋላ እናስኬዳለን. 4 እናገኛለን እና ክርችንን እንጨርሳለን.

ጮክ ብሎ ማሰብ

እና ከዚያ ስለ እሱ ከመጻፍ ይልቅ መንገር የበለጠ አስደሳች እንደሆነ ተገነዘብኩ። 😀

የደንበኝነት ምዝገባ

ለዥረት ስንመዘግብ፣ አዲስ ክፍል እንፈጥራለን የደንበኝነት ምዝገባ, ይህም በዘዴ ከደንበኝነት ምዝገባ የመውጣት አማራጭ ይሰጠናል ከደንበኝነት ምዝገባ ይውጡ. ዘዴውን በመጠቀም የደንበኝነት ምዝገባዎችን መቧደን እንችላለን አክል. ደህና፣ በመጠቀም ክሮችን መከፋፈል መቻላችን ምክንያታዊ ነው። ማስወገድ. የማከል እና የማስወገድ ዘዴዎች የተለየ የደንበኝነት ምዝገባን እንደ ግብአት ይቀበላሉ። ከደንበኝነት ምዝገባ ስንወጣ ከሁሉም የህጻናት ምዝገባዎች የደንበኝነት ምዝገባ መውረጃ ዘዴን እንደሚጠሩት ሁሉ ከደንበኝነት ምዝገባ እንደምንወጣ ማስተዋል እፈልጋለሁ። ቀጥልበት.

የጅረቶች ዓይነቶች

ሙቅ
ቀዝቃዛ

ፕሮዲዩሰር ከሚታየው ውጭ የተፈጠረ ነው።
ፕሮዲዩሰር የተፈጠረው በሚታይ ውስጥ ነው።

መረጃው የሚታዘበው በሚፈጠርበት ጊዜ ይተላለፋል
ውሂብ በምዝገባ ጊዜ ይቀርባል።

ከደንበኝነት ምዝገባ ለመውጣት ተጨማሪ አመክንዮ ይፈልጋሉ
ክር በራሱ ይቋረጣል

ከአንድ እስከ ብዙ ግንኙነት ይጠቀማል
የአንድ ለአንድ ግንኙነት ይጠቀማል

ሁሉም የደንበኝነት ምዝገባዎች ተመሳሳይ ዋጋ አላቸው።
የደንበኝነት ምዝገባዎች ነጻ ናቸው

የደንበኝነት ምዝገባ ከሌለ ውሂብ ሊጠፋ ይችላል
ለአዲስ ምዝገባ ሁሉንም የዥረት ዋጋዎችን እንደገና ያወጣል።

ምሳሌ ለመስጠት፣ በሲኒማ ውስጥ እንዳለ ፊልም ያለ ትኩስ ዥረት በዓይነ ሕሊናዬ ይታየኛል። በስንት ሰአት መጣህ ከዛ ቅጽበት ጀምሮ ማየት ጀመርክ። ቀዝቃዛውን ዥረት ከጥሪ ጋር አወዳድር ነበር። ድጋፍ. ማንኛውም ደዋይ ከመጀመሪያው እስከ መጨረሻው የመልስ ማሽን ቀረጻውን ያዳምጣል፣ ነገር ግን ከደንበኝነት ምዝገባ በመውጣት መዝጋት ይችላሉ።

ሞቃታማ ጅረቶች የሚባሉትም እንዳሉ ልብ ማለት እፈልጋለሁ (ይህን የመሰለ ፍቺ በጣም አልፎ አልፎ እና በውጭ ማህበረሰቦች ውስጥ ብቻ ነው ያጋጠመኝ) - ይህ ከቀዝቃዛ ጅረት ወደ ሙቅ ውሃ የሚቀየር ጅረት ነው። ጥያቄው የሚነሳው - ​​የት እንደሚጠቀሙበት)) ከተግባር አንድ ምሳሌ እሰጣለሁ.

ከአንግላር ጋር እየሰራሁ ነው። እሱ rxjs በንቃት ይጠቀማል። ወደ አገልጋዩ መረጃ ለማግኘት፣ ቀዝቃዛ ዥረት እጠብቃለሁ እና ይህን ዥረት asyncPipe በመጠቀም በአብነት ውስጥ እጠቀማለሁ። ይህንን ፓይፕ ብዙ ጊዜ ከተጠቀምኩኝ፣ ወደ ቀዝቃዛ ዥረት ፍቺ ስመለስ፣ እያንዳንዱ ቧንቧ ከአገልጋዩ መረጃን ይጠይቃል፣ ይህም በትንሹ ለመናገር እንግዳ ነው። እና ቀዝቃዛ ዥረት ወደ ሙቅ ከሆነ, ጥያቄው አንድ ጊዜ ይከሰታል.

በአጠቃላይ የፍሰቶችን አይነት መረዳት ለጀማሪዎች በጣም ከባድ ነው፣ነገር ግን አስፈላጊ ነው።

ከዋኞች

return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
    .pipe(
        tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
        map(({ data }: TradeCompanyList) => data)
    );

ኦፕሬተሮች ከዥረቶች ጋር ለመስራት እድል ይሰጡናል። በ Observable ውስጥ የሚፈሱትን ክስተቶች ለመቆጣጠር ይረዳሉ. በጣም ተወዳጅ የሆኑትን ጥንዶች እንመለከታለን, እና ስለ ኦፕሬተሮች ተጨማሪ መረጃ ጠቃሚ በሆኑ መረጃዎች ውስጥ ባሉ አገናኞች ውስጥ ይገኛል.

ኦፕሬተሮች - የ

በረዳት ኦፕሬተር እንጀምር። በቀላል እሴት ላይ የተመሰረተ ታዛቢ ይፈጥራል።

ኦፕሬተሮች-ማጣሪያ

የማጣሪያ ኦፕሬተር, ስሙ እንደሚያመለክተው, የዥረት ምልክትን ያጣራል. ኦፕሬተሩ እውነትን ከመለሰ፣ ከዚያም የበለጠ ይዘላል።

ኦፕሬተሮች - ይውሰዱ

መውሰድ - የመልቀቂያዎችን ቁጥር ዋጋ ይወስዳል, ከዚያ በኋላ ዥረቱ ያበቃል.

ኦፕሬተሮች-debounceTime

debounceTime - በተጠቀሰው የጊዜ ልዩነት ውስጥ በውጤት ውሂብ መካከል የሚወድቁትን የወጡ እሴቶችን ያስወግዳል - የጊዜ ክፍተቱ ካለፈ በኋላ የመጨረሻውን እሴት ያወጣል።

const { Observable } = Rx;
const { debounceTime, take } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  observer.next(i++);
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next(i++)
  }, 1000);

 // Испускаем значение раз в 1500мс
  setInterval(() => {
    observer.next(i++)
  }, 1500);
}).pipe(
  debounceTime(700),  // Ожидаем 700мс значения прежде чем обработать
  take(3)
);  

ኦፕሬተሮች-የሚወስዱት ጊዜ

ውሸት እስኪመለስ ድረስ እሴቶችን ያወጣል፣ ከዚያ ከክሩ ደንበኝነት ምዝገባ ይወጣል።

const { Observable } = Rx;
const { debounceTime, takeWhile } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  observer.next(i++);
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next(i++)
  }, 1000);
}).pipe(
  takeWhile( producer =>  producer < 5 )
);  

ኦፕሬተሮች-የቅርብ ጊዜን ያጣምሩ

የተጣመረ ኦፕሬተር የቅርብ ጊዜው ከተስፋ ጋር በተወሰነ መልኩ ይመሳሰላል። በርካታ ዥረቶችን ወደ አንድ ያጣምራል። እያንዳንዱ ክር ቢያንስ አንድ ልቀት ከሰራ በኋላ የቅርብ ጊዜዎቹን እሴቶች እንደ ድርድር እናገኛለን። በተጨማሪም፣ ከተጣመሩ ጅረቶች ማንኛውም ልቀት በኋላ፣ አዳዲስ እሴቶችን ይሰጣል።

const { combineLatest, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
});

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 750мс
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
});

combineLatest(observer_1, observer_2).pipe(take(5));

ኦፕሬተሮች-ዚፕ

ዚፕ - ከእያንዳንዱ ዥረት ዋጋን ይጠብቃል እና በእነዚህ እሴቶች ላይ በመመስረት ድርድር ይመሰርታል። እሴቱ ከማንኛውም ክር የማይመጣ ከሆነ, ቡድኑ አይፈጠርም.

const { zip, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
});

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 750
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
});

const observer_3 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 500
  setInterval(() => {
    observer.next('c: ' + i++);
  }, 500);
});

zip(observer_1, observer_2, observer_3).pipe(take(5));

ኦፕሬተሮች - forkJoin

forkJoin እንዲሁ ክሮችን ይቀላቀላል፣ ነገር ግን ሁሉም ክሮች ሲጠናቀቁ ብቻ ዋጋ ያወጣል።

const { forkJoin, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
}).pipe(take(3));

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 750
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
}).pipe(take(5));

const observer_3 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 500
  setInterval(() => {
    observer.next('c: ' + i++);
  }, 500);
}).pipe(take(4));

forkJoin(observer_1, observer_2, observer_3);

ኦፕሬተሮች-ካርታ

የካርታ ትራንስፎርሜሽን ኦፕሬተር የኤሚት እሴቱን ወደ አዲስ ይለውጠዋል።

const {  Observable } = Rx;
const { take, map } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next(i++);
  }, 1000);
}).pipe(
  map(x => x * 10),
  take(3)
);

ኦፕሬተሮች - ማጋራት ፣ መታ ያድርጉ

የቧንቧ አሠሪው የጎንዮሽ ጉዳቶችን ማለትም በቅደም ተከተል ላይ ተጽዕኖ የማያሳድሩ ማናቸውንም ድርጊቶች እንዲያደርጉ ይፈቅድልዎታል.

የአክሲዮን መገልገያ ኦፕሬተር ቀዝቃዛ ዥረት ወደ ሙቅ ዥረት ሊለውጠው ይችላል።

ኦፕሬተሮች ተከናውነዋል. ወደ ርዕሰ ጉዳይ እንሂድ።

ጮክ ብሎ ማሰብ

እና ከዚያ ሻይ ለመጠጣት ሄድኩኝ. እነዚህ ምሳሌዎች ደክሞኛል 😀

ርዕሰ ጉዳይ ቤተሰብ

የርዕሰ ጉዳይ ቤተሰብ የሙቅ ክር ዋና ምሳሌ ነው። እነዚህ ክፍሎች በአንድ ጊዜ እንደ ታዛቢ እና ተመልካች ሆነው የሚያገለግሉ ድቅል ዓይነት ናቸው። ርዕሰ ጉዳዩ ትኩስ ዥረት ስለሆነ ከደንበኝነት ምዝገባ መውጣት አለበት። ስለ ዋናዎቹ ዘዴዎች ከተነጋገርን, እነዚህ ናቸው.

• ቀጣይ - አዲስ ውሂብ ወደ ዥረቱ ማስተላለፍ
• ስህተት - ስህተት እና ክር መቋረጥ
• የተጠናቀቀ - ክር መጨረሻ
• ይመዝገቡ - ለዥረት ይመዝገቡ
• ከደንበኝነት ምዝገባ ይውጡ - ከዥረቱ ደንበኝነት ይውጡ
• እንደ ታዛቢ - ወደ ተመልካችነት መለወጥ
• ቃል መግባት - ወደ ቃል ኪዳን ይለወጣል

4 5 ዓይነት ዓይነቶችን ይመድቡ.

ጮክ ብሎ ማሰብ

በዥረቱ ላይ 4 አልኩ፣ ግን አንድ ተጨማሪ ጨመሩበት። ኑሩ እና ተማሩ እንደሚባለው.

ቀላል ርዕሰ ጉዳይ new Subject()- በጣም ቀላሉ የትምህርት ዓይነቶች። ያለ መለኪያዎች የተፈጠረ። ከደንበኝነት ምዝገባው በኋላ የመጡትን እሴቶች ያልፋል።

የባህሪ ርዕሰ ጉዳይ new BehaviorSubject( defaultData<T> ) - በእኔ አስተያየት በጣም የተለመደው የርእሰ ጉዳይ አይነት. ግቤት ነባሪውን ዋጋ ይወስዳል። ለደንበኝነት ሲመዘገቡ የሚተላለፈውን የመጨረሻውን እትም ውሂብ ሁልጊዜ ያስቀምጣል. ይህ ክፍል የዥረቱን የአሁኑን ዋጋ የሚመልስ ጠቃሚ የእሴት ዘዴም አለው።

ርዕሰ ጉዳይ እንደገና አጫውት። new ReplaySubject(bufferSize?: number, windowTime?: number) - እንደ አማራጭ ፣ በራሱ ውስጥ የሚያከማችውን የእሴቶች ቋት መጠን እና ለሁለተኛ ጊዜ ለውጦች የምንፈልገውን እንደ መጀመሪያው ክርክር ሊወስድ ይችላል።

ተመሳሳይነት ያለው ርዕሰ ጉዳይ new AsyncSubject() - ለደንበኝነት ሲመዘገቡ ምንም ነገር አይከሰትም, እና እሴቱ ሲጠናቀቅ ብቻ ይመለሳል. የዥረቱ የመጨረሻ ዋጋ ብቻ ይመለሳል።

WebSocket ርዕሰ ጉዳይ new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - ሰነዱ ስለእሱ ፀጥ ይላል እና እኔ ራሴ ለመጀመሪያ ጊዜ አየሁት። የሚሠራውን ማን ያውቃል, ይጽፋል, እንጨምራለን.

ፊው. እንግዲህ ዛሬ ልነግራት የፈለኩትን ሁሉ ተመልክተናል። ይህ መረጃ ጠቃሚ ነበር ብለን ተስፋ እናደርጋለን። ጠቃሚ መረጃ በሚለው ትር ውስጥ የስነ-ጽሑፍ ዝርዝርን በራስዎ ማንበብ ይችላሉ.

አጋዥ መረጃ

• የዥረት አገናኝ
• JS እንዴት እንደሚሰራ፡ ስለ ሞተሩ አጠቃላይ እይታ፣ የሩጫ ጊዜ ስልቶች፣ የጥሪ ቁልል
• JS እንዴት እንደሚሰራ፡ የክስተት ሉፕ፣ አሲንክ እና ኮድዎን በአsync/በመጠባበቅ የሚሻሻልባቸው አምስት መንገዶች
• የክስተት Loop በJavaSript ውስጥ እንዴት እንደሚሰራ
• ያልተመሳሰለ ጃቫስክሪፕት ዝግመተ ለውጥ
• RxJS ምንድን ነው እና ለምን ስለእሱ ማወቅ ጠቃሚ ነው።
  
• የ RxJS ተግባራዊ መተግበሪያ
• RxJS ታዛቢዎች አጋዥ ስልጠና - ለተመልካቾች መፍጠር እና መመዝገብ
• RXJS: ሙቅ እና ቀዝቃዛ ታዛቢዎች
• ክፍሎች ፣ ታዛቢ ለመፍጠር ተግባራት። ኦፕሬተሮች.
• RxJS ኦፕሬተሮች በምሳሌ
• የኤፒአይ ዝርዝር
• በ RxJS ውስጥ የርዕሰ ጉዳይ እና የጊዜ ሰሌዳ ልዩነቶች

ምንጭ: hab.com