SlideShare una empresa de Scribd logo
1 de 34
© 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
© 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
© 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
© 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
© 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
© 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));
© 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 || {} ));
© 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 || {} ));
© 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
© 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
© 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) {
}
);
© 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"
};
});
© 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);
}
};
});
© 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;
};
});
© 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
© 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
© 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
© 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>
© 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'
}
}
});
© 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
© 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({});
});
© 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' }
}
});
© 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;
});
© 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
© 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
plugin
Require.JS
Engine
plugin
plugin
plugin
© 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
© 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.
}
);
© 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.
});
© 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.
});
© 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
};
});
© 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
© 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
© 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
© 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
eyalvardi.wordpress.com

Más contenido relacionado

Similar a AMD & Require.js

Future of JavaScript
Future of JavaScriptFuture of JavaScript
Future of JavaScriptEyal Vardi
 
What’s new in ECMAScript 6.0
What’s new in ECMAScript 6.0What’s new in ECMAScript 6.0
What’s new in ECMAScript 6.0Eyal Vardi
 
Client-side JavaScript Vulnerabilities
Client-side JavaScript VulnerabilitiesClient-side JavaScript Vulnerabilities
Client-side JavaScript VulnerabilitiesOry Segal
 
JavaScript, React Native and Performance at react-europe 2016
JavaScript, React Native and Performance at react-europe 2016JavaScript, React Native and Performance at react-europe 2016
JavaScript, React Native and Performance at react-europe 2016Tadeu Zagallo
 
Kicking off with Zend Expressive and Doctrine ORM (Sunshine PHP 2017)
Kicking off with Zend Expressive and Doctrine ORM (Sunshine PHP 2017)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 XAMLTriggers, actions & behaviors in XAML
Triggers, actions & behaviors in XAMLEyal Vardi
 
Kicking off with Zend Expressive and Doctrine ORM (PHP UK 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP UK 2017)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.docxcase2griff_T6.htmGoldSilverDiamondsGift CardsLayaway PlansDir.docx
case2griff_T6.htmGoldSilverDiamondsGift CardsLayaway PlansDir.docxtidwellveronique
 
Java API for WebSocket 1.0: Java EE 7 and GlassFish
Java API for WebSocket 1.0: Java EE 7 and GlassFishJava API for WebSocket 1.0: Java EE 7 and GlassFish
Java API for WebSocket 1.0: Java EE 7 and GlassFishArun Gupta
 
cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123Parag Gajbhiye
 
Pyramid Lighter/Faster/Better web apps
Pyramid Lighter/Faster/Better web appsPyramid Lighter/Faster/Better web apps
Pyramid Lighter/Faster/Better web appsDylan Jay
 
Es6 modules-and-bundlers
Es6 modules-and-bundlersEs6 modules-and-bundlers
Es6 modules-and-bundlersismnoiet
 
Objects & Classes in ECMAScript 6.0
Objects & Classes in ECMAScript 6.0Objects & Classes in ECMAScript 6.0
Objects & Classes in ECMAScript 6.0Eyal Vardi
 
Joomla Day UK 2009 Template Design Presentation
Joomla Day UK 2009 Template Design PresentationJoomla Day UK 2009 Template Design Presentation
Joomla Day UK 2009 Template Design PresentationChris Davenport
 
Joomla! Day UK 2009 Template Design
Joomla! Day UK 2009 Template DesignJoomla! Day UK 2009 Template Design
Joomla! Day UK 2009 Template DesignAndy Wallace
 
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)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 ReloadedErlHive Safe Erlang Reloaded
ErlHive Safe Erlang Reloadedguestdee461
 

Similar a AMD & Require.js (20)

Future of JavaScript
Future of JavaScriptFuture of JavaScript
Future of JavaScript
 
What’s new in ECMAScript 6.0
What’s new in ECMAScript 6.0What’s new in ECMAScript 6.0
What’s new in ECMAScript 6.0
 
Stackato Presentation Techzone 2013
Stackato Presentation Techzone 2013Stackato Presentation Techzone 2013
Stackato Presentation Techzone 2013
 
Client-side JavaScript Vulnerabilities
Client-side JavaScript VulnerabilitiesClient-side JavaScript Vulnerabilities
Client-side JavaScript Vulnerabilities
 
JavaScript, React Native and Performance at react-europe 2016
JavaScript, React Native and Performance at react-europe 2016JavaScript, 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)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 XAMLTriggers, 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)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.docxcase2griff_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 GlassFishJava 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 Symfony2PhpBB meets Symfony2
PhpBB meets Symfony2
 
cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123
 
Pyramid Lighter/Faster/Better web apps
Pyramid Lighter/Faster/Better web appsPyramid Lighter/Faster/Better web apps
Pyramid Lighter/Faster/Better web apps
 
Es6 modules-and-bundlers
Es6 modules-and-bundlersEs6 modules-and-bundlers
Es6 modules-and-bundlers
 
Objects & Classes in ECMAScript 6.0
Objects & Classes in ECMAScript 6.0Objects & Classes in ECMAScript 6.0
Objects & Classes in ECMAScript 6.0
 
Joomla Day UK 2009 Template Design Presentation
Joomla Day UK 2009 Template Design PresentationJoomla Day UK 2009 Template Design Presentation
Joomla Day UK 2009 Template Design Presentation
 
Joomla! Day UK 2009 Template Design
Joomla! Day UK 2009 Template DesignJoomla! 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)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 ReloadedErlHive Safe Erlang Reloaded
ErlHive Safe Erlang Reloaded
 
SignalR
SignalRSignalR
SignalR
 

Más de Eyal Vardi

Smart Contract
Smart ContractSmart Contract
Smart ContractEyal Vardi
 
Rachel's grandmother's recipes
Rachel's grandmother's recipesRachel's grandmother's recipes
Rachel's grandmother's recipesEyal Vardi
 
Performance Optimization In Angular 2
Performance Optimization In Angular 2Performance Optimization In Angular 2
Performance Optimization In Angular 2Eyal Vardi
 
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)Eyal Vardi
 
Angular 2 NgModule
Angular 2 NgModuleAngular 2 NgModule
Angular 2 NgModuleEyal Vardi
 
Upgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.xUpgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.xEyal Vardi
 
Angular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time CompilationAngular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time CompilationEyal Vardi
 
Routing And Navigation
Routing And NavigationRouting And Navigation
Routing And NavigationEyal Vardi
 
Angular 2 Architecture
Angular 2 ArchitectureAngular 2 Architecture
Angular 2 ArchitectureEyal Vardi
 
Angular 1.x vs. Angular 2.x
Angular 1.x vs. Angular 2.xAngular 1.x vs. Angular 2.x
Angular 1.x vs. Angular 2.xEyal Vardi
 
Angular 2.0 Views
Angular 2.0 ViewsAngular 2.0 Views
Angular 2.0 ViewsEyal Vardi
 
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0Eyal Vardi
 
Template syntax in Angular 2.0
Template syntax in Angular 2.0Template syntax in Angular 2.0
Template syntax in Angular 2.0Eyal Vardi
 
Http Communication in Angular 2.0
Http Communication in Angular 2.0Http Communication in Angular 2.0
Http Communication in Angular 2.0Eyal Vardi
 
Angular 2.0 Dependency injection
Angular 2.0 Dependency injectionAngular 2.0 Dependency injection
Angular 2.0 Dependency injectionEyal Vardi
 
Angular 2.0 Routing and Navigation
Angular 2.0 Routing and NavigationAngular 2.0 Routing and Navigation
Angular 2.0 Routing and NavigationEyal Vardi
 
Async & Parallel in JavaScript
Async & Parallel in JavaScriptAsync & Parallel in JavaScript
Async & Parallel in JavaScriptEyal Vardi
 
Angular 2.0 Pipes
Angular 2.0 PipesAngular 2.0 Pipes
Angular 2.0 PipesEyal Vardi
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 formsEyal Vardi
 

Más de Eyal Vardi (20)

Why magic
Why magicWhy magic
Why magic
 
Smart Contract
Smart ContractSmart Contract
Smart Contract
 
Rachel's grandmother's recipes
Rachel's grandmother's recipesRachel's grandmother's recipes
Rachel's grandmother's recipes
 
Performance Optimization In Angular 2
Performance Optimization In Angular 2Performance 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 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)
 
Angular 2 NgModule
Angular 2 NgModuleAngular 2 NgModule
Angular 2 NgModule
 
Upgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.xUpgrading 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 CompilationAngular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time Compilation
 
Routing And Navigation
Routing And NavigationRouting And Navigation
Routing And Navigation
 
Angular 2 Architecture
Angular 2 ArchitectureAngular 2 Architecture
Angular 2 Architecture
 
Angular 1.x vs. Angular 2.x
Angular 1.x vs. Angular 2.xAngular 1.x vs. Angular 2.x
Angular 1.x vs. Angular 2.x
 
Angular 2.0 Views
Angular 2.0 ViewsAngular 2.0 Views
Angular 2.0 Views
 
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
 
Template syntax in Angular 2.0
Template syntax in Angular 2.0Template syntax in Angular 2.0
Template syntax in Angular 2.0
 
Http Communication in Angular 2.0
Http Communication in Angular 2.0Http Communication in Angular 2.0
Http Communication in Angular 2.0
 
Angular 2.0 Dependency injection
Angular 2.0 Dependency injectionAngular 2.0 Dependency injection
Angular 2.0 Dependency injection
 
Angular 2.0 Routing and Navigation
Angular 2.0 Routing and NavigationAngular 2.0 Routing and Navigation
Angular 2.0 Routing and Navigation
 
Async & Parallel in JavaScript
Async & Parallel in JavaScriptAsync & Parallel in JavaScript
Async & Parallel in JavaScript
 
Angular 2.0 Pipes
Angular 2.0 PipesAngular 2.0 Pipes
Angular 2.0 Pipes
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 forms
 

Último

9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...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 GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )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).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?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.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™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 DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES 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...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
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 

Último (20)

9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 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 OpenCostKubeConEU24-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.pdfactivity_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...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 GUIDEADOPTING 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 AdventureOpenShift 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 )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).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath 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 7UiPath 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?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.pptxBuilding 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 2024Salesforce 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 1Secure 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 URLDesigning 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™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 DecarbonizationUsing 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...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 part1201610817 - edge part1
201610817 - edge part1
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity 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