Metaprogramming เป็นเครื่องมือที่ทรงพลัง แต่ด้อยค่า แม้ว่าเครื่องมือพัฒนาที่ใช้กันอย่างแพร่หลายจำนวนมากจะใช้เครื่องมือนี้ แต่ความสนใจในการเขียนโปรแกรมเมตาก็ลดลงเรื่อย ๆ (อย่างน้อยก็เป็นไปตามข้อมูลของ Google เทรนด์):

อาจมีสาเหตุหลายประการที่อยู่เบื้องหลังแนวโน้ม มันเคยเป็นเครื่องมือที่ได้รับความนิยมพอสมควรในสาขาที่ปัจจุบัน Machine Learning กำลังเฟื่องฟูในขณะที่เครื่องมือในการพัฒนามีความซับซ้อนมากขึ้นความจำเป็นในการตรวจสอบหัวข้อดังกล่าวจึงลดลง ไม่ว่าจะด้วยเหตุผลใดก็ตามฉันเชื่อเป็นอย่างยิ่งว่าศิลปะที่ถูกลืมนี้ยังคงมีความเกี่ยวข้องและสามารถก่อให้เกิดประโยชน์มากมายเมื่อเชี่ยวชาญ

Metaprogramming คืออะไร?

Wikipedia ให้คำจำกัดความของ metaprogramming ว่าเป็น“ เทคนิคการเขียนโปรแกรมที่โปรแกรมคอมพิวเตอร์มีความสามารถในการปฏิบัติต่อโปรแกรมอื่นเป็นข้อมูลของมัน ก็หมายความว่าโปรแกรมที่สามารถออกแบบให้อ่านสร้างวิเคราะห์หรือแปลงโปรแกรมอื่น ๆ และแม้กระทั่งการปรับเปลี่ยนของตัวเองในขณะที่ทำงาน”

กล่าวอีกนัยหนึ่งเราสามารถใช้ metaprogramming เพื่อตรวจสอบแก้ไขหรือแม้แต่สร้างโค้ดตั้งแต่เริ่มต้น นอกจากนี้เรายังสามารถใช้เพื่อเขียนโปรแกรมที่ปรับเปลี่ยนได้เองซึ่งเป็นกรณีการใช้งานที่อยู่นอกขอบเขตของjscodeshiftแต่สิ่งที่ฉันกล่าวถึงสั้น ๆ ในบทความก่อนหน้านี้

หนึ่งในเครื่องมือที่เราสามารถใช้สำหรับการ metaprogramming เป็นjscodeshift : เครื่องมือที่สร้างขึ้นโดยใช้ Facebook ในปี 2015 ที่ให้ง่ายต่อการใช้งาน API สำหรับ traversing สอบถามและการปรับเปลี่ยนต้นไม้ไวยากรณ์นามธรรม (AST) ของโค้ด JavaScript สร้างขึ้นจากการสร้างใหม่และใช้Esprimaเป็นตัวแยกวิเคราะห์ JavaScript

รหัสที่แก้ไขซอร์สโค้ดดั้งเดิมมักเรียกว่าcodemod ห้องสมุดจำนวนมากมี codemods เผยแพร่ต่อสาธารณะบน GitHub ซึ่งโดยปกติแล้วจะเป็นจุดเริ่มต้นและเรียนรู้วิธีการเขียนของคุณเอง

แผนภาพต่อไปนี้แสดงภาพรวมทั่วไปของวิธีการทำงานของ jscodeshift ในทางปฏิบัติ ประการแรกซอร์สโค้ดที่เราต้องการแก้ไขจะถูกแปลงเป็น AST จากนั้นจึงใช้ codemod เพื่อเพิ่ม / ลบ / แก้ไขโหนด เป็นผลให้ต้นไม้อื่นถูกสร้างขึ้น จากนั้นเราสามารถแปลงต้นไม้กลับเป็นรูปแบบรหัสและบันทึกได้

ต้นไม้ไวยากรณ์นามธรรม (AST) คืออะไร?

เพื่อให้เข้าใจกระบวนการทั้งหมดของ metaprogramming และเขียน codemod ของเราเองก่อนอื่นเราต้องเข้าใจว่าเครื่องอ่านโปรแกรม JavaScript อย่างไร

เอ็นจิ้น JavaScript ไม่อ่านโค้ดของเราเช่นเดียวกับที่เราทำ แต่จะแปลงรหัสเป็นโครงสร้างไวยากรณ์นามธรรม AST เป็นโครงสร้างข้อมูลแบบต้นไม้ที่แสดงถึงตัวแปรการเรียกและโครงสร้างการควบคุมโฟลว์ทั้งหมดที่ใช้ภายในโค้ดของเรา เมื่อโปรแกรมทำงานเอ็นจิน JavaScript จะข้ามผ่านทรีและรันคำสั่งที่แสดงโดยแต่ละโหนด หากคุณต้องการที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ asts และค้นพบ parsers แตกต่างกันมีหัวกับบทความที่ยอดเยี่ยมนี้โดยฮวน Picado

ตัวอย่าง AST

เริ่มจากตัวอย่างง่ายๆ:

และดูการแสดง AST ของมัน:

เราจะเห็นได้ว่าโค้ดของเราถูกเปลี่ยนเป็นโครงสร้างพื้นฐานโดยมีBinaryExpression(ซึ่งแสดงถึงการเพิ่ม) เป็นโหนดและอาร์กิวเมนต์สองตัว (ซ้ายมือและขวามือ) เป็นโหนดลูก

ตอนนี้ลองพิจารณาโค้ดที่ซับซ้อนมากขึ้นและการแสดง AST:

ในตัวอย่างนี้ต้นไม้เติบโตขึ้นอย่างมาก ดังที่คุณเห็นนิพจน์เงื่อนไขของเราถูกเปลี่ยนเป็นโหนดที่มีโหนดลูก 3 โหนด:

• ทดสอบ : เงื่อนไขที่นิพจน์ "ผลลัพธ์" จะถูกดำเนินการ
• ผลลัพธ์ที่ตามมา : โค้ดที่ได้รับการดำเนินการหากทรีย่อยทดสอบประเมินว่าเป็นจริง
• ทางเลือก : รหัสที่ถูกเรียกใช้งานเป็นอย่างอื่น

console.log(x)นิพจน์ของเราได้ขยายออกไปMemberExpressionซึ่งเป็นการแสดง AST ของการรับคุณสมบัติจากอ็อบเจ็กต์ ( console.log) จากนั้นรวมเข้ากับอาร์กิวเมนต์ ( x) ภายใต้CallExpressionโหนด

หากคุณต้องการตรวจสอบ AST ของโค้ดของคุณคุณสามารถใช้AST Explorerเพื่อสร้างการแสดง AST คุณสำรวจต้นไม้ในรูปแบบ JSON ทางด้านขวาได้ เมื่อคุณวางเมาส์เหนือโหนดรหัสที่เกี่ยวข้องจะถูกไฮไลต์

โค้ดรูปแบบนี้ง่ายมากสำหรับเครื่องจักรในการวิเคราะห์และแก้ไข อันที่จริงมันคือสิ่งที่jscodeshiftใช้ในการปรับเปลี่ยน!

ตัวอย่างชีวิตจริง

ก่อนที่เราจะเริ่มเขียนการแก้ไขโค้ดของเราเองเราควรพิจารณาว่า codemods สามารถทำอะไรได้บ้างและมีประโยชน์ตรงไหนบ้าง จำนวนมากได้รับการบันทึกไว้เป็นอย่างดี

กำลังย้ายข้อมูลไปยัง Jest

คู่มือการโยกย้าย Jestแนะนำให้ใช้ jscodeshift เพื่อทำให้กระบวนการย้ายข้อมูลเป็นไปโดยอัตโนมัติจากกรอบการทดสอบยอดนิยมเช่น AVA, Chai, Expect.js, Jasmine หรือ Mocha ถึง Jest codemods ตัวเองสามารถพบได้ในความตลกขบขัน-codemods GitHub มีเรื่องราวที่ดีมากที่อธิบายถึงวิธี codemods นี้ช่วยให้นักพัฒนาที่จะโยกย้ายโครงการของพวกเขาได้เร็วขึ้นเช่นเมื่อมีเคนท์ซีดอดส์อพยพ codebase จาก AVA ที่จะล้อเล่นที่ PayPal

ตอบสนองการเปลี่ยนแปลงที่ทำลาย

React รวมถึง codemodsเป็นส่วนหนึ่งของคู่มือการย้ายข้อมูลระหว่างเวอร์ชันที่แนะนำการเปลี่ยนแปลงที่ไม่สมบูรณ์ คำแนะนำเหล่านี้ (ตามทฤษฎี) ช่วยให้คุณสามารถโยกย้ายระหว่างเวอร์ชันต่างๆได้ด้วยคำสั่งเดียว ในทางปฏิบัติมักจำเป็นต้องมีการแก้ไขด้วยตนเอง แต่การมี codemod จะช่วยเร่งกระบวนการได้อย่างมาก

Gatsby migration v1 -> v2, aka codemods นั้นยาก

ในทางกลับกัน codemods ไม่ได้มีประโยชน์เสมอไป เมื่อเร็ว ๆ นี้ผมพยายามที่จะโยกย้ายเก่าGatsbyโครงการ v1 เป็นรุ่นล่าสุดโดยใช้codemods อย่างเป็นทางการ น่าเสียดายที่แม้ว่า codebase ของเราจะค่อนข้างเรียบง่าย แต่ codemods บางตัวก็ไม่ทำงานและบางตัวก็สร้างโค้ดที่ไม่ถูกต้อง การเขียน codemod ที่ดีนั้นไม่ตรงไปตรงมาเนื่องจากจำเป็นต้องทำงานบนโค้ดเบสที่เป็นไปได้ทั้งหมด ในกรณีของเราที่ย้ายLinkส่วนประกอบทำให้แอปขัดข้องเพราะเรามีสิ่งที่เป็นนามธรรมอยู่เหนือชั้นเรียนของ Gatsby หลังจากการย้ายข้อมูลการนำเข้าทั้งหมดถูกทำซ้ำและเราต้องแก้ไขด้วยตนเอง

การโอนย้าย lodash / ขีดล่างไปยังฟังก์ชันดั้งเดิม

ที่น่าสนใจอีก codemod ฉันได้พบอพยพ codebase จาก lodash และขีดเทียบเท่า ในอดีตการใช้ lodash และขีดล่างเป็นสิ่งที่ถูกต้องตามข้อเท็จจริงที่ว่าวิธีการส่วนใหญ่ที่มีให้นั้นไม่ได้เป็นส่วนหนึ่งของฟังก์ชันการทำงานของ JavaScript ปัจจุบันวิธีการเหล่านี้ส่วนใหญ่รวมอยู่ในภาษา น่าเสียดายที่การย้ายข้อมูลด้วยมือจะใช้เวลานานและเกิดข้อผิดพลาดได้ง่าย ขอบคุณ codemods ที่เราสามารถทำได้ด้วยคำสั่งเดียว:

codemods และทรัพยากรที่มีประโยชน์อื่น ๆ

มีแหล่งข้อมูล codemod อื่น ๆ อีกมากมายโดยเฉพาะอย่างยิ่ง:

• React codemods - ที่เก็บสำหรับการโอนย้ายโครงการ React
• JS Codemod - codemods สำหรับการย้ายไปยังไวยากรณ์ JavaScript ใหม่เช่นฟังก์ชันลูกศร, let / const แทน vars, Object.assign และอื่น ๆ
• jscodeshift "สุดยอด" - ที่เก็บที่มีบทความการพูดคุยเครื่องมือและตัวแปลงรหัสมากมาย

บทความนี้เป็นเพียงข้อมูลเบื้องต้นเกี่ยวกับ codemods คอยติดตามส่วนที่สองซึ่งเราจะสร้างตัวแปลงสัญญาณสามตัวที่จัดรูปแบบโค้ดอย่างถูกต้องและค้นหาข้อมูลรั่วไหล