lockandload
Lockandload is a minimalist AMD-loader-compatible boilerplate to kickstart
your website/single-page-app.
Gzipped, the essential script content amounts to roughly 1KB of code.
Without compression it blows up to just under 2KB. Further minifying this
code does not result in any significant gains, it would just hinder
readability.
Features
- Less filling: 1KB of gzipped script content.
- Handminified to retain readable and maintainable code.
- It's so small, it can and should be inlined on your HTML page
(which is also one of the reasons to handminify it only).
- Because it is inlined, it is faster than all other loaders.
- Fully asynchronous script loader: AMD-compatible.
- Supports anonymous define() calls.
- Supports local require() calls (with one and two arguments).
- Supports implicit and explicit ['require'] dependencies.
- Does not support implicit nor explicit exports/module dependencies.
- Circular dependencies will silently hang in unresolved state
(or put differently: do not do that).
- No extra diagnostic code to minimise code weight and optimise loading speed.
- Fully event driven, no polling timers.
- Standard event: domready.
- Both high and low priority asynchronous loading of Javascript and CSS files.
- Leverages native browser speed for high priority loading (by getting out
of the way).
- Legacy support for $(...) jquery riddled synchronous code.
- Legacy support for loading synchronous Javascript.
- Single-page-app support using $$(...) page refresh callbacks.
- Supports IE10 and up and all other webbrowsers.
- No config file, means: no syntax to learn, no config file parser code.
Requirements
It runs inside any webbrowser environment (starting at IE10 and up).
Usage
Copy index.html
, main.js
and css/main.css
boilerplate
files to your own new website, and start adjusting them to taste.
The index.html
contains two <script>
sections. The first section
should not be preceded by any other <script>
tags.
The second section should be placed at or close to the end of the <head>
,
and should not precede any direct <link type="stylesheet">
tags.
The basic structure of a page should be:
- html
- head
- Charset declaration.
- Inline
lockandload
master script. - High priority async external scripts.
- Viewport declaration.
- High priority CSS scripts.
<title>
.- All other tags that should go in the
<head>
. - Inline
lockandload
'headready' script.
- Low priority CSS scripts.
- Low priority async Javascript scripts.
- Low priority synchronous Javascript scripts.
- body
- All other inline scripts (if you must).
The index.html
file is a production-stripped version of annotated.html
.
Look at annotated.html
to understand the code and read additional
inline documentation.
API
Globally:
define(id?, dependencies?, factory)
The standard AMD global
entrypoint.
To figure out module ids of all
the modules that you are trying to load, uncomment some debugging code
in the primary load script and inspect your console-pane in the browser.
Locally in the secondary localandload
'headready' script; all path arguments
are used verbatim in <link href="path">
or <script src="path">
tags:
css(path)
Loads additional low priority ordered css files asynchronously.js(path)
Loads additional low priority unordered Javascript files asynchronously.sjs(path)
Loads additional low priority ordered Javascript files sequentially
yet asynchronously (as a group).
References
Other loaders: