जावास्क्रिप्ट चौखटे / पुस्तकालयों में ऐसे कार्य क्यों हैं जो पहले से ही शुद्ध जावास्क्रिप्ट में मौजूद हैं?

Question

मुझे आश्चर्य है कि रूपरेखा / पुस्तकालयों के अपने सहायक क्यों हैं, हालांकि वे मूल रूप से पहले से मौजूद हैं।

आइए jQuery और AngularJS लेते हैं । उनके अपने eachकार्यकलाप हैं:

• jQuery.each ()
• angular.forEach ()

लेकिन हमारे पास है Array.prototype.forEach।

इसी तरह,

• jQuery.parseJSON ()
• angular.fromJson ()

लेकिन हमारे पास JSON.parse()वेनिला जावास्क्रिप्ट में कार्य है।

Comments

जैसा कि कोई है जो वेब विकास के बुरे दिनों को याद करता है, यह सवाल मुझे रुला देता है।

— josh3736

@ josh3736 कम से कम आपको अभी भी IE6 का समर्थन करने की आवश्यकता नहीं है ('थियो, सौभाग्य से केवल "इसे बनाने के काम में, यह बकवास की तरह लग सकता है")

— इज़ाकटा

jQuery.eachऔर Array.prototype.forEachसमकक्ष नहीं हैं।

— zzzzBov

आपको खुद से क्या पूछना चाहिए: अब वैनिला जेएस में पाए जाने वाले कार्यों में से कितने जेक्यू और जैसे जैसे टूलकिट्स से उत्पन्न हुए हैं? जवाब है: कई । यह सवाल भीख मांगता है: हम अभी भी उनका उपयोग क्यों कर रहे हैं? JQuery के क्यों शामिल हैं $.each, और मूल (और तेज़) का उपयोग नहीं करते हैं Array.prototype.forEach?

— एलियास वान ओटगेम

@ josh3736 यह ठीक है भाई ... i.stack.imgur.com/HJs4V.jpg

— क्रोनो

Answer 1

क्योंकि जब उन पुस्तकालयों को लिखा गया था, कुछ प्रमुख ब्राउज़रों ने उन सुविधाओं का समर्थन नहीं किया था। एक बार लिखे और उपयोग किए जाने के बाद, इन सुविधाओं को कई अनुप्रयोगों को तोड़े बिना इन पुस्तकालयों से हटाया नहीं जा सकता है।

(इस मामले में, "प्रमुख ब्राउज़र" का अर्थ है एक ब्राउज़र जिसमें अभी भी बड़ी बाजार हिस्सेदारी है, जिसमें इंटरनेट एक्सप्लोरर जैसे ब्राउज़र के पुराने संस्करण शामिल हैं, जहां बड़ी संख्या में उपयोगकर्ता आवश्यक रूप से नवीनतम संस्करण में अपग्रेड नहीं करते हैं।)

Comments

$ ('मार्की')। प्रत्येक (फंक्शन () {$ (यह) .पेन्ड ($ ('<bgsound />', {src: "good-answer.mp3"});});

— पियरे अरलाउड

@dirkk ऐसा नहीं है कि हालिया ब्राउज़र इसका समर्थन नहीं करते हैं। ऐसा नहीं है कि हर कोई भाग्यशाली है जो एक दर्शक है जो हाल के ब्राउज़र का उपयोग करता है।

— जॉर्ज रीथ

Array.prototype.forEachकेवल सरणियों पर iterates - दोनों पुस्तकालय पुनरावृत्ति कार्य सरणियों या वस्तु पर पुनरावृति कर सकते हैं।

— जोज

फ़ंक्शन पुराने ब्राउज़रों का समर्थन करने और पुराने कोड का समर्थन करने के लिए हैं जो लाइब्रेरी को कॉल करते हैं और प्रोग्रामर को फिर से लिखना नहीं चाहता है। यहां तक ​​कि अगर आपने IE 6 के लिए समर्थन को गिरा दिया है, तो संभवतः आपके पास कुछ जावास्क्रिप्ट का उपयोग लिखा है जब आपको IE की प्राचीन प्रतियों का समर्थन करने की आवश्यकता होती है।

— माइकल शोप्सिन

इस कार्य में से कई (जैसे jQuery.parseJSON ()) सिर्फ यह देखते हैं कि क्या ब्राउज़र इसका समर्थन करता है और फिर खुद को ब्राउज़र विधि में सेट करता है, और केवल गैर-संगत ब्राउज़र पर एक विकल्प का उपयोग करता है!

— जोसेफ

Answer 2

क्योंकि विभिन्न ब्राउज़रों के जावास्क्रिप्ट इंजन में अलग-अलग कार्यान्वयन और विशेषताएं होती हैं । एक ही "वेनिला-जेएस" कोड दो अलग-अलग ब्राउज़रों पर अलग-अलग चल सकता है, या एक ही ब्राउज़र के दो अलग-अलग संस्करण भी हो सकते हैं।

लोकप्रिय जेएस पुस्तकालयों द्वारा प्रदान की गई अमूर्त परत इसके चारों ओर एक रास्ता है। दृश्यों के पीछे, यह विभिन्न ब्राउज़रों की क्षमताओं और सीमाओं के आसपास काम करता है और उन के शीर्ष पर एपीआई का उपयोग करने के लिए एक एकीकृत, आसान प्रदान करता है। यह बदले में, सामान्य संचालन जैसे कि DOM ऑब्जेक्ट प्राप्त करने या JSON डेटा को सुसंगत, कुशल और ब्राउज़र-एग्नॉस्टिक बनाने की अनुमति देता है।

यह उन डेवलपर्स के लिए जीवन को बहुत आसान बनाता है जो अब इस बात पर ध्यान केंद्रित कर सकते हैं कि कोड को क्या करना चाहिए, इसके बजाय इसे ब्राउज़र या 1 के साथ काम करने के लिए कैसे लिखा जाना चाहिए।

Comments

"कोर जेएस" का व्यवहार सभी ब्राउज़रों में अच्छी तरह से निर्दिष्ट और परीक्षण किया गया है।

— दैविक

@ डोमिनिक सिंटैक्स एक तरफ, जावास्क्रिप्ट कार्यान्वयन ब्राउज़र से ब्राउज़र में भिन्न होता है। ऐसे गुण, विधियाँ, घटनाएँ और सुविधाएँ हैं जो आपको केवल कुछ ब्राउज़रों में मिलेंगी, या यहाँ तक कि कभी-कभी केवल एक में भी।

— क्रोनो

हां, ब्राउज़रों में गैर-मानक विशेषताएं हैं। इस सवाल में चर्चा की गई मानक सुविधाओं से इसका कोई लेना-देना नहीं है।

— डोमिनिक

@ डोमिनिक यदि "सवाल में चर्चा की गई मानक सुविधाओं" से आपका मतलब है Array.prototype.forEachऔर JSON.parseकार्य, तो Google पर एक त्वरित खोज आपको दिखाएगी कि आप गलत हैं। JSONऑब्जेक्ट IE7 पर समर्थित नहीं था और forEachकुछ ओपेरा संस्करणों पर परिभाषित नहीं किया गया था। हालांकि jQuery जैसे पुस्तकालयों ने इन सीमाओं के बारे में पता किया था और पर्दे के पीछे उनके आसपास काम किया था। इसलिए मुझे लगता है कि मेरा जवाब नहीं है।

— क्रोनो

Answer 3

1. पश्चगामी संगतता

जावास्क्रिप्ट ECMAScript का कार्यान्वयन है । उन कार्यों में से अधिकांश को ECMAScript 5 (ES5) में पेश किया गया था, हालांकि कई पुराने ब्राउज़र जो अभी भी बाजार में एक महत्वपूर्ण हिस्सा हैं, इन कार्यों का समर्थन नहीं करते हैं ( ECMAScript 5 संगतता तालिका देखें ), इनमें से सबसे उल्लेखनीय IE8 है।

आम तौर पर पुस्तकालय मूल कार्यान्वयन पर वापस आ जाएंगे यदि यह मौजूद है अन्यथा अपनी स्वयं की पॉलीफ़िल का उपयोग करें, उदाहरण के लिए आइए हम AngularJS के कार्यान्वयन ( कोणीय.js L203-257 ) को देखें:

function forEach(obj, iterator, context) {
  var key;
  if (obj) {
    if (isFunction(obj)){
      for (key in obj) {
        // Need to check if hasOwnProperty exists,
        // as on IE8 the result of querySelectorAll is an object without a hasOwnProperty function
        if (key != 'prototype' && key != 'length' && key != 'name' && (!obj.hasOwnProperty || obj.hasOwnProperty(key))) {
          iterator.call(context, obj[key], key);
        }
      }
    } else if (obj.forEach && obj.forEach !== forEach) {
      obj.forEach(iterator, context);
    } else if (isArrayLike(obj)) {
      for (key = 0; key < obj.length; key++)
        iterator.call(context, obj[key], key);
    } else {
      for (key in obj) {
        if (obj.hasOwnProperty(key)) {
          iterator.call(context, obj[key], key);
        }
      }
    }
  }
  return obj;
}

निम्न पंक्तियाँ जाँचती हैं कि forEachविधि वस्तु पर मौजूद है या नहीं और यह AngularJS संस्करण है या नहीं। यदि यह पहले से निर्दिष्ट फ़ंक्शन (मूल संस्करण) का उपयोग नहीं करता है:

} else if (obj.forEach && obj.forEach !== forEach) {
  obj.forEach(iterator, context);
}

2. सुविधा

देशी जावास्क्रिप्ट Array.prototype.forEachमें एक उदाहरण के लिए विशेष विधि है Array, हालांकि सबसे किसी भी Objectiterable भी है।

इस कारण से कई पुस्तकालय निर्माता अपने कार्यों को बहुरूपिक बनाते हैं (इनपुट के रूप में कई प्रकारों को स्वीकार करने में सक्षम)। चलो ऊपर AngularJS कोड लेते हैं और देखते हैं कि यह क्या इनपुट स्वीकार करता है:

कार्य :

if (isFunction(obj)){
  for (key in obj) {
    // Need to check if hasOwnProperty exists,
    // as on IE8 the result of querySelectorAll is an object without a hasOwnProperty function
    if (key != 'prototype' && key != 'length' && key != 'name' && (!obj.hasOwnProperty || obj.hasOwnProperty(key))) {
      iterator.call(context, obj[key], key);
    }
  }

Arrays (मूल विदेशी समर्थन के साथ):

} else if (obj.forEach && obj.forEach !== forEach) {
  obj.forEach(iterator, context);

ऐरे जैसी वस्तुएं (जिसमें बिना मूल निवासी समर्थन के), स्ट्रिंग, HTMLElement, एक वैध लंबाई संपत्ति के साथ वस्तु:

} else if (isArrayLike(obj)) {
  for (key = 0; key < obj.length; key++)
    iterator.call(context, obj[key], key);

वस्तुओं:

} else {
  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      iterator.call(context, obj[key], key);
    }
  }
}

निष्कर्ष

जैसा कि आप देख सकते हैं कि AngularJS किसी भी जावास्क्रिप्ट ऑब्जेक्ट पर सबसे ज्यादा काम करेगा, हालाँकि यह उसी तरह से काम करता है जैसे कि यह देशी कार्य को अधिक भिन्न प्रकार के इनपुट को स्वीकार करता है और इस प्रकार पुस्तकालय के लिए एक मान्य अतिरिक्त है साथ ही ES5 फ़ंक्शन लाने का एक तरीका है विरासत ब्राउज़रों के लिए।

Comments

आप भविष्य में संदर्भ के लिए एक विशेष रूप से कमिट (जैसे angular.js L203-257 ) को इंगित करने के लिए अपने लिंक को अपडेट करना चाह सकते हैं master।

— विस्मृति