patron-oop 1.45.0 → 1.46.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (140) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/patron.cjs +106 -35
  3. package/dist/patron.cjs.map +1 -1
  4. package/dist/patron.d.ts +40 -1
  5. package/dist/patron.js +103 -36
  6. package/dist/patron.js.map +1 -1
  7. package/dist/patron.min.js +1 -1
  8. package/dist/patron.min.mjs +1 -1
  9. package/dist/patron.min.mjs.map +1 -1
  10. package/dist/patron.mjs +103 -36
  11. package/dist/patron.mjs.map +1 -1
  12. package/docs/README.md +3 -0
  13. package/docs/assets/css/base.css +42 -0
  14. package/docs/assets/favicon/android-icon-144x144.png +0 -0
  15. package/docs/assets/favicon/android-icon-192x192.png +0 -0
  16. package/docs/assets/favicon/android-icon-36x36.png +0 -0
  17. package/docs/assets/favicon/android-icon-48x48.png +0 -0
  18. package/docs/assets/favicon/android-icon-72x72.png +0 -0
  19. package/docs/assets/favicon/android-icon-96x96.png +0 -0
  20. package/docs/assets/favicon/apple-icon-114x114.png +0 -0
  21. package/docs/assets/favicon/apple-icon-120x120.png +0 -0
  22. package/docs/assets/favicon/apple-icon-144x144.png +0 -0
  23. package/docs/assets/favicon/apple-icon-152x152.png +0 -0
  24. package/docs/assets/favicon/apple-icon-180x180.png +0 -0
  25. package/docs/assets/favicon/apple-icon-57x57.png +0 -0
  26. package/docs/assets/favicon/apple-icon-60x60.png +0 -0
  27. package/docs/assets/favicon/apple-icon-72x72.png +0 -0
  28. package/docs/assets/favicon/apple-icon-76x76.png +0 -0
  29. package/docs/assets/favicon/apple-icon-precomposed.png +0 -0
  30. package/docs/assets/favicon/apple-icon.png +0 -0
  31. package/docs/assets/favicon/browserconfig.xml +2 -0
  32. package/docs/assets/favicon/favicon-16x16.png +0 -0
  33. package/docs/assets/favicon/favicon-32x32.png +0 -0
  34. package/docs/assets/favicon/favicon-96x96.png +0 -0
  35. package/docs/assets/favicon/favicon.ico +0 -0
  36. package/docs/assets/favicon/manifest.json +41 -0
  37. package/docs/assets/favicon/ms-icon-144x144.png +0 -0
  38. package/docs/assets/favicon/ms-icon-150x150.png +0 -0
  39. package/docs/assets/favicon/ms-icon-310x310.png +0 -0
  40. package/docs/assets/favicon/ms-icon-70x70.png +0 -0
  41. package/docs/assets/img/404.jpg +0 -0
  42. package/docs/assets/img/angular_16.jpg +0 -0
  43. package/docs/assets/img/angular_32.jpg +0 -0
  44. package/docs/assets/img/eo_16.jpg +0 -0
  45. package/docs/assets/img/eo_big.png +0 -0
  46. package/docs/assets/img/github_16.jpg +0 -0
  47. package/docs/assets/img/logo.jpg +0 -0
  48. package/docs/assets/img/philosofy/observable.jpg +0 -0
  49. package/docs/assets/img/philosofy/responsible.jpg +0 -0
  50. package/docs/assets/img/philosofy/result.jpg +0 -0
  51. package/docs/assets/img/philosofy/tell.jpg +0 -0
  52. package/docs/assets/img/react_16.jpg +0 -0
  53. package/docs/assets/img/react_32.jpg +0 -0
  54. package/docs/assets/img/vue_16.jpg +0 -0
  55. package/docs/assets/img/vue_32.jpg +0 -0
  56. package/docs/assets/js/components/linkDynamic.mjs +11 -0
  57. package/docs/assets/js/components/linkReloadable.mjs +13 -0
  58. package/docs/assets/js/entrypoints/compatibility.mjs +31 -0
  59. package/docs/assets/js/entrypoints/components.mjs +2 -0
  60. package/docs/assets/js/entrypoints/examples.mjs +25 -0
  61. package/docs/assets/js/entrypoints/factory.mjs +20 -0
  62. package/docs/assets/js/entrypoints/guest.mjs +61 -0
  63. package/docs/assets/js/entrypoints/index.mjs +110 -0
  64. package/docs/assets/js/entrypoints/integrations.mjs +36 -0
  65. package/docs/assets/js/entrypoints/patron.mjs +46 -0
  66. package/docs/assets/js/entrypoints/source.mjs +76 -0
  67. package/docs/assets/js/entrypoints/terminology.mjs +51 -0
  68. package/docs/assets/js/entrypoints/utils.mjs +61 -0
  69. package/docs/assets/js/lib/StyleFetched.mjs +14 -0
  70. package/docs/assets/js/routing.mjs +110 -0
  71. package/docs/assets/schemes/dip.html +28 -0
  72. package/docs/favicon.ico +0 -0
  73. package/docs/index-dev.html +346 -0
  74. package/docs/index.html +346 -0
  75. package/docs/manifest.json +41 -0
  76. package/docs/pages/404.html +9 -0
  77. package/docs/pages/common/layout.html +17 -0
  78. package/docs/pages/compatibility/dip.html +82 -0
  79. package/docs/pages/compatibility/elegant-objects.html +373 -0
  80. package/docs/pages/compatibility/layout.html +17 -0
  81. package/docs/pages/examples/errors.html +167 -0
  82. package/docs/pages/examples/index.html +10 -0
  83. package/docs/pages/examples.html +41 -0
  84. package/docs/pages/factory/index.html +18 -0
  85. package/docs/pages/factory.html +36 -0
  86. package/docs/pages/guest/guest-applied.html +51 -0
  87. package/docs/pages/guest/guest-cast.html +219 -0
  88. package/docs/pages/guest/guest-disposable.html +147 -0
  89. package/docs/pages/guest/guest-executor-applied.html +65 -0
  90. package/docs/pages/guest/guest-object.html +101 -0
  91. package/docs/pages/guest/guest-pool.html +107 -0
  92. package/docs/pages/guest/guest-sync.html +66 -0
  93. package/docs/pages/guest/index.html +115 -0
  94. package/docs/pages/guest.html +59 -0
  95. package/docs/pages/index.html +72 -0
  96. package/docs/pages/integrations/angular.html +5 -0
  97. package/docs/pages/integrations/layout.html +17 -0
  98. package/docs/pages/integrations/react.html +7 -0
  99. package/docs/pages/integrations/vue.html +102 -0
  100. package/docs/pages/patron/index.html +140 -0
  101. package/docs/pages/patron/patron-applied.html +66 -0
  102. package/docs/pages/patron/patron-executor-applied.html +94 -0
  103. package/docs/pages/patron/patron-once.html +110 -0
  104. package/docs/pages/patron/patron-pool.html +99 -0
  105. package/docs/pages/patron.html +50 -0
  106. package/docs/pages/philosofy.html +210 -0
  107. package/docs/pages/source/index.html +167 -0
  108. package/docs/pages/source/source-active.html +113 -0
  109. package/docs/pages/source/source-all.html +129 -0
  110. package/docs/pages/source/source-applied.html +73 -0
  111. package/docs/pages/source/source-dynamic.html +93 -0
  112. package/docs/pages/source/source-executor-applied.html +64 -0
  113. package/docs/pages/source/source-map.html +192 -0
  114. package/docs/pages/source/source-once.html +73 -0
  115. package/docs/pages/source/source-race.html +171 -0
  116. package/docs/pages/source/source-sequence.html +160 -0
  117. package/docs/pages/source/source-with-pool.html +102 -0
  118. package/docs/pages/source/source.html +167 -0
  119. package/docs/pages/source.html +68 -0
  120. package/docs/pages/terminology/guest.html +14 -0
  121. package/docs/pages/terminology/index.html +6 -0
  122. package/docs/pages/terminology/introduction.html +25 -0
  123. package/docs/pages/terminology/patron.html +10 -0
  124. package/docs/pages/terminology/source.html +55 -0
  125. package/docs/pages/terminology/visitor.html +19 -0
  126. package/docs/pages/terminology.html +53 -0
  127. package/docs/pages/utils/give.html +47 -0
  128. package/docs/pages/utils/index.html +24 -0
  129. package/docs/pages/utils/is-guest-aware.html +22 -0
  130. package/docs/pages/utils/is-guest.html +21 -0
  131. package/docs/pages/utils/is-patron-in-pools.html +53 -0
  132. package/docs/pages/utils/private.html +44 -0
  133. package/docs/pages/utils/remove-patron-from-pools.html +57 -0
  134. package/docs/pages/utils/value.html +47 -0
  135. package/docs/pages/utils.html +61 -0
  136. package/eslint.config.mjs +6 -0
  137. package/package.json +1 -1
  138. package/src/Patron/PatronApplied.ts +22 -0
  139. package/src/Patron/PatronExecutorApplied.ts +25 -0
  140. package/src/index.ts +4 -0
@@ -0,0 +1,167 @@
1
+ <h1 class="pb-3 text-xl font-semibold text-gray-600">Обработка ошибок</h1>
2
+
3
+ <p class="text-gray-600 text-lg mb-4">
4
+ При разработке приложений мы можем сделать общие точки перехвата ошибок,
5
+ например, с помощью window.onerror или window.onunhandledrejection(Для
6
+ промисов). Также можно использовать обработку ошибок через try-catch если
7
+ нужно детализировать ошибку.
8
+ </p>
9
+
10
+ <p class="text-gray-600 text-lg mb-4">
11
+ В этом разделе рассмотрим подход при котором класс заранее объявляет, что ему
12
+ нужен гость для передачи сообщений ошибок.
13
+ </p>
14
+
15
+ <p class="text-gray-600 text-lg mb-1 font-bold">Результат 1.</p>
16
+ <button
17
+ class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4"
18
+ onclick="random.do()"
19
+ >
20
+ Случайное число
21
+ </button>
22
+ <div class="example mb-4">
23
+ <div>
24
+ <b>Число:</b>
25
+ <span class="guest-result"> Нажмите кнопку "Случайное число" </span>
26
+ </div>
27
+ <div>
28
+ <b>Сообщение:</b>
29
+ <span class="guest-message"> нет сообщений </span>
30
+ </div>
31
+ <div><b>Ошибка: </b><span class="guest-error"> нет ошибок </span></div>
32
+ </div>
33
+
34
+ <p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
35
+ <pre
36
+ class="mb-4"
37
+ ><code class="language-js">import { SourceActive, SourceEmpty, GuestCast, Patron } from "patron-oop";
38
+
39
+ class Random {
40
+ constructor(till) {
41
+ this.activeSource = new SourceActive((_, source) => {
42
+ source.give(Math.round(Math.random() * till));
43
+ });
44
+ }
45
+
46
+ do() {
47
+ this.activeSource.do();
48
+ return this;
49
+ }
50
+
51
+ value(guest) {
52
+ this.activeSource.value(guest);
53
+ return this;
54
+ }
55
+ }
56
+
57
+ window.random = new Random(99);
58
+
59
+ class EvenNumberMessage {
60
+ constructor(baseNumber, errorGuest) {
61
+ this.baseNumber = baseNumber;
62
+ this.errorGuest = errorGuest;
63
+ }
64
+
65
+ value(guest) {
66
+ this.baseNumber.value(
67
+ new GuestCast(guest, (value) => {
68
+ if (value % 2 === 0) {
69
+ guest.give(`${value} - четное!`);
70
+ } else {
71
+ this.errorGuest.give(`${value} - не четное!`);
72
+ }
73
+ })
74
+ );
75
+ return this;
76
+ }
77
+ }
78
+
79
+ const randomErrors = new SourceEmpty();
80
+ const randomMessage = new EvenNumberMessage(random, randomErrors);
81
+
82
+ random.value(
83
+ new Patron((val) => {
84
+ document.querySelector(".guest-result").textContent = val;
85
+ })
86
+ );
87
+ randomMessage.value(
88
+ new Patron((val) => {
89
+ document.querySelector(".guest-message").textContent = val;
90
+ })
91
+ );
92
+ randomErrors.value(
93
+ new Patron((val) => {
94
+ document.querySelector(".guest-error").textContent = val;
95
+ })
96
+ );
97
+ </code></pre>
98
+
99
+ <script type="module">
100
+ import { SourceActive, SourceEmpty, GuestCast, Patron } from "patron-oop";
101
+
102
+ class Random {
103
+ constructor(till) {
104
+ this.activeSource = new SourceActive((_, source) => {
105
+ source.give(Math.round(Math.random() * till));
106
+ });
107
+ }
108
+
109
+ do() {
110
+ this.activeSource.do();
111
+ return this;
112
+ }
113
+
114
+ value(guest) {
115
+ this.activeSource.value(guest);
116
+ return this;
117
+ }
118
+ }
119
+
120
+ window.random = new Random(99);
121
+
122
+ class EvenNumberMessage {
123
+ constructor(baseNumber, errorGuest) {
124
+ this.baseNumber = baseNumber;
125
+ this.errorGuest = errorGuest;
126
+ }
127
+
128
+ value(guest) {
129
+ this.baseNumber.value(
130
+ new GuestCast(guest, (value) => {
131
+ if (value % 2 === 0) {
132
+ guest.give(`${value} - четное!`);
133
+ } else {
134
+ this.errorGuest.give(`${value} - не четное!`);
135
+ }
136
+ })
137
+ );
138
+ return this;
139
+ }
140
+ }
141
+
142
+ const randomErrors = new SourceEmpty();
143
+ const randomMessage = new EvenNumberMessage(random, randomErrors);
144
+
145
+ random.value(
146
+ new Patron((val) => {
147
+ document.querySelector(".guest-result").textContent = val;
148
+ })
149
+ );
150
+ randomMessage.value(
151
+ new Patron((val) => {
152
+ document.querySelector(".guest-message").textContent = val;
153
+ })
154
+ );
155
+ randomErrors.value(
156
+ new Patron((val) => {
157
+ document.querySelector(".guest-error").textContent = val;
158
+ })
159
+ );
160
+ </script>
161
+
162
+ <p class="text-gray-600 text-lg mb-4">
163
+ На уровне приложения, если нам нужно обрабатывать ошибки централизованно можно
164
+ создать один объект от класса SourceEmpty и передавать этот объект в качестве
165
+ посетителя для любых ошибок, что позволит собрать все ошибки в одном месте и
166
+ обработать.
167
+ </p>
@@ -0,0 +1,10 @@
1
+ <h1 class="pb-3 text-xl font-semibold text-gray-600">
2
+ Примеры использования Patron
3
+ </h1>
4
+
5
+ <p class="text-gray-600 text-lg mb-4">
6
+ В этом разделе собраны примеры того, как можно использовать библиотеку Patron.
7
+ В других разделах этой документации также есть примеры, но этот раздел создан
8
+ для демонстрации более сложных вариантов не привязанных к конктретным
9
+ особенностями библиотеки.
10
+ </p>
@@ -0,0 +1,41 @@
1
+ <section class="text-gray-600 body-font">
2
+ <div class="py-1 mx-auto flex flex-col">
3
+ <div class="lg:w-4/6 mx-auto">
4
+ <div class="flex flex-col sm:flex-row">
5
+ <div class="sm:w-1/3 text-center">
6
+ <div
7
+ class="flex flex-col items-center text-center justify-center examples-menu"
8
+ >
9
+ <h2 class="font-medium title-font text-gray-900 text-lg">
10
+ <a href="/examples"> Примеры </a>
11
+ </h2>
12
+ <div class="w-12 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
13
+ <ul class="text-gray-900">
14
+ <li class="w-full border-b-2 border-neutral-100 py-4">
15
+ <a href="/examples/errors"> Обработка ошибок </a>
16
+ </li>
17
+ </ul>
18
+ </div>
19
+ </div>
20
+ <div
21
+ class="w-full sm:w-2/3 sm:pl-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 sm:mt-0"
22
+ >
23
+ <div class="examples-loader">
24
+ <div class="w-full flex justify-center">
25
+ <div
26
+ class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] text-indigo-500 motion-reduce:animate-[spin_1.5s_linear_infinite]"
27
+ role="status"
28
+ >
29
+ <span
30
+ class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
31
+ >Loading...</span
32
+ >
33
+ </div>
34
+ </div>
35
+ </div>
36
+ <div class="examples-page-area"></div>
37
+ </div>
38
+ </div>
39
+ </div>
40
+ </div>
41
+ </section>
@@ -0,0 +1,18 @@
1
+ <h1 class="pb-3 text-xl font-semibold text-gray-600">
2
+ Класс Factory
3
+ </h1>
4
+
5
+ <a href="https://github.com/kosukhin/patron/blob/main/src/Factory/Factory.ts" target="_blank"
6
+ class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4">
7
+ <img src="./assets/img/github_16.jpg" width="16" height="16" />
8
+ Factory на GitHub
9
+ </a>
10
+
11
+ <p class="text-gray-600 text-lg mb-4">
12
+ Предназначен для создания новых экземпляров GuestObjectType из функции-колбэка.
13
+ </p>
14
+
15
+ <p class="text-gray-600 text-lg mb-4">
16
+ Это поведение полезно в случаях, когда нужно динамически построить посетителя на основе функции, используя какие-то
17
+ переменные из скоупа, где создана функция.
18
+ </p>
@@ -0,0 +1,36 @@
1
+ <section class="text-gray-600 body-font">
2
+ <div class="container px-5 py-1 mx-auto flex flex-col">
3
+ <div class="lg:w-4/6 mx-auto">
4
+ <div class="flex flex-col sm:flex-row">
5
+ <div class="sm:w-1/3 text-center">
6
+ <div
7
+ class="flex flex-col items-center text-center justify-center factory-menu"
8
+ >
9
+ <h2 class="font-medium title-font text-gray-900 text-lg">
10
+ Factory
11
+ </h2>
12
+ <div class="w-12 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
13
+ </div>
14
+ </div>
15
+ <div
16
+ class="sm:w-2/3 sm:pl-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 sm:mt-0"
17
+ >
18
+ <div class="factory-loader">
19
+ <div class="w-full flex justify-center">
20
+ <div
21
+ class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] text-indigo-500 motion-reduce:animate-[spin_1.5s_linear_infinite]"
22
+ role="status"
23
+ >
24
+ <span
25
+ class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
26
+ >Loading...</span
27
+ >
28
+ </div>
29
+ </div>
30
+ </div>
31
+ <div class="factory-page-area"></div>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ </section>
@@ -0,0 +1,51 @@
1
+ <h1 class="pb-3 text-xl font-semibold text-gray-600">Класс GuestApplied</h1>
2
+
3
+ <a href="https://github.com/kosukhin/patron/blob/main/src/Guest/GuestApplied.ts" target="_blank"
4
+ class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4">
5
+ <img src="./assets/img/github_16.jpg" width="16" height="16" />
6
+ GuestApplied на GitHub
7
+ </a>
8
+
9
+ <p class="text-gray-600 text-lg mb-4">
10
+ В случаях, когда есть уже готовая функция преобразования какого-то значения, то
11
+ эту функцию можно применить к существующему <link-dynamic href="/terminology/visitor">посетителю</link-dynamic>
12
+ </p>
13
+
14
+ <p class="text-gray-600 text-lg mb-4">
15
+ В примере ниже, мы создаем гостя с примененной функцией удвоения значения.
16
+ В результате до оригинального <link-dynamic href="/terminology/the-guest">гостя</link-dynamic> guest из источника доходит значение не 40 а 80.
17
+ </p>
18
+
19
+ <p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
20
+ <pre
21
+ class="mb-4 w-full"
22
+ ><code class="language-js">import { Guest, GuestApplied, sourceOf } from "patron-oop";
23
+
24
+ const guest = new Guest((value) => {
25
+ document.querySelector(
26
+ ".guest-result"
27
+ ).textContent = `Double value is ${value}`;
28
+ });
29
+
30
+ sourceOf(40).value(
31
+ new GuestApplied(guest, (x) => x * 2)
32
+ );
33
+ </code></pre>
34
+
35
+ <p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
36
+ <div class="example mb-4">
37
+ <span class="guest-result">Result here</span>
38
+ </div>
39
+ <script type="module">
40
+ import { Guest, GuestApplied, sourceOf } from "patron-oop";
41
+
42
+ const guest = new Guest((value) => {
43
+ document.querySelector(
44
+ ".guest-result"
45
+ ).textContent = `Double value is ${value}`;
46
+ });
47
+
48
+ sourceOf(40).value(
49
+ new GuestApplied(guest, (x) => x * 2)
50
+ );
51
+ </script>
@@ -0,0 +1,219 @@
1
+ <h1 class="pb-3 text-xl font-semibold text-gray-600">Класс GuestCast</h1>
2
+
3
+ <a
4
+ href="https://github.com/kosukhin/patron/blob/main/src/Guest/GuestCast.ts"
5
+ target="_blank"
6
+ class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 mb-4"
7
+ >
8
+ <img
9
+ src="./assets/img/github_16.jpg"
10
+ width="16"
11
+ height="16"
12
+ />
13
+ GuestCast на GitHub
14
+ </a>
15
+
16
+ <p class="text-gray-600 text-lg mb-4">
17
+ Предназначен для наследования
18
+ <span class="dynamic-navigation">
19
+ <a
20
+ class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
21
+ href="/terminology/introduction"
22
+ >
23
+ представления
24
+ </a>
25
+ </span>
26
+ посетителя (introduction). Принимает 2 аргумента, если первый посетитель
27
+ является -
28
+ <span class="dynamic-navigation">
29
+ <a
30
+ class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
31
+ href="/terminology/the-guest"
32
+ >
33
+ гостем
34
+ </a>
35
+ </span>
36
+ ('guest' или функция), то результирующий объект возьмет функциональность
37
+ второго посетителя и будет тоже гостем. Если первый посетитель является
38
+ <span class="dynamic-navigation">
39
+ <a
40
+ class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
41
+ href="/terminology/the-patron"
42
+ >
43
+ патроном
44
+ </a>
45
+ </span>
46
+ , то результирующий объект возьмет функциональность второго посетителя, но
47
+ будет так же патроном как и первый посетитель
48
+ </p>
49
+
50
+ <p class="text-gray-600 text-lg mb-4">
51
+ Это наследование полезно в случаях, когда нужно имея оригинальный посетитель,
52
+ приходящий в метод, наследовать его представление для уже существующих
53
+ посетителей, созданных по внутренней логике
54
+ </p>
55
+
56
+ <p class="text-gray-600 text-lg mb-0 font-bold">Пример 1.</p>
57
+ <pre class="mb-4"><code class="language-js">import {
58
+ give,
59
+ Patron,
60
+ SourceWithPool,
61
+ GuestCast,
62
+ removePatronFromPools,
63
+ isPatronInPools,
64
+ } from "patron-oop";
65
+
66
+ class NumberOnceATime {
67
+ constructor(number, delay) {
68
+ this.delay = delay;
69
+ this.theNumber = number;
70
+ }
71
+
72
+ number(guest) {
73
+ const source = new SourceWithPool(this.theNumber);
74
+ source.value(guest);
75
+ const repeat = () => {
76
+ if (!isPatronInPools(guest)) {
77
+ return;
78
+ }
79
+
80
+ setTimeout(() => {
81
+ source.give(this.theNumber);
82
+ repeat();
83
+ }, this.delay);
84
+ };
85
+ repeat();
86
+ }
87
+ }
88
+
89
+ class TotalSum {
90
+ constructor(numbers) {
91
+ this.numbers = numbers;
92
+ }
93
+
94
+ sum(guest) {
95
+ let totalSum = 0;
96
+ const source = new SourceWithPool(totalSum);
97
+ source.value(guest);
98
+ const numbersGuests = [];
99
+ this.numbers.forEach((numberSource, index) => {
100
+ const numberGuest = new GuestCast(guest, (value) => {
101
+ totalSum += value;
102
+ source.give(totalSum);
103
+ });
104
+ numberSource.number(numberGuest);
105
+ numbersGuests.push(numberGuest);
106
+ });
107
+
108
+ return numbersGuests;
109
+ }
110
+ }
111
+
112
+ let totalSumGuests = [];
113
+ const renderResult = new Patron((value) => {
114
+ const resultEl = document.querySelector(".guest-cast-result");
115
+ if (resultEl) {
116
+ resultEl.textContent = `Результат = ${value}`;
117
+ } else {
118
+ removePatronFromPools(renderResult);
119
+ totalSumGuests.forEach(removePatronFromPools);
120
+ }
121
+ }, "renderResult");
122
+ totalSumGuests = new TotalSum([
123
+ new NumberOnceATime(1, 1000),
124
+ new NumberOnceATime(10, 5000),
125
+ new NumberOnceATime(100, 10000),
126
+ ]).sum(renderResult);
127
+ </code></pre>
128
+
129
+ <p class="text-gray-600 text-lg mb-0 font-bold">Результат 1.</p>
130
+ <div class="example mb-4">
131
+ <span class="guest-cast-result">Результат = 0</span>
132
+ </div>
133
+ <script type="module">
134
+ import {
135
+ give,
136
+ Patron,
137
+ SourceWithPool,
138
+ GuestCast,
139
+ removePatronFromPools,
140
+ isPatronInPools,
141
+ } from "patron-oop";
142
+
143
+ class NumberOnceATime {
144
+ constructor(number, delay) {
145
+ this.delay = delay;
146
+ this.theNumber = number;
147
+ }
148
+
149
+ number(guest) {
150
+ const source = new SourceWithPool(this.theNumber);
151
+ source.value(guest);
152
+ const repeat = () => {
153
+ if (!isPatronInPools(guest)) {
154
+ return;
155
+ }
156
+
157
+ setTimeout(() => {
158
+ source.give(this.theNumber);
159
+ repeat();
160
+ }, this.delay);
161
+ };
162
+ repeat();
163
+ }
164
+ }
165
+
166
+ class TotalSum {
167
+ constructor(numbers) {
168
+ this.numbers = numbers;
169
+ }
170
+
171
+ sum(guest) {
172
+ let totalSum = 0;
173
+ const source = new SourceWithPool(totalSum);
174
+ source.value(guest);
175
+ const numbersGuests = [];
176
+ this.numbers.forEach((numberSource, index) => {
177
+ const numberGuest = new GuestCast(guest, (value) => {
178
+ totalSum += value;
179
+ source.give(totalSum);
180
+ });
181
+ numberSource.number(numberGuest);
182
+ numbersGuests.push(numberGuest);
183
+ });
184
+
185
+ return numbersGuests;
186
+ }
187
+ }
188
+
189
+ let totalSumGuests = [];
190
+ const renderResult = new Patron((value) => {
191
+ const resultEl = document.querySelector(".guest-cast-result");
192
+ if (resultEl) {
193
+ resultEl.textContent = `Результат = ${value}`;
194
+ } else {
195
+ removePatronFromPools(renderResult);
196
+ totalSumGuests.forEach(removePatronFromPools);
197
+ }
198
+ }, "renderResult");
199
+ totalSumGuests = new TotalSum([
200
+ new NumberOnceATime(1, 1000),
201
+ new NumberOnceATime(10, 5000),
202
+ new NumberOnceATime(100, 10000),
203
+ ]).sum(renderResult);
204
+ </script>
205
+
206
+ <div class="font-bold mt-8">Смотрите также</div>
207
+
208
+ <p class="text-gray-600 text-lg mb-4 dynamic-navigation">
209
+ <a
210
+ class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
211
+ href="/utils/give"
212
+ >give</a
213
+ >
214
+ <a
215
+ class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[0.75em] font-bold leading-none text-white bg-slate-900"
216
+ href="/patron"
217
+ >Patron</a
218
+ >
219
+ </p>