ब्राउज़र और दस्तावेज़ तैयार है?

Question

मैं Browserify और document ready ईवेंट का उपयोग करने के साथ संघर्ष कर रहा हूं। मैं एक मॉड्यूल कैसे तैयार करूं जो दस्तावेज़ तैयार घटना के बाद उपलब्ध सामग्री को निर्यात करता है? मैं इस तरह के मॉड्यूल पर कैसे निर्भर करूं?

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

ब्राउज़रइफ़ और दस्तावेज़ तैयार घटनाओं का उपयोग करने के लिए एक अच्छा पैटर्न क्या है?

Answer 1

इस प्रयास करें:

var domready = require("domready"); 

domready(function() { 
    exports.something = /* whatever you want */ 
}); 

आप domready पैकेज को डाउनलोड करना होगा:

npm install domready 

तो बस browserify का उपयोग करें:

browserify input.js -o output.js 

हां। यह इत्ना आसान है।

---

पर विचार करें हम दो फ़ाइलों है: library.js और main.js।

// library.js 

var domready = require("domready"); 

domready(function() { 
    exports.test = "Hello World!"; 
}); 

// main.js 

var library = require("./library"); 
var domready = require("domready"); 

domready(function() { 
    alert(library.test); 
}); 

जब तक आप अपने मुख्य डोमरेड फ़ंक्शन को पंजीकृत करने से पहले अपनी लाइब्रेरी की आवश्यकता हो, तब तक आप अपनी लाइब्रेरी को निर्बाध रूप से उपयोग करने में सक्षम होना चाहिए।

---

कभी-कभी आप किसी फ़ंक्शन में module.exports सेट करना चाह सकते हैं।

// library.js 

var domready = require("domready"); 

module.exports = function() { 
    return exports._call.apply(this, arguments); 
}; 

domready(function() { 
    exports._call = function() { 
     alert("Hello World!"); 
    }; 
}); 

// main.js 

var library = require("./library"); 
var domready = require("domready"); 

domready(function() { 
    library(); 
}); 

ध्यान दें कि _call संपत्ति किसी भी तरह से विशेष में नहीं है: उस मामले में आप निम्नलिखित हैक उपयोग कर सकते हैं।

Answer 2

आमतौर पर आपके पास एक मास्टर फ़ाइल है जो पूरे एप्लिकेशन को सक्रिय करती है, ताकि आप इसे केवल तैयार कॉलबैक में लपेट सकें। दस्तावेज़ तैयार होने से पहले कुछ भी करने के लिए यह बहुत समझदारी नहीं करता है। निश्चित रूप से आप प्रत्येक फ़ाइल में एक फ़ंक्शन वापस कर सकते हैं जो डोम मैनिपुलेशन करता है, लेकिन यह जल्दी से गड़बड़ हो जाएगा। एक तैयार घटना के लिए सुनने की

document.addEventListener('DOMContentLoaded', function() { 
    var app = require('./app'); 
    // ... 
}); 

Answer 3

इसके बजाय, आप एक आस्थगित स्क्रिप्ट टैग में अपने browserify बंडल रख सकते हैं:

<script src="bundle.js" defer></script> 

यह आपको पूरी तरह से तैयार आवरण को दूर करने के बाद से बंडल निष्पादित नहीं किया जाएगा अनुमति देता है जब तक डोम लोड नहीं हो जाता है।

दुर्भाग्य defer के समर्थन patchy है, और मैं इसकी सलाह नहीं देते जब तक आप आईई < 10 का समर्थन करने के लिए इस सवाल का जवाब भविष्य के लिए एक विचार करें की जरूरत नहीं है, ब्राउज़र समर्थन के रूप में के लिए यह बढ़ता है।

Answer 4

यह एक परियोजना में मेरे लिए काम करता है, यह सुनिश्चित नहीं है कि यह हमेशा काम कर सके।

स्क्रिप्ट दें, उदाहरण के लिए: <script src="/path/to/main.js"></script></body> से ठीक पहले।

फ़ाइल में browserify the-file.js -o main.js होने जा रहा है।

// the-file.js: 

var $ = require("jquery"); 

//...... 

window.$ = $; // window is the global object in browsers 
$(document).ready(function(){ 
    // all the old things here .... 
}); 

एक और तरीका है बेहतर हो सकता है:

// the-file.js: 

var $ = require("jquery"); 

//...... 

(function($){ 

    $(document).ready(function(){ 
     // all the old things here .... 
    }); 

})($); // Anonymous function get called with $.