Hướng dẫn: C:\xampp\htdocs\php\text.html
C:\xampp\htdocs\php\js\factory\init.js
return {
init: function() {}
}
C:\xampp\htdocs\php\js\factory\mediaFactory.js
return {
createMedia: function(type, attributes) {}
}
C:\xampp\htdocs\php\js\factory\image.js
var Image = function(attributes) {}
C:\xampp\htdocs\php\js\factory\video.js
var Video = function(attributes) {}
C:\xampp\htdocs\php\package.json
{
"name": "php",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
C:\xampp\htdocs\php\bower.json
{
"name": "php",
"description": "",
"main": "index.js",
"authors": [
"phamngoctuong <phamngoctuong1805@gmail.com>"
],
"license": "ISC",
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"devDependencies": {
"requirejs": "^2.3.6"
}
}
C:\xampp\htdocs\php\.gitignore
bower_components
node_modules
C:\xampp\htdocs\php\index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<title>Put JavaScript Design Patterns into Practice</title>
<style>
html, body { background: #faf6eb; margin: 0; } header { font-family: 'Adelle Basic'; font-weight: bold; } header img { margin: 30px 60px; float: left; } hgroup { float: left; } h1 { margin-top: 45px; margin-bottom: 0; } h2 { margin-top: 10px; font-size: 16px; } .right { position: fixed; bottom: 30px; right: 30px; }
</style>
</head>
<body>
<header>
<img src="img/logo.png" />
<hgroup>
<h1>Put JavaScript Design Patterns into Practice</h1>
<h2>by Dan Wellman</h2>
</hgroup>
</header>
<img class="right" src="img/books.gif" />
<script data-main="js/main" src="bower_components/requirejs/require.js"></script>
</body>
</html>
C:\xampp\htdocs\php\js\factory\init.js
define(function(require) {
'use strict';
return {
init: function() {
var mediaFactory = require('factory/mediaFactory');
var myVideo = mediaFactory.createMedia('Video', {
length: 3.5,
name: 'My video'
});
var myImage = mediaFactory.createMedia('Image', {
width: 100,
height: 100,
name: 'My image'
});
console.log(myVideo);
console.log(myImage);
}
};
});
C:\xampp\htdocs\php\js\factory\mediaFactory.js
define(function(require) {
'use strict';
var media = {
Video: require('factory/video'),
Image: require('factory/image')
};
return {
createMedia: function(type, attributes) {
var MediaType = media[type];
return new MediaType(attributes);
}
};
});
C:\xampp\htdocs\php\js\factory\video.js
define(function() {
'use strict';
var Video = function(attributes) {
this.length = attributes.length || 0;
this.name = attributes.name || '';
};
return Video;
});
C:\xampp\htdocs\php\js\factory\image.js
define(function() {
'use strict';
var Image = function(attributes) {
this.width = attributes.width || 0;
this.height = attributes.height || 0;
this.name = attributes.name || '';
};
return Image;
});
C:\xampp\htdocs\php\js\main.js
require(
['factory/init'],
function (factory) {
'use strict';
var examples = {
factory: factory
};
window.runExample = function (example) {
examples[example].init();
};
runExample('factory');
}
);
Hoặc
require(
['factory/init'],
function (init) {
'use strict';
var examples = {
factory: init
};
for (let key in examples) {
examples[key].init(key);
}
}
);
