क्लाइंट की तरफ जावास्क्रिप्ट की आवश्यकता होती है

Question 1

क्या require()क्लाइंट पक्ष पर इसका उपयोग (या कुछ इसी तरह) करना संभव है ?

उदाहरण

var myClass = require('./js/myclass.js');

Question 2

आप इस पर गौर करना चाहिए require.js या head.js इस के लिए।

Question 3

मैं उस के लिए ब्राउज़र का उपयोग कर रहा हूँ । यह मुझे अपने क्लाइंट-साइड कोड में Node.js मॉड्यूल को एकीकृत करने की भी सुविधा देता है।

मैंने इसके बारे में यहां ब्लॉग किया है: ब्राउजर के साथ क्लाइंट-साइड जावास्क्रिप्ट में नोड.जेएस / कॉमनज स्टाइल जोड़ें () की आवश्यकता है

Question 4

यदि आप Node.js शैली रखना चाहते हैं तो requireआप कुछ इस तरह का उपयोग कर सकते हैं:

var require = (function () {
    var cache = {};
    function loadScript(url) {
        var xhr = new XMLHttpRequest(),
            fnBody;
        xhr.open('get', url, false);
        xhr.send();
        if (xhr.status === 200 && xhr.getResponseHeader('Content-Type') === 'application/x-javascript') {
            fnBody = 'var exports = {};\n' + xhr.responseText + '\nreturn exports;';
            cache[url] = (new Function(fnBody)).call({});
        }
    }
    function resolve(module) {
        //TODO resolve urls
        return module;
    }
    function require(module) {
        var url = resolve(module);
        if (!Object.prototype.hasOwnProperty.call(cache, url)) {
            loadScript(url);
        }
        return cache[url];
    }
    require.cache = cache;
    require.resolve = resolve;
    return require;
}());

खबरदार: यह कोड काम करता है लेकिन अधूरा है (विशेष रूप से यूआरएल को हल करने वाला) और सभी Node.js सुविधाओं को लागू नहीं करता है (मैंने कल रात इसे एक साथ रखा)। आप वास्तविक ऐप्स में इस कोड का उपयोग नहीं कर सकते, लेकिन यह आपको एक प्रारंभिक बिंदु देता है। मैंने इस सरल मॉड्यूल के साथ इसका परीक्षण किया और यह काम करता है:

function hello() {
    console.log('Hello world!');
}

exports.hello = hello;

Question 5

मैंने खुद से वही सवाल पूछे। जब मैंने इस पर गौर किया तो पाया कि विकल्प भारी थे।

सौभाग्य से मुझे यह उत्कृष्ट स्प्रैडशीट मिली, जो आपकी आवश्यकताओं के आधार पर सर्वश्रेष्ठ लोडर का चयन करने में आपकी मदद करती है:

https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ

Question 6

पर एक नजर डालें requirejs परियोजना।

Question 7

मैंने पाया है कि सामान्य तौर पर यह संकलन समय पर स्क्रिप्ट को प्रीप्रोसेस करने और उन्हें एक (या बहुत कम) पैकेजों में बंडल करने की सिफारिश की जाती है। require कुछ "हल्के शिम" के संकलन समय पर भी लिखने ।

मैंने "नए" टूल का अनुसरण किया है, जो इसे करने में सक्षम होना चाहिए

और पहले से ही उल्लेख किया गया browserifyभी अच्छी तरह से फिट होना चाहिए - http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/

मॉड्यूल सिस्टम क्या हैं?

पुराने ढेर अतिप्रवाह स्पष्टीकरण - कॉमनजेएस, एएमडी और रिक्जेजेएस के बीच संबंध?
विभिन्न मॉड्यूल रूपरेखाओं की विस्तृत चर्चा और require()उन्हें जरूरत है Addy Osmani में - AMD, CommonJS और ESCony के साथ मॉड्यूलर जावास्क्रिप्ट लिखना

Question 8

आप डोम को तत्व बना सकते हैं, जो आइटम लोड करता है।

जैसे:

var myScript = document.createElement('script'); // Create new script element
myScript.type = 'text/javascript'; // Set appropriate type
myScript.src = './js/myclass.js'; // Load javascript file

Question 9

बस ब्राउजर का उपयोग करें, एक कंपाइलर की तरह क्या है जो उत्पादन में जाने से पहले आपकी फ़ाइलों को संसाधित करता है और फ़ाइल को बंडलों में पैक करता है।

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

अधिक जानकारी के लिए लिंक देखें: http://browserify.org/

Question 10

कुछ जवाब पहले से ही - लेकिन मैं आपको YUI3 और इसके ऑन-डिमांड मॉड्यूल लोडिंग की ओर संकेत करना चाहूंगा। यह सर्वर (नोड.जेएस) और क्लाइंट दोनों पर काम करता है, भी - मेरे पास एक ही जेएस कोड का उपयोग करके डेमो वेबसाइट है जो पेज बनाने के लिए क्लाइंट या सर्वर पर चल रही है, लेकिन यह एक और विषय है।

YUI3: http://developer.yahoo.com/yui/3/

वीडियो: http://developer.yahoo.com/yui/theater/

उदाहरण:

(पूर्व शर्त: 7k yui.js में मूल YUI3 कार्य लोड किए गए हैं)

YUI({
    //configuration for the loader
}).use('node','io','own-app-module1', function (Y) {
    //sandboxed application code
    //...

    //If you already have a "Y" instance you can use that instead
    //of creating a new (sandbox) Y:
    //  Y.use('moduleX','moduleY', function (Y) {
    //  });
    //difference to YUI().use(): uses the existing "Y"-sandbox
}

यह कोड YUI3 मॉड्यूल "नोड" और "io" लोड करता है, और मॉड्यूल "स्वयं-ऐप-मॉड्यूल 1", और फिर कॉलबैक फ़ंक्शन चलाया जाता है। सभी YUI3 और खुद के ऐप-मॉड्यूल 1 फ़ंक्शन के साथ एक नया सैंडबॉक्स "Y" बनाया गया है। वैश्विक नाम स्थान में कुछ भी नहीं दिखाई देता है। मॉड्यूल (.js फ़ाइलें) का लोडिंग YUI3 लोडर द्वारा नियंत्रित किया जाता है। यह लोड करने के लिए मॉड्यूल के एक -debug या -min (ified) संस्करण का चयन करने के लिए वैकल्पिक (यहां नहीं दिखा) कॉन्फ़िगरेशन का उपयोग करता है।

Question 11

यहां एक समाधान है जो बहुत अलग दृष्टिकोण लेता है: सभी मॉड्यूल को JSON ऑब्जेक्ट में पैकेज करें और अतिरिक्त अनुरोधों के बिना फ़ाइल सामग्री को पढ़ने और निष्पादित करके मॉड्यूल की आवश्यकता होती है।

https://github.com/STRd6/require/blob/master/main.coffee.md

STRd6 / आवश्यकता एक JSON पैकेज रनटाइम पर उपलब्ध होने पर निर्भर करता है। requireसमारोह है कि पैकेज के लिए उत्पन्न होता है। पैकेज में उन सभी फाइलों को समाहित किया गया है जिनकी आपके ऐप को आवश्यकता हो सकती है कोई और http अनुरोध नहीं किए गए हैं क्योंकि पैकेज सभी निर्भरता को बंडल करता है। यह ग्राहक के लिए आवश्यक Node.js शैली के लिए मिल सकता है जितना करीब है।

पैकेज की संरचना इस प्रकार है:

entryPoint: "main"
distribution:
  main: 
    content: "alert(\"It worked!\")"
  ...
dependencies:
  <name>: <a package>

नोड के विपरीत एक पैकेज नहीं जानता कि यह बाहरी नाम है। यह निर्भरता सहित pacakge पर निर्भर है, इसे नाम दें। यह पूर्ण एनकैप्सुलेशन प्रदान करता है।

यहाँ उस सभी सेटअप को देखते हुए एक फंक्शन है जो एक पैकेज के भीतर से फाइल लोड करता है:

loadModule = (pkg, path) ->
  unless (file = pkg.distribution[path])
    throw "Could not find file at #{path} in #{pkg.name}" 

  program = file.content
  dirname = path.split(fileSeparator)[0...-1].join(fileSeparator)

  module =
    path: dirname
    exports: {}

  context =
    require: generateRequireFn(pkg, module)        
    global: global
    module: module
    exports: module.exports
    PACKAGE: pkg
    __filename: path
    __dirname: dirname

  args = Object.keys(context)
  values = args.map (name) -> context[name]

  Function(args..., program).apply(module, values)

  return module

यह बाहरी संदर्भ कुछ चर प्रदान करता है जो मॉड्यूल तक पहुंच है।

ए require फ़ंक्शन मॉड्यूल के संपर्क में है, इसलिए उन्हें अन्य मॉड्यूल की आवश्यकता हो सकती है।

अतिरिक्त गुण जैसे वैश्विक वस्तु का संदर्भ और कुछ मेटाडेटा भी उजागर होते हैं।

अंत में हम मॉड्यूल और दिए गए संदर्भ के भीतर कार्यक्रम को निष्पादित करते हैं।

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

Question 12

मुझे अन्य समाधानों (आवश्यकता सहित) की तुलना में बहुत अधिक सुव्यवस्थित वर्कफ़्लो देते हुए घटक प्रोजेक्ट मिल रहा है, इसलिए मैं https://github.com/component/component की जाँच करने की सलाह दूंगा । मुझे पता है कि यह थोड़ा देर से जवाब है लेकिन किसी के लिए उपयोगी हो सकता है।

Question 13

यहां आपके वेब क्लाइंट में आवश्यकता और निर्यात का उपयोग करने के लिए एक हल्का वजन तरीका है। यह एक साधारण आवरण है जो "नेमस्पेस" ग्लोबल वैरिएबल बनाता है, और आप अपने कॉनजेजेएस संगत कोड को "डिफाइन" फंक्शन में लपेटते हैं।

namespace.lookup('org.mydomain.mymodule').define(function (exports, require) {
    var extern = require('org.other.module');
    exports.foo = function foo() { ... };
});

यहाँ अधिक डॉक्स:

https://github.com/mckoss/namespace

Question 14

Clientside-आवश्यकता पुस्तकालय एक अतुल्यकालिक प्रदान करता है load()समारोह है कि किसी भी जे एस फ़ाइल या NPM मॉड्यूल (जो का उपयोग करता है लोड करने के लिए इस्तेमाल किया जा सकता module.exports), किसी भी .cssफ़ाइल, किसी भी .json, किसी भी.html , किसी भी किसी भी अन्य पाठ के रूप में फ़ाइल।

जैसे, npm install clientside-require --save

<script src = '/node_modules/clientside-require/dist/bundle.js'></script>
<script>
load('color-name') // an npm module
   .then(color_name=>{
        console.log(color_name.blue); // outputs  [0, 0, 255]
   })
</script>

इस परियोजना का वास्तव में एक अच्छा हिस्सा यह है कि किसी भी एड स्क्रिप्ट के अंदरload() , आप तुल्यकालिक require()फ़ंक्शन का उपयोग उसी तरह कर सकते हैं जिस तरह से आप नोड .js में उम्मीद करेंगे!

जैसे,

load('/path/to/functionality.js')

और इसके साथ /path/to/functionality.js:

var query_string = require("qs") // an npm module
module.exports = function(name){
    return qs.stringify({
         name:name,
         time:new Date()
    }
}

वह अंतिम भाग, सिंक्रोनस require()विधि को लागू करता है, जो इसे सर्वर पर चलाने के लिए निर्मित एनपीएम पैकेज का उपयोग करने में सक्षम बनाता है।

यह मॉड्यूल requireब्राउज़र में यथासंभव कार्यक्षमता को लागू करने के लिए डिज़ाइन किया गया था । अस्वीकरण: मैंने इस मॉड्यूल को लिखा है।

Question 15

हां इसका उपयोग करना बहुत आसान है, लेकिन आपको स्क्रिप्ट टैग द्वारा ब्राउज़र में जावास्क्रिप्ट फ़ाइल लोड करने की आवश्यकता है

<script src="module.js"></script>

और फिर जेएस फ़ाइल में उपयोगकर्ता की तरह

var moduel = require('./module');

मैं इलेक्ट्रॉन का उपयोग करके एक ऐप बना रहा हूं और यह उम्मीद के मुताबिक काम करता है।