5.4/javascript/new-api_writing-a-module/index.html

   1
   2 <!doctype html>
   3 <html lang="en" class="no-js">
   4   <head>
   5
   6       <meta charset="utf-8">
   7       <meta name="viewport" content="width=device-width,initial-scale=1">
   8
   9
  10
  11
  12       <link rel="icon" href="../../assets/default.favicon.ico">
  13       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.2">
  14
  15
  16
  17         <title>Writing a module - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../../assets/stylesheets/main.6f955dcd.min.css">
  22
  23
  24         <link rel="stylesheet" href="../../assets/stylesheets/palette.ef6f36e2.min.css">
  25
  26
  27
  28           <meta name="theme-color" content="#009485">
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38       <link rel="stylesheet" href="../../stylesheets/extra.css">
  39
  40
  41
  42
  43
  44   </head>
  45
  46
  47
  48
  49
  50
  51
  52     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  53
  54
  55     <script>function __prefix(e){return new URL("../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
  56
  57     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  58     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  59     <label class="md-overlay" for="__drawer"></label>
  60     <div data-md-component="skip">
  61
  62
  63         <a href="#writing-a-module-javascript-api" class="md-skip">
  64           Skip to content
  65         </a>
  66
  67     </div>
  68     <div data-md-component="announce">
  69
  70         <aside class="md-announce">
  71           <div class="md-announce__inner md-grid md-typeset">
  72
  73     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  74
  75           </div>
  76         </aside>
  77
  78     </div>
  79
  80       <header class="md-header" data-md-component="header">
  81   <nav class="md-header__inner md-grid" aria-label="Header">
  82     <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  83
  84   <img src="../../assets/logo.png" alt="logo">
  85
  86     </a>
  87     <label class="md-header__button md-icon" for="__drawer">
  88       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  89     </label>
  90     <div class="md-header__title" data-md-component="header-title">
  91       <div class="md-header__ellipsis">
  92         <div class="md-header__topic">
  93           <span class="md-ellipsis">
  94             WoltLab Suite Documentation
  95           </span>
  96         </div>
  97         <div class="md-header__topic" data-md-component="header-topic">
  98           <span class="md-ellipsis">
  99
 100               Writing a module
 101
 102           </span>
 103         </div>
 104       </div>
 105     </div>
 106
 107
 108
 109       <label class="md-header__button md-icon" for="__search">
 110         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 111       </label>
 112
 113 <div class="md-search" data-md-component="search" role="dialog">
 114   <label class="md-search__overlay" for="__search"></label>
 115   <div class="md-search__inner" role="search">
 116     <form class="md-search__form" name="search">
 117       <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
 118       <label class="md-search__icon md-icon" for="__search">
 119         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 120         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
 121       </label>
 122       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 123         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
 124       </button>
 125     </form>
 126     <div class="md-search__output">
 127       <div class="md-search__scrollwrap" data-md-scrollfix>
 128         <div class="md-search-result" data-md-component="search-result">
 129           <div class="md-search-result__meta">
 130             Initializing search
 131           </div>
 132           <ol class="md-search-result__list"></ol>
 133         </div>
 134       </div>
 135     </div>
 136   </div>
 137 </div>
 138
 139
 140       <div class="md-header__source">
 141
 142 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 143   <div class="md-source__icon md-icon">
 144
 145     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 146   </div>
 147   <div class="md-source__repository">
 148     GitHub
 149   </div>
 150 </a>
 151       </div>
 152
 153   </nav>
 154 </header>
 155
 156     <div class="md-container" data-md-component="container">
 157
 158
 159
 160
 161       <main class="md-main" data-md-component="main">
 162         <div class="md-main__inner md-grid">
 163
 164
 165
 166               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 167                 <div class="md-sidebar__scrollwrap">
 168                   <div class="md-sidebar__inner">
 169
 170
 171
 172 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 173   <label class="md-nav__title" for="__drawer">
 174     <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 175
 176   <img src="../../assets/logo.png" alt="logo">
 177
 178     </a>
 179     WoltLab Suite Documentation
 180   </label>
 181
 182     <div class="md-nav__source">
 183
 184 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 185   <div class="md-source__icon md-icon">
 186
 187     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 188   </div>
 189   <div class="md-source__repository">
 190     GitHub
 191   </div>
 192 </a>
 193     </div>
 194
 195   <ul class="md-nav__list" data-md-scrollfix>
 196
 197
 198
 199
 200
 201
 202
 203
 204     <li class="md-nav__item">
 205       <a href="../../getting-started/" class="md-nav__link">
 206         Getting Started
 207       </a>
 208     </li>
 209
 210
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220     <li class="md-nav__item md-nav__item--nested">
 221
 222
 223         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 224
 225       <label class="md-nav__link" for="__nav_2">
 226         PHP API
 227         <span class="md-nav__icon md-icon"></span>
 228       </label>
 229       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 230         <label class="md-nav__title" for="__nav_2">
 231           <span class="md-nav__icon md-icon"></span>
 232           PHP API
 233         </label>
 234         <ul class="md-nav__list" data-md-scrollfix>
 235
 236
 237
 238
 239
 240     <li class="md-nav__item">
 241       <a href="../../php/pages/" class="md-nav__link">
 242         Pages
 243       </a>
 244     </li>
 245
 246
 247
 248
 249
 250
 251
 252     <li class="md-nav__item">
 253       <a href="../../php/database-objects/" class="md-nav__link">
 254         Database Objects
 255       </a>
 256     </li>
 257
 258
 259
 260
 261
 262
 263
 264     <li class="md-nav__item">
 265       <a href="../../php/database-access/" class="md-nav__link">
 266         Database Access
 267       </a>
 268     </li>
 269
 270
 271
 272
 273
 274
 275
 276     <li class="md-nav__item">
 277       <a href="../../php/exceptions/" class="md-nav__link">
 278         Exceptions
 279       </a>
 280     </li>
 281
 282
 283
 284
 285
 286
 287
 288
 289     <li class="md-nav__item md-nav__item--nested">
 290
 291
 292         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 293
 294       <label class="md-nav__link" for="__nav_2_5">
 295         API
 296         <span class="md-nav__icon md-icon"></span>
 297       </label>
 298       <nav class="md-nav" aria-label="API" data-md-level="2">
 299         <label class="md-nav__title" for="__nav_2_5">
 300           <span class="md-nav__icon md-icon"></span>
 301           API
 302         </label>
 303         <ul class="md-nav__list" data-md-scrollfix>
 304
 305
 306
 307
 308
 309
 310     <li class="md-nav__item md-nav__item--nested">
 311
 312
 313         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
 314
 315       <label class="md-nav__link" for="__nav_2_5_1">
 316         Caches
 317         <span class="md-nav__icon md-icon"></span>
 318       </label>
 319       <nav class="md-nav" aria-label="Caches" data-md-level="3">
 320         <label class="md-nav__title" for="__nav_2_5_1">
 321           <span class="md-nav__icon md-icon"></span>
 322           Caches
 323         </label>
 324         <ul class="md-nav__list" data-md-scrollfix>
 325
 326
 327
 328
 329
 330     <li class="md-nav__item">
 331       <a href="../../php/api/caches/" class="md-nav__link">
 332         Overview
 333       </a>
 334     </li>
 335
 336
 337
 338
 339
 340
 341
 342     <li class="md-nav__item">
 343       <a href="../../php/api/caches_persistent-caches/" class="md-nav__link">
 344         Persistent Caches
 345       </a>
 346     </li>
 347
 348
 349
 350
 351
 352
 353
 354     <li class="md-nav__item">
 355       <a href="../../php/api/caches_runtime-caches/" class="md-nav__link">
 356         Runtime Caches
 357       </a>
 358     </li>
 359
 360
 361
 362         </ul>
 363       </nav>
 364     </li>
 365
 366
 367
 368
 369
 370
 371
 372     <li class="md-nav__item">
 373       <a href="../../php/api/comments/" class="md-nav__link">
 374         Comments
 375       </a>
 376     </li>
 377
 378
 379
 380
 381
 382
 383
 384     <li class="md-nav__item">
 385       <a href="../../php/api/cronjobs/" class="md-nav__link">
 386         Cronjobs
 387       </a>
 388     </li>
 389
 390
 391
 392
 393
 394
 395
 396     <li class="md-nav__item">
 397       <a href="../../php/api/events/" class="md-nav__link">
 398         Events
 399       </a>
 400     </li>
 401
 402
 403
 404
 405
 406
 407
 408
 409     <li class="md-nav__item md-nav__item--nested">
 410
 411
 412         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 413
 414       <label class="md-nav__link" for="__nav_2_5_5">
 415         Form Builder
 416         <span class="md-nav__icon md-icon"></span>
 417       </label>
 418       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 419         <label class="md-nav__title" for="__nav_2_5_5">
 420           <span class="md-nav__icon md-icon"></span>
 421           Form Builder
 422         </label>
 423         <ul class="md-nav__list" data-md-scrollfix>
 424
 425
 426
 427
 428
 429     <li class="md-nav__item">
 430       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 431         Overview
 432       </a>
 433     </li>
 434
 435
 436
 437
 438
 439
 440
 441     <li class="md-nav__item">
 442       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 443         Structure
 444       </a>
 445     </li>
 446
 447
 448
 449
 450
 451
 452
 453     <li class="md-nav__item">
 454       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 455         Fields
 456       </a>
 457     </li>
 458
 459
 460
 461
 462
 463
 464
 465     <li class="md-nav__item">
 466       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 467         Validation and Data
 468       </a>
 469     </li>
 470
 471
 472
 473
 474
 475
 476
 477     <li class="md-nav__item">
 478       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 479         Dependencies
 480       </a>
 481     </li>
 482
 483
 484
 485         </ul>
 486       </nav>
 487     </li>
 488
 489
 490
 491
 492
 493
 494
 495     <li class="md-nav__item">
 496       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 497         Package Installation Plugins
 498       </a>
 499     </li>
 500
 501
 502
 503
 504
 505
 506
 507     <li class="md-nav__item">
 508       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 509         User Activity Points
 510       </a>
 511     </li>
 512
 513
 514
 515
 516
 517
 518
 519     <li class="md-nav__item">
 520       <a href="../../php/api/user_notifications/" class="md-nav__link">
 521         User Notifications
 522       </a>
 523     </li>
 524
 525
 526
 527
 528
 529
 530
 531     <li class="md-nav__item">
 532       <a href="../../php/api/sitemaps/" class="md-nav__link">
 533         Sitemaps
 534       </a>
 535     </li>
 536
 537
 538
 539         </ul>
 540       </nav>
 541     </li>
 542
 543
 544
 545
 546
 547
 548
 549     <li class="md-nav__item">
 550       <a href="../../php/code-style/" class="md-nav__link">
 551         Code Style
 552       </a>
 553     </li>
 554
 555
 556
 557
 558
 559
 560
 561     <li class="md-nav__item">
 562       <a href="../../php/apps/" class="md-nav__link">
 563         Apps
 564       </a>
 565     </li>
 566
 567
 568
 569
 570
 571
 572
 573     <li class="md-nav__item">
 574       <a href="../../php/gdpr/" class="md-nav__link">
 575         GDPR
 576       </a>
 577     </li>
 578
 579
 580
 581         </ul>
 582       </nav>
 583     </li>
 584
 585
 586
 587
 588
 589
 590
 591
 592
 593
 594
 595     <li class="md-nav__item md-nav__item--nested">
 596
 597
 598         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 599
 600       <label class="md-nav__link" for="__nav_3">
 601         Languages, Templates & CSS
 602         <span class="md-nav__icon md-icon"></span>
 603       </label>
 604       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 605         <label class="md-nav__title" for="__nav_3">
 606           <span class="md-nav__icon md-icon"></span>
 607           Languages, Templates & CSS
 608         </label>
 609         <ul class="md-nav__list" data-md-scrollfix>
 610
 611
 612
 613
 614
 615     <li class="md-nav__item">
 616       <a href="../../view/languages/" class="md-nav__link">
 617         Languages
 618       </a>
 619     </li>
 620
 621
 622
 623
 624
 625
 626
 627     <li class="md-nav__item">
 628       <a href="../../view/templates/" class="md-nav__link">
 629         Templates
 630       </a>
 631     </li>
 632
 633
 634
 635
 636
 637
 638
 639     <li class="md-nav__item">
 640       <a href="../../view/template-plugins/" class="md-nav__link">
 641         Template Plugins
 642       </a>
 643     </li>
 644
 645
 646
 647
 648
 649
 650
 651     <li class="md-nav__item">
 652       <a href="../../view/css/" class="md-nav__link">
 653         CSS
 654       </a>
 655     </li>
 656
 657
 658
 659         </ul>
 660       </nav>
 661     </li>
 662
 663
 664
 665
 666
 667
 668
 669
 670
 671
 672
 673
 674
 675     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 676
 677
 678         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
 679
 680       <label class="md-nav__link" for="__nav_4">
 681         TypeScript and JavaScript API
 682         <span class="md-nav__icon md-icon"></span>
 683       </label>
 684       <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
 685         <label class="md-nav__title" for="__nav_4">
 686           <span class="md-nav__icon md-icon"></span>
 687           TypeScript and JavaScript API
 688         </label>
 689         <ul class="md-nav__list" data-md-scrollfix>
 690
 691
 692
 693
 694
 695     <li class="md-nav__item">
 696       <a href="../general-usage/" class="md-nav__link">
 697         General Usage
 698       </a>
 699     </li>
 700
 701
 702
 703
 704
 705
 706
 707     <li class="md-nav__item">
 708       <a href="../typescript/" class="md-nav__link">
 709         TypeScript
 710       </a>
 711     </li>
 712
 713
 714
 715
 716
 717
 718
 719
 720
 721
 722     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 723
 724
 725         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" checked>
 726
 727       <label class="md-nav__link" for="__nav_4_3">
 728         New API
 729         <span class="md-nav__icon md-icon"></span>
 730       </label>
 731       <nav class="md-nav" aria-label="New API" data-md-level="2">
 732         <label class="md-nav__title" for="__nav_4_3">
 733           <span class="md-nav__icon md-icon"></span>
 734           New API
 735         </label>
 736         <ul class="md-nav__list" data-md-scrollfix>
 737
 738
 739
 740
 741
 742
 743
 744     <li class="md-nav__item md-nav__item--active">
 745
 746       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 747
 748
 749
 750
 751
 752         <label class="md-nav__link md-nav__link--active" for="__toc">
 753           Writing a module
 754           <span class="md-nav__icon md-icon"></span>
 755         </label>
 756
 757       <a href="./" class="md-nav__link md-nav__link--active">
 758         Writing a module
 759       </a>
 760
 761
 762 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 763
 764
 765
 766
 767
 768
 769     <label class="md-nav__title" for="__toc">
 770       <span class="md-nav__icon md-icon"></span>
 771       Table of contents
 772     </label>
 773     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 774
 775         <li class="md-nav__item">
 776   <a href="#introduction" class="md-nav__link">
 777     Introduction
 778   </a>
 779
 780 </li>
 781
 782         <li class="md-nav__item">
 783   <a href="#defining-a-module" class="md-nav__link">
 784     Defining a Module
 785   </a>
 786
 787 </li>
 788
 789         <li class="md-nav__item">
 790   <a href="#loading-a-module" class="md-nav__link">
 791     Loading a Module
 792   </a>
 793
 794     <nav class="md-nav" aria-label="Loading a Module">
 795       <ul class="md-nav__list">
 796
 797           <li class="md-nav__item">
 798   <a href="#module-aliases" class="md-nav__link">
 799     Module Aliases
 800   </a>
 801
 802 </li>
 803
 804       </ul>
 805     </nav>
 806
 807 </li>
 808
 809     </ul>
 810
 811 </nav>
 812
 813     </li>
 814
 815
 816
 817
 818
 819
 820
 821     <li class="md-nav__item">
 822       <a href="../new-api_data-structures/" class="md-nav__link">
 823         Data Structures
 824       </a>
 825     </li>
 826
 827
 828
 829
 830
 831
 832
 833     <li class="md-nav__item">
 834       <a href="../new-api_core/" class="md-nav__link">
 835         Core Functions
 836       </a>
 837     </li>
 838
 839
 840
 841
 842
 843
 844
 845     <li class="md-nav__item">
 846       <a href="../new-api_dom/" class="md-nav__link">
 847         DOM
 848       </a>
 849     </li>
 850
 851
 852
 853
 854
 855
 856
 857     <li class="md-nav__item">
 858       <a href="../new-api_events/" class="md-nav__link">
 859         Event Handling
 860       </a>
 861     </li>
 862
 863
 864
 865
 866
 867
 868
 869     <li class="md-nav__item">
 870       <a href="../new-api_ajax/" class="md-nav__link">
 871         Ajax
 872       </a>
 873     </li>
 874
 875
 876
 877
 878
 879
 880
 881     <li class="md-nav__item">
 882       <a href="../new-api_dialogs/" class="md-nav__link">
 883         Dialogs
 884       </a>
 885     </li>
 886
 887
 888
 889
 890
 891
 892
 893     <li class="md-nav__item">
 894       <a href="../new-api_browser/" class="md-nav__link">
 895         Browser and Screen Sizes
 896       </a>
 897     </li>
 898
 899
 900
 901
 902
 903
 904
 905     <li class="md-nav__item">
 906       <a href="../new-api_ui/" class="md-nav__link">
 907         User Interface
 908       </a>
 909     </li>
 910
 911
 912
 913         </ul>
 914       </nav>
 915     </li>
 916
 917
 918
 919
 920
 921
 922
 923     <li class="md-nav__item">
 924       <a href="../legacy-api/" class="md-nav__link">
 925         Legacy API
 926       </a>
 927     </li>
 928
 929
 930
 931
 932
 933
 934
 935     <li class="md-nav__item">
 936       <a href="../helper-functions/" class="md-nav__link">
 937         Helper Functions
 938       </a>
 939     </li>
 940
 941
 942
 943
 944
 945
 946
 947     <li class="md-nav__item">
 948       <a href="../code-snippets/" class="md-nav__link">
 949         Code Snippets
 950       </a>
 951     </li>
 952
 953
 954
 955         </ul>
 956       </nav>
 957     </li>
 958
 959
 960
 961
 962
 963
 964
 965
 966
 967
 968
 969     <li class="md-nav__item md-nav__item--nested">
 970
 971
 972         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
 973
 974       <label class="md-nav__link" for="__nav_5">
 975         Package Components
 976         <span class="md-nav__icon md-icon"></span>
 977       </label>
 978       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
 979         <label class="md-nav__title" for="__nav_5">
 980           <span class="md-nav__icon md-icon"></span>
 981           Package Components
 982         </label>
 983         <ul class="md-nav__list" data-md-scrollfix>
 984
 985
 986
 987
 988
 989     <li class="md-nav__item">
 990       <a href="../../package/package-xml/" class="md-nav__link">
 991         package.xml
 992       </a>
 993     </li>
 994
 995
 996
 997
 998
 999
1000
1001
1002     <li class="md-nav__item md-nav__item--nested">
1003
1004
1005         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
1006
1007       <label class="md-nav__link" for="__nav_5_2">
1008         PIPs
1009         <span class="md-nav__icon md-icon"></span>
1010       </label>
1011       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
1012         <label class="md-nav__title" for="__nav_5_2">
1013           <span class="md-nav__icon md-icon"></span>
1014           PIPs
1015         </label>
1016         <ul class="md-nav__list" data-md-scrollfix>
1017
1018
1019
1020
1021
1022     <li class="md-nav__item">
1023       <a href="../../package/pip/" class="md-nav__link">
1024         Overview
1025       </a>
1026     </li>
1027
1028
1029
1030
1031
1032
1033
1034     <li class="md-nav__item">
1035       <a href="../../package/pip/acl-option/" class="md-nav__link">
1036         aclOption
1037       </a>
1038     </li>
1039
1040
1041
1042
1043
1044
1045
1046     <li class="md-nav__item">
1047       <a href="../../package/pip/acp-menu/" class="md-nav__link">
1048         acpMenu
1049       </a>
1050     </li>
1051
1052
1053
1054
1055
1056
1057
1058     <li class="md-nav__item">
1059       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1060         acpSearchProvider
1061       </a>
1062     </li>
1063
1064
1065
1066
1067
1068
1069
1070     <li class="md-nav__item">
1071       <a href="../../package/pip/acp-template/" class="md-nav__link">
1072         acpTemplate
1073       </a>
1074     </li>
1075
1076
1077
1078
1079
1080
1081
1082     <li class="md-nav__item">
1083       <a href="../../package/pip/bbcode/" class="md-nav__link">
1084         bbcode
1085       </a>
1086     </li>
1087
1088
1089
1090
1091
1092
1093
1094     <li class="md-nav__item">
1095       <a href="../../package/pip/box/" class="md-nav__link">
1096         box
1097       </a>
1098     </li>
1099
1100
1101
1102
1103
1104
1105
1106     <li class="md-nav__item">
1107       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1108         clipboardAction
1109       </a>
1110     </li>
1111
1112
1113
1114
1115
1116
1117
1118     <li class="md-nav__item">
1119       <a href="../../package/pip/core-object/" class="md-nav__link">
1120         coreObject
1121       </a>
1122     </li>
1123
1124
1125
1126
1127
1128
1129
1130     <li class="md-nav__item">
1131       <a href="../../package/pip/cronjob/" class="md-nav__link">
1132         cronjob
1133       </a>
1134     </li>
1135
1136
1137
1138
1139
1140
1141
1142     <li class="md-nav__item">
1143       <a href="../../package/pip/database/" class="md-nav__link">
1144         database
1145       </a>
1146     </li>
1147
1148
1149
1150
1151
1152
1153
1154     <li class="md-nav__item">
1155       <a href="../../package/pip/event-listener/" class="md-nav__link">
1156         eventListener
1157       </a>
1158     </li>
1159
1160
1161
1162
1163
1164
1165
1166     <li class="md-nav__item">
1167       <a href="../../package/pip/file/" class="md-nav__link">
1168         file
1169       </a>
1170     </li>
1171
1172
1173
1174
1175
1176
1177
1178     <li class="md-nav__item">
1179       <a href="../../package/pip/language/" class="md-nav__link">
1180         language
1181       </a>
1182     </li>
1183
1184
1185
1186
1187
1188
1189
1190     <li class="md-nav__item">
1191       <a href="../../package/pip/media-provider/" class="md-nav__link">
1192         mediaProvider
1193       </a>
1194     </li>
1195
1196
1197
1198
1199
1200
1201
1202     <li class="md-nav__item">
1203       <a href="../../package/pip/menu/" class="md-nav__link">
1204         menu
1205       </a>
1206     </li>
1207
1208
1209
1210
1211
1212
1213
1214     <li class="md-nav__item">
1215       <a href="../../package/pip/menu-item/" class="md-nav__link">
1216         menuItem
1217       </a>
1218     </li>
1219
1220
1221
1222
1223
1224
1225
1226     <li class="md-nav__item">
1227       <a href="../../package/pip/object-type/" class="md-nav__link">
1228         objectType
1229       </a>
1230     </li>
1231
1232
1233
1234
1235
1236
1237
1238     <li class="md-nav__item">
1239       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1240         objectTypeDefinition
1241       </a>
1242     </li>
1243
1244
1245
1246
1247
1248
1249
1250     <li class="md-nav__item">
1251       <a href="../../package/pip/option/" class="md-nav__link">
1252         option
1253       </a>
1254     </li>
1255
1256
1257
1258
1259
1260
1261
1262     <li class="md-nav__item">
1263       <a href="../../package/pip/page/" class="md-nav__link">
1264         page
1265       </a>
1266     </li>
1267
1268
1269
1270
1271
1272
1273
1274     <li class="md-nav__item">
1275       <a href="../../package/pip/pip/" class="md-nav__link">
1276         pip
1277       </a>
1278     </li>
1279
1280
1281
1282
1283
1284
1285
1286     <li class="md-nav__item">
1287       <a href="../../package/pip/script/" class="md-nav__link">
1288         script
1289       </a>
1290     </li>
1291
1292
1293
1294
1295
1296
1297
1298     <li class="md-nav__item">
1299       <a href="../../package/pip/smiley/" class="md-nav__link">
1300         smiley
1301       </a>
1302     </li>
1303
1304
1305
1306
1307
1308
1309
1310     <li class="md-nav__item">
1311       <a href="../../package/pip/sql/" class="md-nav__link">
1312         sql
1313       </a>
1314     </li>
1315
1316
1317
1318
1319
1320
1321
1322     <li class="md-nav__item">
1323       <a href="../../package/pip/style/" class="md-nav__link">
1324         style
1325       </a>
1326     </li>
1327
1328
1329
1330
1331
1332
1333
1334     <li class="md-nav__item">
1335       <a href="../../package/pip/template/" class="md-nav__link">
1336         template
1337       </a>
1338     </li>
1339
1340
1341
1342
1343
1344
1345
1346     <li class="md-nav__item">
1347       <a href="../../package/pip/template-listener/" class="md-nav__link">
1348         templateListener
1349       </a>
1350     </li>
1351
1352
1353
1354
1355
1356
1357
1358     <li class="md-nav__item">
1359       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1360         userGroupOption
1361       </a>
1362     </li>
1363
1364
1365
1366
1367
1368
1369
1370     <li class="md-nav__item">
1371       <a href="../../package/pip/user-menu/" class="md-nav__link">
1372         userMenu
1373       </a>
1374     </li>
1375
1376
1377
1378
1379
1380
1381
1382     <li class="md-nav__item">
1383       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1384         userNotificationEvent
1385       </a>
1386     </li>
1387
1388
1389
1390
1391
1392
1393
1394     <li class="md-nav__item">
1395       <a href="../../package/pip/user-option/" class="md-nav__link">
1396         userOption
1397       </a>
1398     </li>
1399
1400
1401
1402
1403
1404
1405
1406     <li class="md-nav__item">
1407       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1408         userProfileMenu
1409       </a>
1410     </li>
1411
1412
1413
1414         </ul>
1415       </nav>
1416     </li>
1417
1418
1419
1420
1421
1422
1423
1424     <li class="md-nav__item">
1425       <a href="../../package/database-php-api/" class="md-nav__link">
1426         Database PHP API
1427       </a>
1428     </li>
1429
1430
1431
1432         </ul>
1433       </nav>
1434     </li>
1435
1436
1437
1438
1439
1440
1441
1442
1443
1444
1445
1446     <li class="md-nav__item md-nav__item--nested">
1447
1448
1449         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1450
1451       <label class="md-nav__link" for="__nav_6">
1452         Migration
1453         <span class="md-nav__icon md-icon"></span>
1454       </label>
1455       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1456         <label class="md-nav__title" for="__nav_6">
1457           <span class="md-nav__icon md-icon"></span>
1458           Migration
1459         </label>
1460         <ul class="md-nav__list" data-md-scrollfix>
1461
1462
1463
1464
1465
1466
1467     <li class="md-nav__item md-nav__item--nested">
1468
1469
1470         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1471
1472       <label class="md-nav__link" for="__nav_6_1">
1473         Migrating from WSC 5.3
1474         <span class="md-nav__icon md-icon"></span>
1475       </label>
1476       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1477         <label class="md-nav__title" for="__nav_6_1">
1478           <span class="md-nav__icon md-icon"></span>
1479           Migrating from WSC 5.3
1480         </label>
1481         <ul class="md-nav__list" data-md-scrollfix>
1482
1483
1484
1485
1486
1487     <li class="md-nav__item">
1488       <a href="../../migration/wsc53/php/" class="md-nav__link">
1489         PHP API
1490       </a>
1491     </li>
1492
1493
1494
1495
1496
1497
1498
1499     <li class="md-nav__item">
1500       <a href="../../migration/wsc53/session/" class="md-nav__link">
1501         Session Handling and Authentication
1502       </a>
1503     </li>
1504
1505
1506
1507
1508
1509
1510
1511     <li class="md-nav__item">
1512       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1513         TypeScript and JavaScript
1514       </a>
1515     </li>
1516
1517
1518
1519
1520
1521
1522
1523     <li class="md-nav__item">
1524       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1525         Templates
1526       </a>
1527     </li>
1528
1529
1530
1531
1532
1533
1534
1535     <li class="md-nav__item">
1536       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1537         Third Party Libraries
1538       </a>
1539     </li>
1540
1541
1542
1543         </ul>
1544       </nav>
1545     </li>
1546
1547
1548
1549
1550
1551
1552
1553
1554     <li class="md-nav__item md-nav__item--nested">
1555
1556
1557         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1558
1559       <label class="md-nav__link" for="__nav_6_2">
1560         Migrating from WSC 5.2
1561         <span class="md-nav__icon md-icon"></span>
1562       </label>
1563       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1564         <label class="md-nav__title" for="__nav_6_2">
1565           <span class="md-nav__icon md-icon"></span>
1566           Migrating from WSC 5.2
1567         </label>
1568         <ul class="md-nav__list" data-md-scrollfix>
1569
1570
1571
1572
1573
1574     <li class="md-nav__item">
1575       <a href="../../migration/wsc52/php/" class="md-nav__link">
1576         PHP API
1577       </a>
1578     </li>
1579
1580
1581
1582
1583
1584
1585
1586     <li class="md-nav__item">
1587       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1588         Templates and Languages
1589       </a>
1590     </li>
1591
1592
1593
1594
1595
1596
1597
1598     <li class="md-nav__item">
1599       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1600         Third Party Libraries
1601       </a>
1602     </li>
1603
1604
1605
1606         </ul>
1607       </nav>
1608     </li>
1609
1610
1611
1612
1613
1614
1615
1616
1617     <li class="md-nav__item md-nav__item--nested">
1618
1619
1620         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1621
1622       <label class="md-nav__link" for="__nav_6_3">
1623         Migrating from WSC 3.1
1624         <span class="md-nav__icon md-icon"></span>
1625       </label>
1626       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1627         <label class="md-nav__title" for="__nav_6_3">
1628           <span class="md-nav__icon md-icon"></span>
1629           Migrating from WSC 3.1
1630         </label>
1631         <ul class="md-nav__list" data-md-scrollfix>
1632
1633
1634
1635
1636
1637     <li class="md-nav__item">
1638       <a href="../../migration/wsc31/php/" class="md-nav__link">
1639         PHP API
1640       </a>
1641     </li>
1642
1643
1644
1645         </ul>
1646       </nav>
1647     </li>
1648
1649
1650
1651
1652
1653
1654
1655
1656     <li class="md-nav__item md-nav__item--nested">
1657
1658
1659         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1660
1661       <label class="md-nav__link" for="__nav_6_4">
1662         Migrating from WSC 3.0
1663         <span class="md-nav__icon md-icon"></span>
1664       </label>
1665       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1666         <label class="md-nav__title" for="__nav_6_4">
1667           <span class="md-nav__icon md-icon"></span>
1668           Migrating from WSC 3.0
1669         </label>
1670         <ul class="md-nav__list" data-md-scrollfix>
1671
1672
1673
1674
1675
1676     <li class="md-nav__item">
1677       <a href="../../migration/wsc30/php/" class="md-nav__link">
1678         PHP API
1679       </a>
1680     </li>
1681
1682
1683
1684
1685
1686
1687
1688     <li class="md-nav__item">
1689       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1690         JavaScript API
1691       </a>
1692     </li>
1693
1694
1695
1696
1697
1698
1699
1700     <li class="md-nav__item">
1701       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1702         Templates
1703       </a>
1704     </li>
1705
1706
1707
1708
1709
1710
1711
1712     <li class="md-nav__item">
1713       <a href="../../migration/wsc30/css/" class="md-nav__link">
1714         CSS
1715       </a>
1716     </li>
1717
1718
1719
1720
1721
1722
1723
1724     <li class="md-nav__item">
1725       <a href="../../migration/wsc30/package/" class="md-nav__link">
1726         Package Components
1727       </a>
1728     </li>
1729
1730
1731
1732         </ul>
1733       </nav>
1734     </li>
1735
1736
1737
1738
1739
1740
1741
1742
1743     <li class="md-nav__item md-nav__item--nested">
1744
1745
1746         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1747
1748       <label class="md-nav__link" for="__nav_6_5">
1749         Migrating from WCF 2.1
1750         <span class="md-nav__icon md-icon"></span>
1751       </label>
1752       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1753         <label class="md-nav__title" for="__nav_6_5">
1754           <span class="md-nav__icon md-icon"></span>
1755           Migrating from WCF 2.1
1756         </label>
1757         <ul class="md-nav__list" data-md-scrollfix>
1758
1759
1760
1761
1762
1763     <li class="md-nav__item">
1764       <a href="../../migration/wcf21/php/" class="md-nav__link">
1765         PHP API
1766       </a>
1767     </li>
1768
1769
1770
1771
1772
1773
1774
1775     <li class="md-nav__item">
1776       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1777         Templates
1778       </a>
1779     </li>
1780
1781
1782
1783
1784
1785
1786
1787     <li class="md-nav__item">
1788       <a href="../../migration/wcf21/css/" class="md-nav__link">
1789         CSS
1790       </a>
1791     </li>
1792
1793
1794
1795
1796
1797
1798
1799     <li class="md-nav__item">
1800       <a href="../../migration/wcf21/package/" class="md-nav__link">
1801         Package Components
1802       </a>
1803     </li>
1804
1805
1806
1807         </ul>
1808       </nav>
1809     </li>
1810
1811
1812
1813         </ul>
1814       </nav>
1815     </li>
1816
1817
1818
1819
1820
1821
1822
1823
1824
1825
1826
1827     <li class="md-nav__item md-nav__item--nested">
1828
1829
1830         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1831
1832       <label class="md-nav__link" for="__nav_7">
1833         Tutorials
1834         <span class="md-nav__icon md-icon"></span>
1835       </label>
1836       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1837         <label class="md-nav__title" for="__nav_7">
1838           <span class="md-nav__icon md-icon"></span>
1839           Tutorials
1840         </label>
1841         <ul class="md-nav__list" data-md-scrollfix>
1842
1843
1844
1845
1846
1847
1848     <li class="md-nav__item md-nav__item--nested">
1849
1850
1851         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1852
1853       <label class="md-nav__link" for="__nav_7_1">
1854         Tutorial Series
1855         <span class="md-nav__icon md-icon"></span>
1856       </label>
1857       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1858         <label class="md-nav__title" for="__nav_7_1">
1859           <span class="md-nav__icon md-icon"></span>
1860           Tutorial Series
1861         </label>
1862         <ul class="md-nav__list" data-md-scrollfix>
1863
1864
1865
1866
1867
1868     <li class="md-nav__item">
1869       <a href="../../tutorial/series/overview/" class="md-nav__link">
1870         Overview
1871       </a>
1872     </li>
1873
1874
1875
1876
1877
1878
1879
1880     <li class="md-nav__item">
1881       <a href="../../tutorial/series/part_1/" class="md-nav__link">
1882         Part 1
1883       </a>
1884     </li>
1885
1886
1887
1888
1889
1890
1891
1892     <li class="md-nav__item">
1893       <a href="../../tutorial/series/part_2/" class="md-nav__link">
1894         Part 2
1895       </a>
1896     </li>
1897
1898
1899
1900
1901
1902
1903
1904     <li class="md-nav__item">
1905       <a href="../../tutorial/series/part_3/" class="md-nav__link">
1906         Part 3
1907       </a>
1908     </li>
1909
1910
1911
1912
1913
1914
1915
1916     <li class="md-nav__item">
1917       <a href="../../tutorial/series/part_4/" class="md-nav__link">
1918         Part 4
1919       </a>
1920     </li>
1921
1922
1923
1924         </ul>
1925       </nav>
1926     </li>
1927
1928
1929
1930         </ul>
1931       </nav>
1932     </li>
1933
1934
1935
1936   </ul>
1937 </nav>
1938                   </div>
1939                 </div>
1940               </div>
1941
1942
1943
1944               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
1945                 <div class="md-sidebar__scrollwrap">
1946                   <div class="md-sidebar__inner">
1947
1948 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1949
1950
1951
1952
1953
1954
1955     <label class="md-nav__title" for="__toc">
1956       <span class="md-nav__icon md-icon"></span>
1957       Table of contents
1958     </label>
1959     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
1960
1961         <li class="md-nav__item">
1962   <a href="#introduction" class="md-nav__link">
1963     Introduction
1964   </a>
1965
1966 </li>
1967
1968         <li class="md-nav__item">
1969   <a href="#defining-a-module" class="md-nav__link">
1970     Defining a Module
1971   </a>
1972
1973 </li>
1974
1975         <li class="md-nav__item">
1976   <a href="#loading-a-module" class="md-nav__link">
1977     Loading a Module
1978   </a>
1979
1980     <nav class="md-nav" aria-label="Loading a Module">
1981       <ul class="md-nav__list">
1982
1983           <li class="md-nav__item">
1984   <a href="#module-aliases" class="md-nav__link">
1985     Module Aliases
1986   </a>
1987
1988 </li>
1989
1990       </ul>
1991     </nav>
1992
1993 </li>
1994
1995     </ul>
1996
1997 </nav>
1998                   </div>
1999                 </div>
2000               </div>
2001
2002
2003           <div class="md-content" data-md-component="content">
2004             <article class="md-content__inner md-typeset">
2005
2006
2007                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/javascript/new-api_writing-a-module.md" title="Edit this page" class="md-content__button md-icon">
2008                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
2009                   </a>
2010
2011
2012                 <h1 id="writing-a-module-javascript-api">Writing a Module - JavaScript API<a class="headerlink" href="#writing-a-module-javascript-api" title="Permanent link">#</a></h1>
2013 <h2 id="introduction">Introduction<a class="headerlink" href="#introduction" title="Permanent link">#</a></h2>
2014 <p>The new JavaScript-API was introduced with WoltLab Suite 3.0 and was a major
2015 change in all regards. The previously used API heavily relied on larger JavaScript
2016 files that contained a lot of different components with hidden dependencies
2017 and suffered from extensive jQuery usage for historic reasons.</p>
2018 <p>Eventually a new API was designed that solves the issues with the legacy API
2019 by following a few basic principles:
2020  1. Vanilla ES5-JavaScript.<br />
2021     It allows us to achieve the best performance across all platforms, there is
2022     simply no reason to use jQuery today and the performance penalty on mobile
2023     devices is a real issue.
2024  2. Strict usage of modules.<br />
2025     Each component is placed in an own file and all dependencies are explicitly
2026     declared and injected at the top.Eventually we settled with AMD-style modules
2027     using require.js which offers both lazy loading and "ahead of time"-compilatio
2028     with <code>r.js</code>.
2029  3. No jQuery-based components on page init.<br />
2030     Nothing is more annoying than loading a page and then wait for JavaScript to
2031     modify the page before it becomes usable, forcing the user to sit and wait.
2032     Heavily optimized vanilla JavaScript components offered the speed we wanted.
2033  4. Limited backwards-compatibility.<br />
2034     The new API should make it easy to update existing components by providing
2035     similar interfaces, while still allowing legacy code to run side-by-side for
2036     best compatibility and to avoid rewritting everything from the start.</p>
2037 <h2 id="defining-a-module">Defining a Module<a class="headerlink" href="#defining-a-module" title="Permanent link">#</a></h2>
2038 <p>The default location for modules is <code>js/</code> in the Core's app dir,
2039 but every app and plugin can register their own lookup path by providing the path
2040 using a <a href="../../package/pip/template-listener/">template-listener</a> on <code>requirePaths@headIncludeJavaScript</code>.</p>
2041 <p>For this example we'll assume the file is placed at <code>js/WoltLabSuite/Core/Ui/Foo.js</code>,
2042 the module name is therefore <code>WoltLabSuite/Core/Ui/Foo</code>, it is automatically
2043 derived from the file path and name.</p>
2044 <p>For further instructions on how to define and require modules head over to the <a href="http://requirejs.org/docs/api.html">RequireJS API</a>.</p>
2045 <div class="highlight"><pre><span></span><code><span class="nx">define</span><span class="p">([</span><span class="s2">&quot;Ajax&quot;</span><span class="p">,</span> <span class="s2">&quot;WoltLabSuite/Core/Ui/Bar&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">Ajax</span><span class="p">,</span> <span class="nx">UiBar</span><span class="p">)</span> <span class="p">{</span>
2046   <span class="s2">&quot;use strict&quot;</span><span class="p">;</span>
2047
2048   <span class="kd">function</span> <span class="nx">Foo</span><span class="p">()</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span> <span class="p">}</span>
2049   <span class="nx">Foo</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span>
2050     <span class="nx">init</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2051       <span class="nx">elBySel</span><span class="p">(</span><span class="s2">&quot;.myButton&quot;</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="nx">WCF_CLICK_EVENT</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_click</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
2052     <span class="p">},</span>
2053
2054     <span class="nx">_click</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
2055       <span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
2056
2057       <span class="k">if</span> <span class="p">(</span><span class="nx">UiBar</span><span class="p">.</span><span class="nx">isSnafucated</span><span class="p">())</span> <span class="p">{</span>
2058         <span class="nx">Ajax</span><span class="p">.</span><span class="nx">api</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
2059       <span class="p">}</span>
2060     <span class="p">},</span>
2061
2062     <span class="nx">_ajaxSuccess</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
2063       <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Received response&quot;</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
2064     <span class="p">},</span>
2065
2066     <span class="nx">_ajaxSetup</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2067       <span class="k">return</span> <span class="p">{</span>
2068         <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
2069           <span class="nx">actionName</span><span class="o">:</span> <span class="s2">&quot;makeSnafucated&quot;</span><span class="p">,</span>
2070           <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;wcf\\data\\foo\\FooAction&quot;</span>
2071         <span class="p">}</span>
2072       <span class="p">};</span>
2073     <span class="p">}</span>
2074   <span class="p">}</span>
2075
2076   <span class="k">return</span> <span class="nx">Foo</span><span class="p">;</span>
2077 <span class="p">});</span>
2078 </code></pre></div>
2079 <h2 id="loading-a-module">Loading a Module<a class="headerlink" href="#loading-a-module" title="Permanent link">#</a></h2>
2080 <p>Modules can then be loaded through their derived name:</p>
2081 <div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">script</span> <span class="na">data-relocate</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>
2082   <span class="nx">require</span><span class="p">([</span><span class="s2">&quot;WoltLabSuite/Core/Ui/Foo&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">UiFoo</span><span class="p">)</span> <span class="p">{</span>
2083     <span class="k">new</span> <span class="nx">UiFoo</span><span class="p">();</span>
2084   <span class="p">});</span>
2085 <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
2086 </code></pre></div>
2087 <h3 id="module-aliases">Module Aliases<a class="headerlink" href="#module-aliases" title="Permanent link">#</a></h3>
2088 <p>Some common modules have short-hand aliases that can be used to include them
2089 without writing out their full name. You can still use their original path, but
2090 it is strongly recommended to use the aliases for consistency.</p>
2091 <table>
2092 <thead>
2093 <tr>
2094 <th>Alias</th>
2095 <th>Full Path</th>
2096 </tr>
2097 </thead>
2098 <tbody>
2099 <tr>
2100 <td><a href="../new-api_ajax/">Ajax</a></td>
2101 <td>WoltLabSuite/Core/Ajax</td>
2102 </tr>
2103 <tr>
2104 <td>AjaxJsonp</td>
2105 <td>WoltLabSuite/Core/Ajax/Jsonp</td>
2106 </tr>
2107 <tr>
2108 <td>AjaxRequest</td>
2109 <td>WoltLabSuite/Core/Ajax/Request</td>
2110 </tr>
2111 <tr>
2112 <td>CallbackList</td>
2113 <td>WoltLabSuite/Core/CallbackList</td>
2114 </tr>
2115 <tr>
2116 <td>ColorUtil</td>
2117 <td>WoltLabSuite/Core/ColorUtil</td>
2118 </tr>
2119 <tr>
2120 <td><a href="../new-api_core/">Core</a></td>
2121 <td>WoltLabSuite/Core/Core</td>
2122 </tr>
2123 <tr>
2124 <td>DateUtil</td>
2125 <td>WoltLabSuite/Core/Date/Util</td>
2126 </tr>
2127 <tr>
2128 <td>Devtools</td>
2129 <td>WoltLabSuite/Core/Devtools</td>
2130 </tr>
2131 <tr>
2132 <td><a href="../new-api_data-structures/">Dictionary</a></td>
2133 <td>WoltLabSuite/Core/Dictionary</td>
2134 </tr>
2135 <tr>
2136 <td><a href="../new-api_dom/">Dom/ChangeListener</a></td>
2137 <td>WoltLabSuite/Core/Dom/Change/Listener</td>
2138 </tr>
2139 <tr>
2140 <td>Dom/Traverse</td>
2141 <td>WoltLabSuite/Core/Dom/Traverse</td>
2142 </tr>
2143 <tr>
2144 <td><a href="../new-api_dom/">Dom/Util</a></td>
2145 <td>WoltLabSuite/Core/Dom/Util</td>
2146 </tr>
2147 <tr>
2148 <td><a href="../new-api_browser/">Environment</a></td>
2149 <td>WoltLabSuite/Core/Environment</td>
2150 </tr>
2151 <tr>
2152 <td><a href="../new-api_events/">EventHandler</a></td>
2153 <td>WoltLabSuite/Core/Event/Handler</td>
2154 </tr>
2155 <tr>
2156 <td><a href="../new-api_events/">EventKey</a></td>
2157 <td>WoltLabSuite/Core/Event/Key</td>
2158 </tr>
2159 <tr>
2160 <td><a href="../new-api_core/">Language</a></td>
2161 <td>WoltLabSuite/Core/Language</td>
2162 </tr>
2163 <tr>
2164 <td><a href="../new-api_data-structures/">List</a></td>
2165 <td>WoltLabSuite/Core/List</td>
2166 </tr>
2167 <tr>
2168 <td><a href="../new-api_data-structures/">ObjectMap</a></td>
2169 <td>WoltLabSuite/Core/ObjectMap</td>
2170 </tr>
2171 <tr>
2172 <td>Permission</td>
2173 <td>WoltLabSuite/Core/Permission</td>
2174 </tr>
2175 <tr>
2176 <td><a href="../new-api_core/">StringUtil</a></td>
2177 <td>WoltLabSuite/Core/StringUtil</td>
2178 </tr>
2179 <tr>
2180 <td><a href="../new-api_ui/">Ui/Alignment</a></td>
2181 <td>WoltLabSuite/Core/Ui/Alignment</td>
2182 </tr>
2183 <tr>
2184 <td><a href="../new-api_ui/">Ui/CloseOverlay</a></td>
2185 <td>WoltLabSuite/Core/Ui/CloseOverlay</td>
2186 </tr>
2187 <tr>
2188 <td><a href="../new-api_ui/">Ui/Confirmation</a></td>
2189 <td>WoltLabSuite/Core/Ui/Confirmation</td>
2190 </tr>
2191 <tr>
2192 <td><a href="../new-api_dialogs/">Ui/Dialog</a></td>
2193 <td>WoltLabSuite/Core/Ui/Dialog</td>
2194 </tr>
2195 <tr>
2196 <td><a href="../new-api_ui/">Ui/Notification</a></td>
2197 <td>WoltLabSuite/Core/Ui/Notification</td>
2198 </tr>
2199 <tr>
2200 <td>Ui/ReusableDropdown</td>
2201 <td>WoltLabSuite/Core/Ui/Dropdown/Reusable</td>
2202 </tr>
2203 <tr>
2204 <td><a href="../new-api_browser/">Ui/Screen</a></td>
2205 <td>WoltLabSuite/Core/Ui/Screen</td>
2206 </tr>
2207 <tr>
2208 <td>Ui/Scroll</td>
2209 <td>WoltLabSuite/Core/Ui/Scroll</td>
2210 </tr>
2211 <tr>
2212 <td>Ui/SimpleDropdown</td>
2213 <td>WoltLabSuite/Core/Ui/Dropdown/Simple</td>
2214 </tr>
2215 <tr>
2216 <td>Ui/TabMenu</td>
2217 <td>WoltLabSuite/Core/Ui/TabMenu</td>
2218 </tr>
2219 <tr>
2220 <td>Upload</td>
2221 <td>WoltLabSuite/Core/Upload</td>
2222 </tr>
2223 <tr>
2224 <td>User</td>
2225 <td>WoltLabSuite/Core/User</td>
2226 </tr>
2227 </tbody>
2228 </table>
2229
2230
2231
2232
2233 <hr>
2234 <div class="md-source-date">
2235   <small>
2236
2237       Last update: 2021-01-08
2238
2239   </small>
2240 </div>
2241
2242
2243
2244
2245
2246
2247
2248
2249             </article>
2250           </div>
2251         </div>
2252
2253       </main>
2254
2255
2256 <footer class="md-footer">
2257
2258     <nav class="md-footer__inner md-grid" aria-label="Footer">
2259
2260         <a href="../typescript/" class="md-footer__link md-footer__link--prev" rel="prev">
2261           <div class="md-footer__button md-icon">
2262             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
2263           </div>
2264           <div class="md-footer__title">
2265             <div class="md-ellipsis">
2266               <span class="md-footer__direction">
2267                 Previous
2268               </span>
2269               TypeScript
2270             </div>
2271           </div>
2272         </a>
2273
2274
2275         <a href="../new-api_data-structures/" class="md-footer__link md-footer__link--next" rel="next">
2276           <div class="md-footer__title">
2277             <div class="md-ellipsis">
2278               <span class="md-footer__direction">
2279                 Next
2280               </span>
2281               Data Structures
2282             </div>
2283           </div>
2284           <div class="md-footer__button md-icon">
2285             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
2286           </div>
2287         </a>
2288
2289     </nav>
2290
2291   <div class="md-footer-meta md-typeset">
2292     <div class="md-footer-meta__inner md-grid">
2293       <div class="md-footer-copyright">
2294
2295           <div class="md-footer-copyright__highlight">
2296             Copyright © 2020 WoltLab GmbH
2297           </div>
2298
2299         Made with
2300         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2301           Material for MkDocs
2302         </a>
2303
2304       </div>
2305       <div class="md-footer-copyright">
2306         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2307         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2308 </div>
2309     </div>
2310   </div>
2311 </footer>
2312
2313     </div>
2314     <div class="md-dialog" data-md-component="dialog">
2315       <div class="md-dialog__inner md-typeset"></div>
2316     </div>
2317     <script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../../assets/javascripts/workers/search.fe42c31b.min.js", "version": {"provider": "mike"}}</script>
2318
2319
2320       <script src="../../assets/javascripts/bundle.4ea5477f.min.js"></script>
2321
2322
2323   </body>
2324 </html>