Requirejs'i kullanmaya başlama

Yuvalanmış Bağımlılıklarla Merhaba Dünya

Aşağıdaki örnek, “define()” işlevini kullanarak birden çok bağımlılığı göstererek “Merhaba Dünya"yı genişletir.

“index.html” adında yeni bir HTML dosyası oluşturun ve aşağıdaki içeriği yapıştırın:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello RequireJS</title>
    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</head>
<body>
    <!-- place content here --->
    <script>
        requirejs(["scripts/say"], function(say) {
            console.log(say.hello("english"));
            console.log(say.hello("spanish"));
            console.log(say.hello("french"));
        });
    </script>
</body>

scripts/say.js adresinde yeni bir JS dosyası oluşturun ve aşağıdaki içeriği yapıştırın:

define(["scripts/translations"], function(translations){
    return {
        hello: function(language){
           return translations[language].hello + " " + translations[language].world;
        }
    };
});

scripts/translations.js adresinde yeni bir JS dosyası oluşturun ve aşağıdaki içeriği yapıştırın:

define([], function(){
    return {
        "english": {
            hello: "Hello",
            world: "World"
        },
        "spanish": {
            hello: "Hola",
            world: "Mundo"
        },
        "french": {
            hello: "Bonjour",
            world: "Le Monde"
        }
    };
});

Proje yapınız şöyle görünmelidir:

- project
    - index.html
    - scripts
        - say.js
        - translations.js

index.html dosyasını bir tarayıcıda açın ve konsol şu sonucu verecektir:

Hello World
Hola Mundo
Bonjour Le Monde

Açıklama

  1. require.js komut dosyasını yükleyin.

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
    
  2. say modülünü scripts klasöründen eşzamansız olarak yükleyin. (Modülü referans alırken .js uzantısına ihtiyacınız olmadığını unutmayın.) Döndürülen modül daha sonra hello()nun çağrıldığı sağlanan fonksiyona iletilir.

    <script>
         requirejs(["scripts/say"], function(say) {
             console.log(say.hello("english"));
             console.log(say.hello("spanish"));
             console.log(say.hello("french"));
         });
    </script>
    
  3. say modülü, hello tanımlı bir fonksiyonu olan tek bir nesne döndürür, ancak bu durumda bir bağımlılık tanımladık (scripts/translations) ve çevirileri oradan çekeceğiz.

     define(["scripts/translations"], function(translations){
         return {
             hello: function(language){
                return translations[language].hello + " " + translations[language].world;
             }
         };
     });
    
  4. ‘Çeviriler’ modülü, çeşitli kelime çevirileri olan bir nesneyi döndürür.

     define([], function(){
         return {
             "english": {
                 hello: "Hello",
                 world: "World"
             },
             "spanish": {
                 hello: "Hola",
                 world: "Mundo"
             },
             "french": {
                 hello: "Bonjour",
                 world: "Le Monde"
             }
         };
     });
    

Selam Dünya

Aşağıdaki örnek, RequireJS’nin temel kurulumunu ve kurulumunu gösterecektir.

“index.html” adında yeni bir HTML dosyası oluşturun ve aşağıdaki içeriği yapıştırın:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello RequireJS</title>
    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</head>
<body>
    <!-- place content here --->
    <script>
        requirejs(["scripts/say"], function(say) {
            alert(say.hello());
        });
    </script>
</body>

scripts/say.js adresinde yeni bir JS dosyası oluşturun ve aşağıdaki içeriği yapıştırın:

define([], function(){
    return {
        hello: function(){
           return "Hello World";
        }
    };
});

Proje yapınız şöyle görünmelidir:

- project
    - index.html
    - scripts
        - say.js

index.html dosyasını bir tarayıcıda açın, sizi ‘Merhaba Dünya’ ile uyaracaktır.


Açıklama

  1. require.js komut dosyasını yükleyin.

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
    
  2. say modülünü scripts klasöründen eşzamansız olarak yükleyin. (Modülü referans alırken .js uzantısına ihtiyacınız olmadığını unutmayın.) Döndürülen modül daha sonra hello()nun çağrıldığı sağlanan fonksiyona iletilir.

    <script>
       requirejs(["scripts/say"], function(say) {
           alert(say.hello());
       });
    </script>
    
  3. “say” modülü, “merhaba” işlevi tanımlı tek bir nesne döndürür.

     define([], function(){
         return {
             hello: function(){
                return "Hello World";
             }
         };
     });
    

data-ana Giriş Noktasını kullanma

RequireJS ile, ‘