Write a Better Java Scriptwith RequireJS
For Reference
http://requirejs.org
Why use a tool like RequireJS?
Large applications often require a number of JavaScript files.
Generally, they are loaded one by one using <script> tags.
Additionally, each file can potentially be dependent on other files.
JS sucks.
├── ckeditor
│ ├── ckeditor.js
│ ├── contents.css
│ ├── lang
│ │ ├── af.js
│ │ ├── ar.js
│ │ ├── bg.js
│ │ ├── bn.js
│ │ ├── bs.js
│ │ ├── ca.js
│ │ ├── cs.js
│ │ ├── cy.js
│ │ ├── da.js
│ │ ├── de.js
│ │ ├── el.js
│ │ ├── en-au.js
│ │ ├── en-ca.js
│ │ ├── en-gb.js
│ │ ├── en.js
│ │ ├── eo.js
│ │ ├── es.js
│ │ ├── et.js
│ │ ├── eu.js
│ │ ├── fa.js
│ │ ├── fi.js
│ │ ├── fo.js
│ │ ├── fr-ca.js
│ │ ├── hi.js
│ │ ├── hr.js
│ │ ├── hu.js
│ │ ├── is.js
│ │ ├── it.js
│ │ ├── ja.js
│ │ ├── ka.js
│ │ ├── km.js
│ │ ├── ko.js
│ │ ├── _languages.js
│ │ ├── lt.js
│ │ ├── lv.js
│ │ ├── mn.js
│ │ ├── ms.js
│ │ ├── nb.js
│ │ ├── nl.js
│ │ ├── no.js
│ │ ├── pl.js
│ │ ├── pt-br.js
│ │ ├── pt.js
│ │ ├── ro.js
│ │ ├── ru.js
│ │ ├── sk.js
│ │ ├── sl.js
│ │ ├── sr.js
│ │ ├── sr-latn.js
│ │ ├── sv.js
│ │ ├── th.js
│ │ ├── _trans.txt
│ │ ├── tr.js
│ │ ├── uk.js
│ │ ├── vi.js
│ │ └── default.js
│ ├── skins
│ │ └── kama
│ │ ├── dialog.css
│ │ ├── editor.css
│ │ ├── icons.png
│ │ ├── icons_rtl.png
│ │ ├── images
│ │ │ ├── dialog_sides.gif
│ │ │ ├── dialog_sides.png
│ │ │ ├── dialog_sides_rtl.png
│ │ │ ├── mini.gif
│ │ │ ├── noimage.png
│ │ │ ├── sprites_ie6.png
│ │ │ ├── sprites.png
│ │ │ └── toolbar_start.gif
│ │ ├── skin.js
│ │ └── templates.css
│ └── SQRLY_TEAM_PLEASE_README__LICENSE
├── elevationservice_eg_google.js
├── jquery.form.js
├── jquery.history.js
├── jqueryplugins
│ ├── jquery.address-1.3.js
│ └── jquery.simplemodal-1.3.min.js
├── markers.js
├── pages
│ ├── add-park.js
│ ├── datacleaning.js
│ └── park-detail.js
├── park-ratings.js
├── polylinearray_eg_google.js
JS sucks1. code is too long2. just a little code from somewhere else3. copy and paste4. goto: 1
RequireJS makes Js• Help you make your code more modular• manages script loading for you• build and compress your code
(oh, and other stuff too...)
What is RequireJS?
What is RequireJS?• Modular programming is used to break large applications into
smaller blocks of manageable code
• Module based coding eases the effort for maintenance and
increases reusability.
• managing dependencies between modules is a major concern
developers face throughout the application development
process.
• RequireJS is one of the most popular frameworks around for
managing dependencies between modules
What is RequireJS?
• Async Script Loader• 12 k• Very actively developed• Well documented
Making code more modular
So what's the code look like?
Loading from the page<script data-main="js/main"
src="scripts/require.js"></script>
main.js is the entry point of the app
Loading from the pagerequire(["pages/profile"], function(Profile) {
...do stuff...
});
Defining a Moduledefine(["foo", "baz", "x"], function(Foo, Baz) {
...do stuff...
return {
init: function(data) {
container = data;
},
do_something: some_internal_method
}
});
Let's look at an example
Thanks