Mais conteúdo relacionado
Semelhante a RequireJS (20)
Mais de Sebastiano Armeli (11)
RequireJS
- 22. var module = (function(){
// private variables, methods
var title = “”;
function f1() {}
return {
// public/privileged methods
getTitle: function(){
return title;
}
}
}()) ;
MODULE PATTERN
Thursday, June 13, 13
- 23. define(function () {
var title = “”;
function f1() {}
return {
getTitle: function() {
return title;
}
}
});
RJS MODULE PATTERN
Thursday, June 13, 13
- 25. index.html
js /
-- main.js
-- helpers.js
-- app /
-- views /
-- view1.js
-- vendor /
-- require.js
view1.js
------------
define([‘helpers’],
function(helpers){
return {
init: function(){}
}
});
define(function(){
// code here
});
helpers.js
------------
Thursday, June 13, 13
- 26. index.html
js /
-- main.js
-- helpers.js
-- app /
-- views /
-- view1.js
-- vendor /
-- require.js
view1.js
------------
define([‘helpers’],
function(helpers){
return {
init: function(){}
}
});
define(function(){
// code here
});
helpers.js
------------
Thursday, June 13, 13
- 34. var node = document.createElement('script');
node.async = true;
node.setAttribute('data-requirecontext',
context.contextName);
node.setAttribute('data-requiremodule', moduleName);
node.src = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(node);
Script Loader
Thursday, June 13, 13
- 36. exports.render = function() {};
var module = require(‘view1’);
NO de!ne()
require() synchronous
Server-side approach
Thursday, June 13, 13
- 42. if ( typeof define === "function" &&
define.amd ) {
define( "jquery", [], function () {
return jQuery;
});
}
Thursday, June 13, 13
- 44. index.html
js /
-- main.js
-- helpers.js
-- app /
-- views /
-- view1.js
-- vendor /
-- require.js
-- backbone.js
-- underscore.js
-- jquery.js
main.js
------------
require.config({
baseUrl: ‘js/vendor’,
shim: {
‘underscore’:{
exports: ‘_’
},
‘backbone’: {
deps: [‘jquery’, ‘underscore’],
exports: ‘Backbone’
}
}
});
require([‘backbone’],function(Backbone){
Backbone.history.start();
});
Thursday, June 13, 13
- 45. index.html
js /
-- main.js
-- helpers.js
-- app /
-- views /
-- view1.js
-- vendor /
-- require.js
-- backbone.js
-- underscore.js
-- jquery.js
main.js
------------
require.config({
baseUrl: ‘js/vendor’,
shim: {
‘underscore’:{
exports: ‘_’
},
‘backbone’: {
deps: [‘jquery’, ‘underscore’],
exports: ‘Backbone’
}
}
});
require([‘backbone’],function(Backbone){
Backbone.history.start();
});
Thursday, June 13, 13
- 46. LOADER PLUGINS
• i18n!, async!, domReady!
• text!, css!, json!, cs!, hbs!
[plugin Module ID]![resource ID]
Thursday, June 13, 13
- 60. runner.html
spec /
-- view1Spec.js
-- main.js
js /
-- vendor /
-- require.js
-- domReady.js
require.config({
...
});
require(
[“domReady!”,“spec/view1Spec”],
function(document){
jasmine.getEnv().addReporter(
new jasmine.HtmlReporter()
);
jasmine.getEnv().execute();
});
main.js
------------
Thursday, June 13, 13
- 63. module.exports = function(grunt) {
var config = require(“build”);
grunt.initConfig({
requirejs: {
compile: {
options: config
}
}
grunt.loadNpmTasks('grunt-contrib-requirejs');
}
Gruntfile.js
------------
Thursday, June 13, 13
- 65. ES6 - Modules
Module de!nition
module [module ID]
export [variable | function]
Module dependency
import { [var | fn] } from [module ID]
Thursday, June 13, 13
- 66. ES6 - Modules
module “helpers” {
}
module “view1” {
import helpers from “helpers”;
exports function init() {...};
}
Thursday, June 13, 13
- 72. Recap
• Async Script loader
• Future proof
• No globals
• Optimization
• Modularity
Thursday, June 13, 13