কেন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক / গ্রন্থাগারগুলিতে ফাংশন রয়েছে যা ইতিমধ্যে খাঁটি জাভাস্ক্রিপ্টে বিদ্যমান?


60

আমি অবাক হয়েছি কেন ফ্রেমওয়ার্ক / লাইব্রেরিগুলির নিজস্ব সহায়ক রয়েছে যদিও সেগুলি ইতিমধ্যে জন্মগতভাবে রয়েছে।

আসুন jQuery এবং AngularJS নিন । তাদের নিজস্ব eachপুনরাবৃত্তকারী ফাংশন রয়েছে:

কিন্তু আমাদের আছে Array.prototype.forEach

একইভাবে,

তবে আমাদের JSON.parse()ভ্যানিলা জাভাস্ক্রিপ্টে ফাংশন রয়েছে।


75
যে কেউ ওয়েব বিকাশের খারাপ পুরানো দিনগুলি স্মরণ করে, এই প্রশ্নটি আমাকে কাঁদিয়ে তোলে।
josh3736

3
@ জোশ 73736 still কমপক্ষে আপনাকে এখনও আই 6 (সমর্থন করতে হবে না ('ভাগ্যক্রমে, কেবল "এটির কাজটি করুন, এটি
কুঁকড়ে যাওয়ার

12
jQuery.eachএবং Array.prototype.forEachসমতুল্য নয়।
zzzzBov

3
আপনার নিজেকে যা জিজ্ঞাসা করা উচিত তা হ'ল: ভ্যানিলাজেএস-এ এখন পাওয়া ফাংশনগুলির কতটা জেিকিউ এবং এর মতো সরঞ্জামদণ্ড থেকে উদ্ভূত হয়েছে? উত্তর: অনেক । এটি প্রশ্নটি করে: আমরা এখনও সেগুলি কেন ব্যবহার করছি? কেন jQuery এর অন্তর্ভুক্ত করবেন $.each, এবং স্থানীয় (এবং দ্রুত) ব্যবহার করবেন না Array.prototype.forEach?
এলিয়াস ভ্যান ওটেজেম

1
@ josh3736 এটা ঠিক আছে ভাই ... এর i.stack.imgur.com/HJs4V.jpg
Crono

উত্তর:


93

কারণ যখন এই লাইব্রেরিগুলি লেখা হয়েছিল তখন কয়েকটি বড় ব্রাউজার সেই বৈশিষ্ট্যগুলিকে সমর্থন করে না। একবার লিখিত এবং ব্যবহৃত হয়ে গেলে, এই অ্যাপ্লিকেশনগুলিকে অনেকগুলি অ্যাপ্লিকেশন ভঙ্গ না করে এই পাঠাগারগুলি থেকে সরানো যাবে না।

(এই ক্ষেত্রে, "প্রধান ব্রাউজার" এর অর্থ এমন একটি ব্রাউজার যার এখনও বড় বাজার ভাগ রয়েছে, যার মধ্যে ইন্টারনেট এক্সপ্লোরারের মতো ব্রাউজারগুলির পুরানো সংস্করণ রয়েছে, যেখানে প্রচুর সংখ্যক ব্যবহারকারী অগত্যা সর্বশেষতম সংস্করণে আপগ্রেড করেন না))


44
$ ('মার্কি')। প্রতিটি (ফাংশন () {$ (এটি)। অ্যাপেন্ড ($ ('<bgsound />', {src: "good-answer.mp3"}));});
পিয়ের আরলাড

36
@ ডির্ক্ক এটি এমন নয় যে সাম্প্রতিক ব্রাউজারগুলি এটি সমর্থন করে না। এটি এমন যে সকলেই সাম্প্রতিক ব্রাউজার ব্যবহার করে এমন শ্রোতাদের পক্ষে যথেষ্ট ভাগ্যবান নয়।
জর্জ রিথ

14
Array.prototype.forEachকেবল অ্যারেগুলিতে পুনরাবৃত্তি হয় - উভয় গ্রন্থাগার পুনরাবৃত্তকারী ফাংশন অ্যারে বা অবজেক্টের মাধ্যমে পুনরাবৃত্তি করতে পারে।
জোজি

3
পুরানো ব্রাউজারগুলিকে সমর্থন করার জন্য এবং লাইব্রেরিকে কল করা প্রোগ্রাম এবং প্রোগ্রামার পুনরায় লিখতে চায় না এমন পুরানো কোডটিকে সমর্থন করার জন্য ফাংশনগুলি রয়েছে। আপনি যদি আইই 6 এর জন্য সমর্থন বাদ দিয়ে থাকেন তবে আপনার সম্ভবত এখনও আই.ই. এর প্রাচীন কপিগুলিকে সমর্থন করার দরকার হলে কিছু জাভাস্ক্রিপ্ট লিখিত থাকতে পারে।
মাইকেল শপসিন

6
এই ফাংশনগুলির অনেকগুলি (যেমন jQuery.parseJSON ()) ব্রাউজারটি সমর্থন করে কিনা এবং তা ব্রাউজারের পদ্ধতিতে নিজেকে সেট করে কিনা তা পরীক্ষা করে দেখায় এবং কেবলমাত্র উপযুক্ত নয় ব্রাউজারগুলিতে বিকল্প ব্যবহার করে!
জোসেফ

35

কারণ বিভিন্ন ব্রাউজারে তাদের জাভাস্ক্রিপ্ট ইঞ্জিনে বিভিন্ন প্রয়োগ এবং বৈশিষ্ট্য বেকড রয়েছে । একই "ভ্যানিলা-জেএস" কোডটি দুটি ভিন্ন ব্রাউজারে বা একই ব্রাউজারের এমনকি দুটি পৃথক সংস্করণে আলাদাভাবে চলতে পারে।

জনপ্রিয় জেএস লাইব্রেরি দ্বারা প্রদত্ত বিমূর্ত স্তরটি এর চারপাশের একটি উপায়। পর্দার আড়ালে, এটি বিভিন্ন ব্রাউজারের সক্ষমতা এবং সীমাবদ্ধতার চারপাশে কাজ করে এবং এর উপরে শীর্ষে একটি ইউনিফাইড, সহজেই ব্যবহারযোগ্য এপিআই সরবরাহ করে। এটি, পরিবর্তে, সাধারণ ক্রিয়াকলাপগুলিতে যেমন ডিওএম অবজেক্ট পাওয়া বা জেএসএন ডেটা আনার মতো সামঞ্জস্যপূর্ণ, দক্ষ এবং ব্রাউজার-অজগনীয় হতে দেয়।

এটি ব্রাউজার এক্স বা ওয়াইয়ের সাথে কীভাবে কাজ করা উচিত তা লেখার পরিবর্তে এখন কোন কোডটি করা উচিত সে সম্পর্কে ফোকাস করতে পারে এমন বিকাশকারীদের পক্ষে জীবন অনেক সহজ হয়ে যায় makes


2
"কোর জেএস" এর আচরণটি সমস্ত ব্রাউজারে সুনির্দিষ্টভাবে নির্দিষ্ট এবং পরীক্ষিত।
ডোমেনিক

2
@ ডোমেনিক সিনট্যাক্স একদিকে রাখলে জাভাস্ক্রিপ্ট প্রয়োগগুলি ব্রাউজার থেকে আলাদা হয়ে থাকে। এখানে কয়েকটি বৈশিষ্ট্য, পদ্ধতি, ইভেন্ট এবং বৈশিষ্ট্য রয়েছে যা আপনি কেবলমাত্র কয়েকটি ব্রাউজারে পাবেন, বা এমনকি কখনও কখনও কেবল একটিতেও।
ক্রোনো

1
হ্যাঁ, ব্রাউজারগুলির মানহীন বৈশিষ্ট্য রয়েছে। এই প্রশ্নে আলোচিত স্ট্যান্ডার্ড বৈশিষ্ট্যগুলির সাথে তার কোনও সম্পর্ক নেই।
ডোমেনিক

8
@ ডোমেনিক যদি "প্রশ্নে আলোচিত স্ট্যান্ডার্ড বৈশিষ্ট্যগুলি" দ্বারা আপনি বোঝাচ্ছেন Array.prototype.forEachএবং JSON.parseকাজগুলি করেন তবে গুগলে একটি দ্রুত অনুসন্ধান আপনাকে দেখায় যে আপনি ভুল। JSONআইই আই-তে সমর্থিত ছিল না এবং forEachকয়েকটি অপেরা সংস্করণে এটি সংজ্ঞায়িত হয়নি। JQuery এর মতো গ্রন্থাগারগুলি তবে এই সীমাবদ্ধতাগুলি সম্পর্কে জানত এবং তাদের চারপাশে পর্দার আড়ালে কাজ করেছিল। সুতরাং আমি আমার উত্তর দাঁড়ায় বলে মনে করি।
ক্রোনো

27

1. পিছনের সামঞ্জস্য

জাভাস্ক্রিপ্ট ECMAScript এর একটি বাস্তবায়ন । এই ফাংশনগুলির বেশিরভাগ ইসমাস্ক্রিপ্ট 5 (ইএস 5) এ প্রবর্তিত হয়েছিল তবে এখনও বাজারে উল্লেখযোগ্য পরিমাণে অংশীদার থাকা অনেক পুরানো ব্রাউজারগুলি এই ফাংশনগুলিকে সমর্থন করে না (দেখুন ECMAScript 5 সামঞ্জস্যতা সারণী ), এটিগুলির মধ্যে উল্লেখযোগ্য IE8 being

সাধারণত গ্রন্থাগারগুলি যদি না থাকে তবে তাদের নিজস্ব পলিফিল ব্যবহার করা থাকলে দেশীয় বাস্তবায়নে ফিরে আসবে, উদাহরণস্বরূপ অ্যাঙ্গুলারজেএস- এর বাস্তবায়নটি দেখুন ( কৌণিক.জেএস এল203-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 সংস্করণ কিনা check তা না হলে এটি ইতিমধ্যে নির্দিষ্ট ফাংশন (দেশীয় সংস্করণ) ব্যবহার করে:

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

2. সুবিধা

নেটিভ জাভাস্ক্রিপ্ট Array.prototype.forEachহ'ল একটি উদাহরণের সাথে একচেটিয়া পদ্ধতি Array, তবে বেশিরভাগ Objectকোনওটিই পুনরাবৃত্ত।

এই কারণে অনেক গ্রন্থাগার স্রষ্টা তাদের ফাংশনগুলি বহুতল করে তোলে (একাধিক ধরণের ইনপুট হিসাবে গ্রহণ করতে সক্ষম)। আসুন উপরে অ্যাঙ্গুলারজেএস কোডটি নেওয়া যাক এবং এটি কী গ্রহণ করে তা দেখুন:

কার্যাদি :

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);
    }
  }
}

উপসংহার

আপনি দেখতে পাচ্ছেন যে AngularJS বেশিরভাগ জাভাস্ক্রিপ্ট অবজেক্টের উপরে পুনরাবৃত্তি করবে, যদিও এটি দেশীয় ফাংশনের মতো একইভাবে কাজ করে যা অনেক বেশি বিভিন্ন ধরণের ইনপুট গ্রহণ করে এবং এইভাবে লাইব্রেরিতে একটি বৈধ সংযোজন এবং ES5 ফাংশন আনার উপায় হিসাবে লিগ্যাসি ব্রাউজারগুলিতে।


2
একবার পরিবর্তন হয়ে গেলে ভবিষ্যতের রেফারেন্সের জন্য আপনি কোনও নির্দিষ্ট প্রতিশ্রুতি (উদাহরণস্বরূপ Angular.js L203-257 ) এ নির্দেশ করতে আপনার লিঙ্কটি আপডেট করতে চাইতে পারেন master
কেনোমারহ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.