कॉलिंग तरीकों

Question

मैं एक "पुराने" ब्राउज़र शैली मॉड्यूल संरचना से एक 'नई' ब्राउज़र- या के लिए एक परियोजना को बदलने कर रहा हूँ - सर्वर साइड-जावास्क्रिप्ट मॉड्यूल require.js के साथ संरचना।

ग्राहक मैं एक ऑफसाइट उपयोग कर रहा हूँ पर jQuery का आयोजन किया है, इसलिए मैं उदाहरण वे README की "use priority config" तकनीक में देने से शुरू:

<title>My Page</title> 
<script src="scripts/require.js"></script> 
<script> 
require({ 
    baseUrl: 'scripts', 
    paths: { 
     jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min', 
     jqueryui: ..., 
     ... 
     ... // bunch more paths here 
    }, 
    priority: ['jquery'] 
}, [ 'main' ]); 
</script> 

यह वास्तव में सब ठीक काम कर रहा है। लेकिन मैं मुख्य रूप से HTML वेबपृष्ठ से कार्यक्षमता निर्यात करना चाहता हूं। उदाहरण के लिए:

<a class="button" href="#" onclick="MyApi.foo();"> 
    <img src="foo.png" alt="foo" />Click for: <b>Foo!</b> 
</a> 

एएमडी मॉड्यूल पैटर्न में फिटिंग से पहले, मैं कार्यक्षमता मेरी विभिन्न फाइलों से वैश्विक अंतरिक्ष में एक वस्तु शब्दकोश बनाने के द्वारा संपर्क में था:

// main.js 

var MyApi = {}; 

jQuery(document).ready(function($) { 
    // ...unexported code goes here... 

    // export function via MyApi 
    MyApi.foo = function() { 
     alert("Foo!"); 
    }; 
}); 

लेकिन मैं नहीं जानता कि requ.js में सही दृष्टिकोण क्या है। क्या <script> टैग के अंदर HTML में require कथन डालना ठीक है, और उसके बाद मॉड्यूल नाम दें ताकि इसका उपयोग वेबपृष्ठ के भीतर से किया जा सके? या यह हमेशा key.js के अंदर गतिशील रूप से किया जाना चाहिए, जैसे $('#foobutton').click(...)?

Answer 1

एएमडी का उपयोग करने से एक लाभ नामस्थानों की आवश्यकता को छोड़ना है। RequJS के साथ उन्हें फिर से बनाने की कोशिश कर रहे एएमडी प्रचार पैटर्न के खिलाफ जाना होगा।

main.js का उपयोग करने के संबंध में, यह केवल तब ही उपयुक्त है जब आपके पास एक पृष्ठ ऐप होगा और आपका सभी कोड एक स्थान से संदर्भित हो। आप आवश्यकतानुसार अन्य मॉड्यूल की आवश्यकता और लोड करने के लिए अतिरिक्त कॉल करने के लिए स्वतंत्र हैं।

foo.js

define(['jquery'], function($) { 

    // Some set up 
    // code here 

    // Return module with methods 
    return { 
     bar: function() { 

     } 
    } 


}); 

page.js

require(['foo'], function(foo) { 

    // jQuery loaded by foo module so free to use it 
    $('.button').on('click', function(e) { 
     foo.bar(); 
     e.preventDefault(); 
    }); 

}); 

फिर अपने पेज अनुरोध में:

ऊपर से अपने उदाहरण का उपयोग करना, आप इसे इस तरह के दृष्टिकोण हो सकता है आवश्यकता के साथ page.js फ़ाइल।पेज

<script> 
    require(['page']); 
</script> 

कुछ अतिरिक्त अंक

• ऊपर पैटर्न का उपयोग करना,:

  ऊपर अपने उदाहरण का उपयोग:

  require({ 
      // config stuff here 
  }, [ 'page' ]); 
  

  या पेज में यह और नीचे लोड हो रहा है .js को आसानी से कई अन्यकी आवश्यकता हो सकती हैमॉड्यूल अन्य पेज से संबंधित कार्यक्षमता लोड करने के लिए।

• कहाँ इससे पहले कि आप अपने वैश्विक नाम स्थान के लिए सदस्यों को देते हैं, तो आप अब कि कोड अलग मॉड्यूल किसी भी पृष्ठ पर फिर से इस्तेमाल किया जा सकता में विभाजित। सभी वैश्विक वस्तु पर निर्भरता के बिना।

• अपने डोम तत्वों को घटनाओं संलग्न करने के लिए इस तरह की आवश्यकता का उपयोग करना RequireJS

Answer 2

आपके मार्कअप के अंदर onclick="" डालने से सामग्री के साथ गंदा मिश्रण प्रस्तुति होती है। मैं आपको <script> ब्लॉक जोड़ने और require इसमें डाल देता हूं, और एक बार कॉलबैक के अंदर, और यदि आवश्यक हो तो अन्य आंतरिक $(document).ready() के अंदर अपने सामान्य हैंडलर को सामान्य तरीके से तार करें: $('#node').click(...)। यदि आप इसे सामान्य रूप से पर्याप्त कर सकते हैं कि यह एकाधिक पृष्ठों पर लागू होता है, तो उसे बाहरी फ़ाइल के अंदर रखें जो छोटा, संयुक्त और कैश किया गया है। लेकिन आम तौर पर ये चीजें पेज-विशिष्ट होने लगती हैं, इसलिए पृष्ठ के निचले हिस्से में <script> टैग एक और बाहरी संसाधन अनुरोध से बचने के लिए एक अच्छा समाधान है।

Answer 3

तुम भी जावास्क्रिप्ट के विंडो वर्ग पर संदर्भ सेट कर सकते हैं द्वारा सबसे अधिक संभावना rely on the DOM Ready module प्रदान की जाएगी।

आवेदन मॉड्यूल के तल में

window.MyApi = MyApi;

<a class="button" href="#" onclick="MyApi.foo();"></a>

Answer 4

एक अन्य समाधान बस ऐसे ही कोड (निश्चित रूप से requirejs पेज में जोड़ा जाना चाहिए) का उपयोग किया जाता है:

<input type="button" onclick="(function() { require('mymodule').do_work() })()"/>