View on GitHub

How JS-Class-Loader works

Basics

JS-Class-Loader's main concerns are parse-time dependencies and run-time dependencies. A parse time dependency means that when a file is parsed - when it's code is loaded into the page - it references code from another file. So it isn't just that it has functions that call code from other files, it has things like inheritance functions that need a superclass to already have been defined in the page before the subclass can even be loaded.

For example, if the code in file Dog.js uses the code from file Animal.js outside of any function or object, then the file Animal.js must appear in the bundle first, otherwise when the browser parses file Dog.js it will complain that things from Animal.js aren't defined. So JS-Class-Loader (in it's default config), will scan files for things like this:

extend(com.example.SubClass, com.example.SuperClass)

and when it finds them it makes sure that SuperClass appears in the bundle before Subclass.

Note on the extend, implement and namespace functions
You can configure JS-Class-Loader to recognise your own functions for these things, if they are named differently or have a different structure. Or you can get a copy of the functions that are used in all the JS-Class-Loader examples if you want to use them.
(The extend function is in all the examples and is a simple implementation that uses an intermediate function constructor.)

The process

This fairly simple process means that the list of files will always contain parse-time dependencies in the bundle first.

Example codebase

click the arrows to expand and collapse the tree

Module tree view

module: lib

  • box2d
    • box2d.js
  • prototype
    • prototype.js

module: src

  • Base.js
  • jssynth
    • player
      • AmigaLowPassFilter.js
      • Effects.js
      • MODLoader.js
      • MODPlayer.js
      • NoteData.js
      • S3MLoader.js
    • Global.js
    • Instrument.js
    • Mixer.js
    • Sample.js
    • WebAudioOutput.js
    • WebkitAudioPatch.js
  • games
    • app
      • event
        • AppEventAdapter.js
      • Util.js
    • audio
      • Audio.js
    • box2d
      • WorldRenderer0.js
      • WorldRunner.js
    • effect
      • ParticleFire.js
    • scenario
      • event
        • ZoomHandler.js
      • Drums.js
      • RocketLander.js
      • Scenario.js
      • Trebuchet.js
    • svg
      • SVGToBox2D.js

List of all classes

box2d.box2d
prototype.prototype
Base
jssynth.player.AmigaLowPassFilter
jssynth.player.Effects
jssynth.player.MODLoader
jssynth.player.MODPlayer
jssynth.player.NoteData
jssynth.player.S3MLoader
jssynth.Global
jssynth.Instrument
jssynth.Mixer
jssynth.Sample
jssynth.WebAudioOutput
jssynth.WebkitAudioPatch
games.app.event.AppEventAdapter
games.app.Util
games.audio.Audio
games.box2d.WorldRenderer
games.box2d.WorldRunner
games.effect.ParticleFire
games.scenario.event.ZoomHandler
games.scenario.Drums
games.scenario.RocketLander
games.scenario.Scenario
games.scenario.Trebuchet
games.svg.SVGToBox2D

Dependency ordering

Base
ZoomHandler
games.scenario.Scenario
prototype.prototype
box2d.box2d
games.box2d.WorldRunner
games.svg.SVGToBox2D
games.app.event.AppEventAdapter
games.box2d.WorldRenderer
games.scenario.RocketLander
games.scenario.event.ZoomHandler
games.effect.ParticleFire
games.scenario.Drums
jssynth.Sample
jssynth.Global
jssynth.Mixer
jssynth.WebAudioOutput
games.scenario.Trebuchet
games.audio.Audio
jssynth.player.MODLoader
jssynth.player.NoteData
jssynth.Instrument
jssynth.player.Effects
jssynth.player.MODPlayer
jssynth.player.AmigaLowPassFilter
games.app.Util