2.1. The Factory Pattern (ok)

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

Previous===== Start Put JavaScript Design Patterns Into Practice (Videos) ========Next3.1. The Publisher-Subscriber Pattern (ok)

Last updated 3 years ago