lockandload
Advanced tools
Lockandload is a minimalist AMD-loader-compatible boilerplate to kickstart your website. It includes special support for single-page-apps.
Gzipped, the essential script content amounts to roughly 859 bytes of code. Without compression it blows up to about 1520 bytes. Further minifying this code does not result in any significant gains (773 vs 859 bytes), it would just hinder readability.
require, exports, module
and domready.It runs inside any webbrowser environment (starting at IE10 and up).
Running npm install lockandload in the webroot of your site,
should create the following file and directory structure:
node_modules
lockandload
lockandload_master.inc: Placed right after the charset definition
on the page.lockandload_headready.inc: The start of the headready-script that
lives at the end of the <head>.lockandload_trailer.inc: The end of the headready-script that lives
at the end of the <head>.index.php: PHP boilerplate.index_inlined.html: High performance HTML only boilerplate.lockandload_master.js: For lazy <script> loading.lockandload_headready.js: Boilerplate for lazy <script> loading.index_extern.html: Lazy HTML only boilerplate.main.js: Example SPA (Single Page Application).Copy the boilerplate node_modules/lockandload/index.php file to your
webroot; then customise the copied file to taste.
Look at the PHP boilerplate node_modules/lockandload/index.php, and
translate this to your own scripting language.
Copy the node_modules/lockandload/index_extern.html boilerplate
file to your webroot; then customise the copied file to taste.
Copy the node_modules/lockandload/lockandload_headready.js file
to your javascript directory and customise it taste. Do not forget
to change the path of the script directive in index_extern.html
to point to the new location of the headready script.
Copy the node_modules/lockandload/index_inlined.html boilerplate
file to your webroot; then customise the copied file to taste.
The index_inlined.html contains two <script> sections. The first section
should not be preceded by any other <script> tags and should be left
verbatim.
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.
Inside this second section there is a clearly marked section that is
your configuration area.
The basic structure of a page should be:
lockandload master script.<title>.<head>.lockandload headready-script.
The index_inlined.html file is a production-stripped version
of annotated.html. Look at annotated.html to understand the code and
read additional inline documentation. These index.*, lockandload_*.inc
and lockandload_*.js
files are not present in the git source repository, they can only be found in
the npm repository (or after running npm run prepublish).
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.
If you are in need of the common global require(dependencies, factory),
insert the following code into the loader (preferably in the custom-code
section of the secondary headready-script):
function require(d, f) { define(1, d, f); }
In the secondary lockandload headready-script; all url arguments
are used verbatim in <link href="url"> or <script src="url"> tags:
css(url, id?)id dependency.js(url, "async"?)"async" is
provided, the load will be asynchronous.jsa(alias, path)require.load(alias) to load the file on demand.In order to support legacy code that uses inline $(function(){...}) scattered
throughout pages, this loader allows you to use that construct even before
the jQuery library has been loaded,
and thus enables you to load jQuery in an asynchronous and non-blocking fashion.
The standard headready-script contains a dependency on domready and
jquery which finally runs domready(1) which will run all the
registered delayed functions the first time.
To ease SPA development, the loader defines a
$$(function(jquery_document){...}) function which registers functions
for execution on every SPA-controlled page refresh. The registered functions
receive a convenience argument $(document) when executed.
To run the registered functions, one needs to make a call to the entrypoint
of the AMD-dependency on domready without parameters or with exactly
one parameter; if not provided, this single parameter will default to
$(document) (the jquery object/scope referring to the whole document).
Convention states that if provided the argument should normally be the jquery
object referring to the element tree that contains the changes.
Ultimately you decide what your $$(function(argument){...}) scheduled
scripts will use the argument for. All domready()
calls before domready(1) has been run will silently be ignored.
E.g. in your application, you could use code like this:
!function(){
// Preamble
define("main", ["domready"], function (domready) {
// Your main application
function refreshpage() {
// The function that gets called on virtual page refreshes
var newdiv = $("#contentdiv");
newdiv.html("your glorious new page content");
domready(newdiv); // This will call all registered $$(...) functions
// with the newdiv as argument to potentially
// limit the scope of the changes
}
});
}();
Other loaders:
FAQs
Minimalist AMD-compliant Javascript and CSS loader
The npm package lockandload receives a total of 4 weekly downloads. As such, lockandload popularity was classified as not popular.
We found that lockandload demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.