requirejsआवश्यकता के साथ शुरुआत करना


टिप्पणियों

आवश्यकता है, एसिंक्रोनस मॉड्यूल (एएमडी) एपीआई का एक कार्यान्वयन है जो जावास्क्रिप्ट फ़ाइलों को एसिंक्रोनस रूप से लोड करने के लिए उपयोग किया जाता है (यानी अवरुद्ध किए बिना) और कई जावास्क्रिप्ट फ़ाइलों के बीच निर्भरता का प्रबंधन करता है। इसमें संयोजन के लिए स्क्रिप्ट फ़ाइलों के संयोजन और कम से कम करने के लिए एक अनुकूलन उपकरण भी शामिल है, जबकि डेवलपर तार्किक रूप से अलग कोड बनाए रखने की अनुमति देता है।

नमस्ते दुनिया

निम्न उदाहरण आवश्यकता के मूल स्थापना और सेटअप को प्रदर्शित करेगा।

एक नई HTML फ़ाइल बनाएँ, जिसे index.html कहा जाता है और निम्नलिखित सामग्री पेस्ट करें:

<!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 पर एक नया JS फ़ाइल बनाएँ और निम्नलिखित सामग्री पेस्ट करें:

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

आपकी परियोजना संरचना इस तरह दिखनी चाहिए:

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

एक ब्राउज़र में index.html फ़ाइल खोलें और यह आपको 'हैलो वर्ल्ड' के साथ अलर्ट करेगा।


व्याख्या

  1. आवश्यकता को लोड करें। स्क्रिप्ट फ़ाइल।

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
     
  2. scripts फ़ोल्डर से अतुल्यकालिक रूप से say मॉड्यूल लोड करें। (ध्यान दें कि मॉड्यूल को संदर्भित करते समय आपको .js एक्सटेंशन की आवश्यकता नहीं होती है।) लौटाया गया मॉड्यूल तब प्रदान किए गए फ़ंक्शन में जाता है जहां hello() लगाया जाता है।

    <script>
       requirejs(["scripts/say"], function(say) {
           alert(say.hello());
       });
    </script>
     
  3. say मॉड्यूल एक फ़ंक्शन hello परिभाषित के साथ एक ही वस्तु देता है।

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

नमस्कार निर्भरता के साथ विश्व को नमस्कार

निम्न उदाहरण define() फ़ंक्शन का उपयोग करके कई निर्भरताओं को प्रदर्शित करके Hello World पर फैलता है।

एक नई HTML फ़ाइल बनाएँ, जिसे index.html कहा जाता है और निम्नलिखित सामग्री पेस्ट करें:

<!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 पर एक नया JS फ़ाइल बनाएँ और निम्नलिखित सामग्री पेस्ट करें:

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

scripts/translations.js पर एक नई जेएस फ़ाइल बनाएँ और निम्नलिखित सामग्री पेस्ट करें:

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

आपकी परियोजना संरचना इस तरह दिखनी चाहिए:

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

एक ब्राउज़र में index.html फ़ाइल खोलें और कंसोल आउटपुट करेगा:

Hello World
Hola Mundo
Bonjour Le Monde
 

व्याख्या

  1. आवश्यकता को लोड करें। स्क्रिप्ट फ़ाइल।

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
     
  2. scripts फ़ोल्डर से अतुल्यकालिक रूप से say मॉड्यूल लोड करें। (ध्यान दें कि मॉड्यूल को संदर्भित करते समय आपको .js एक्सटेंशन की आवश्यकता नहीं होती है।) लौटाया गया मॉड्यूल तब प्रदान किए गए फ़ंक्शन में जाता है जहां hello() लगाया जाता है।

    <script>
         requirejs(["scripts/say"], function(say) {
             console.log(say.hello("english"));
             console.log(say.hello("spanish"));
             console.log(say.hello("french"));
         });
    </script>
     
  3. say मॉड्यूल एक समारोह के साथ एक एकल ऑब्जेक्ट hello परिभाषित, लेकिन इस मामले में हमारे द्वारा निर्धारित किया निर्भरता ( scripts/translations ) और हम वहाँ से अनुवाद खींच लेंगे।

    define(["scripts/translations"], function(translations){
        return {
            hello: function(language){
               return translations[language].hello + " " + translations[language].world;
            }
        };
    });
     
  4. translations मॉड्यूल विभिन्न शब्दों के अनुवाद के साथ एक वस्तु देता है।

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

गैर-एएमडी पुस्तकालयों को शामिल करना

सभी पुस्तकालयों को एक तरह से परिभाषित नहीं किया गया है जो एएमडी और रिक्जेस्ट्स डिफाइन define() फ़ंक्शन के साथ संगत है। लेखक ने उन निर्भरताओं को कॉन्फ़िगर करने के लिए एक shim निर्देश को शामिल करके इसे संबोधित किया है।

एक उदाहरण jQuery UI लेआउट प्लगइन का उपयोग कर रहा है। वह प्लगइन jQuery पर निर्भर करता है। आप इसे इस तरह कॉन्फ़िगर कर सकते हैं:

requirejs.config({
    paths: {
        'jquery': '../path/to/jquery.min',
        'jquery.layout': '../path/to/jquery.layout.min'
    },
    shim: {
        'jquery.layout': {
            deps: ['jquery']
        }
    }
});
 

और फिर इसे इस तरह से एक लेआउट मॉड्यूल में उपयोग करें:

define(['jquery', 'jquery.layout'], function ($, layout) {
    $('body').layout();
});
 

डेटा-मुख्य प्रवेश बिंदु का उपयोग करना

आपके एप्लिकेशन के लिए एक सिंगल एंट्री पॉइंट, आवश्यकता के साथ <script> टैग के भीतर data-main एट्रिब्यूट का उपयोग करके संभव है।

<script type="text/javascript" data-main="scripts/main" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
 

लोड होने पर, RequireJS के लिए दिखेगा data-main विशेषता और साथ डोम में मुख्य स्क्रिप्ट टैग इंजेक्षन async विशेषता सेट। यह फ़ाइल है जिसे आप अपने एप्लिकेशन को बंद करने से पहले किसी भी कॉन्फ़िगरेशन को करना चाहेंगे।

उदाहरण के लिए:

// contents of scripts/main.js
require.config({
    waitSeconds: 10,
    paths: {
        jquery: 'libs/jquery-1.4.2.min'
    }
});

requirejs(["jquery", "libs/say"], function($, say) {
    var $body = $('body');
    $body.append( $('<p/>').text(say.hello("english")) );
    $body.append( $('<p/>').text(say.hello("spanish")) );
    $body.append( $('<p/>').text(say.hello("french")) );
});