Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
By Philipp Burckhardt - Oct 17, 2024
q & dq 
Inline JS is handy for selectively calling external modules and passing data from the page:
<script>myModule.init({ modelId: 42, modelName: 'Ford Prefect' })</script>
This approach can't be used with asynchronously loaded modules because the browser could encounter the inline script before the module has loaded.
q & dq is a tiny pattern and library that solves this problem by queuing inline JS until external scripts are ready:
<script>q('myModule.init', { modelId: 42, modelName: 'Ford Prefect' })</script>
dq can be used with any asynchronous script loading method.
Installation
q & dq is available via NPM:
npm install --save qdq
It's also available on Bower:
bower install --save qdq
You can also copy source directly from src/dq.js in this repo.
Using q & dq
Add this to your <head>, in front of any other script tags:
<script>_q=[];q=function(){_q.push(arguments)};</script>
This creates a q function, which can be used throughout the rest of the page to queue your external JS calls.
q's first parameter is the name of your function or module method reference as a string. Any arguments after that will be passed directly to the queued method.
For example, if you had a method that you'd normally call like this:
<script>
fancifier.fancify('wibbly-wobbly', { id: 42, name: 'Ford Prefect' })
</script>
…you would instead queue it like this:
<script>
q('fancifier.fancify', 'wibbly-wobbly', { id: 42, name: 'Ford Prefect' })
</script>
dq itself – the JS library provided by this repo – should be added to your external JS. Within your external JS, you must process all the queued scripts by calling dq:
dq();
Use with AMD & RequireJS
dq is AMD-friendly and defines itself as an anonymous AMD module if AMD support is detected.
To use dq with RequireJS, declare your queue in the <head> before you load RequireJS:
<script>_q=[];q=function(){_q.push(arguments)};</script>
<script async data-main="whatever" src="require.js"></script>
You can then start queuing up module/method calls inline:
<script>q('someModule.someMethod', 'arg1', 'arg2', 'arg3')</script>
Since AMD modules aren't part of the global scope, you need to pass them in using the modules option when you call dq:
define(['dq', 'amd/module'], function (dq, loadedModule) {
dq({
modules: { someModule: loadedModule }
});
});
Advanced use
There are a number of options you can set with your dq call:
dq({
/**
Set a custom queue array if you want to use something
other than _q, or if you want to use more than one queue
on the same page:
*/
q: queueArray,
/**
If you're using AMD or another method of avoiding the
global scope, you'll need to pass dq a modules object
that pairs module references with the actual modules:
*/
modules: {
module: module
},
/**
You can create your own custom callback for processing
your queue. For each queued item, the callback is called
with the following parameters:
* functionCallArray - the queue item array (in which the
the first element is the function reference and
subsequent elements are arguments).
* dqOptionsObject - a copy of the options object, useful
for referencing the modules object and other options.
*/
callback: function (functionCallArray, dqOptionsObject) {
// ...
}
});
License
FAQs
Tiny inline initializers for asynchronously-loaded JavaScript.
The npm package qdq receives a total of 0 weekly downloads. As such, qdq popularity was classified as not popular.
We found that qdq 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.
Package last updated on 11 Apr 2017
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.
Related posts
Product
Enhancing Open-Source Compliance: Introducing Socket’s Advanced License Analysis
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
By Christopher Bailey - Oct 17, 2024
Product
Introducing Socket Optimize
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
By John-David Dalton - Oct 16, 2024