AMD & Require.js

(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

var MODULE = (function (my) {
my.anotherMethod = function () {
// added method...
};
return my;
}( MODULE || {} ));

'ModuleID' , [] , callback
define(
'ModuleID',
[/* dependencies module */],
function (dp1, dp2, ... n) {
return {/* Export */};
}
);
require(
['ModuleID', 'module2'],
function(m1Export, m2Export) {
}
);

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"
};
});

//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);
}
};
});

// 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;
};
});

<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

<!—
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>

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'
}
}
});

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({});
});

requirejs.config({
map: {
'some/newmodule': { 'foo': 'foo1.2' },
'some/oldmodule': { 'foo': 'foo1.0' },
'*' : { 'foo': 'foo1.2' }
}
});

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;
});

plugin
Require.JS
Engine
plugin
plugin
plugin

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

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.
}
);

require(['domReady!'], function(doc) {
// This function is called once the DOM is ready,
// notice the value for 'domReady!' is the current
// document.
});

require(["order!one.js", "order!two.js", "order!three.js"], funct
ion () {
// This callback is called after
// the three scripts finish loading.
});

//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
};
});

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

eyalvardi.wordpress.com

AMD & Require.js

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie AMD & Require.js

Ähnlich wie AMD & Require.js (20)

Mehr von Eyal Vardi

Mehr von Eyal Vardi (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

AMD & Require.js