मैं एक साथJJ और jQuery का उपयोग कैसे करूं?


82

मैं आवश्यकता का उपयोग करना चाहूँगा और मैं jQuery का उपयोग कर रहा हूँ। जब से मैं नवीनतम jQuery के संस्करण का उपयोग नहीं कर रहा हूँ, मैं आवश्यकता के संयुक्त संस्करण और jQuery का उपयोग नहीं करना चाहता। मेरे लिए जेजेजेएस के साथ काम करने का सबसे अच्छा तरीका क्या है?


2
आपको नवीनतम jQuery के उपयोग से क्या रोक रहा है?
गुप्त

मैं jQuery 1.3.8 का उपयोग कर रहा हूं। यह संस्करण कुछ अलग काम करता है तो 1.4.X. मैं नवीनतम jQuery का उपयोग करने का आदेश देता हूं मुझे कुछ कोड अपडेट करने होंगे और अभी मेरे पास इसके लिए समय नहीं है। इसके अलावा, मुझे नहीं लगता कि संकुल का संयोजन एक सही बात है।
नूर डेस

नीचे जवाब अच्छा है ... आपने इसे सही के रूप में चिह्नित क्यों नहीं किया है?
कैदी जीरो

@ कैदी शून्य: ईमानदारी से, मैं इसे परीक्षण करने के लिए प्रबंधन नहीं किया है। ecentually मैंने Microsoft के ajax स्क्रिप्ट लोडर का उपयोग किया। इस उत्तर को चिह्नित करने के लिए मुझे याद दिलाने के लिए धन्यवाद। अगर आपने कहा कि यह बहुत अच्छा है - मुझे विश्वास है।
नौर

मुझे अन्य पुस्तकालयों के साथ और इसके विपरीत उपयोग करने के लिए आवश्यकताएं भी कठिन लगीं। यही कारण है कि मैंने एक पुस्तकालय बनाया जिसका उपयोग करना बहुत आसान है और कोणीय के साथ परीक्षण किया जाता है। तल पर एक डेमो एप्लिकेशन है: gngeorgiev.github.io/Modulerr.js आप मॉडुलर.जेएस पर निर्भरता के बिना सभी लिपियों को एक साथ जोड़ सकते हैं
जॉर्जी-यह

जवाबों:


130

यही मेरा सटीक सवाल भी है! मुझे एक पुराने jQuery का उपयोग करना चाहिए, लेकिन अधिक "पारंपरिक" जावास्क्रिप्ट पुस्तकालयों का भी। ऐसा करने के लिए सबसे अच्छी तकनीक क्या है? (यदि आप बुरा न मानें तो इसे और अधिक व्यापक बनाने के लिए मैं आपके प्रश्न को संपादित कर सकता हूं।) यहाँ वही है जो मैंने सीखा है।

आवश्यकताएँJJS लेखक, जेम्स बर्क, ने संयुक्त RequJS + jQuery फ़ाइल के फायदे बताए । आपको दो चीजें मिलती हैं।

  1. एक मॉड्यूल, jqueryउपलब्ध है, और यह jQuery ऑब्जेक्ट है। यह सुरक्षित है:

    // My module depends on jQuery but what if $ was overwritten?
    define(["jquery"], function($) {
      // $ is guaranteed to be jQuery now */
    })
    
  2. jQuery किसी भी require()या define()सामान से पहले ही लोड किया गया है। सभी मॉड्यूल की गारंटी है कि jQuery तैयार है। आपको require/order.jsjQuery की जरूरत भी नहीं है क्योंकि jQuery पहले मूल रूप से हार्ड-कोडेड था पहले लोड करने के लिए।

मेरे लिए, # 2 बहुत मददगार नहीं है। अधिकांश वास्तविक अनुप्रयोगों में कई .js फाइलें होती हैं जिन्हें सही क्रम में लोड करना चाहिए - उदास लेकिन सच। जैसे ही आपको सैमी या अंडरस्कोर.जे की आवश्यकता होती है, संयुक्त आवश्यकताएँ + jQuery फ़ाइल मदद नहीं करती है।

मेरा समाधान सरल आवश्यकताएँ जेआरएस रैपर लिखना है जो "ऑर्डर" प्लगइन का उपयोग करके मेरी पारंपरिक लिपियों को लोड करते हैं।

उदाहरण

मान लीजिए कि मेरे ऐप में ये घटक हैं (निर्भरता द्वारा)।

  • मेरा ऐप, महान
    • greatapp एक कस्टम jquery (पुराने संस्करण जो मुझे उपयोग करना चाहिए) पर निर्भर करता है
    • greatapp my_sammy (SammyJS plus इसके सभी प्लगइन्स जो मुझे उपयोग करना चाहिए) पर निर्भर करता है । ये क्रम में होने चाहिए
      1. my_sammy jquery पर निर्भर करता है (SammyJS एक jQuery प्लगइन है)
      2. my_sammy पर निर्भर करता है sammy.js
      3. my_sammy पर निर्भर करता है sammy.json.js
      4. my_sammy पर निर्भर करता है sammy.storage.js
      5. my_sammy पर निर्भर करता है sammy.mustache.js

मेरे दिमाग में, ऊपर की सब कुछ .jsएक "पारंपरिक" स्क्रिप्ट है। बिना सब कुछ .jsएक आवश्यकताJJS प्लगइन है। कुंजी है: उच्च-स्तरीय सामान (greatapp, my_sammy) मॉड्यूल हैं, और गहरे स्तर पर, यह पारंपरिक .jsफ़ाइलों पर वापस आता है ।

बूटिंग

यह सब एक बूटर के साथ शुरू होता है, जिसमें बताया गया है कि कैसे शुरू करना है।

<html>
  <head>
    <script data-main="js/boot.js" src="js/require.js"></script>
  </head>
</html>

में js/boot.jsमैं केवल विन्यास और आवेदन कैसे शुरू करें।

require( // The "paths" maps module names to actual places to fetch the file.
         // I made modules with simple names (jquery, sammy) that will do the hard work.
         { paths: { jquery: "require_jquery"
                  , sammy : "require_sammy"
                  }
         }

         // Next is the root module to run, which depends on everything else.
       , [ "greatapp" ]

         // Finally, start my app in whatever way it uses.
       , function(greatapp) { greatapp.start(); }
       );

मुख्य अनुप्रयोग

में greatapp.jsमैं एक सामान्य की तलाश में मॉड्यूल की है।

define(["jquery", "sammy"], function($, Sammy) {
  // At this point, jQuery and SammyJS are loaded successfully.
  // By depending on "jquery", the "require_jquery.js" file will run; same for sammy.
  // Those require_* files also pass jQuery and Sammy to here, so no more globals!

  var start = function() {
    $(document).ready(function() {
      $("body").html("Hello world!");
    })
  }

  return {"start":start};
}

आवश्यकता हैJJS मॉड्यूल पारंपरिक फ़ाइलों के आसपास लपेटता है

require_jquery.js:

define(["/custom/path/to/my/jquery.js?1.4.2"], function() {
  // Raw jQuery does not return anything, so return it explicitly here.
  return jQuery;
})

require_sammy.js:

// These must be in order, so use the "order!" plugin.
define([ "order!jquery"
       , "order!/path/to/custom/sammy/sammy-0.6.2-min.js"
       , "order!/path/to/custom/sammy/plugins/sammy.json-0.6.2-min.js"
       , "order!/path/to/custom/sammy/plugins/sammy.storage-0.6.2-min.js"
       , "order!/path/to/custom/sammy/plugins/sammy.mustache-0.6.2-min.js"
       ]

       , function($) {
           // Raw sammy does not return anything, so return it explicitly here.
           return $.sammy;
         }
      );

5
इस उत्तर पर अच्छा काम ... उम्मीद है कि प्रश्नकर्ता इसे चिह्नित करेगा!
कैदी जीरो

आप वास्तविक jquery फ़ाइल के आधार पर एक आवश्यकता_jquery मॉड्यूल बनाते हैं, लेकिन क्या jquery वैश्विक नहीं रहती है? वास्तविक jquery फ़ाइल 1.4.2 जिसे आप कस्टम पथ से लोड करते हैं, एक आवश्यकता नहीं है। जेएस मॉड्यूल? या क्या आपको उस फाइल के आसपास भी लपेटने की आवश्यकता थी?
Sander

3
मैं यह नोट करना चाहूंगा कि jQuery के सबसे हाल के संस्करण (1.7) के साथ यह पहले से ही मॉड्यूल का समर्थन करता है और इसलिए आपको इसे सामान्य रूप से करने की आवश्यकता है और यह काम करेगा।
मिकमर्कू

1
क्या कोई इस उत्तर को अपडेट करने के लिए यह बता सकता है कि एएमडी का समर्थन करने के लिए 2J (w / shim) + jQuery 1.7+ की आवश्यकता कैसे है?
हेनरी

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

32

यह प्रश्न अभी कम से कम दो साल पुराना है, लेकिन मैंने देखा है कि यह अभी भी एक समस्या है। आवश्यकताएँ 2.0 (आवश्यक- jquery.js jQuery 1.8.0 का उपयोग करता है, लेकिन नवीनतम संस्करण 1.8.2 है)।

यदि आप इस प्रश्न को देखते हैं, तो ध्यान दें कि आवश्यकता-jquery.js अब केवल आवश्यकता है। js और jquery.js, एक साथ मैश किए हुए। आप केवल आवश्यकता-jquery.js को संपादित कर सकते हैं और नए संस्करण के साथ jQuery के भागों को बदल सकते हैं

अद्यतन (30 मई, 2013) : अब जब किजेएस के पास रास्ते और शिम हैं, तो jQuery और jQuery प्लगइन्स आयात करने का एक नया तरीका है, और पुरानी विधि अब आवश्यक नहीं है और न ही अनुशंसित है । यहाँ वर्तमान विधि का एक संक्षिप्त संस्करण है:

requirejs.config({
    "paths": {
      "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min"
    }
});

define(["jquery"], function($) {
    $(function() {
    });
});

अधिक जानकारी के लिए http://requirejs.org/docs/jquery.html देखें ।


धन्यवाद, यह अभी भी प्रासंगिक है :)
नाओर

क्या आप अभी भी jQuery 1.3.8 का उपयोग कर रहे हैं? :)
क्रिस

इस बारे में बताने के लिए शुक्रिया। मैंने पढ़ा कि 1.8 के पुराने संस्करण में समस्याएं थीं जो नवीनतम में हल हो गई थीं।
ब्लेन मुक्लो

वास्तव में। वे curcSS के साथ jQueryUI समस्याएं नहीं थीं, क्या वे थे?
क्रिस

1
@ प्रकाशित: वे दोनों काम करते हैं। अंतर यह है कि स्पष्ट रूप से एक मॉड्यूल निर्दिष्ट करता है। मैं लगभग अनन्य रूप से परिभाषित का उपयोग करना पसंद करता हूं क्योंकि यह पथ के बारे में अधिक स्पष्ट है: stackoverflow.com/questions/16087635/…
क्रिस

9

मैंने पाया है कि सबसे अच्छा तरीका है मेरी आवश्यकता के निर्माण के बाहर jQuery रखना।

बस अपने HTML में jquery.min.js शामिल करें। फिर, jquery.js फ़ाइल को कुछ इस तरह से बनाएं ...

define([], function() {
    return window.$;
});

यह एक अच्छा वर्कअराउंड है, क्योंकि मेरे पास कुछ जेएस फाइलें हैं, जिन्हें पारंपरिक रूप से स्क्रिप्ट टैग का उपयोग करके लोड किया जाना चाहिए, और वे jQuery पर निर्भर करते हैं।
जिंगताओ

3

मिला जेसनस्मिथ का एवर जबरदस्त मददगार है, शायद आवश्यकता से अधिक जरुरी दस्तावेज।

हालाँकि, अलग-अलग AJAX अनुरोधों के लिए (छोटे) परिभाषित-घोषित मॉड्यूल ("requ_jquery" "requirement_sammy") से बचने के लिए इस पर अनुकूलन करने का एक तरीका है। मुझे संदेह है कि r.js इसे ऑप्टिमाइज़ेशन स्टेज पर करेंगे, लेकिन आप पथ, बेसुरि सिस्टम से न लड़ने के लिए समय से पहले ऐसा कर सकते हैं।

index.html:

<html>
  <head>
    <script data-main="js/loader.js" src="js/require.js"></script>
  </head>
</html>

loader.js:

// We are going to define( dependencies by hand, inline.
// There is one problem with that through (inferred from testing):
// Dependencies are starting to load (and execute) at the point of declaring the inline
// define, not at the point of require(
// So you may want to nest the inline-defines inside require( 
// this is, in a way, short replacement for Order plug in, but allows you to use
// hand-rolled defines, which the Order plug in, apparently does not allow.

var jQueryAndShims = ['jquery']

if(window.JSON == null){
    jQueryAndShims.push('json2')
    define(
        'json2'
        , ['js/libs/json2.min.js']
        , function() {
            return window.JSON
        }
    )
}
// will start loading the second we define it.
define(
    'jquery'
    , ['js/libs/jquery_custom.min.js']
    , function() {
        // we just pick up global jQuery here. 
        // If you want more than one version of jQuery in dom, read a more complicated solution discussed in
        // "Registering jQuery As An Async-compatible Module" chapter of
        // http://addyosmani.com/writing-modular-js/
        return window.jQuery 
    }
)

// all inline defines for resources that don't rely on other resources can go here.

// First level require(
// regardless of depends nesting in 'myapp' they will all start downloading 
// at the point of define( and exec whenever they want, 
// async in many browsers. Actually requiring it before the nested require makes
// sure jquery had *executed and added jQuery to window object* before
// all resolved depends (jquery plugins) start firing.
require(jQueryAndShims, function($) {

    // will start loading the second we define it.        
    define(
        'sammy_and_friends'
        , ['jquery','js/libs/jquery_pluginone.min.js','js/libs/jquery_plugintwo.min.js','js/libs/sammy.min.js']
        , function($) {
            // note, all plugins are unaltered, as they are shipped by developers.
            // in other words, they don't have define(.. inside.
            // since they augment global $ (window.jQuery) anyway, and 'jquery' define above picks it up
            // , we just keep on returning it.
            // Sammy is attached to $ as $.sammy, so returning just Sammy makes little sense
            return $
        }
    )

    // second level require - insures that Sammy (and other jQuery plugins) - 'sammy_and_friends' - is
    // loaded before we load Sammy plugins. I normally i would inline all sammy plugins i need 
    // (none, since i use none of them preferring jQuery's direct templating API
    // and no other Sammy plug in is really of value. )  right into sammy.js file. 
    // But if you want to keep them separate:
    require(['sammy_and_friends'], function() {

        // will start loading the second we define it.
        define(
            'sammy_extended'
            , ['sammy_and_friends','js/libs/sammy_pluginone.min.js','js/libs/sammy_plugintwo.min.js']
            , function($) {
                // as defined above, 'sammy_and_friends' actually returns (globall) jQuery obj to which
                // Sammy is attached.  So we continue to return $
                return $
            }
        )
        // will start loading the second we define it.
        define(
            'myapp'
            , ['sammy_extended', 'js/myapplication_v20111231.js'] 
            , function($, myapp_instantiator) {
                // note, myapplication may, but does not have to contain RequireJS-compatible define
                // that returns something. However, if it contains something like 
                // "$(document).ready(function() { ... " already it MAY fire before 
                // it's depends - 'sammy_extended' is fully loaded.
                // Insdead i recommend that myapplication.js returns a generator 
                // (app-object-generating function pointer)
                // that takes jQuery (with all loaded , applied plugins) 
                // The expectation is that before the below return is executed, 
                // all depends are loaded (in order of depends tree)
                // You would init your app here like so:
                return myapp_instantiator($)
                // then "Run" the instance in require( as shown below
            }
        )

        // Third level require - the one that actually starts our application and relies on
        // dependency pyramid stat starts with jQuery + Shims, followed by jQuery plugins, Sammy, 
        // followed by Sammy's plugins all coming in under 'sammy_extended'
        require(['jquery', 'myapp'], function($, myappinstance) {
            $(document).ready(function() {myappinstance.Run()})
        })
    }) // end of Second-level require
}) // end of First-level require

अंत में, myapplication.js:

// this define is a double-wrap.
// it returns application object instantiator that takes in jQuery (when it's available) and , then, that
// instance can be "ran" by pulling .Run() method on it.
define(function() {
    // this function does only two things:
    // 1. defines our application class 
    // 2. inits the class and returns it.
    return function($) {
        // 1. defining the class
        var MyAppClass = function($) {
            var me = this
            this._sammy_application = $.sammy(function() {
                this.raise_errors = true
                this.debug = true
                this.run_interval_every = 300
                this.template_engine = null
                this.element_selector = 'body'
                // ..
            })
            this._sammy_application.route(...) // define your routes ets...
            this.MyAppMethodA = function(blah){log(blah)}  // extend your app with methods if you want
            // ...
             // this one is the one we will .Run from require( in loader.js
            this.Run = function() {
                me._sammy_application.run('#/')
            }
        }
        // 2. returning class's instance
        return new MyAppClass($) // notice that this is INITED app, but not started (by .Run) 
        // .Run will be pulled by calling code when appropriate
    }
})

इस संरचना (शिथिलता की जगह (डुप्लिकेट?) की आवश्यकता हैJJS आदेश प्लगइन, लेकिन) आप निर्भर करता है और निर्भर पेड़ की परिभाषा के लिए और अधिक नियंत्रण जोड़कर AJAX के लिए आवश्यक फ़ाइलों की संख्या को prune करने की अनुमति देता है।

अलग से jQuery लोड करने के लिए एक बड़ा बोनस भी है (जो आमतौर पर 100k पर आता है) - आप सर्वर पर कैशिंग को नियंत्रित कर सकते हैं, या ब्राउज़र के लोकलस्टोरेज में jQuery को कैश कर सकते हैं। यहाँ AMD-Cache प्रोजेक्ट पर एक नज़र डालें। https://github.com/jensarps/AMD-cache फिर डिफाइन को बदलें (स्टेटमेंट्स टू "कैश!": और यह यूजर के ब्राउजर में अटका रहेगा।

define(
    'jquery'
    , ['cache!js/libs/jquery_old.min.js']
    , function() {
        // we just pick up global jQuery here. 
        // If you want more than one version of jQuery in dom, read a more complicated solution discussed in
        // "Registering jQuery As An Async-compatible Module" chapter of
        // http://addyosmani.com/writing-modular-js/
        return window.jQuery 
    }
)

JQuery के 1.7.x के बारे में नोट करें। यह अब केवल विंडो ऑब्जेक्ट के साथ संलग्न नहीं होता है, इसलिए ऊपर अनमॉडिफाइड jQuery 1.7.x + फ़ाइल के साथ काम नहीं करेगा। वहां आपको अपना jquery **। Js को बंद करने से पहले इसे शामिल करना होगा "}) (विंडो);";

;window.jQuery=window.$=jQuery

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

कोड लाइसेंस: सार्वजनिक डोमेन।

खुलासे: जावास्क्रिप्ट ऊपर "छद्म कोड" की बदबू आ रही है क्योंकि यह अधिक विस्तृत उत्पादन कोड का एक पैराफ्रीजिंग (हाथ से छंटाई) है। जैसा कि ऊपर प्रस्तुत कोड काम करने की गारंटी नहीं है और प्रस्तुत के रूप में काम करने के लिए परीक्षण नहीं किया गया था। ऑडिट करो, परखो। अर्धविराम उद्देश्य पर छोड़ दिया गया है, क्योंकि वे जेएस कल्पना के अनुसार आवश्यक नहीं हैं और कोड उनके बिना बेहतर दिखता है।


आवश्यकताएँ के साथ लड़ने के बाद (चीजें ऑर्डर से बाहर लोड हो रही हैं, परिभाषित नहीं कर रही हैं, घोंसले के शिकार की आवश्यकता है। अन्य जादू दुर्व्यवहारों) कर्ल.जेएस पर स्विच किया गया और रात को अच्छी तरह से सोना शुरू कर दिया। यह उतना हाइप्ड नहीं है, लेकिन, लानत है, यह स्थिर है और इसके साथ काम करना आसान है!
ddotsenko

1

Jhs के उत्तर के अलावा, README.md फ़ाइल से आवश्यक- जिक्थरी जीथब पृष्ठ पर हाल के निर्देशों को देखें । यह एक संयुक्त jquery / requirement.js फ़ाइल का उपयोग करने के सबसे सरल दृष्टिकोण को शामिल करता है और एक अलग jquery .js का उपयोग कैसे करें।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.