latest/javascript/general-usage/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.0">
  14
  15
  16
  17         <title>General Usage - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../../assets/stylesheets/main.33e2939f.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="#general-javascript-usage" 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               General Usage
 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     <li class="md-nav__item">
 310       <a href="../../php/api/caches/" class="md-nav__link">
 311         Caches
 312       </a>
 313     </li>
 314
 315
 316
 317
 318
 319
 320
 321     <li class="md-nav__item">
 322       <a href="../../php/api/comments/" class="md-nav__link">
 323         Comments
 324       </a>
 325     </li>
 326
 327
 328
 329
 330
 331
 332
 333     <li class="md-nav__item">
 334       <a href="../../php/api/cronjobs/" class="md-nav__link">
 335         Cronjobs
 336       </a>
 337     </li>
 338
 339
 340
 341
 342
 343
 344
 345     <li class="md-nav__item">
 346       <a href="../../php/api/events/" class="md-nav__link">
 347         Events
 348       </a>
 349     </li>
 350
 351
 352
 353
 354
 355
 356
 357
 358     <li class="md-nav__item md-nav__item--nested">
 359
 360
 361         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 362
 363       <label class="md-nav__link" for="__nav_2_5_5">
 364         Form Builder
 365         <span class="md-nav__icon md-icon"></span>
 366       </label>
 367       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 368         <label class="md-nav__title" for="__nav_2_5_5">
 369           <span class="md-nav__icon md-icon"></span>
 370           Form Builder
 371         </label>
 372         <ul class="md-nav__list" data-md-scrollfix>
 373
 374
 375
 376
 377
 378     <li class="md-nav__item">
 379       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 380         Overview
 381       </a>
 382     </li>
 383
 384
 385
 386
 387
 388
 389
 390     <li class="md-nav__item">
 391       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 392         Structure
 393       </a>
 394     </li>
 395
 396
 397
 398
 399
 400
 401
 402     <li class="md-nav__item">
 403       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 404         Fields
 405       </a>
 406     </li>
 407
 408
 409
 410
 411
 412
 413
 414     <li class="md-nav__item">
 415       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 416         Validation and Data
 417       </a>
 418     </li>
 419
 420
 421
 422
 423
 424
 425
 426     <li class="md-nav__item">
 427       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 428         Dependencies
 429       </a>
 430     </li>
 431
 432
 433
 434         </ul>
 435       </nav>
 436     </li>
 437
 438
 439
 440
 441
 442
 443
 444     <li class="md-nav__item">
 445       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 446         Package Installation Plugins
 447       </a>
 448     </li>
 449
 450
 451
 452
 453
 454
 455
 456     <li class="md-nav__item">
 457       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 458         User Activity Points
 459       </a>
 460     </li>
 461
 462
 463
 464
 465
 466
 467
 468     <li class="md-nav__item">
 469       <a href="../../php/api/user_notifications/" class="md-nav__link">
 470         User Notifications
 471       </a>
 472     </li>
 473
 474
 475
 476
 477
 478
 479
 480     <li class="md-nav__item">
 481       <a href="../../php/api/sitemaps/" class="md-nav__link">
 482         Sitemaps
 483       </a>
 484     </li>
 485
 486
 487
 488         </ul>
 489       </nav>
 490     </li>
 491
 492
 493
 494
 495
 496
 497
 498     <li class="md-nav__item">
 499       <a href="../../php/code-style/" class="md-nav__link">
 500         Code Style
 501       </a>
 502     </li>
 503
 504
 505
 506
 507
 508
 509
 510     <li class="md-nav__item">
 511       <a href="../../php/apps/" class="md-nav__link">
 512         Apps
 513       </a>
 514     </li>
 515
 516
 517
 518
 519
 520
 521
 522     <li class="md-nav__item">
 523       <a href="../../php/gdpr/" class="md-nav__link">
 524         GDPR
 525       </a>
 526     </li>
 527
 528
 529
 530         </ul>
 531       </nav>
 532     </li>
 533
 534
 535
 536
 537
 538
 539
 540
 541
 542
 543
 544     <li class="md-nav__item md-nav__item--nested">
 545
 546
 547         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 548
 549       <label class="md-nav__link" for="__nav_3">
 550         Languages, Templates & CSS
 551         <span class="md-nav__icon md-icon"></span>
 552       </label>
 553       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 554         <label class="md-nav__title" for="__nav_3">
 555           <span class="md-nav__icon md-icon"></span>
 556           Languages, Templates & CSS
 557         </label>
 558         <ul class="md-nav__list" data-md-scrollfix>
 559
 560
 561
 562
 563
 564     <li class="md-nav__item">
 565       <a href="../../view/languages/" class="md-nav__link">
 566         Languages
 567       </a>
 568     </li>
 569
 570
 571
 572
 573
 574
 575
 576     <li class="md-nav__item">
 577       <a href="../../view/templates/" class="md-nav__link">
 578         Templates
 579       </a>
 580     </li>
 581
 582
 583
 584
 585
 586
 587
 588     <li class="md-nav__item">
 589       <a href="../../view/css/" class="md-nav__link">
 590         CSS
 591       </a>
 592     </li>
 593
 594
 595
 596         </ul>
 597       </nav>
 598     </li>
 599
 600
 601
 602
 603
 604
 605
 606
 607
 608
 609
 610
 611
 612     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 613
 614
 615         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
 616
 617       <label class="md-nav__link" for="__nav_4">
 618         JavaScript API
 619         <span class="md-nav__icon md-icon"></span>
 620       </label>
 621       <nav class="md-nav" aria-label="JavaScript API" data-md-level="1">
 622         <label class="md-nav__title" for="__nav_4">
 623           <span class="md-nav__icon md-icon"></span>
 624           JavaScript API
 625         </label>
 626         <ul class="md-nav__list" data-md-scrollfix>
 627
 628
 629
 630
 631
 632
 633
 634     <li class="md-nav__item md-nav__item--active">
 635
 636       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 637
 638
 639
 640
 641         <label class="md-nav__link md-nav__link--active" for="__toc">
 642           General Usage
 643           <span class="md-nav__icon md-icon"></span>
 644         </label>
 645
 646       <a href="./" class="md-nav__link md-nav__link--active">
 647         General Usage
 648       </a>
 649
 650
 651 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 652
 653
 654
 655
 656
 657     <label class="md-nav__title" for="__toc">
 658       <span class="md-nav__icon md-icon"></span>
 659       Table of contents
 660     </label>
 661     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 662
 663         <li class="md-nav__item">
 664   <a href="#the-history-of-the-legacy-api" class="md-nav__link">
 665     The History of the Legacy API
 666   </a>
 667
 668 </li>
 669
 670         <li class="md-nav__item">
 671   <a href="#embedding-javascript-inside-templates" class="md-nav__link">
 672     Embedding JavaScript inside Templates
 673   </a>
 674
 675 </li>
 676
 677         <li class="md-nav__item">
 678   <a href="#including-external-javascript-files" class="md-nav__link">
 679     Including External JavaScript Files
 680   </a>
 681
 682     <nav class="md-nav" aria-label="Including External JavaScript Files">
 683       <ul class="md-nav__list">
 684
 685           <li class="md-nav__item">
 686   <a href="#debug-variants-and-cache-buster" class="md-nav__link">
 687     Debug-Variants and Cache-Buster
 688   </a>
 689
 690 </li>
 691
 692           <li class="md-nav__item">
 693   <a href="#the-accelerated-guest-view-tiny-builds" class="md-nav__link">
 694     The Accelerated Guest View ("Tiny Builds")
 695   </a>
 696
 697 </li>
 698
 699           <li class="md-nav__item">
 700   <a href="#the-js-template-plugin" class="md-nav__link">
 701     The {js} Template Plugin
 702   </a>
 703
 704 </li>
 705
 706       </ul>
 707     </nav>
 708
 709 </li>
 710
 711     </ul>
 712
 713 </nav>
 714
 715     </li>
 716
 717
 718
 719
 720
 721
 722
 723
 724     <li class="md-nav__item md-nav__item--nested">
 725
 726
 727         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_2" type="checkbox" id="__nav_4_2" >
 728
 729       <label class="md-nav__link" for="__nav_4_2">
 730         New API
 731         <span class="md-nav__icon md-icon"></span>
 732       </label>
 733       <nav class="md-nav" aria-label="New API" data-md-level="2">
 734         <label class="md-nav__title" for="__nav_4_2">
 735           <span class="md-nav__icon md-icon"></span>
 736           New API
 737         </label>
 738         <ul class="md-nav__list" data-md-scrollfix>
 739
 740
 741
 742
 743
 744     <li class="md-nav__item">
 745       <a href="../new-api_writing-a-module/" class="md-nav__link">
 746         Writing a module
 747       </a>
 748     </li>
 749
 750
 751
 752
 753
 754
 755
 756     <li class="md-nav__item">
 757       <a href="../new-api_data-structures/" class="md-nav__link">
 758         Data Structures
 759       </a>
 760     </li>
 761
 762
 763
 764
 765
 766
 767
 768     <li class="md-nav__item">
 769       <a href="../new-api_core/" class="md-nav__link">
 770         Core Functions
 771       </a>
 772     </li>
 773
 774
 775
 776
 777
 778
 779
 780     <li class="md-nav__item">
 781       <a href="../new-api_dom/" class="md-nav__link">
 782         DOM
 783       </a>
 784     </li>
 785
 786
 787
 788
 789
 790
 791
 792     <li class="md-nav__item">
 793       <a href="../new-api_events/" class="md-nav__link">
 794         Event Handling
 795       </a>
 796     </li>
 797
 798
 799
 800
 801
 802
 803
 804     <li class="md-nav__item">
 805       <a href="../new-api_ajax/" class="md-nav__link">
 806         Ajax
 807       </a>
 808     </li>
 809
 810
 811
 812
 813
 814
 815
 816     <li class="md-nav__item">
 817       <a href="../new-api_dialogs/" class="md-nav__link">
 818         Dialogs
 819       </a>
 820     </li>
 821
 822
 823
 824
 825
 826
 827
 828     <li class="md-nav__item">
 829       <a href="../new-api_browser/" class="md-nav__link">
 830         Browser and Screen Sizes
 831       </a>
 832     </li>
 833
 834
 835
 836
 837
 838
 839
 840     <li class="md-nav__item">
 841       <a href="../new-api_ui/" class="md-nav__link">
 842         User Interface
 843       </a>
 844     </li>
 845
 846
 847
 848         </ul>
 849       </nav>
 850     </li>
 851
 852
 853
 854
 855
 856
 857
 858     <li class="md-nav__item">
 859       <a href="../legacy-api/" class="md-nav__link">
 860         Legacy API
 861       </a>
 862     </li>
 863
 864
 865
 866
 867
 868
 869
 870     <li class="md-nav__item">
 871       <a href="../helper-functions/" class="md-nav__link">
 872         Helper Functions
 873       </a>
 874     </li>
 875
 876
 877
 878
 879
 880
 881
 882     <li class="md-nav__item">
 883       <a href="../code-snippets/" class="md-nav__link">
 884         Code Snippets
 885       </a>
 886     </li>
 887
 888
 889
 890         </ul>
 891       </nav>
 892     </li>
 893
 894
 895
 896
 897
 898
 899
 900
 901
 902
 903
 904     <li class="md-nav__item md-nav__item--nested">
 905
 906
 907         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
 908
 909       <label class="md-nav__link" for="__nav_5">
 910         Package Components
 911         <span class="md-nav__icon md-icon"></span>
 912       </label>
 913       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
 914         <label class="md-nav__title" for="__nav_5">
 915           <span class="md-nav__icon md-icon"></span>
 916           Package Components
 917         </label>
 918         <ul class="md-nav__list" data-md-scrollfix>
 919
 920
 921
 922
 923
 924     <li class="md-nav__item">
 925       <a href="../../package/package-xml/" class="md-nav__link">
 926         package.xml
 927       </a>
 928     </li>
 929
 930
 931
 932
 933
 934
 935
 936
 937     <li class="md-nav__item md-nav__item--nested">
 938
 939
 940         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
 941
 942       <label class="md-nav__link" for="__nav_5_2">
 943         PIPs
 944         <span class="md-nav__icon md-icon"></span>
 945       </label>
 946       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
 947         <label class="md-nav__title" for="__nav_5_2">
 948           <span class="md-nav__icon md-icon"></span>
 949           PIPs
 950         </label>
 951         <ul class="md-nav__list" data-md-scrollfix>
 952
 953
 954
 955
 956
 957     <li class="md-nav__item">
 958       <a href="../../package/pip/" class="md-nav__link">
 959         Overview
 960       </a>
 961     </li>
 962
 963
 964
 965
 966
 967
 968
 969     <li class="md-nav__item">
 970       <a href="../../package/pip/acl-option/" class="md-nav__link">
 971         aclOption
 972       </a>
 973     </li>
 974
 975
 976
 977
 978
 979
 980
 981     <li class="md-nav__item">
 982       <a href="../../package/pip/acp-menu/" class="md-nav__link">
 983         acpMenu
 984       </a>
 985     </li>
 986
 987
 988
 989
 990
 991
 992
 993     <li class="md-nav__item">
 994       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
 995         acpSearchProvider
 996       </a>
 997     </li>
 998
 999
1000
1001
1002
1003
1004
1005     <li class="md-nav__item">
1006       <a href="../../package/pip/acp-template/" class="md-nav__link">
1007         acpTemplate
1008       </a>
1009     </li>
1010
1011
1012
1013
1014
1015
1016
1017     <li class="md-nav__item">
1018       <a href="../../package/pip/bbcode/" class="md-nav__link">
1019         bbcode
1020       </a>
1021     </li>
1022
1023
1024
1025
1026
1027
1028
1029     <li class="md-nav__item">
1030       <a href="../../package/pip/box/" class="md-nav__link">
1031         box
1032       </a>
1033     </li>
1034
1035
1036
1037
1038
1039
1040
1041     <li class="md-nav__item">
1042       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1043         clipboardAction
1044       </a>
1045     </li>
1046
1047
1048
1049
1050
1051
1052
1053     <li class="md-nav__item">
1054       <a href="../../package/pip/core-object/" class="md-nav__link">
1055         coreObject
1056       </a>
1057     </li>
1058
1059
1060
1061
1062
1063
1064
1065     <li class="md-nav__item">
1066       <a href="../../package/pip/cronjob/" class="md-nav__link">
1067         cronjob
1068       </a>
1069     </li>
1070
1071
1072
1073
1074
1075
1076
1077     <li class="md-nav__item">
1078       <a href="../../package/pip/event-listener/" class="md-nav__link">
1079         eventListener
1080       </a>
1081     </li>
1082
1083
1084
1085
1086
1087
1088
1089     <li class="md-nav__item">
1090       <a href="../../package/pip/file/" class="md-nav__link">
1091         file
1092       </a>
1093     </li>
1094
1095
1096
1097
1098
1099
1100
1101     <li class="md-nav__item">
1102       <a href="../../package/pip/language/" class="md-nav__link">
1103         language
1104       </a>
1105     </li>
1106
1107
1108
1109
1110
1111
1112
1113     <li class="md-nav__item">
1114       <a href="../../package/pip/media-provider/" class="md-nav__link">
1115         mediaProvider
1116       </a>
1117     </li>
1118
1119
1120
1121
1122
1123
1124
1125     <li class="md-nav__item">
1126       <a href="../../package/pip/menu/" class="md-nav__link">
1127         menu
1128       </a>
1129     </li>
1130
1131
1132
1133
1134
1135
1136
1137     <li class="md-nav__item">
1138       <a href="../../package/pip/menu-item/" class="md-nav__link">
1139         menuItem
1140       </a>
1141     </li>
1142
1143
1144
1145
1146
1147
1148
1149     <li class="md-nav__item">
1150       <a href="../../package/pip/object-type/" class="md-nav__link">
1151         objectType
1152       </a>
1153     </li>
1154
1155
1156
1157
1158
1159
1160
1161     <li class="md-nav__item">
1162       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1163         objectTypeDefinition
1164       </a>
1165     </li>
1166
1167
1168
1169
1170
1171
1172
1173     <li class="md-nav__item">
1174       <a href="../../package/pip/option/" class="md-nav__link">
1175         option
1176       </a>
1177     </li>
1178
1179
1180
1181
1182
1183
1184
1185     <li class="md-nav__item">
1186       <a href="../../package/pip/page/" class="md-nav__link">
1187         page
1188       </a>
1189     </li>
1190
1191
1192
1193
1194
1195
1196
1197     <li class="md-nav__item">
1198       <a href="../../package/pip/pip/" class="md-nav__link">
1199         pip
1200       </a>
1201     </li>
1202
1203
1204
1205
1206
1207
1208
1209     <li class="md-nav__item">
1210       <a href="../../package/pip/script/" class="md-nav__link">
1211         script
1212       </a>
1213     </li>
1214
1215
1216
1217
1218
1219
1220
1221     <li class="md-nav__item">
1222       <a href="../../package/pip/smiley/" class="md-nav__link">
1223         smiley
1224       </a>
1225     </li>
1226
1227
1228
1229
1230
1231
1232
1233     <li class="md-nav__item">
1234       <a href="../../package/pip/sql/" class="md-nav__link">
1235         sql
1236       </a>
1237     </li>
1238
1239
1240
1241
1242
1243
1244
1245     <li class="md-nav__item">
1246       <a href="../../package/pip/style/" class="md-nav__link">
1247         style
1248       </a>
1249     </li>
1250
1251
1252
1253
1254
1255
1256
1257     <li class="md-nav__item">
1258       <a href="../../package/pip/template/" class="md-nav__link">
1259         template
1260       </a>
1261     </li>
1262
1263
1264
1265
1266
1267
1268
1269     <li class="md-nav__item">
1270       <a href="../../package/pip/template-listener/" class="md-nav__link">
1271         templateListener
1272       </a>
1273     </li>
1274
1275
1276
1277
1278
1279
1280
1281     <li class="md-nav__item">
1282       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1283         userGroupOption
1284       </a>
1285     </li>
1286
1287
1288
1289
1290
1291
1292
1293     <li class="md-nav__item">
1294       <a href="../../package/pip/user-menu/" class="md-nav__link">
1295         userMenu
1296       </a>
1297     </li>
1298
1299
1300
1301
1302
1303
1304
1305     <li class="md-nav__item">
1306       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1307         userNotificationEvent
1308       </a>
1309     </li>
1310
1311
1312
1313
1314
1315
1316
1317     <li class="md-nav__item">
1318       <a href="../../package/pip/user-option/" class="md-nav__link">
1319         userOption
1320       </a>
1321     </li>
1322
1323
1324
1325
1326
1327
1328
1329     <li class="md-nav__item">
1330       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1331         userProfileMenu
1332       </a>
1333     </li>
1334
1335
1336
1337         </ul>
1338       </nav>
1339     </li>
1340
1341
1342
1343
1344
1345
1346
1347     <li class="md-nav__item">
1348       <a href="../../package/database-php-api/" class="md-nav__link">
1349         Database PHP API
1350       </a>
1351     </li>
1352
1353
1354
1355         </ul>
1356       </nav>
1357     </li>
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369     <li class="md-nav__item md-nav__item--nested">
1370
1371
1372         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1373
1374       <label class="md-nav__link" for="__nav_6">
1375         Migration
1376         <span class="md-nav__icon md-icon"></span>
1377       </label>
1378       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1379         <label class="md-nav__title" for="__nav_6">
1380           <span class="md-nav__icon md-icon"></span>
1381           Migration
1382         </label>
1383         <ul class="md-nav__list" data-md-scrollfix>
1384
1385
1386
1387
1388
1389
1390     <li class="md-nav__item md-nav__item--nested">
1391
1392
1393         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1394
1395       <label class="md-nav__link" for="__nav_6_1">
1396         Migrating from WSC 5.3
1397         <span class="md-nav__icon md-icon"></span>
1398       </label>
1399       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1400         <label class="md-nav__title" for="__nav_6_1">
1401           <span class="md-nav__icon md-icon"></span>
1402           Migrating from WSC 5.3
1403         </label>
1404         <ul class="md-nav__list" data-md-scrollfix>
1405
1406
1407
1408
1409
1410     <li class="md-nav__item">
1411       <a href="../../migration/wsc53/php/" class="md-nav__link">
1412         PHP API
1413       </a>
1414     </li>
1415
1416
1417
1418
1419
1420
1421
1422     <li class="md-nav__item">
1423       <a href="../../migration/wsc53/session/" class="md-nav__link">
1424         Session Handling and Authentication
1425       </a>
1426     </li>
1427
1428
1429
1430
1431
1432
1433
1434     <li class="md-nav__item">
1435       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1436         JavaScript
1437       </a>
1438     </li>
1439
1440
1441
1442
1443
1444
1445
1446     <li class="md-nav__item">
1447       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1448         Templates
1449       </a>
1450     </li>
1451
1452
1453
1454
1455
1456
1457
1458     <li class="md-nav__item">
1459       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1460         Third Party Libraries
1461       </a>
1462     </li>
1463
1464
1465
1466         </ul>
1467       </nav>
1468     </li>
1469
1470
1471
1472
1473
1474
1475
1476
1477     <li class="md-nav__item md-nav__item--nested">
1478
1479
1480         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1481
1482       <label class="md-nav__link" for="__nav_6_2">
1483         Migrating from WSC 5.2
1484         <span class="md-nav__icon md-icon"></span>
1485       </label>
1486       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1487         <label class="md-nav__title" for="__nav_6_2">
1488           <span class="md-nav__icon md-icon"></span>
1489           Migrating from WSC 5.2
1490         </label>
1491         <ul class="md-nav__list" data-md-scrollfix>
1492
1493
1494
1495
1496
1497     <li class="md-nav__item">
1498       <a href="../../migration/wsc52/php/" class="md-nav__link">
1499         PHP API
1500       </a>
1501     </li>
1502
1503
1504
1505
1506
1507
1508
1509     <li class="md-nav__item">
1510       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1511         Templates and Languages
1512       </a>
1513     </li>
1514
1515
1516
1517
1518
1519
1520
1521     <li class="md-nav__item">
1522       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1523         Third Party Libraries
1524       </a>
1525     </li>
1526
1527
1528
1529         </ul>
1530       </nav>
1531     </li>
1532
1533
1534
1535
1536
1537
1538
1539
1540     <li class="md-nav__item md-nav__item--nested">
1541
1542
1543         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1544
1545       <label class="md-nav__link" for="__nav_6_3">
1546         Migrating from WSC 3.1
1547         <span class="md-nav__icon md-icon"></span>
1548       </label>
1549       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1550         <label class="md-nav__title" for="__nav_6_3">
1551           <span class="md-nav__icon md-icon"></span>
1552           Migrating from WSC 3.1
1553         </label>
1554         <ul class="md-nav__list" data-md-scrollfix>
1555
1556
1557
1558
1559
1560     <li class="md-nav__item">
1561       <a href="../../migration/wsc31/php/" class="md-nav__link">
1562         PHP API
1563       </a>
1564     </li>
1565
1566
1567
1568         </ul>
1569       </nav>
1570     </li>
1571
1572
1573
1574
1575
1576
1577
1578
1579     <li class="md-nav__item md-nav__item--nested">
1580
1581
1582         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1583
1584       <label class="md-nav__link" for="__nav_6_4">
1585         Migrating from WSC 3.0
1586         <span class="md-nav__icon md-icon"></span>
1587       </label>
1588       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1589         <label class="md-nav__title" for="__nav_6_4">
1590           <span class="md-nav__icon md-icon"></span>
1591           Migrating from WSC 3.0
1592         </label>
1593         <ul class="md-nav__list" data-md-scrollfix>
1594
1595
1596
1597
1598
1599     <li class="md-nav__item">
1600       <a href="../../migration/wsc30/php/" class="md-nav__link">
1601         PHP API
1602       </a>
1603     </li>
1604
1605
1606
1607
1608
1609
1610
1611     <li class="md-nav__item">
1612       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1613         JavaScript API
1614       </a>
1615     </li>
1616
1617
1618
1619
1620
1621
1622
1623     <li class="md-nav__item">
1624       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1625         Templates
1626       </a>
1627     </li>
1628
1629
1630
1631
1632
1633
1634
1635     <li class="md-nav__item">
1636       <a href="../../migration/wsc30/css/" class="md-nav__link">
1637         CSS
1638       </a>
1639     </li>
1640
1641
1642
1643
1644
1645
1646
1647     <li class="md-nav__item">
1648       <a href="../../migration/wsc30/package/" class="md-nav__link">
1649         Package Components
1650       </a>
1651     </li>
1652
1653
1654
1655         </ul>
1656       </nav>
1657     </li>
1658
1659
1660
1661
1662
1663
1664
1665
1666     <li class="md-nav__item md-nav__item--nested">
1667
1668
1669         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1670
1671       <label class="md-nav__link" for="__nav_6_5">
1672         Migrating from WCF 2.1
1673         <span class="md-nav__icon md-icon"></span>
1674       </label>
1675       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1676         <label class="md-nav__title" for="__nav_6_5">
1677           <span class="md-nav__icon md-icon"></span>
1678           Migrating from WCF 2.1
1679         </label>
1680         <ul class="md-nav__list" data-md-scrollfix>
1681
1682
1683
1684
1685
1686     <li class="md-nav__item">
1687       <a href="../../migration/wcf21/php/" class="md-nav__link">
1688         PHP API
1689       </a>
1690     </li>
1691
1692
1693
1694
1695
1696
1697
1698     <li class="md-nav__item">
1699       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1700         Templates
1701       </a>
1702     </li>
1703
1704
1705
1706
1707
1708
1709
1710     <li class="md-nav__item">
1711       <a href="../../migration/wcf21/css/" class="md-nav__link">
1712         CSS
1713       </a>
1714     </li>
1715
1716
1717
1718
1719
1720
1721
1722     <li class="md-nav__item">
1723       <a href="../../migration/wcf21/package/" class="md-nav__link">
1724         Package Components
1725       </a>
1726     </li>
1727
1728
1729
1730         </ul>
1731       </nav>
1732     </li>
1733
1734
1735
1736         </ul>
1737       </nav>
1738     </li>
1739
1740
1741
1742
1743
1744
1745
1746
1747
1748
1749
1750     <li class="md-nav__item md-nav__item--nested">
1751
1752
1753         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1754
1755       <label class="md-nav__link" for="__nav_7">
1756         Tutorials
1757         <span class="md-nav__icon md-icon"></span>
1758       </label>
1759       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1760         <label class="md-nav__title" for="__nav_7">
1761           <span class="md-nav__icon md-icon"></span>
1762           Tutorials
1763         </label>
1764         <ul class="md-nav__list" data-md-scrollfix>
1765
1766
1767
1768
1769
1770
1771     <li class="md-nav__item md-nav__item--nested">
1772
1773
1774         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1775
1776       <label class="md-nav__link" for="__nav_7_1">
1777         Tutorial Series
1778         <span class="md-nav__icon md-icon"></span>
1779       </label>
1780       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1781         <label class="md-nav__title" for="__nav_7_1">
1782           <span class="md-nav__icon md-icon"></span>
1783           Tutorial Series
1784         </label>
1785         <ul class="md-nav__list" data-md-scrollfix>
1786
1787
1788
1789
1790
1791     <li class="md-nav__item">
1792       <a href="../../tutorial/series/overview/" class="md-nav__link">
1793         Overview
1794       </a>
1795     </li>
1796
1797
1798
1799
1800
1801
1802
1803     <li class="md-nav__item">
1804       <a href="../../tutorial/series/part_1/" class="md-nav__link">
1805         Part 1
1806       </a>
1807     </li>
1808
1809
1810
1811
1812
1813
1814
1815     <li class="md-nav__item">
1816       <a href="../../tutorial/series/part_2/" class="md-nav__link">
1817         Part 2
1818       </a>
1819     </li>
1820
1821
1822
1823
1824
1825
1826
1827     <li class="md-nav__item">
1828       <a href="../../tutorial/series/part_3/" class="md-nav__link">
1829         Part 3
1830       </a>
1831     </li>
1832
1833
1834
1835         </ul>
1836       </nav>
1837     </li>
1838
1839
1840
1841         </ul>
1842       </nav>
1843     </li>
1844
1845
1846
1847   </ul>
1848 </nav>
1849                   </div>
1850                 </div>
1851               </div>
1852
1853
1854
1855               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
1856                 <div class="md-sidebar__scrollwrap">
1857                   <div class="md-sidebar__inner">
1858
1859 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1860
1861
1862
1863
1864
1865     <label class="md-nav__title" for="__toc">
1866       <span class="md-nav__icon md-icon"></span>
1867       Table of contents
1868     </label>
1869     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
1870
1871         <li class="md-nav__item">
1872   <a href="#the-history-of-the-legacy-api" class="md-nav__link">
1873     The History of the Legacy API
1874   </a>
1875
1876 </li>
1877
1878         <li class="md-nav__item">
1879   <a href="#embedding-javascript-inside-templates" class="md-nav__link">
1880     Embedding JavaScript inside Templates
1881   </a>
1882
1883 </li>
1884
1885         <li class="md-nav__item">
1886   <a href="#including-external-javascript-files" class="md-nav__link">
1887     Including External JavaScript Files
1888   </a>
1889
1890     <nav class="md-nav" aria-label="Including External JavaScript Files">
1891       <ul class="md-nav__list">
1892
1893           <li class="md-nav__item">
1894   <a href="#debug-variants-and-cache-buster" class="md-nav__link">
1895     Debug-Variants and Cache-Buster
1896   </a>
1897
1898 </li>
1899
1900           <li class="md-nav__item">
1901   <a href="#the-accelerated-guest-view-tiny-builds" class="md-nav__link">
1902     The Accelerated Guest View ("Tiny Builds")
1903   </a>
1904
1905 </li>
1906
1907           <li class="md-nav__item">
1908   <a href="#the-js-template-plugin" class="md-nav__link">
1909     The {js} Template Plugin
1910   </a>
1911
1912 </li>
1913
1914       </ul>
1915     </nav>
1916
1917 </li>
1918
1919     </ul>
1920
1921 </nav>
1922                   </div>
1923                 </div>
1924               </div>
1925
1926
1927           <div class="md-content" data-md-component="content">
1928             <article class="md-content__inner md-typeset">
1929
1930
1931                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/javascript/general-usage.md" title="Edit this page" class="md-content__button md-icon">
1932                     <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>
1933                   </a>
1934
1935
1936                 <h1 id="general-javascript-usage">General JavaScript Usage<a class="headerlink" href="#general-javascript-usage" title="Permanent link">#</a></h1>
1937 <h2 id="the-history-of-the-legacy-api">The History of the Legacy API<a class="headerlink" href="#the-history-of-the-legacy-api" title="Permanent link">#</a></h2>
1938 <p>The WoltLab Suite 3.0 <a href="../new-api_writing-a-module/">introduced a new API</a> based on AMD-Modules
1939 with ES5-JavaScript that was designed with high performance and visible dependencies
1940 in mind. This was a fundamental change in comparison to <a href="../legacy-api/">the legacy API</a>
1941 that was build many years before while jQuery was still a thing and we had to deal
1942 with ancient browsers such as Internet Explorer 9 that felt short in both CSS and
1943 JavaScript capabilities.</p>
1944 <p>Fast forward a few years, the old API is still around and most important, it is
1945 actively being used by some components that have not been rewritten yet. This
1946 has been done to preserve the backwards-compatibility and to avoid the
1947 significant amount of work that it requires to rewrite a component. The components
1948 invoked on page initialization have all been rewritten to use the modern API, but
1949 some deferred objects that are invoked later during the page runtime may still
1950 use the old API.</p>
1951 <p>However, the legacy API is deprecated and you should not rely on it for new
1952 components at all. It slowly but steadily gets replaced up until a point where its
1953 last bits are finally removed from the code base.</p>
1954 <h2 id="embedding-javascript-inside-templates">Embedding JavaScript inside Templates<a class="headerlink" href="#embedding-javascript-inside-templates" title="Permanent link">#</a></h2>
1955 <p>The <code>&lt;script&gt;</code>-tags are extracted and moved during template processing, eventually
1956 placing them at the very end of the body element while preserving their order of
1957 appearance.</p>
1958 <p>This behavior is controlled through the <code>data-relocate="true"</code> attribute on the <code>&lt;script&gt;</code>
1959 which is mandatory for almost all scripts, mostly because their dependencies (such
1960 as jQuery) are moved to the bottom anyway.</p>
1961 <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>
1962   <span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
1963     <span class="c1">// Code that uses jQuery (Legacy API)</span>
1964   <span class="p">});</span>
1965 <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
1966
1967 <span class="c">&lt;!-- or --&gt;</span>
1968
1969 <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>
1970   <span class="nx">require</span><span class="p">([</span><span class="s2">&quot;Some&quot;</span><span class="p">,</span> <span class="s2">&quot;Dependencies&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">Some</span><span class="p">,</span> <span class="nx">Dependencies</span><span class="p">)</span> <span class="p">{</span>
1971     <span class="c1">// Modern API</span>
1972   <span class="p">});</span>
1973 <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
1974 </code></pre></div>
1975 <h2 id="including-external-javascript-files">Including External JavaScript Files<a class="headerlink" href="#including-external-javascript-files" title="Permanent link">#</a></h2>
1976 <p>The AMD-Modules used in the new API are automatically recognized and lazy-loaded
1977 on demand, so unless you have a rather large and pre-compiled code-base, there
1978 is nothing else to worry about.</p>
1979 <h3 id="debug-variants-and-cache-buster">Debug-Variants and Cache-Buster<a class="headerlink" href="#debug-variants-and-cache-buster" title="Permanent link">#</a></h3>
1980 <p>Your JavaScript files may change over time and you would want the users' browsers
1981 to always load and use the latest version of your files. This can be achieved by
1982 appending the special <code>LAST_UPDATE_TIME</code> constant to your file path. It contains
1983 the unix timestamp of the last time any package was installed, updated or removed
1984 and thus avoid outdated caches by relying on a unique value, without invalidating
1985 the cache more often that it needs to be.</p>
1986 <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="na">src</span><span class="o">=</span><span class="s">&quot;{@$__wcf-&gt;getPath(&#39;app&#39;)}js/App.js?t={@LAST_UPDATE_TIME}&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
1987 </code></pre></div>
1988 <p>For small scripts you can simply serve the full, non-minified version to the user
1989 at all times, the differences in size and execution speed are insignificant and
1990 are very unlikely to offer any benefits. They might even yield a worse performance,
1991 because you'll have to include them statically in the template, even if the code
1992 is never called.</p>
1993 <p>However, if you're including a minified build in your app or plugin, you should
1994 include a switch to load the uncompressed version in the debug mode, while serving
1995 the minified and optimized file to the average visitor. You should use the
1996 <code>ENABLE_DEBUG_MODE</code> constant to decide which version should be loaded.</p>
1997 <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="na">src</span><span class="o">=</span><span class="s">&quot;{@$__wcf-&gt;getPath(&#39;app&#39;)}js/App{if !ENABLE_DEBUG_MODE}.min{/if}.js?t={@LAST_UPDATE_TIME}&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
1998 </code></pre></div>
1999 <h3 id="the-accelerated-guest-view-tiny-builds">The Accelerated Guest View ("Tiny Builds")<a class="headerlink" href="#the-accelerated-guest-view-tiny-builds" title="Permanent link">#</a></h3>
2000 <div class="admonition info">
2001 <p class="admonition-title">You can learn more on the <a href="../../migration/wsc30/javascript/">Accelerated Guest View</a> in the migration docs.</p>
2002 </div>
2003 <p>The "Accelerated Guest View" was introduced in WoltLab Suite 3.1 and aims to
2004 decrease page size and to improve responsiveness by enabling a read-only mode
2005 for visitors. If you are providing a separate compiled build for this mode, you'll
2006 need to include yet another switch to serve the right version to the visitor.</p>
2007 <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="na">src</span><span class="o">=</span><span class="s">&quot;{@$__wcf-&gt;getPath(&#39;app&#39;)}js/App{if !ENABLE_DEBUG_MODE}{if VISITOR_USE_TINY_BUILD}.tiny{/if}.min{/if}.js?t={@LAST_UPDATE_TIME}&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
2008 </code></pre></div>
2009 <h3 id="the-js-template-plugin">The <code>{js}</code> Template Plugin<a class="headerlink" href="#the-js-template-plugin" title="Permanent link">#</a></h3>
2010 <p>The <code>{js}</code> template plugin exists solely to provide a much easier and less error-prone
2011 method to include external JavaScript files.</p>
2012 <div class="highlight"><pre><span></span><code>{js application=&#39;app&#39; file=&#39;App&#39; hasTiny=true}
2013 </code></pre></div>
2014 <p>The <code>hasTiny</code> attribute is optional, you can set it to <code>false</code> or just omit it
2015 entirely if you do not provide a tiny build for your file.</p>
2016
2017
2018
2019
2020 <hr>
2021 <div class="md-source-date">
2022   <small>
2023
2024       Last update: 2021-01-08
2025
2026   </small>
2027 </div>
2028
2029
2030
2031
2032
2033
2034
2035
2036             </article>
2037           </div>
2038         </div>
2039
2040       </main>
2041
2042
2043 <footer class="md-footer">
2044
2045     <nav class="md-footer__inner md-grid" aria-label="Footer">
2046
2047         <a href="../../view/css/" class="md-footer__link md-footer__link--prev" rel="prev">
2048           <div class="md-footer__button md-icon">
2049             <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>
2050           </div>
2051           <div class="md-footer__title">
2052             <div class="md-ellipsis">
2053               <span class="md-footer__direction">
2054                 Previous
2055               </span>
2056               CSS
2057             </div>
2058           </div>
2059         </a>
2060
2061
2062         <a href="../new-api_writing-a-module/" class="md-footer__link md-footer__link--next" rel="next">
2063           <div class="md-footer__title">
2064             <div class="md-ellipsis">
2065               <span class="md-footer__direction">
2066                 Next
2067               </span>
2068               Writing a module
2069             </div>
2070           </div>
2071           <div class="md-footer__button md-icon">
2072             <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>
2073           </div>
2074         </a>
2075
2076     </nav>
2077
2078   <div class="md-footer-meta md-typeset">
2079     <div class="md-footer-meta__inner md-grid">
2080       <div class="md-footer-copyright">
2081
2082           <div class="md-footer-copyright__highlight">
2083             Copyright © 2020 WoltLab GmbH
2084           </div>
2085
2086         Made with
2087         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2088           Material for MkDocs
2089         </a>
2090
2091       </div>
2092       <div class="md-footer-copyright">
2093         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2094         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2095 </div>
2096     </div>
2097   </div>
2098 </footer>
2099
2100     </div>
2101     <div class="md-dialog" data-md-component="dialog">
2102       <div class="md-dialog__inner md-typeset"></div>
2103     </div>
2104     <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>
2105
2106
2107       <script src="../../assets/javascripts/bundle.d892486b.min.js"></script>
2108
2109
2110   </body>
2111 </html>