webbomj-slider v1.0.0

��# Slider-mvp: ?;038= 153C=:0 4;O JQuery

;038= slider ("153C=>:") 4;O JQuery - ?>72>;ONI89 A ?><>ILN @KG06:>2 2KAB02;OBL =5>1E>48<>5 7=0G5=85 (8;8 480?07>= 7=0G5=89). 5<>

040=85 4 >B Metalamp

040=85 70:;NG05BAO 2 =0?8A0=88 ?;038=0 4;O jQuery, :>B>@K9 1K @50;87>2K20; DC=:F8>=0; �153C=:0� (B0:65 =07K205<>3> A;0945@><)  A?5F80;L=K9 :>=B@>;, :>B>@K9 ?>72>;O5B ?5@5BO3820=85< 704020BL :0:>5-B> G8A;>2>5 7=0G5=85. AAK;:0 =0 7040=85

@E8B5:BC@0

;038= ?>AB@>5= ?> ?>4>18N MVP 0@E8B5:BC@K. 45 ?@54AB02;5=85 8 187=5A ;>38:0 =5 7=0N =8G53> 4@C3 > 4@C35.  MB>< ?><>305B ?0B5@= observer, :>B>@K9 ?>72>;O5B ?>4?8AK20BLAO =0 A>1KB8O 8 >?>25I0BL ?>4?8A02H8EAO.

Model (>45;L)

Model - >B45;L=K9 <>4C;L, @01>B0NI89 A 187=5A 40==K<8. =0 A>AB>8B 87 187=5A 40==KE (state), >1@01>BG8:0 (reducer ?> B8?C Flux-Redux) ?@8=8<0NI53> action object, =0 87<5=5=8O 2 <>45;8 <>6=> ?>4?8A0BLAO, <>45;L <>65B >B40BL 40==K5 A ?><>ILN <5B>40 getState().

View (B>1@065=85)

View - >B45;L=K9 <>4C;L, @01>B0NI89 A ?>AB@>5=85< 287C0;L=>9 G0AB8 2 DOM 45@525 87 @07=KE 4>G5@=8E (subView) <>4C;59. !0<> ?@54AB02;5=85 @0718B> =0 =51>;LH85 <>4C;8 (subView). >G5@=85 <>4C;8 =8G53> =5 7=0NB > View, A ?><>ILN >4=>=0?@02;5==>3> ?>B>:0 40==KE, >=8 8<5NB 0:BC0;L=K5 40==K5.

0 View <>6=> ?>4?8A0BLAO. @8 @01>B5 A> A;0945@><, view >B?@028B >?>25I5=85 ?>4?8AG8:0< >1 87<5=5=8OE. 7<5=5=8O >1@010BK20NBAO 8 ?5@540NBAO 2 <>45;L, 40;55 40==K5 ?5@540NBAO G5@57 >?>25I5=85 presenter 2> view 8 >1=>2;O5B B>G5G=> DOM.

Presenter (54CI89)

Presenter - <>4C;L >1@01>BG8:, :>B>@K9 >1@010BK205B 40==K5 ?@8H54H85 A View 8 >B?@02;O5B >1@01>B0==K5 40==K5 2 model, 8 >1@010BK205B 40==K5 ?@8H54H85 A model, 70B5< >BAK;0O 8E 2> View.

!>7405B 87 ?@8H54H8E 40==KE Model 8 View. >4?8AK205BAO =0 8E 87<5=5=8O. 1@010BK205B 87<5=5=8O Model 8 ?5@5405B 8E 2> View. 1@010BK205B 87<5=5=8O View 8 ?5@5405B 8E 2 Model. 0 =53> <>6=> ?>4?8A0BLAO, 8 ?@8 87<5=5=88 40==KE A;0945@0, >= 2K40AB 0:BC0;L=K9 AB59B.

>7<>6=>AB8

-@>AB>5 2708<>459AB285 A> A;0945@>< (?>4:;NG8; 8 701K;) ->;=>ABLN ?>4AB@08205BAO ?>4 H8@8=C/2KA>BC :>=B59=5@0 ->445@68205B Pointer A>1KB8O (4;O @01>BK =0 touch CAB@>9AB20E) ->7<>6=>ABL @01>B0BL A >B@8F0B5;L=K<8 7=0G5=8O<8 ->7<>6=>ABL ?>4?8A0BLAO =0 87<5=5=8O A;0945@0 ->7<>6=>ABL :0AB>878@20BL: -H03 -@0A?>;>65=85 (3>@87>=B0;L=>5/25@B8:0;L=>5) -=0G8;85 ?@>3@5AA 10@0 -=0;8G85 ;591;0 (7=0G5=8O =04 ?>;7C=:><) -=0;8G85 H:0;K -=0;8G85 8=B5@20;0 7=0G5=89

0725@BK20=85

;>=8@C5B5 @5?>78B>@89 :><0=4>9:

git clone https://github.com/webbomj/slider-mvp.git

#AB0=02;8205B5 7028A8<>AB8:

npm install

!>18@05B5 ?@>5:B:

npm run build

7 ?0?:8 dist ?5@5=>A8B5 A:@8?B A;0945@0 slider.js 8 AB8;8 : =5<C slider.css. ;O 8A?>;L7>20=8O ?;038=0 =C6=> CAB0=>28BL JQuery 25@A88 =5 =865 3. 0;55 ?>4:;NG05B5 ?;038= 8 AB8;8, =0?@8<5@ 2>B B0::

import "./script.js";
import "./script.css";

0;55 2K7K205B5 A0< A;0945@ 2 =C6=K9 20< :>=B59=5@ A ?><>ILN JQuery:

<div id="app"></div>

$("app").slider(options);

45 options MB> ?0@0<5B@K A;0945@0. >6=> ?5@540BL 2A5 ?0@0<5B@K, 0 <>6=> B>;L:> G0AB8G=>. @8 4>102;5=88 ?0@05B@2 G0AB8G=> A;0945@ 4>1028B 8E : ?0@0<5B@0< ?> C<>;G0=8N. >A;5 ?>;CG5=8O ?0@05B@2 ?@>8AE>48B 8E 20;840F8O, 5A;8 7=0G5=8O =5 20;84=K, 2K405BAO >H81:0 A C:070=85< =0 :>=:@5B=>5 =5A>>B25BAB285.

0@0<5B@K

@8<5@K ?>4:;NG5=8O:

<div id="app"></div>

$("#app").slider({}); // 157 ?5@540G8 >?F89, 1C4CB 8A?>;L7>20BLAO 7=0G5=8O ?> C<>;G0=8N
$("#app").slider({ max: 200 }); // G0AB8G=0O ?5@540G0 >?F89
$("#app").slider({
  min: 2,
  max: 20,
  from: 2,
  to: 4,
  step: 2,
  stepScale: 2,
  isVertical: true,
  isInterval: true,
  isLabel: true,
  isScale: true,
  isProgressBar: true,
}); // ?>;=0O ?5@540G0 >?F89

>4?8A:0 =0 87<5=5=8O A;0945@0

! ?><>ILN ?0BB5@=0 observer 2K <>65B5 ?>4?8A0BLAO =0 87<5=5=8O A;0945@0 >4?8A:0 ?@>8AE>48B G5@57 <5B>4 subscribe()  MB>B <5B>4 ?5@5405BAO DC=:F8O, :>B>@0O 4>;6=0 ?@8=8<0BL >1J5:B A>>B25BAB2CNI89 ?0@0<5B@0 A;0945@0.

<div id="app"></div>

const slider = $("#app").slider({});
const fn = (model) => {
  console.log(model);
};
slider.subscribe(fn);

><0=4K:

npm run dev - @07@01>B:0 npm run test:coverage - ?>:@KB85 B5AB0<8 npm run build - A1>@:0 ?@>5:B0 npm test - B5ABK

UML 4803@0<<0 :;0AA>2

=AB@C<5=BK :>B>@K5 8A?>;L7>20;8AL 4;O @07@01>B:8:

-Node js: 16.13 -Typescript: 4.7.4 -Parcel: 2.6.2 -JQuery: 3.6.0 -SCSS: 1.49.0 -Jest: 28.1.3 -JsDom: 28.1.3