मल्टी-पेज प्रोजेक्ट

Question

में RequJS बिल्ड प्रोफाइल + r.js का उपयोग कैसे करें मैं वर्तमान में RequJS मूलभूत सिद्धांतों को सीख रहा हूं और बिल्ड प्रोफाइल, मुख्य फाइलों और बहु ​​पृष्ठ परियोजनाओं के साथ RequJS के उपयोग के बारे में कुछ प्रश्न पूछ रहा हूं। मैं प्रत्येक पृष्ठ के लिए एक अलग मुख्य फ़ाइल है (कुछ पृष्ठों में एक ही मुख्य फ़ाइल का उपयोग हालांकि)

 
httpdocs_siteroot/ 
    app/ 
     php files... 
    media/ 
     css/ 
      css files... 
     js/ 
      libs/ 
       jquery.js 
       require.js 
       mustache.js 
      mains/ 
       main.page1.js 
       main.page2.js 
       main.page3.js 
      plugins/ 
       jquery.plugin1.js 
       jquery.plugin2.js 
       jquery.plugin3.js 
      utils/ 
       util1.js 
       util2.js 
     images/ 

के बाद से इस परियोजना के लिए एक एकल-पृष्ठ ऐप्लिकेशन नहीं है,:

मेरे परियोजना की निर्देशिका संरचना इस प्रकार है।

मेरे प्रश्न हैं:

1. RequireJS परियोजनाओं कि एकल पृष्ठ नहीं हैं के लिए भी व्यावहारिक है?

2. अनुकूलक का उपयोग कर के बिना, अपने मुख्य फ़ाइलों में से प्रत्येक के मूलतः एक ही config विकल्पों के साथ शुरू करते हैं:

   requirejs.config({ 
       paths: { 
       'jquery': 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min' 
       }, 
       baseUrl: '/media/js/', 
       // etc... 
   }); 
   require(['deps'], function() { /* main code */ }); 
   

   वहाँ एक रास्ता इस से बचने के लिए है? प्रत्येक मुख्य फ़ाइल की तरह ही वास्तव में इसे बनाने के बिना एक ही निर्माण प्रोफ़ाइल शामिल है?

3. क्या r.js httpdocs_siteroot की मूल निर्देशिका में जाना चाहिए?

4. क्या मेरे ऐप डीआईआर संरचना या RequJS के उपयोग के साथ कुछ गड़बड़ है?

Answer 1

सबसे पहले, यह एक अद्वितीय समाधान के साथ कोई सवाल नहीं है। मैं जिस आवश्यकता का उपयोग करता हूं, वह मुझे आवश्यकता है जो मेरे लिए काम करता है, और आपके लिए काम कर सकता है :)

दूसरा, अंग्रेजी मेरी मां भाषा नहीं है। भाषा के बारे में सुधार और सुझावों की बहुत सराहना की जाएगी। स्वतंत्र महसूस करें, दोस्तों :)

1) क्या उन परियोजनाओं के लिए जेएस भी व्यावहारिक है जो एकल पृष्ठ नहीं हैं?

यह निर्भर करता है। यदि आपके प्रोजेक्ट में उदाहरण के लिए पृष्ठों के बीच साझा कोड नहीं है, तो RequJS मदद मामूली होगी। RequJS का मुख्य विचार एप्लिकेशन को पुन: प्रयोज्य कोड के हिस्सों में मॉड्यूलर करना है। यदि आपका एप्लिकेशन केवल पृष्ठ-विशिष्ट कोड का उपयोग करता है, तो RequJS का उपयोग करना एक अच्छा विचार नहीं हो सकता है।

2) अनुकूलक का उपयोग किए बिना, मेरी प्रत्येक मुख्य फाइल अनिवार्य रूप से एक ही कॉन्फ़िगरेशन विकल्प से शुरू होती है। इससे बचने का कोई रास्ता है क्या? प्रत्येक मुख्य फ़ाइल की तरह ही वास्तव में इसे बनाने के बिना एक ही निर्माण प्रोफ़ाइल शामिल है?

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

3) क्या r.js httpdocs_siteroot की मूल निर्देशिका में जाना चाहिए?

नहीं

जरूरी। आप इसे/मीडिया निर्देशिका में डाल सकते हैं, क्योंकि आपकी सभी ग्राहक सामग्री वहां है।

4) क्या मेरे ऐप डीआईआर संरचना या आवश्यकता के उपयोग के साथ कुछ गड़बड़ है?

मुझे लगता है कि यह नहीं कहूंगा। दूसरी ओर, संरचना शायद थोड़ा विखंडित है। उदाहरण के लिए, आप एक/विक्रेता निर्देशिका के अंदर सभी 'तृतीय पक्ष सामग्री' डाल सकते हैं। लेकिन यह सिर्फ चीनी है; आपकी संरचना अच्छी तरह से काम करेगी और सही लगता है। मुझे लगता है कि बड़ी समस्या कई मुख्य फाइलों में requjs.config() कॉल है।

मैं एक ही समस्या है कि तुम अब कर रहे हैं के लिए किया था और मैं निम्नलिखित समाधान के साथ समाप्त हो गया:

1) एक परिभाषित के साथ गैर एएमडी-संगत फ़ाइलें लपेट न करें। हालांकि यह काम करता है, आप requjs.config में "shim" प्रॉपर्टी का उपयोग करके एक ही परिणाम प्राप्त कर सकते हैं (नीचे देखें)।

2) एक बहु-पृष्ठ आवेदन में, मेरे लिए समाधान अनुकूलित main.js फ़ाइल से पृष्ठ-विशिष्ट मॉड्यूल की आवश्यकता के लिए नहीं है। इसके बजाय, मुझे मुख्य फ़ाइल से सभी साझा कोड (तृतीय पक्ष और मेरा स्वयं) की आवश्यकता होती है, जिससे पृष्ठ-विशिष्ट कोड प्रत्येक पृष्ठ पर लोड हो जाता है। मुख्य फ़ाइल केवल एक लोडर होता है जो सभी साझा/lib फ़ाइलों को लोड करने के बाद पृष्ठ-विशिष्ट कोड प्रारंभ करता है।

यह बॉयलरप्लेट मैं requirejs के साथ एक बहु पेज आवेदन बनाने के लिए उपयोग है

निर्देशिका संरचना:

/src - मैं एक src निर्देशिका के अंदर सभी ग्राहक सामान डाल, तो मैं चला सकते हैं इस निर्देशिका के अंदर अनुकूलक (यह आपकी मीडिया निर्देशिका है)।

/src/विक्रेता - यहाँ मैं सभी 3 पार्टी फ़ाइलों और प्लग इन, require.js सहित जगह।

/src/lib - यहाँ मैं सभी मेरे अपने कोड है कि पूरे आवेदन के द्वारा या कुछ पृष्ठों द्वारा साझा किया जाता जगह। दूसरे शब्दों में, मॉड्यूल जो पेज-विशिष्ट नहीं हैं।

/src/पेज मॉड्यूल-xx - और फिर, मैं प्रत्येक पृष्ठ मेरे पास है के लिए एक निर्देशिका बनाने। यह एक सख्त नियम नहीं है।

/src/main.js: यह संपूर्ण एप्लिकेशन के लिए एकमात्र मुख्य फ़ाइल है। यह होगा:

: शिम्स

लोड साझा पुस्तकालयों/मॉड्यूल

लोड पृष्ठ-विशिष्ट मुख्य मॉड्यूल

यह एक requirejs.config कॉल का एक उदाहरण है सहित

• कॉन्फ़िगर RequireJS,

  requirejs.config({ 
       baseUrl: ".", 
       paths: { 
        // libraries path 
        "json": "vendor/json2", 
        "jquery": "vendor/jquery", 
        "somejqueryplugion": "vendor/jquery.somejqueryplufin", 
        "hogan": "vendor/hogan", 
  
        // require plugins 
        "templ": "vendor/require.hogan", 
        "text": "vendor/require.text" 
       }, 
       // The shim section allows you to specify 
       // dependencies between non AMD compliant files. 
       // For example, "somejqueryplugin" must be loaded after "jquery". 
       // The 'exports' attribute tells RequireJS what global variable 
       // it must assign as the module value for each shim. 
       // For example: By using the configutation below for jquery, 
       // when you request the "jquery" module, RequireJS will 
       // give the value of global "$" (this value will be cached, so it is 
       // ok to modify/delete the global '$' after all plugins are loaded. 
       shim: { 
        "jquery": { exports: "$" }, 
        "util": { exports: "_" }, 
        "json": { exports: "JSON" }, 
        "somejqueryplugin": { exports: "$", deps: ["jquery"] } 
       } 
      }); 
  

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

  //libs 
  require([ 
      "templ",  //require plugins 
      "text", 
      "json",  //3rd libraries 
      "jquery", 
      "hogan", 
      "lib/util" // app lib modules 
  ], 
      function() { 
       var $ = require("jquery"), 
        // the start module is defined on the same script tag of data-main. 
        // example: <script data-main="main.js" data-start="pagemodule/main" src="vendor/require.js"/> 
        startModuleName = $("script[data-main][data-start]").attr("data-start"); 
  
       if (startModuleName) { 
        require([startModuleName], function (startModule) { 
         $(function(){ 
          var fn = $.isFunction(startModule) ? startModule : startModule.init; 
          if (fn) { fn(); } 
         }); 
        }); 
       } 
      }); 
  

  आप के शरीर में देख सकते हैं की आवश्यकता होती है() ऊपर, हम require.js स्क्रिप्ट टैग पर एक और विशेषता उम्मीद कर रहे हैं। डेटा शुरू विशेषता वर्तमान पृष्ठ के लिए मॉड्यूल के नाम का आयोजन करेगा।

  इस प्रकार, HTML पृष्ठ पर हम इस अतिरिक्त विशेषता जोड़ना होगा:

  <script data-main="main" data-start="pagemodule/main" src="vendor/require.js"></script> 
  

  ऐसा करने से, हम एक अनुकूलित main.js साथ खत्म हो जाएगा "/ विक्रेता" और "में सभी फ़ाइलें हैं कि/lib "निर्देशिका (साझा संसाधन), लेकिन पृष्ठ-विशिष्ट स्क्रिप्ट/मॉड्यूल नहीं, क्योंकि वे मुख्य.जेएस में निर्भरता के रूप में हार्ड-कोड नहीं हैं। पेज-विशिष्ट मॉड्यूल को एप्लिकेशन के प्रत्येक पृष्ठ पर अलग से लोड किया जाएगा।

  "पृष्ठ मुख्य" मॉड्यूल को function() वापस करना चाहिए जो उपरोक्त "ऐप मुख्य" द्वारा निष्पादित किया जाएगा।

  define(function(require, exports, module) { 
      var util = require("lib/util"); 
  
      return function() { 
       console.log("initializing page xyz module"); 
      }; 
  }); 
  

  संपादित

  तरीका यहां बताया गया निर्माण प्रोफ़ाइल का उपयोग पृष्ठ-विशिष्ट मॉड्यूल एक से अधिक फ़ाइल है कि अनुकूलन करने के लिए कर सकते हैं का उदाहरण है।

  उदाहरण के लिए, मान लीजिए कि हम निम्नलिखित पृष्ठ मॉड्यूल डालते हैं:

  /page1/main.js

  /page1/dep1.js

  /page1/dep2.js

  यदि हम इस मॉड्यूल को अनुकूलित नहीं करते हैं, तो ब्राउज़र प्रत्येक स्क्रिप्ट के लिए 3 अनुरोध करेगा, एक। हम पैकेज बनाने के लिए r.js को निर्देशित करके और इन 3 फ़ाइलों को शामिल करके इसे से बच सकते हैं।

  निर्माण प्रोफ़ाइल के "मॉड्यूल" विशेषता पर:

  ... 
  "modules": [ 
      { 
       name: "main" // this is our main file 
      }, 
      { 
       // create a module for page1/main and include in it 
       // all its dependencies (dep1, dep2...) 
       name: "page1/main", 
       // excluding any dependency that is already included on main module 
       // i.e. all our shared stuff, like jquery and plugins should not 
       // be included in this module again. 
       exclude: ["main"] 
      } 
  ] 
  

  ऐसा करने से, हम अपने सभी निर्भरता के साथ एक और प्रति-पृष्ठ मुख्य फ़ाइल बनाएँ। लेकिन, चूंकि हमारे पास पहले से ही एक मुख्य फ़ाइल है जो हमारी सभी साझा सामग्री लोड करेगी, हमें उन्हें पृष्ठ 1/मुख्य मॉड्यूल में फिर से शामिल करने की आवश्यकता नहीं है। कॉन्फ़िगरेशन एक छोटा वर्बोज़ है क्योंकि आपको प्रत्येक पृष्ठ मॉड्यूल के लिए ऐसा करना है जहां आपके पास एक से अधिक स्क्रिप्ट फ़ाइल हैं।

  मैंने गिटहब में बॉयलरप्लेट का कोड अपलोड किया: https://github.com/mdezem/MultiPageAppBoilerplate। यह एक काम करने वाला बॉयलरप्लेट है, नोड के लिए नोड और आर.जेएस मॉड्यूल स्थापित करें और build.cmd निष्पादित करें (/ निर्देशिका बनाने के अंदर, अन्यथा यह असफल हो जाएगा क्योंकि यह सापेक्ष पथ का उपयोग करता है)

  मुझे उम्मीद है कि मैं स्पष्ट हूं। अगर कुछ अजीब लगता है तो मुझे बताएं;)

  सम्मान!

Answer 2

<script data-main="js/main" src="js/lib/require.js"></script> 


// file: js/main 

require(['./global.config'], function(){ 
    require(['./view/home'], function() { 
     // do something 
    }); 
}); 

यही वह है जो मैंने अपनी परियोजना में उपयोग किया था।