AMD i RequireJS
wstęp do tworzenia modułów w JavaScript
Zanim rozpocznę, kilka słów o...
Singleton vs. Dependency Injection
To było deszczowe popołudnie 10 listopada 1994 roku...
Singleton - założenia
 Ograniczenie możliwości tworzenia obiektów do jednej instancji
 Zapewnienie globalnego dostępu do...
Singleton – interfejs
 Prywatny konstruktor

Metoda dostępowa, sprawdzająca istnienie instancji
JavaScript:
const Single...
 Why singletons are evil?
 Singletons considered stupid
 Singleton I love you, but you're bringing me down
Rok 2000 prz...
Singleton – wady
 brak elastyczności
 globalny zasięg – jednak wada!
 złamanie zasad jednej odpowiedzialności (jedna kl...
Z pomocą przychodzi...
Dependency Injection
Dependency Injection
Stałe
i bezpośrednie
zależności
...w zależności od potrzeb
Biblioteki...
...wstrzykiwane
do klasy...
...
Dependency Injection
JavaScript:
?
PHP:
class Question {
private $author;
public function __construct(Author $author) {
$t...
Jak realizować Dependency Injection w JS?
Bohater dnia: RequireJS
<script data-main="scripts/main" src="scripts/require.js"></script>
Ścieżka do biblioteki require.js
Ścieżka do pliku konf...
Jest to możliwe dzięki: AMD
Asynchronous Module Definition
JavaScript:
//scripts/przyklad.js
define(
['jquery'],
function ($) {
return {
};
});
Składnia modułów RequireJS
JavaScript...
Plik konfiguracyjny RequireJS
JavaScript:
//scripts/main.js
requirejs.config({
baseUrl: 'scripts/',
paths: {
'jquery': 'li...
JavaScript:
requirejs.config({
map: {
'*': { 'jquery': 'jquery-private' },
'jquery-private': { 'jquery': 'jquery' }
},
con...
Pluginy RequireJS
 !async
 goog
 font
 image
 json
 mdown
 noext
 ...
Minify RequireJS
Node-js:
$ node r.js -o build.js
JavaScript:
//scripts/build.js
({
baseUrl: 'scripts/',
dir: './dist',
mo...
Wnioski...
Warto korzystać z RequireJS
Wnioski...
Warto korzystać z Dependency Injection
Wnioski...
Nie jestem hejterem Singletona...
Wnioski...
...ale to zdecydowanie najlepsza jego
implementacja:
Dziękuję za uwagę
Polecam zajrzeć na:
www.requirejs.org
www.reddit.com/r/javascript
#3 Frontend Meetup - RequireJS
#3 Frontend Meetup - RequireJS
#3 Frontend Meetup - RequireJS
of 27

#3 Frontend Meetup - RequireJS

#3 Frontend Meetup
Published on: Mar 4, 2016
Published in: Software      
Source: www.slideshare.net


Transcripts - #3 Frontend Meetup - RequireJS

  • 1. AMD i RequireJS wstęp do tworzenia modułów w JavaScript
  • 2. Zanim rozpocznę, kilka słów o... Singleton vs. Dependency Injection
  • 3. To było deszczowe popołudnie 10 listopada 1994 roku...
  • 4. Singleton - założenia  Ograniczenie możliwości tworzenia obiektów do jednej instancji  Zapewnienie globalnego dostępu do stworzonego obiektu
  • 5. Singleton – interfejs  Prywatny konstruktor  Metoda dostępowa, sprawdzająca istnienie instancji JavaScript: const Singleton = (function () { var Constructor = function () { this.data = 'some data'; }, instance = null; return { getInstance: function () { return instance || (instance = new Constructor); } } }) (); PHP: class Singleton { private static $instance; private function __construct() {} public static function getInstance () { if (self::$instance === null) { self::$instance = new Singleton(); } return self::$instance;; } }
  • 6.  Why singletons are evil?  Singletons considered stupid  Singleton I love you, but you're bringing me down Rok 2000 przynosi nowe spojrzenie na development:
  • 7. Singleton – wady  brak elastyczności  globalny zasięg – jednak wada!  złamanie zasad jednej odpowiedzialności (jedna klasa – jeden obszar semantyczny)  złamanie zasady otwarte-zamknięte (otwarte na rozszerzanie, zamknięte na modyfikacje)
  • 8. Z pomocą przychodzi... Dependency Injection
  • 9. Dependency Injection Stałe i bezpośrednie zależności ...w zależności od potrzeb Biblioteki... ...wstrzykiwane do klasy... Korzyści? * seperacja interfejsów * modularyzacja kodu * TDD i pokrywanie kodu testami jednostkowymi
  • 10. Dependency Injection JavaScript: ? PHP: class Question { private $author; public function __construct(Author $author) { $this->author = $author; } public function getAuthor() { return $this->author; } }
  • 11. Jak realizować Dependency Injection w JS?
  • 12. Bohater dnia: RequireJS
  • 13. <script data-main="scripts/main" src="scripts/require.js"></script> Ścieżka do biblioteki require.js Ścieżka do pliku konfiguracyjnego naszej strony
  • 14. Jest to możliwe dzięki: AMD Asynchronous Module Definition
  • 15. JavaScript: //scripts/przyklad.js define( ['jquery'], function ($) { return { }; }); Składnia modułów RequireJS JavaScript: //scripts/przyklad_require.js require( ['jquery', 'przykład'], function ($, przyklad) { return { }; });
  • 16. Plik konfiguracyjny RequireJS JavaScript: //scripts/main.js requirejs.config({ baseUrl: 'scripts/', paths: { 'jquery': 'libraries/jquery-1-12' }, shim: { 'jquery.scroll': { deps: ['jquery'], exports: 'jQuery.fn.scroll' } } }); require(['jquery', 'przyklad'], function($, przyklad) { przykład.makeAnotherWebsiteAwesomeWithRequireJs(); });
  • 17. JavaScript: requirejs.config({ map: { '*': { 'jquery': 'jquery-private' }, 'jquery-private': { 'jquery': 'jquery' } }, config: { 'przyklad': { 'secretKey': 'qwerty123' } } }); //scripts/jquery-private.js define(['jquery'], function (jq) { return jq.noConflict( true ); }); //scripts/przyklad.js define(['module'], function(module) { var color = module.config().secretKey; //qwerty123 }); Dodatkowe ustawienia...
  • 18. Pluginy RequireJS  !async  goog  font  image  json  mdown  noext  ...
  • 19. Minify RequireJS Node-js: $ node r.js -o build.js JavaScript: //scripts/build.js ({ baseUrl: 'scripts/', dir: './dist', modules: [{ name: 'main' }], fileExclusionRegExp: /^(r|build).js$/, paths: { ... } })
  • 20. Wnioski... Warto korzystać z RequireJS
  • 21. Wnioski... Warto korzystać z Dependency Injection
  • 22. Wnioski... Nie jestem hejterem Singletona...
  • 23. Wnioski... ...ale to zdecydowanie najlepsza jego implementacja:
  • 24. Dziękuję za uwagę Polecam zajrzeć na: www.requirejs.org www.reddit.com/r/javascript

Related Documents