Enviar búsqueda
Cargar
AMD & Require.js
•
11 recomendaciones
•
2,000 vistas
Eyal Vardi
Seguir
AMD & Require.js
Leer menos
Leer más
Tecnología
Arte y fotografía
Denunciar
Compartir
Denunciar
Compartir
1 de 34
Recomendados
Models
Models
Eyal Vardi
Prism Navigation
Prism Navigation
Eyal Vardi
SugarCon 2010 - Best Practices for Creating Custom Apps in Sugar
SugarCon 2010 - Best Practices for Creating Custom Apps in Sugar
John Mertic
Async & Parallel in JavaScript
Async & Parallel in JavaScript
Eyal Vardi
Asp.Net Mvc Internals & Extensibility
Asp.Net Mvc Internals & Extensibility
Eyal Vardi
Asp.net mvc internals & extensibility
Asp.net mvc internals & extensibility
Eyal Vardi
Views
Views
Eyal Vardi
OOP in JavaScript
OOP in JavaScript
Eyal Vardi
Más contenido relacionado
Similar a AMD & Require.js
Future of JavaScript
Future of JavaScript
Eyal Vardi
What’s new in ECMAScript 6.0
What’s new in ECMAScript 6.0
Eyal Vardi
Stackato Presentation Techzone 2013
Stackato Presentation Techzone 2013
Martin Kenneth Michalsky
Client-side JavaScript Vulnerabilities
Client-side JavaScript Vulnerabilities
Ory Segal
JavaScript, React Native and Performance at react-europe 2016
JavaScript, React Native and Performance at react-europe 2016
Tadeu Zagallo
Kicking off with Zend Expressive and Doctrine ORM (Sunshine PHP 2017)
Kicking off with Zend Expressive and Doctrine ORM (Sunshine PHP 2017)
James Titcumb
Triggers, actions & behaviors in XAML
Triggers, actions & behaviors in XAML
Eyal Vardi
Kicking off with Zend Expressive and Doctrine ORM (PHP UK 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP UK 2017)
James Titcumb
case2griff_T6.htmGoldSilverDiamondsGift CardsLayaway PlansDir.docx
case2griff_T6.htmGoldSilverDiamondsGift CardsLayaway PlansDir.docx
tidwellveronique
Java API for WebSocket 1.0: Java EE 7 and GlassFish
Java API for WebSocket 1.0: Java EE 7 and GlassFish
Arun Gupta
PhpBB meets Symfony2
PhpBB meets Symfony2
Fabien Potencier
cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123
Parag Gajbhiye
Pyramid Lighter/Faster/Better web apps
Pyramid Lighter/Faster/Better web apps
Dylan Jay
Es6 modules-and-bundlers
Es6 modules-and-bundlers
ismnoiet
Objects & Classes in ECMAScript 6.0
Objects & Classes in ECMAScript 6.0
Eyal Vardi
Joomla Day UK 2009 Template Design Presentation
Joomla Day UK 2009 Template Design Presentation
Chris Davenport
Joomla! Day UK 2009 Template Design
Joomla! Day UK 2009 Template Design
Andy Wallace
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
James Titcumb
ErlHive Safe Erlang Reloaded
ErlHive Safe Erlang Reloaded
guestdee461
SignalR
SignalR
Eyal Vardi
Similar a AMD & Require.js
(20)
Future of JavaScript
Future of JavaScript
What’s new in ECMAScript 6.0
What’s new in ECMAScript 6.0
Stackato Presentation Techzone 2013
Stackato Presentation Techzone 2013
Client-side JavaScript Vulnerabilities
Client-side JavaScript Vulnerabilities
JavaScript, React Native and Performance at react-europe 2016
JavaScript, React Native and Performance at react-europe 2016
Kicking off with Zend Expressive and Doctrine ORM (Sunshine PHP 2017)
Kicking off with Zend Expressive and Doctrine ORM (Sunshine PHP 2017)
Triggers, actions & behaviors in XAML
Triggers, actions & behaviors in XAML
Kicking off with Zend Expressive and Doctrine ORM (PHP UK 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP UK 2017)
case2griff_T6.htmGoldSilverDiamondsGift CardsLayaway PlansDir.docx
case2griff_T6.htmGoldSilverDiamondsGift CardsLayaway PlansDir.docx
Java API for WebSocket 1.0: Java EE 7 and GlassFish
Java API for WebSocket 1.0: Java EE 7 and GlassFish
PhpBB meets Symfony2
PhpBB meets Symfony2
cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123
Pyramid Lighter/Faster/Better web apps
Pyramid Lighter/Faster/Better web apps
Es6 modules-and-bundlers
Es6 modules-and-bundlers
Objects & Classes in ECMAScript 6.0
Objects & Classes in ECMAScript 6.0
Joomla Day UK 2009 Template Design Presentation
Joomla Day UK 2009 Template Design Presentation
Joomla! Day UK 2009 Template Design
Joomla! Day UK 2009 Template Design
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
ErlHive Safe Erlang Reloaded
ErlHive Safe Erlang Reloaded
SignalR
SignalR
Más de Eyal Vardi
Why magic
Why magic
Eyal Vardi
Smart Contract
Smart Contract
Eyal Vardi
Rachel's grandmother's recipes
Rachel's grandmother's recipes
Eyal Vardi
Performance Optimization In Angular 2
Performance Optimization In Angular 2
Eyal Vardi
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)
Eyal Vardi
Angular 2 NgModule
Angular 2 NgModule
Eyal Vardi
Upgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.x
Eyal Vardi
Angular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time Compilation
Eyal Vardi
Routing And Navigation
Routing And Navigation
Eyal Vardi
Angular 2 Architecture
Angular 2 Architecture
Eyal Vardi
Angular 1.x vs. Angular 2.x
Angular 1.x vs. Angular 2.x
Eyal Vardi
Angular 2.0 Views
Angular 2.0 Views
Eyal Vardi
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
Eyal Vardi
Template syntax in Angular 2.0
Template syntax in Angular 2.0
Eyal Vardi
Http Communication in Angular 2.0
Http Communication in Angular 2.0
Eyal Vardi
Angular 2.0 Dependency injection
Angular 2.0 Dependency injection
Eyal Vardi
Angular 2.0 Routing and Navigation
Angular 2.0 Routing and Navigation
Eyal Vardi
Async & Parallel in JavaScript
Async & Parallel in JavaScript
Eyal Vardi
Angular 2.0 Pipes
Angular 2.0 Pipes
Eyal Vardi
Angular 2.0 forms
Angular 2.0 forms
Eyal Vardi
Más de Eyal Vardi
(20)
Why magic
Why magic
Smart Contract
Smart Contract
Rachel's grandmother's recipes
Rachel's grandmother's recipes
Performance Optimization In Angular 2
Performance Optimization In Angular 2
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 NgModule
Angular 2 NgModule
Upgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.x
Angular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time Compilation
Routing And Navigation
Routing And Navigation
Angular 2 Architecture
Angular 2 Architecture
Angular 1.x vs. Angular 2.x
Angular 1.x vs. Angular 2.x
Angular 2.0 Views
Angular 2.0 Views
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
Template syntax in Angular 2.0
Template syntax in Angular 2.0
Http Communication in Angular 2.0
Http Communication in Angular 2.0
Angular 2.0 Dependency injection
Angular 2.0 Dependency injection
Angular 2.0 Routing and Navigation
Angular 2.0 Routing and Navigation
Async & Parallel in JavaScript
Async & Parallel in JavaScript
Angular 2.0 Pipes
Angular 2.0 Pipes
Angular 2.0 forms
Angular 2.0 forms
Último
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
Adam Moalla
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
Matt Ray
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
Jamie (Taka) Wang
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
DianaGray10
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
Liveplex
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
Eric D. Schabell
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
Brian Pichman
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
Matsuo Lab
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
UiPathCommunity
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
DianaGray10
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
IES VE
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
Udaiappa Ramachandran
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
SkyPlanner
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
DianaGray10
Designing A Time bound resource download URL
Designing A Time bound resource download URL
Runcy Oommen
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
Adtran
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
IES VE
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
Aggregage
201610817 - edge part1
201610817 - edge part1
Jamie (Taka) Wang
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
GDSC PJATK
Último
(20)
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
Designing A Time bound resource download URL
Designing A Time bound resource download URL
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
201610817 - edge part1
201610817 - edge part1
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
AMD & Require.js
1.
© 2013 E4D
LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
2.
© 2013 E4D
LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
3.
© 2013 E4D
LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
4.
© 2013 E4D
LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
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.
© 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.
© 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.
© 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.
© 2013 E4D
LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
10.
© 2013 E4D
LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
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.
© 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.
© 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.
© 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.
© 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.
© 2013 E4D
LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
17.
© 2013 E4D
LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
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.
© 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.
© 2013 E4D
LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
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.
© 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.
© 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.
© 2013 E4D
LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
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.
© 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.
© 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.
© 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.
© 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.
© 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.
© 2013 E4D
LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
32.
© 2013 E4D
LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
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.
© 2013 E4D
LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il eyalvardi.wordpress.com