AMD & Require.js

1,173 views
1,050 views

Published on

AMD & Require.js

Published in: Technology, Art & Photos

AMD & Require.js

  1. 1. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  2. 2. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  3. 3. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  4. 4. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  5. 5. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il (function () { // ... all vars and functions are in this scope only // still maintains access to all globals }()); (function ($, YAHOO) { // now have access to globals jQuery (as $) and // YAHOO in this code }(jQuery, YAHOO)); Global Import
  6. 6. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il (function ($, YAHOO) { // now have access to globals jQuery (as $) // and YAHOO in this code var my = {}, privateVariable = 1; function privateMethod() { // ... } my.moduleProperty = 1; my.moduleMethod = function () { // ... }; return my; }(jQuery, YAHOO));
  7. 7. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il var MODULE = (function (my) { my.anotherMethod = function () { // added method... }; return my; }( MODULE || {} ));
  8. 8. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il var MODULE = (function (my) { var old_moduleMethod = my.moduleMethod; my.moduleMethod = function () { // method override, has access to // old through old_moduleMethod... }; return my; }( MODULE || {} ));
  9. 9. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  10. 10. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  11. 11. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 'ModuleID' , [] , callback define( 'ModuleID', [/* dependencies module */], function (dp1, dp2, ... n) { return {/* Export */}; } ); require( ['ModuleID', 'module2'], function(m1Export, m2Export) { } );
  12. 12. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il Simple Name/Value Pairs // Inside file my/shirt.js: define({ color: "black", size: "unisize" }); Definition Functions // my/shirt.js now does setup work // before returning its module definition. define(function () { //Do setup work here return { color: "black", size: "unisize" }; });
  13. 13. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il //my/shirt.js now has some dependencies, a cart and inventory //module in the same directory as shirt.js define(["./cart", "./inventory"], function (cart, inventory) { //return an object to define the "my/shirt" module. return { color: "blue", size: "large", addToCart: function() { inventory.decrement(this); cart.add(this); } }; });
  14. 14. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il // A module definition inside foo/title.js. It uses // my/cart and my/inventory modules from before, // but since foo/bar.js is in a different directory than // the "my" modules, it uses the "my" in the module dependency // name to find them. The "my" part of the name can be mapped // to any directory, but by default, it is assumed to be a // sibling to the "foo" directory. define(["my/cart", "my/inventory"], function (cart, inventory) { //return a function to define "foo/title". //It gets or sets the window title. return function(title) { return title ? (window.title = title) : inventory.storeName + ' ' + cart.name; }; });
  15. 15. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il <html> <head> <script data-main="scripts/main" src="scripts/require-jquery.js"></script> <title>jQuery+RequireJS Sample Page</title> </head> <body> <h1>jQuery + RequireJS Sample Page</h1> </body> </html> Start Point require(["jquery", "jquery.alpha", "jquery.beta"], function ($) { //the jquery.alpha.js and jquery.beta.js plugins have been loaded. $(function () { $('body').alpha().beta(); }); }); Support require module Not support require module
  16. 16. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  17. 17. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  18. 18. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il <!— This sets the baseUrl to the "scripts" directory, and loads a script that will have a module ID of 'main‘ --> <script data-main = "scripts/main.js" src = "scripts/require.js"></script>
  19. 19. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il require.config( { baseUrl: "/another/path", dpes: [/* dependencies module */], paths: { "some": "some/v1.0" }, waitSeconds: 15, map: {}, callback : function(dpend1, ... dependN){}, shim: { 'backbone': { //These script dependencies should be loaded // before loading backbone.js deps: ['underscore', 'jquery'], //Once loaded, use the global 'Backbone' as the //module value. exports: 'Backbone' } } });
  20. 20. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  21. 21. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il requirejs.config({ shim: { 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' }, 'underscore': { exports: '_' }, 'foo': { deps: ['bar'], exports: 'Foo', init: function (bar) { return this.Foo.noConflict(); } } } }); //Then, later in a separate file, call it 'MyModel.js' define(['backbone'], function (Backbone) { return Backbone.Model.extend({}); });
  22. 22. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il requirejs.config({ map: { 'some/newmodule': { 'foo': 'foo1.2' }, 'some/oldmodule': { 'foo': 'foo1.0' }, '*' : { 'foo': 'foo1.2' } } });
  23. 23. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il requirejs.config({ config: { 'bar': { size: 'large' }, 'baz': { color: 'blue' } } }); //bar.js, which uses simplified CJS wrapping: define(function (require, exports, module) { //Will be the value 'large' var size = module.config().size; }); //baz.js which uses a dependency array, //it asks for the special module ID, 'module': define(['module'], function (module) { //Will be the value 'blue' var color = module.config().color; });
  24. 24. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  25. 25. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il plugin Require.JS Engine plugin plugin plugin
  26. 26. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il require(['foo!something/for/foo'], function (something) { // something is a reference to the resource // 'something/for/foo' that was loaded by foo.js. }); foo.js plugin
  27. 27. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il require(["some/module", "text!some/module.html", "text!some/module.css"], function (module, html, css) { //the html variable will be the text //of the some/module.html file //the css variable will be the text //of the some/module.css file. } );
  28. 28. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il require(['domReady!'], function(doc) { // This function is called once the DOM is ready, // notice the value for 'domReady!' is the current // document. });
  29. 29. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il require(["order!one.js", "order!two.js", "order!three.js"], funct ion () { // This callback is called after // the three scripts finish loading. });
  30. 30. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il //Contents of my/nls/fr-fr/colors.js define({ "red" : "rouge", "blue" : "bleu", "green": "vert" }); //Contents of my/nls/colors.js define({ "root": { "red": "red", "blue": "blue", "green": "green" }, "fr-fr": true }); //Contents of my/lamps.js define(["i18n!my/nls/colors"], function (colors) { return { testMessage: "Red in this locale is: " + colors.red }; });
  31. 31. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  32. 32. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  33. 33. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il http://www.adequatelygood.com/JavaScript-Module- Pattern-In-Depth.html http://www.softwarearchiblog.com/2013/04/requirejs- deep-dive.html http://requirejs.org/docs/api.html
  34. 34. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il eyalvardi.wordpress.com

×