मैं जावास्क्रिप्ट फ़ाइल के माध्यम से निर्देशिका में सभी जावास्क्रिप्ट फ़ाइलों को कैसे शामिल कर सकता हूं?

Question

मैं JavaScript फ़ाइलों है कि मैं पेज में शामिल करना चाहते हैं का एक समूह है, लेकिन मैं तो वहाँ एक तरह से एक निर्देशिका में सभी फ़ाइलें (शामिल करने के लिए है

<script type="text/javascript" src="js/file.js"></script> 

लेखन रखने के लिए नहीं करना चाहते हैं अज्ञात आकार)? क्या मैं कुछ ऐसा कर सकता हूं ...

$.getScript("js/*.js"); 

... "जेएस" निर्देशिका में सभी जावास्क्रिप्ट फ़ाइलों को प्राप्त करने के लिए? मैं jQuery का उपयोग करके यह कैसे कर सकता हूं?

Answer 1

सामान्यतः, यह शायद एक अच्छा विचार नहीं है, क्योंकि आपकी एचटीएमएल फाइल केवल जेएस फाइलों को लोड करनी चाहिए जो वे वास्तव में उपयोग करते हैं। भले ही, किसी सर्वर-साइड स्क्रिप्टिंग भाषा के साथ ऐसा करना मुश्किल होगा। क्लाइंट को पृष्ठों की सेवा करने से पहले बस स्क्रिप्ट टैग डालें।

आप सर्वर-साइड स्क्रिप्टिंग का उपयोग कर, आप अपने जे एस निर्देशिका सामग्री लिस्टिंग की अनुमति देता है कि, और फिर XMLHttpRequest का उपयोग निर्देशिका की सामग्री को पढ़ने के लिए एक निर्देशिका में फ़ाइलों को छोड़ सकता है बिना यह करते हैं, और फ़ाइल को पार्स आउट करना चाहते हैं नाम और उन्हें लोड करें।

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

Answer 2

स्क्रिप्ट टैग लाइन जेनरेट करने के लिए सर्वर-साइड स्क्रिप्ट का उपयोग करने के बारे में क्या? Crudely, इस (PHP) की तरह कुछ -

$handle=opendir("scripts/"); 

while (($file = readdir($handle))!==false) { 
echo '<script type="text/javascript" src="$file"></script>'; 
} 

closedir($handle); 

Answer 3

आप ऐसा नहीं कर सकते कि जावास्क्रिप्ट में, के बाद से जे एस ब्राउज़र में निष्पादित किया जाता है, नहीं सर्वर में, तो यह निर्देशिका बारे में कुछ भी पता नहीं था या अन्य सर्वर संसाधन।

सबसे अच्छा विकल्प जेलीफ़िशट्री द्वारा पोस्ट की गई एक सर्वर साइड स्क्रिप्ट का उपयोग कर रहा है।

Answer 4

यह देखते हुए कि आप एक 100% ग्राहक के पक्ष समाधान चाहते हैं, सिद्धांत रूप में आप शायद ऐसा कर सकता है:

वाया XmlHttpRequest, कि निर्देशिका के लिए निर्देशिका प्रविष्टि पृष्ठ मिलता है (लगभग सभी वेब सर्वरों फ़ाइलों की एक सूची लौट अगर कोई है निर्देशिका में कोई index.html फ़ाइल नहीं)।

पार्स जो जावास्क्रिप्ट के साथ फ़ाइल करता है, सभी .js फ़ाइलों को खींचता है। यह निश्चित रूप से आपके वेब सर्वर/वेब होस्ट पर निर्देशिका सूची के प्रारूप के प्रति संवेदनशील होगा।

स्क्रिप्ट जोड़ें गतिशील टैग किए जाने कुछ इस तरह के साथ:

function loadScript (dir, file) { 
var scr = document.createElement("script"); 
scr.src = dir + file; 
document.body.appendChild(scr); 
} 

Answer 5

यह @jellyfishtree एक बेहतर होगा यदि आप एक PHP फ़ाइल में आपके सभी js निर्देशिका से फ़ाइलों को भी शामिल है और उसके बाद ही इस php शामिल बनाने एक स्क्रिप्ट टैग के माध्यम से फ़ाइल। इसका बेहतर प्रदर्शन है क्योंकि ब्राउज़र को सर्वर से कम अनुरोध करना पड़ता है। देखें:

javascripts.php:

<?php 
    //sets the content type to javascript 
    header('Content-type: text/javascript'); 

    // includes all js files of the directory 
    foreach(glob("packages/*.js") as $file) { 
     readfile($file); 
    } 
?> 

सूचकांक।php:

<script type="text/javascript" src="javascripts.php"></script> 

यही है!
मज़े करो! :)

Answer 6

यह पूरी तरह से ग्राहक पक्ष किया जा सकता है, लेकिन सभी जावास्क्रिप्ट फ़ाइल नामों को निर्दिष्ट किया जाना चाहिए। उदाहरण के लिए, सरणी आइटम के रूप में:

function loadScripts(){ 
    var directory = 'script/'; 
    var extension = '.js'; 
    var files = ['model', 'view', 'controller']; 
    for (var file of files){ 
     var path = directory + file + extension; 
     var script = document.createElement("script"); 
     script.src = path; 
     document.body.appendChild(script); 
    } 
} 

Answer 7

आप ब्राउज़र से कर सकते हैं नहीं है कि जावास्क्रिप्ट में ... अगर मैं तुम्हें थे, मैं browserify की तरह कुछ का प्रयोग करेंगे। कॉमनज मॉड्यूल का उपयोग करके अपना कोड लिखें और फिर जावास्क्रिप्ट फ़ाइल को संकलित करें।

आपके एचटीएमएल लोड में जावास्क्रिप्ट फ़ाइल जिसे आपने संकलित किया है।

Answer 8

आप Grunt Include Source जैसे कुछ का उपयोग कर सकते हैं। यह आपको एक अच्छा वाक्यविन्यास देता है जो आपके एचटीएमएल को प्रीप्रोकैस करता है, और फिर जो कुछ भी आप चाहते हैं उसे शामिल करता है। इसका मतलब यह भी है कि, यदि आप अपने निर्माण कार्यों को सही तरीके से सेट अप करते हैं, तो आप इन सभी को देव मोड में शामिल कर सकते हैं, लेकिन प्रोड मोड में नहीं, जो कि बहुत अच्छा है।

यदि आप अपनी परियोजना के लिए ग्रंट का उपयोग नहीं कर रहे हैं, तो शायद गुलप, या अन्य कार्य धावकों के लिए समान उपकरण हैं।

Answer 9

मैं इस प्रश्न का उत्तर ढूंढ रहा था और मेरी अपनी समस्याएं थीं। मुझे विभिन्न स्थानों में कुछ समाधान मिले और उन्हें अपने पसंदीदा उत्तर में एक साथ रखा।

function exploreFolder(folderURL,options){ 
/* options:     type   explaination 

    **REQUIRED** callback: FUNCTION  function to be called on each file. passed the complete filepath 
    then:     FUNCTION  function to be called after loading all files in folder. passed the number of files loaded 
    recursive:    BOOLEAN   specifies wether or not to travel deep into folders 
    ignore:     REGEX   file names matching this regular expression will not be operated on 
    accept:     REGEX   if this is present it overrides the `ignore` and only accepts files matching the regex 
*/ 
$.ajax({ 
    url: folderURL, 
    success: function(data){ 
     var filesLoaded = 0, 
     fileName = ''; 

     $(data).find("td > a").each(function(){ 
      fileName = $(this).attr("href"); 

      if(fileName === '/') 
       return; //to account for the (go up a level) link 

      if(/\/\//.test(folderURL + fileName)) 
       return; //if the url has two consecutive slashes '//' 

      if(options.accept){ 
       if(!options.accept.test(fileName)) 
        //if accept is present and the href fails, dont callback 
        return; 
      }else if(options.ignore) 
       if(options.ignore.test(fileName)) 
        //if ignore is present and the href passes, dont callback 
        return; 

      if(fileName.length > 1 && fileName.substr(fileName.length-1) === "/") 
       if(options.recursive) 
        //only recurse if we are told to 
        exploreFolder(folderURL + fileName, options); 
       else 
        return; 

      filesLoaded++; 
      options.callback(folderURL + fileName); 
      //pass the full URL into the callback function 
     }); 
     if(options.then && filesLoaded > 0) options.then(filesLoaded); 
    } 
}); 
} 

तो फिर तुम इसे इस तरह कॉल कर सकते हैं:

var loadingConfig = { 
    callback: function(file) { console.log("Loaded file: " + file); }, 
    then: function(numFiles) { console.log("Finished loading " + numFiles + " files"); }, 
    recursive: true, 
    ignore: /^NOLOAD/, 
}; 
exploreFolder('/someFolderURL/', loadingConfig); 

यह उदाहरण है कि कॉलबैक जो कि NOLOAD के साथ शुरू करने के लिए छोड़कर निर्दिष्ट फ़ोल्डर में हर फ़ाइल/फ़ोल्डर को कॉल करेंगे। यदि आप वास्तव में पृष्ठ में फ़ाइल को लोड करना चाहते हैं तो आप इस अन्य सहायक फ़ंक्शन का उपयोग कर सकते हैं जिसे मैंने विकसित किया था।

function getFileExtension(fname){ 
    if(fname) 
     return fname.substr((~-fname.lastIndexOf(".") >>> 0) + 2); 
    console.warn("No file name provided"); 
} 
var loadFile = (function(filename){ 
    var img = new Image(); 

    return function(){ 
     var fileref, 
      filename = arguments[0], 
      filetype = getFileExtension(filename).toLowerCase(); 

     switch (filetype) { 
      case '': 
       return; 
      case 'js': 
       fileref=document.createElement('script'); 
       fileref.setAttribute("type","text/javascript"); 
       fileref.setAttribute("src", filename); 
       break; 
      case "css": 
       fileref=document.createElement("link"); 
       fileref.setAttribute("rel", "stylesheet"); 
       fileref.setAttribute("type", "text/css"); 
       fileref.setAttribute("href", filename); 
       break; 
      case "jpg": 
      case "jpeg": 
      case 'png': 
      case 'gif': 
       img.src = filename; 
       break; 
      default: 
       console.warn("This file type is not supported: "+filetype); 
       return; 
     } 
     if (typeof fileref !== undefined){ 
      $("head").append(fileref); 
      console.log('Loaded file: ' + filename); 
     } 
    } 
})(); 

यह फ़ंक्शन एक जेएस स्वीकार करता है। सीएसएस | (सामान्य छवि) फ़ाइल और इसे लोड करता है। यह जेएस फाइलों को भी निष्पादित करेगा। पूरा कॉल की जरूरत है कि सभी छवियों और * स्टाइलशीट और अन्य लिपियों लोड करने के लिए ऐसा दिखाई दे सकता अपनी स्क्रिप्ट में चलाने के लिए:

loadingConfig = { 
    callback: loadfile, 
    then: function(numFiles) { console.log("Finished loading " + numFiles + " files"); }, 
    recursive: true, 
    ignore: /^NOLOAD/, 
}; 
exploreFolder('/someFolderURL/', loadingConfig); 

यह आश्चर्यजनक काम करता है!

Answer 10

एक अन्य विकल्प है कि बहुत कम है:

<script type="text/javascript"> 
$.ajax({ 
    url: "/js/partials", 
    success: function(data){ 
    $(data).find('a:contains(.js)').each(function(){ 
     // will loop through 
     var partial= $(this).attr("href"); 
     $.getScript("/js/partials/" + partial, function(data, textStatus, jqxhr) {}); 
    }); 
    } 
}); 
</script>