lockandload
Advanced tools
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.
require and domready.It runs inside any webbrowser environment (starting at IE10 and up).
Copy index.html, main.js, lastjs.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 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.
Whenever this loader is updated, you can expect the first script section to be able to be replaced as is, and in the second script section you will be able to replace the first part, up till your configurable area. Backward and forward compatibility will be retained within those constraints.
The basic structure of a page should be:
lockandload master script.<title>.<head>.lockandload 'headready' script.
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. This index.html file is not present in the git
source repository, it 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.
Running define(1, dependencies, factory) is a custom extension and is
the same as the traditional global require(dependencies, factory).
It is used in the existing scripts to avoid defining the global
require().
In the secondary lockandload 'headready' script; all path arguments
are used verbatim in <link href="path"> or <script src="path"> tags:
scss(id, path)id dependency.css(path)js(path)sjs(path)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 then at the end runs domready() which will run all the
registered delayed functions.
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.
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
domready(); // This will call all registered $$(...) functions
}
});
}();
Other loaders:
FAQs
Minimalist AMD-compliant Javascript and CSS loader
The npm package lockandload receives a total of 8 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
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.