dojo
Cześć Dojo
Szukaj…
Wprowadzenie
Proste Hello Dojo, takie jak Hello World w innych językach programowania. Dojo jest prosty w instalacji / konfiguracji i obsłudze. Możesz pobrać najnowszą wersję Dojo ze strony http://dojotoolkit.org/download/ lub możesz użyć tak zwanych CDN w swoim projekcie. Wolę go pobrać i używać. Najnowsza wersja tego czasu to 1.12.1 i trwają prace nad Dojo 2.0.
Witaj świecie
Utwórz plik HTML jak poniżej. W znaczniku skryptu możesz użyć linku CDN lub lokalnego
<script type="text/javascript" src="dojo/dojo/dojo.js"
data-dojo-config="async:true">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
</body>
</html>
Otóż to. Kiedy uruchomisz ten HTML, powinieneś zobaczyć Hello. Tak, w tym przykładzie nie wykorzystaliśmy jeszcze żadnego kodu specyficznego dla Dojo. Ale pokazuje to, jak można utworzyć prostą stronę za pomocą Dojo. Następnie zobaczymy, jak możemy zastosować Dojo do tej prostej strony.
Dojo AMD
W następnym przykładzie wykorzystajmy funkcje Dojo i zrozummy, co oznacza AMD (Definicja modułu asynchronicznego).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
Różnica w stosunku do poprzedniego przykładu polega na tym, że istnieje dodatkowy znacznik skryptu, a w nim niewiele jest używanych funkcji dojo. Zobaczmy każdy z nich
Wymagane W laika termin „wymagaj” jest podobny do importowania lub używania instrukcji w innych językach, w których importujesz niektóre biblioteki OOTB (w dojo nazywasz je modułami). Istniejące moduły są ładowane za pomocą słowa kluczowego „wymagaj”, a nowe moduły są tworzone za pomocą słowa kluczowego „definiuj”. Dowiemy się więcej o modułach w dalszej części. W tym przykładzie wykorzystaliśmy dwa moduły OOTB „dojo / dom” i „dojo / dom-construct”. dojo / dom (dom) to podstawowy DOM (model obiektowy dokumentu), którego można użyć do uzyskania węzła z HTML. Dla programistów javascript jest podobny do document.getElementById (''), w rzeczywistości wewnętrznie dojo używa tej samej metody. dojo / dom-construct (domConstruct) służy do tworzenia węzłów, takich jak div, li, ul itp. Jest to interfejs API budowy DOM i można go również używać do wstawiania węzła do DOM w dowolnej pozycji. Powiedzmy, że masz div „abc” i chcesz utworzyć kolejny div „xyz” i umieścić go po „abc”. Możesz to osiągnąć w podobny sposób
domConstruct.create("div", { id:"xyz",innerHTML: "<p>new DIV</p>" });
domConstruct.place(dojo.byId("xyz"), dojo.byId("abc"), "after");
Wracając do naszego przykładu, mamy
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
w ramach funkcji widać dom i domConstruct. W ten sposób odnosimy się do dojo / dom i dojo / dom-construct. Możesz użyć dowolnej konwencji nazewnictwa
require([
'dojo/dom',
'dojo/dom-construct'
], function (hi, bye) {
var greetingNode = hi.byId('greeting');
bye.place('<em> Dojo!</em>', greetingNode);
});
Ale dobrą praktyką jest posiadanie znaczących nazw, takich jak dla dojo / dom use dom i dla dojo / dom-construct, użytkownik domConstruct.
Teraz w ramach funkcji mamy
var greetingNode = hi.byId('greeting');
Powoduje to, że przeszukuje domenę (w tym przypadku div) o id = „pozdrowienie”. zmienna pozdrowienie, będzie mieć rzeczywisty węzeł dom. Potem będzie,
domConstruct.place('<em> Dojo!</em>', greetingNode);
Tak więc dołączamy Dojo! do węzła greetingNode. To jest jak Hello + Dojo! a wyjściem będzie Hello Dojo!
Dzięki temu nauczyliśmy się
- Jak korzystać z funkcji dojo
- Jak korzystać z modułów OOTB
- Jak manipulować domem