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 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).
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.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.html boilerplate
file to your webroot; then customise the copied file 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.
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. These index.* and lockandload_*.inc 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.
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 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.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 arguments. 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
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.