1 / 59

Enhance Your JavaScript Development with RequireJS: A Comprehensive Overview

RequireJS is a powerful JavaScript file and module loader designed specifically for in-browser use, optimizing speed and improving code quality. This versatile tool can also be utilized in other environments like Rhino and Node. Learning about RequireJS will not only streamline your scripting but enhance your development experience with well-documented and actively developed resources. In this overview, discover its advantages, including asynchronous loading, reduced dependency management, and improved code organization, ultimately enriching your JavaScript projects.

vala
Télécharger la présentation

Enhance Your JavaScript Development with RequireJS: A Comprehensive Overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Write Better Javascript with RequireJS

  2. What is RequireJS?

  3. What is RequireJS? from requirejs.org, "RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code."

  4. What is RequireJS? • Async Script Loader • 12 k • Very actively developed • Well documented • new BSD / MIT

  5. Why use a tool like RequireJS?

  6. Why use a tool like RequireJS? Because Javascript Sucks. Also, user side scripting makes things worse.

  7. JS sucks ├── parks│   ├── admin.py│   ├── fixtures│   │   ├── initial_featurecategories.json│   │   └── train_examples.json│   ├── forms.py│   ├── importers│   │   └── recdata.py│   ├── management│   │   ├── commands│   │   │   ├── exportoregonparks.py│   │   │   ├── importparks.py│   │   │   ├── ... ... .├── local_settings.py├── manage.py├── datacleaning│   ├── admin.py│   ├── forms.py│   ├── migrations│   │   └── 0001_initial.py│   ├── models.py│   ├── tests.py│   ├── urls.py│   └── views.py├── journals│   ├── admin.py│   ├── fixtures│   │   └── 20101124_5.03.json│   ├── forms.py│   ├── migrations│   │   ├── 0001_initial.py│   │   ├── 0002_auto__images__add_entry.py│   │   └── 0003_loading_test_journal_entries.py│   ├── models.py│   ├── tests.py│   ├── urls.py│   └── views.py├── lib│   ├── context_processors.py│   ├── string_processors.py│   ├── template.py│   ├── urlmiddleware.py│   ├── user.py│   └── widgets.py

  8. │   │           └── 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├── star-rating.js└── star-rating-metadata.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│   │   ├── zh-cn.js│   │   └── zh.js│   ├── plugins│   │   └── styles│   │       └── styles 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│   │   ├── fr.js│   │   ├── gl.js│   │   ├── gu.js│   │   ├── he.js

  9. JS sucks • code is too long • just a little code from somewhere else • copy and paste • goto: 1

  10. JS sucks <head>   <script src="foo.js" type="text/javascript"></script>   <script src="bar.js" type="text/javascript"></script>   <script src="baz.js" type="text/javascript"></script>   <script src="biff.js" type="text/javascript"></script>   <script src="bop.js" type="text/javascript"></script>   <script src="foo.js" type="text/javascript"></script>   <script src="bar.js" type="text/javascript"></script>   <script src="baz.js" type="text/javascript"></script>   <script src="biff.js" type="text/javascript"></script>   <script src="bop.js" type="text/javascript"></script>    <script src="foo.js" type="text/javascript"></script>   <script src="bar.js" type="text/javascript"></script>   <script src="baz.js" type="text/javascript"></script>   <script src="biff.js" type="text/javascript"></script>   <script src="bop.js" type="text/javascript"></script> ... </head>

  11. RequireJS makes JS suck less • Help you make your code more modular • manages script loading for you • build and compress your code (oh, and other stuff too...)

  12. Making code more modular

  13. So what's the code look like?

  14. Loading from the page <script data-main="pages/profile.js"            src="scripts/require.js"></script> <script src="scripts/require.js"></script> require(["pages/profile"]);

  15. Loading from the page require(["pages/profile"], function(Profile) {     ...do stuff...     require.ready() {         ...do more stuff...         Profile.init(INSERT_SOMETHING_HERE);     });}); 

  16. Defining a Module define(["foo", "baz", "x"], function(Foo, Baz) {     ...do stuff...     return {         init: function(data) {            container = data;        },         do_something: some_internal_method    }}); 

  17. Loading - production vs dev

  18. Loading - production vs dev

  19. Loading - production vs dev

  20. Let's look at an example

  21. require("map", function(Map) {     ... map file is loaded ... });

  22. require("map", function(Map) {     ... map file is loaded ... });

  23. require("map", function(Map) {     ... map file is loaded ... }); define(["gm", "foo"], function(GM, Foo) {     ... set up js ...     return {}; });

  24. require("map", function(Map) {     ... map file is loaded ... }); define(["gm", "foo"], function(GM, Foo) {     ... set up js ...     return {}; });

  25. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         ... page is ready ...     }); }); define(["gm", "foo"], function(GM, Foo) {     ... set up js ...     return {}; });

  26. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init();     }); }); define(["gm", "foo"], function(GM, Foo) {     ... set up js ...     return {}; });

  27. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init();     }); }); define(["gm", "foo"], function(GM, Foo) {     ... set up js ...      return {}; });

  28. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init();     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {}; });

  29. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init();     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init     }; });

  30. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init();     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init     }; });

  31. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init("div_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init     }; });

  32. That's it.

  33. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init("div_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init     }; });

  34. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init("div_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  35. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init("div_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  36. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init("div_id");         a = Map.m;     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  37. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init("div_id");         a = Map.m;         Map.init("another_div_id");         b = Map.m;     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  38. require("map", function(Map) {     ... map file is loaded ...      require.ready(function() {         Map.init("div_id");         a = Map.m;         Map.init("another_div_id");         b = Map.m;     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  39. require("map", function(Map) {     require.ready(function() {         Map.init("div_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  40. require("map", function(Map) {     require.ready(function() {         Map.init("div_id");         a = Map;     }); }); require("map", function(Map) {     require.ready(function() {         Map.init("another_div_id");         b = Map;     }); }); // a === b define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  41. require({context:"abc"}, "map", function(Map) {     require.ready(function() {         Map.init("div_id");         a = Map.m;     }); }); require({context:"xyz"}, "map", function(Map) {     require.ready(function() {         Map.init("another_div_id");         b = Map.m;     }); }); // a.m !== b.m define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  42. require("map", function(Map) {     require.ready(function() {         a = new Map.init("div_id");         b = new Map.init("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  43. require("map", function(Map) {     require.ready(function() {         a = new Map.init("div_id");         b = new Map.init("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     var m;     function init(id) {         m = GM.create(id);     }     return {         init: init,         map: m     }; });

  44. require("map", function(Map) {     require.ready(function() {         a = new Map.init("div_id");         b = new Map.init("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     function init(id) {         var that = {};         that.m = GM.create(id);         return that;     }     return {         init: init,         map: m     }; });

  45. require("map", function(Map) {     require.ready(function() {         a = new Map.init("div_id");         b = new Map.init("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     function init(id) {         var that = {};         that.m = GM.create(id);         return that;     }     return {         init: init     }; });

  46. require("map", function(Map) {     require.ready(function() {         a = new Map.init("div_id");         b = new Map.init("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     function init(id) {         var that = {};         that.m = GM.create(id);         return that;     }     return init; });

  47. require("map", function(Map) {     require.ready(function() {         a = new Map.init("div_id");         b = new Map.init("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     return function(id) {         var that = {};         that.m = GM.create(id);         return that;     } });

  48. require("map", function(Map) {     require.ready(function() {         a = new Map.init("div_id");         b = new Map.init("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     return function(id) {         var that = {};         that.m = GM.create(id);         return that;     } });

  49. require("map", function(Map) {     require.ready(function() {         a = new Map("div_id");         b = new Map("another_id");     }); }); define(["gm", "foo"], function(GM, Foo) {     return function(id) {         var that = {};         that.m = GM.create(id);         return that;     } });

  50. Plugins define([ "foo!bar" ], function() { ... });

More Related