Adding JavaScript
MWF has its own JavaScript library. This library is built using TypeScript and provides the following advantages:
- Better support of SPA by observing DOM changes.
- Added support for AMD, Common, and Global namespaces, as well as UMD.
- Uses factory pattern to enable component initialization at any time.
- Allows auto-initialization if you want to initialize components automatically.
Given the flexibility of JavaScript (or TypeScript) and the availability of almost limitless implementation methodologies, we've focused on a few common design features as requested by our partners.
Library versions
Use the static manifest file to determine the correct library version and use its file name as appropriate for your application. Read this article for more about using manifests. Two library varients are offered for each version: a Standard version where application code must initialize each component or module, and an Auto-initialized version where components or modules are initialized at creation. Currently available libraries are listed here.
Standard versions
- AMD
minified: mwf-main.amd.min.js
un-minified: mwf-main.amd.js - CommonJs
minified: mwf-main.commonjs2.min.js
un-minified: mwf-main.commonjs2.js - Globally namespaced
minified: mwf-main.var.min.js
un-minified: mwf-main.var.js - UMD
minified: mwf-main.umd.min.js
un-minified: mwf-main.umd.js
Auto initialized versions
- AMD
minified: mwf-auto-init-main.amd.min.js
un-minified: mwf-auto-init-main.amd.js - CommonJs
minified: mwf-auto-init-main.commonjs2.min.js
un-minified: mwf-auto-init-main.commonjs2.js - Globally namespaced
minified: mwf-auto-init-main.var.min.js
un-minified: mwf-auto-init-main.var.js - UMD
minified: mwf-auto-init-main.umd.min.js
un-minified: mwf-auto-init-main.umd.js
Example use cases
MWF libraries use a Factory pattern to create and initialize new component or module objects. Here is an example on how to create a new component:
ComponentFactory.create(
[FactoryInput]);
The newly created FactoryInput object has the following properties:
- selector - the CSS selector to bind the component to. Required.
- context - the context CSS selector.
- eventToBind - an event that will be listened for before a component is bound to the DOM. Note: The following two events are supported:
- DOMContentLoaded – the binding happens at the
DOMConentLoaded
event of a browser. This binding need to be used for components that need to be bound for early visibility concerns before theonload
event happens. - load – This is the default event and allows binding the component to the
load
event. We recommend this for performance reason. MWF scripts generally have a timeout of 6 seconds. So, if the windowonload
takes longer, the component binding happens either at onload or 6 seconds whichever comes first.
- DOMContentLoaded – the binding happens at the
- component - a component object to be created. Note: 'c' can be used as an alias.
- elements - an optional array of existing elements to bind to instead of a selector to find elements by.
- callback - a call back function that will be called when the component is successfully created.
Example 1
Creating two components with default selectors.
ComponentFactory.create([
{'component': Carousel},
{'component': Slider}
]);
Example 2
Creating two components with unique selectors.
ComponentFactory.create([
{'component': Carousel,
selector: '#myCarousel'},
{'component': Slider,
selector: '#mySlider'}
]);
Example 3
Creating a component with a unique selector and a callback function.
function setSliderMax(slider) {
slider.setValue(120);
}
ComponentFactory.create([
{'component': Slider,
selector: '#myslider',
callback: setSliderMax}
]);
Example 4
Binding the creation of a component to a specific event.
By default, components are initialized after onLoad for performance reason. But you can also initialize them at DOMContentLoaded as shown here.
ComponentFactory.create([
{'component': Slider,
selector: '#myslider',
eventToBind: DOMContentLoaded}
]);
Example 5
Creating a component for an existing element.
ComponentFactory.create([{
'component': Slider,
eventToBind: 'DOMContentLoaded',
elements: [this.myslider],
callback: setSliderMax}
]);
@returns {void}
Dependencies
There are two additional library dependencies bundled into the MWF distribution. There are:
picturefill.min.js
modernizr.min.js
It is highly recommended that you use the bundled MWF distribution "as is" because it is fully tested and verified to work with these libraries. Adding these libraries seperately cannot guarantee full MWF functionality. However, if this is a problem for your project, you can contact the MWF team to arrange for access to a distribution that excludes these dependency libraries. Including those libraries in your project will then be your responsibility as well as resolving any functionality issues. This can be a major undertaking and that is why we discourage that option.
Libraries
How you use a ComponentFactory is different based upon which library package you use. The following examples demonstrate how partners would use different libraries:
Example 1: As a global variable
Add this script as a block in the page head
.
<script src="https://assets.onestore.ms/cdnfiles/external/mwf/long/v1/v1.21.2/scripts/mwf-main.var.min.js"></script>
After the script has successfully loaded the mwf
library, you can bind a slider component to your markup by using the following:
mwf.ComponentFactory.Create([
{'component': mwf.Slider}
]);
Example 2: AMD with async
You can add the library package as async in the HTML page head
and then you can load using a require
function.
<script async="async" src="https://assets.onestore.ms/cdnfiles/external/mwf/long/v1/v1.21.2/scripts/mwf-main.amd.min.js" crossorigin="anonymous"></script><noscript></noscript>
And then, to create and initialize the component:
require(['mwf'], function(mwf){
mwf.ComponentFactory.Create([
{'component': mwf.Slider}
]);
});
Example 3: CommonJS
You can add the library package to the HTML page head
and then you can create a new component using a global require
variable.
<script async="async" src="https://assets.onestore.ms/cdnfiles/external/mwf/long/v1/v1.21.2/scripts/mwf-main.commonjs2.min.js" crossorigin="anonymous"></script><noscript></noscript>
And then, to create and initialize the component:
var mwf = require('mwf');
mwf.ComponentFactory.Create([
{'component': mwf.Slider}
]);