ฉันสงสัยว่าทำไมเฟรมเวิร์ก / ห้องสมุดมีผู้ช่วยเหลือเป็นของตัวเอง

ลองทำjQueryและAngularJSกัน พวกเขามีeachฟังก์ชั่นตัววนซ้ำของตัวเอง:

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

Array.prototype.forEachแต่เรามี

ในทำนองเดียวกัน

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

แต่เรามีJSON.parse()ฟังก์ชั่นใน JavaScript วานิลลา

เนื่องจากเมื่อมีการเขียนไลบรารีเหล่านั้นเบราว์เซอร์หลักบางตัวจึงไม่สนับสนุนคุณสมบัติเหล่านั้น เมื่อเขียนและใช้แล้วฟีเจอร์เหล่านี้จะไม่สามารถลบออกจากไลบรารี่เหล่านี้ได้

(ในกรณีนี้ "เบราว์เซอร์หลัก" หมายถึงเบราว์เซอร์ที่ยังคงมีส่วนแบ่งการตลาดขนาดใหญ่ซึ่งรวมถึงเบราว์เซอร์รุ่นเก่าเช่น Internet Explorer ซึ่งผู้ใช้จำนวนมากไม่จำเป็นต้องอัพเกรดเป็นเวอร์ชั่นล่าสุด)

เนื่องจากเบราว์เซอร์ที่แตกต่างกันมีการใช้งานและคุณสมบัติที่แตกต่างกันในเอนจิ้น JavaScript รหัส "vanilla-JS" เดียวกันสามารถทำงานแตกต่างกันในเบราว์เซอร์ที่แตกต่างกันสองแห่งหรือแม้แต่เบราว์เซอร์รุ่นเดียวกันสองรุ่น

เลเยอร์นามธรรมที่จัดทำโดยไลบรารี JS ยอดนิยมเป็นวิธีแก้ไข เบื้องหลังมันทำงานได้กับความสามารถและข้อ จำกัด ของเบราว์เซอร์ที่แตกต่างกันและนำเสนอ API ที่รวมเป็นหนึ่งและใช้งานง่ายเหนือสิ่งอื่นใด ในทางกลับกันสิ่งนี้ช่วยให้การดำเนินงานทั่วไปเช่นการรับวัตถุ DOM หรือการดึงข้อมูล JSON ให้มีความสอดคล้องมีประสิทธิภาพและไม่เชื่อเรื่องพระเจ้า

สิ่งนี้ทำให้ชีวิตง่ายขึ้นมากสำหรับนักพัฒนาที่สามารถมุ่งเน้นไปที่โค้ดที่ควรทำแทนที่จะเขียนให้ทำงานกับเบราว์เซอร์ X หรือ Y

1. ความเข้ากันได้ย้อนหลัง

JavaScript คือการดำเนินการECMAScript ฟังก์ชั่นเหล่านั้นส่วนใหญ่ได้รับการแนะนำใน ECMAScript 5 (ES5) อย่างไรก็ตามเบราว์เซอร์รุ่นเก่าจำนวนมากซึ่งยังมีส่วนแบ่งตลาดที่สำคัญพอไม่รองรับฟังก์ชั่นเหล่านี้ (ดูตารางความเข้ากันได้ ECMAScript 5 )

โดยทั่วไปแล้วไลบรารี่จะกลับไปใช้งานเนทีฟหากมีอยู่แล้วใช้โพลีฟิลของตัวเองตัวอย่างเช่นลองดูการใช้งานของ AngularJS ( angular.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);
    }
  }

อาร์เรย์ (พร้อมการสนับสนุนพื้นเมืองสำหรับแต่ละคน):

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

Array-like objectsรวมถึง Array (ที่ไม่มีการสนับสนุนสำหรับแต่ละภาษา), String, HTMLElement, Object ที่มีคุณสมบัติความยาวที่ถูกต้อง:

} 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 จะวนซ้ำวัตถุ JavaScript ส่วนใหญ่แม้ว่ามันจะทำงานในลักษณะเดียวกับฟังก์ชั่นพื้นเมืองมันยอมรับประเภทของการป้อนข้อมูลที่แตกต่างกันมากขึ้นดังนั้นจึงเป็นการเพิ่มที่ถูกต้องไปยังห้องสมุดเช่นเดียวกับวิธีการนำฟังก์ชั่น ES5 สู่เบราว์เซอร์รุ่นเก่า