ความปลอดภัยของ JavaScript หรือวิธีการเขียนโค้ด JS ที่ปลอดภัย เครื่องมือควบคุมเวอร์ชัน

อเล็กซานเดอร์ มาโยรอฟโปรแกรมเมอร์ ประสบการณ์ 11 ปีในการเขียนโปรแกรม โดยเจ็ดแห่งที่เขาทุ่มเทให้กับการพัฒนาอุปกรณ์พกพา

การวิเคราะห์ประเภทคงที่ใน JavaScript
ลองใช้ Facebook Flow Analyzer

Facebook ได้เปิดตัวโครงการโอเพ่นซอร์สใหม่ Flow ซึ่งเป็นตัววิเคราะห์รหัสคงที่สำหรับ JavaScript จุดประสงค์หลักของการพัฒนาเครื่องวิเคราะห์คือทำให้การค้นหาข้อผิดพลาดง่ายขึ้น

นอกจากนี้ Flow ยังมีส่วนขยายไวยากรณ์ JavaScript สไตล์ TypeScript สำหรับการระบุประเภทอย่างชัดเจน รองรับคุณสมบัติใหม่มากมายที่นำมาใช้ในข้อกำหนด ECMAScript 6

หัวข้อของการพิมพ์ในภาษาโปรแกรมมักถูกกล่าวถึง นี่เป็นหัวข้อของ holivars และกำหนดลักษณะเชิงบวกหรือเชิงลบของภาษาใดภาษาหนึ่ง เมื่อเร็ว ๆ นี้มีการพูดคุยกันมากมายเกี่ยวกับการพิมพ์ใน JavaScript ใครๆก็ชอบแบบที่เป็นอยู่ ผู้ที่คุ้นเคยกับภาษาโปรแกรมอื่นๆ โดยเฉพาะอย่างยิ่งภาษาที่พิมพ์อย่างชัดเจน ถือว่าวิธีนี้เป็น "ระเบิดมือลิง" เราทุกคนทราบดีว่า JavaScript เป็นภาษาที่พิมพ์แบบหลวมๆ ผู้เชี่ยวชาญด้านการพัฒนาส่วนหน้าได้เรียนรู้วิธีใช้สิ่งนี้เพื่อประโยชน์ของตน แต่บางครั้งโค้ดก็หนักเกินไปที่จะเข้าใจ ผู้ที่เพิ่งเข้ามาในโลกของการเขียนโปรแกรม JavaScript รู้สึกงุนงงกับความมหัศจรรย์ที่ล่ามทำ และมักจะจับข้อผิดพลาดจากสีน้ำเงิน แต่ก่อนอื่น มาดูรายละเอียดเกี่ยวกับการพิมพ์โดยทั่วไปกันก่อน มันเป็นอย่างไร?

การพิมพ์ในภาษาโปรแกรม

โดยการพิมพ์ ภาษาโปรแกรมจะแบ่งออกเป็นสองค่ายใหญ่ - พิมพ์และไม่พิมพ์ ตัวอย่างเช่น ภาษาที่พิมพ์ ได้แก่ C, Python, PHP, Lua, JavaScript ตัวอย่างภาษาที่ไม่ได้พิมพ์: assembler, Forth, Brainfuck ใช่ ใช่ แน่นอน พิมพ์ JavaScript เช่นเดียวกับภาษาที่ตีความอื่น ๆ อีกมากมาย ดังนั้นไม่ว่าในกรณีใดจะบอกว่าไม่ได้พิมพ์ โดยเฉพาะในการสัมภาษณ์งาน

ในทางกลับกัน ภาษาที่พิมพ์จะถูกแบ่งออกเป็นหลายประเภทที่ทับซ้อนกัน:

พิมพ์แบบคงที่หรือแบบไดนามิก
พิมพ์แรงหรือหลวม
พิมพ์โดยชัดแจ้งหรือโดยปริยาย

ภาษาที่พิมพ์แบบคงที่

ด้วยการพิมพ์แบบคงที่ ตัวแปรและฟังก์ชันประเภทสุดท้ายจะถูกตั้งค่าในเวลาคอมไพล์ คอมไพเลอร์แก้ไขข้อผิดพลาดประเภทที่ไม่ตรงกันของคุณก่อนที่โปรแกรมจะเริ่มทำงาน ตัวอย่างภาษา: C, Java, C #

ภาษาที่พิมพ์แบบไดนามิก

ในการพิมพ์แบบไดนามิก จะพบทุกประเภทที่รันไทม์ และถ้าคุณทำผิดพลาด คุณจะรู้เกี่ยวกับมันเมื่อคุณรันโปรแกรมเท่านั้น ดังนั้น เมื่อพิมพ์แบบไดนามิก สิ่งสำคัญคือต้องให้ความสนใจเป็นพิเศษกับการตรวจสอบและตรวจจับข้อผิดพลาด ตัวอย่างภาษา: JavaScript, PHP, Python, Ruby

การพิมพ์ที่แข็งแกร่ง (แข็งแกร่ง)

ภาษาที่พิมพ์อย่างหนักไม่อนุญาตให้ผสมประเภทต่าง ๆ ในนิพจน์และจะไม่ทำการแปลงโดยนัยโดยอัตโนมัติ ตัวอย่างเช่น คุณไม่สามารถลบตัวเลขหรือประเภทอื่นใดนอกจากสตริงออกจากสตริงได้ ตัวอย่างภาษา: Java, Python, Haskell, Lisp

พิมพ์หละหลวม (อ่อน)

ภาษาที่พิมพ์อย่างหลวม ๆ จะทำการแปลงโดยปริยายจำนวนมากโดยอัตโนมัติ พวกเขาทำเช่นนี้แม้ว่าการสูญเสียความแม่นยำหรือการแปลงอาจเกิดขึ้นอย่างคลุมเครือ ตัวอย่างภาษา: PHP, JavaScript, Visual Basic

การพิมพ์ที่ชัดเจน

ในภาษาที่พิมพ์อย่างชัดเจน จะต้องระบุประเภทของตัวแปร / ฟังก์ชันและอาร์กิวเมนต์ใหม่อย่างชัดเจน ตัวอย่างภาษา: C ++, D, C #

พิมพ์โดยปริยาย

ในภาษาที่มีการพิมพ์โดยนัย งานระบุประเภทจะถูกโอนไปยังคอมไพเลอร์ / ล่าม ตัวอย่างภาษา: JavaScript, PHP, Lua ในภาษาดังกล่าว ตามกฎแล้ว ออบเจ็กต์มีวิธีการพิเศษที่เรียกว่าการแคสต์เป็นประเภท ตัวอย่างเช่น PHP มีเมธอด _toString () และ JavaScript มีเมธอดที่มีชื่อเดียวกัน แต่ไม่มีขีดล่าง - toString () เมธอดเหล่านี้ถูกเรียกเมื่ออ็อบเจ็กต์ถูกส่งไปยังประเภทสตริง บางครั้งวิธีการดังกล่าวเรียกว่าเวทย์มนตร์ (กระบวนการโดยนัยใด ๆ มักจะเป็นเวทมนตร์)

สิ่งสำคัญคือต้องสังเกตว่าหมวดหมู่ทั้งหมดเหล่านี้ทับซ้อนกัน จากหมวดหมู่เหล่านี้ เราพบว่า JavaScript ถูกพิมพ์โดยปริยายแบบไดนามิก และถ้าเราพูดเกินจริง ลักษณะของภาษาก็สามารถอธิบายได้ดังนี้ ในสถานการณ์ที่เข้าใจยาก ให้นำทุกสิ่งไปสู่ระดับพื้นฐาน ส่วนใหญ่เป็นแนวร่วม แม้ว่าในความเป็นจริงทุกอย่างจะซับซ้อนกว่านี้เล็กน้อย แต่เราจะไม่ลงรายละเอียดในตอนนี้

“ทำไมเราต้องพิมพ์?” - คุณอาจจะถาม JavaScript อยู่ได้ดีโดยปราศจากมันเป็นเวลา 20 ปี คำตอบนั้นง่าย: ไม่เคยมีการใช้ JavaScript เพื่อแก้ปัญหาระดับองค์กรที่ซับซ้อน ตอนนี้ภาษานี้ไปไกลกว่าเบราว์เซอร์และเข้าสู่อาณาเขตแบ็กเอนด์แล้ว เมื่อเขียนแอปพลิเคชันขนาดใหญ่ จะตรวจจับข้อผิดพลาดที่มักเกี่ยวข้องกับการแคสต์ได้ยาก

โปรแกรมเสริม JavaScript

เนื่องจาก JavaScript ทำงานบนฝั่งไคลเอ็นต์ (ในเบราว์เซอร์) หนึ่งในตัวเลือกสำหรับการแก้ปัญหาคือการสร้างภาษา ซึ่งเป็นภาษาถิ่นที่จะคอมไพล์เป็น JS ทำหน้าที่เป็นตัวประกอบ

ภาษาเช่น TypeScript, Dart, AtScript ได้เพิ่มการพิมพ์แบบคงที่และแม้กระทั่งการตรวจสอบประเภทรันไทม์ (แม้ว่าจะเพิ่มโอเวอร์เฮด) ภาษาทั้งหมดเหล่านี้ไม่เพียงแต่เพิ่มประเภท แต่ยังเพิ่มน้ำตาลซินแทคติก หรือแม้แต่การนำ VM ไปใช้งานซึ่งเขียนด้วย JS

อ่านบทความทั้งหมดในวารสาร "ผู้ดูแลระบบ" ฉบับที่ 1-2 สำหรับปี 2558 ในหน้า 86-88

สามารถซื้อฉบับ PDF ของฉบับนี้ได้จากร้านค้าของเรา

เว็บไซต์ Flow คือ http://flowtype.org

ติดต่อกับ

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

Grunt เป็น task runner ที่ออกแบบมาเพื่อทำงานที่ซ้ำซากและใช้เวลานานโดยอัตโนมัติ ซึ่งใช้เวลานาน ระบบนิเวศของซอฟต์แวร์มีปลั๊กอินจำนวนมาก (มากกว่า 6000)

อึกไม่ได้เป็นเพียงตัวจัดการงานอื่น แต่เป็นเครื่องมือที่มีแนวทางที่น่าสนใจ: มันกำหนดงานใน JavaScript เป็นฟังก์ชัน นอกจากนี้ GUl ยังทำงานอัตโนมัติที่เจ็บปวด นำเสนอระบบนิเวศซอฟต์แวร์ที่กว้างขวาง (มากกว่า 2,700 ปลั๊กอิน) และยังให้ความโปร่งใสและการควบคุมที่ดีขึ้น กว่ากระบวนการ

Browserify อนุญาตให้นักพัฒนาซอฟต์แวร์ใช้โมดูลสไตล์ NodeJS ในเบราว์เซอร์ คุณกำหนดการอ้างอิงและ Broweserify จะแพ็คทั้งหมดลงในไฟล์ JS ที่เรียบร้อย

Brunch.io เป็นเครื่องมือที่เน้นความเร็วและความเรียบง่าย มาพร้อมกับการกำหนดค่าที่เรียบง่ายและเอกสารรายละเอียดเพื่อให้คุณเริ่มต้นได้อย่างรวดเร็ว อาหารเช้าและกลางวันจะสร้างแผนที่ของไฟล์ JS โดยอัตโนมัติพร้อมกับสไตล์ชีต CSS ทำให้ง่ายต่อการแก้ไขข้อบกพร่องในฝั่งไคลเอ็นต์

Yeoman เป็นเครื่องมืออเนกประสงค์ที่สามารถใช้ได้กับภาษาการเขียนโปรแกรมเกือบทุกชนิด (JavaScript, Python, C #, Java และอื่นๆ) ระบบสร้างโค้ดพื้นฐานพร้อมระบบนิเวศซอฟต์แวร์ที่สมบูรณ์ (ปลั๊กอินมากกว่า 6200 รายการ) ใช้สำหรับการพัฒนาเว็บแอปพลิเคชัน ด้วย Yeoman คุณสามารถสร้างโครงการใหม่ได้อย่างรวดเร็วโดยไม่ลืมที่จะรักษาและปรับปรุงโครงการที่มีอยู่

IDE และตัวแก้ไขโค้ด

Swagger คือชุดของกฎและเครื่องมือสำหรับการอธิบาย API เครื่องมือนี้เป็นยูทิลิตี้ที่ไม่ขึ้นกับภาษา ซึ่งหมายความว่า Swagger จะสร้างเอกสารที่ชัดเจนซึ่งทั้งมนุษย์และเครื่องจักรสามารถอ่านได้ ช่วยให้คุณทำให้กระบวนการที่ขึ้นกับ API เป็นไปโดยอัตโนมัติ
JSDoc คือชุดเครื่องมือที่สร้างเอกสารข้อความหลายหน้าโดยอัตโนมัติ (HTML, JSON, XML ฯลฯ) จากความคิดเห็นจากซอร์สโค้ด JavaScript แอปพลิเคชันนี้มีประโยชน์สำหรับการจัดการโครงการขนาดใหญ่
jGrouseDoc (jGD) เป็นเครื่องมือโอเพ่นซอร์สที่ยืดหยุ่นซึ่งช่วยให้นักพัฒนาสามารถสร้าง API จากความคิดเห็นจากซอร์สโค้ด JavaScript jGD ไม่เพียงแต่บันทึกตัวแปรและฟังก์ชันเท่านั้น แต่ยังรวมถึงเนมสเปซ อินเทอร์เฟซ แพ็คเกจ และองค์ประกอบอื่นๆ
YUIdoc เป็นแอปพลิเคชั่นที่เขียนด้วย NodeJS มันใช้ไวยากรณ์ที่คล้ายกับ Javadoc และ Doxygen นอกจากนี้ยังมีการสนับสนุนการแสดงตัวอย่างแบบสด การสนับสนุนภาษาเพิ่มเติม และมาร์กอัปขั้นสูง
Docco เป็นเครื่องมือสร้างเอกสารฟรีที่เขียนด้วยภาษา "วรรณกรรม" CoffeeScript มันสร้างเอกสาร HTML เพื่อแสดงความคิดเห็นของคุณสลับกับรหัส ควรสังเกตว่าเครื่องมือนี้ไม่เพียงรองรับ JavaScript เท่านั้น แต่ยังรองรับภาษาอื่นๆ อีกด้วย ตัวอย่างเช่น Python, Ruby, Clojure และอื่นๆ

เครื่องมือทดสอบ

เครื่องมือทดสอบ JavaScript ได้รับการออกแบบมาเพื่อตรวจจับจุดบกพร่องระหว่างการพัฒนา เพื่อหลีกเลี่ยงจุดบกพร่องของผู้ใช้ในอนาคต เมื่อความซับซ้อนของแอปพลิเคชันแบบกำหนดเองเพิ่มขึ้น การทดสอบอัตโนมัติไม่เพียงแต่ปรับปรุงประสิทธิภาพของแอปพลิเคชันเท่านั้น แต่ยังช่วยให้บริษัทต่างๆ รักษางบประมาณได้อีกด้วย

จัสมินเป็นเฟรมเวิร์กการพัฒนาที่ขับเคลื่อนด้วยพฤติกรรม (BDD) สำหรับการทดสอบโค้ด JS ไม่มีการพึ่งพาภายนอกและไม่ต้องการ DOM เพื่อเรียกใช้ จัสมินมีรูปแบบที่ชัดเจนและตรงไปตรงมาที่ทำให้การทดสอบรวดเร็วและง่ายขึ้น เฟรมเวิร์กนี้สามารถใช้ทดสอบโค้ด Python และ Ruby ได้
Mocha เป็นเฟรมเวิร์กการทดสอบการทำงานที่ทำงานบน Node.js ในเบราว์เซอร์ มันทำการทดสอบอย่างสม่ำเสมอเพื่อให้การรายงานที่ยืดหยุ่นและแม่นยำ ทำให้การทดสอบแบบอะซิงโครนัสสนุกและง่ายดาย มอคค่ามักใช้ร่วมกับชัยเพื่อตรวจสอบผลการทดสอบ
PhantomJS มักใช้สำหรับการทดสอบส่วนหน้าและการทดสอบหน่วย เมื่อพิจารณาว่านี่คือสิ่งที่เหมือนกับ WebKit ที่ "ไม่มีหัว" สคริปต์จึงทำงานได้เร็วกว่ามาก นอกจากนี้ยังมีการรองรับมาตรฐานเว็บต่างๆ ในตัว ตัวอย่างเช่น JSON, Canvas, การจัดการ DOM, ตัวเลือก SVG และ CSS
Protractor เป็นเฟรมเวิร์กการทดสอบแบบ end-to-end ที่เขียนใน Node.js สำหรับการทดสอบแอปพลิเคชัน AngularJS และ Angular มันถูกสร้างขึ้นบน WebDriverJS และตรวจสอบแอปพลิเคชันเช่นผู้ใช้ปลายทางโดยใช้ไดรเวอร์ที่กำหนดเองและเหตุการณ์ในบรรทัด

เครื่องมือดีบัก

การดีบักโค้ดเป็นกระบวนการที่ลำบากและใช้เวลานานสำหรับนักพัฒนา JavaScript เครื่องมือดีบักมีประโยชน์อย่างยิ่งเมื่อทำงานกับโค้ดหลายพันบรรทัด เครื่องมือแก้ไขจุดบกพร่องจำนวนมากให้ผลลัพธ์ที่ค่อนข้างแม่นยำ

JavaScript Debugger เป็นเครื่องมือจาก Mozilla Developer Community (MDN) ที่สามารถใช้เป็นเว็บแอปพลิเคชันแบบสแตนด์อโลนเพื่อดีบักโค้ดในเบราว์เซอร์ต่างๆ Firefox มีฟังก์ชันการทำงานในเครื่องและจากระยะไกล และความสามารถในการดีบักโค้ดบนอุปกรณ์ Android โดยใช้ Firefox สำหรับ Android
Chrome Dev Tools คือชุดเครื่องมือที่มียูทิลิตี้หลายอย่างสำหรับการดีบักโค้ด JavaScript การแก้ไข CSS และการทดสอบประสิทธิภาพของแอปพลิเคชัน
ng-inspector เป็นส่วนขยายข้ามเบราว์เซอร์ที่ออกแบบมาเพื่อช่วยให้นักพัฒนาเขียน ทำความเข้าใจ และดีบักแอปพลิเคชัน AngularJS ยูทิลิตี้นี้มาพร้อมกับการอัปเดตตามเวลาจริง การเน้น DOM การเข้าถึงภูมิภาค โมเดล และองค์ประกอบอื่นๆ ของแอปพลิเคชันโดยตรง
Augury เป็นส่วนขยายสำหรับเบราว์เซอร์ Google Chrome และสำหรับการดีบักแอปพลิเคชัน Angular 2 ช่วยให้นักพัฒนาแอปพลิเคชัน Angular 2 สามารถวิเคราะห์โครงสร้างและประสิทธิภาพของแอปพลิเคชันได้โดยตรง

เครื่องมือรักษาความปลอดภัย

Snyk เป็นเครื่องมือเชิงพาณิชย์สำหรับการตรวจจับ แก้ไข และป้องกันช่องโหว่ที่รู้จักในแอปพลิเคชัน JavaScript, Java และ Ruby บริการนี้มีฐานข้อมูลช่องโหว่ของตนเองและดึงข้อมูลจาก NSP และ NIST NVD แพตช์และการอัปเดตที่บริษัทนำเสนอช่วยให้นักพัฒนาสามารถคาดการณ์ความเสี่ยงด้านความปลอดภัยได้
โครงการ Node Security มีเครื่องมือที่มีประโยชน์สำหรับการสแกนการพึ่งพาและการตรวจจับช่องโหว่ NSP ใช้ฐานข้อมูลของตนเอง ซึ่งสร้างขึ้นจากการสแกนโมดูล npm ตลอดจนข้อมูลจากฐานข้อมูลทั่วไป เช่น NIST NVD (ฐานข้อมูลช่องโหว่แห่งชาติ) นอกจากนี้ NSP ยังให้การผสานรวมกับซอฟต์แวร์ GitHub Pull Request และ CI นอกจากนี้ยังมีการสแกนแบบเรียลไทม์ คำเตือน และคำแนะนำสำหรับการกำจัดช่องโหว่ในแอปพลิเคชัน Node.js
RetireJS เป็นตัวตรวจสอบการพึ่งพาโอเพ่นซอร์ส รวมส่วนประกอบต่างๆ เช่น เครื่องสแกนบรรทัดคำสั่ง ปลั๊กอิน Grunt ส่วนขยาย Firefox และ Chrome ปลั๊กอิน Burp และ OWASP ZAP Retirejs รวบรวมข้อมูลช่องโหว่จาก NIST NVD และแหล่งอื่นๆ เช่น ตัวติดตามจุดบกพร่อง บล็อก และรายชื่อส่งเมล
Gemnasium เป็นเครื่องมือเชิงพาณิชย์พร้อมรุ่นทดลองใช้ฟรี รองรับเทคโนโลยีและแพ็คเกจที่หลากหลาย รวมถึง Ruby, PHP, Bower (JavaScript), Python และ npm (JavaScript) เครื่องมือรักษาความปลอดภัย Gemnasium มาพร้อมกับคุณสมบัติที่มีประโยชน์ เช่น การอัปเดตอัตโนมัติ การแจ้งเตือนแบบเรียลไทม์ การแจ้งเตือนความปลอดภัย และการผสานรวมกับบริการ Slack
OSSIndex รองรับระบบนิเวศที่หลากหลาย (Java, JavaScript และ .NET / C #) และหลายแพลตฟอร์ม เช่น NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal และ MSI รวบรวมข้อมูลช่องโหว่จากฐานข้อมูลช่องโหว่แห่งชาติ (NVD) และบทวิจารณ์ นอกจากนี้ยังประมวลผลข้อมูลจากสมาชิกในชุมชน

เครื่องมือวิเคราะห์และเพิ่มประสิทธิภาพโค้ด

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

ในปัจจุบัน ซอฟต์แวร์สมัยใหม่ได้รวมเครื่องมือสำหรับวิเคราะห์สแตติกโค้ดระหว่างการพัฒนา เพื่อแยกโค้ดคุณภาพต่ำออกจากการผลิต

JSLint เป็นเครื่องมือวิเคราะห์เว็บสำหรับตรวจสอบคุณภาพโค้ด JavaScript เมื่อตรวจพบปัญหาที่ต้นทาง ระบบจะแสดงข้อความพร้อมคำอธิบายปัญหาและตำแหน่งโดยประมาณในโค้ด JSLint สามารถแยกวิเคราะห์บรรทัดฐานของสไตล์และแสดงข้อผิดพลาดทางไวยากรณ์และปัญหาเชิงโครงสร้าง
JSHint เป็นเครื่องมือที่ขับเคลื่อนโดยชุมชนที่ยืดหยุ่นสำหรับการตรวจจับจุดบกพร่องและปัญหาที่อาจเกิดขึ้นในโค้ด JS ของคุณ และ JSHint ก็คือทางแยกของ JSLint จุดประสงค์หลักของเครื่องมือวิเคราะห์โค้ดสแตติกนี้คือเพื่อช่วยนักพัฒนา JavaScript ในการทำงานกับโปรแกรมที่ซับซ้อน มันสามารถตรวจจับข้อผิดพลาดทางไวยากรณ์ การแปลงประเภทข้อมูลโดยนัย หรือตัวแปรที่ขาดหายไป อย่างไรก็ตาม ไม่สามารถตรวจจับความเร็วและความถูกต้องของแอปพลิเคชันของคุณ และไม่สามารถระบุปัญหาหน่วยความจำในแอปพลิเคชันของคุณได้ JSHint เป็นทางแยกจาก JSLint
ESLint เป็น linter โอเพ่นซอร์สสำหรับเว็บแอปพลิเคชัน JSX และ JavaScript ช่วยให้คุณระบุรูปแบบที่น่าสงสัยหรือค้นหาโค้ดที่ไม่ตรงกับรูปแบบเฉพาะ ซึ่งช่วยให้นักพัฒนาตรวจพบข้อผิดพลาดในโค้ด JS โดยไม่ต้องดำเนินการ จึงช่วยประหยัดเวลา เครื่องมือนี้เขียนใน Node.js มีรันไทม์ที่ตอบสนองและการติดตั้งที่ราบรื่นผ่าน npm
Flow คือตัวควบคุมโค้ด JavaScript แบบคงที่ที่พัฒนาโดย Facebook ใช้คำอธิบายประกอบประเภทสแตติกเพื่อตรวจสอบข้อผิดพลาดในโค้ดของคุณ ประเภทคือพารามิเตอร์ที่กำหนดโดยนักพัฒนา และ Flow จะตรวจสอบซอฟต์แวร์ของคุณเพื่อให้เป็นไปตามข้อกำหนด

เครื่องมือควบคุมเวอร์ชัน

ในช่วงไม่กี่ปีที่ผ่านมา Git ได้กลายเป็นระบบควบคุมเวอร์ชันที่ใช้กันอย่างแพร่หลายสำหรับโครงการขนาดเล็กและขนาดใหญ่ ยูทิลิตี้ฟรีนี้ให้ความเร็วและประสิทธิภาพที่ยอดเยี่ยม ความนิยมนั้นเกิดจากระบบแบบกระจายและการควบคุมประเภทต่าง ๆ รวมถึงพื้นที่การจัดเตรียมที่สามารถดูตัวอย่างและจัดรูปแบบเวอร์ชันได้ก่อนที่การคอมมิตจะเสร็จสมบูรณ์
เครื่องมือโค่นล้มหรือ SVN ได้รับความนิยมอย่างมากและยังคงใช้กันอย่างแพร่หลายในโครงการโอเพ่นซอร์สและแพลตฟอร์มเช่น Python Apache หรือ Ruby CVS นี้มาพร้อมกับคุณสมบัติมากมายในการจัดการการดำเนินการต่างๆ (เปลี่ยนชื่อ คัดลอก ลบ ฯลฯ) การผสาน การล็อกไฟล์ และอื่นๆ

เครื่องมือการจัดการแพ็คเกจและการพึ่งพา

รายการเครื่องมือพัฒนา JavaScript ที่ดีที่สุดสามารถดำเนินต่อไปได้ ในบทความนี้ คุณได้เห็นเฉพาะเครื่องมือยอดนิยมและเชื่อถือได้ซึ่งเป็นพื้นฐานสำหรับผลิตภัณฑ์ที่มีคุณภาพ

และอาจารย์ของ Netology ได้เขียนบทความชุดหนึ่งสำหรับบล็อกเกี่ยวกับ EcmaScript6 ในส่วนแรก เราจะดูตัวอย่างของการวิเคราะห์โค้ดไดนามิกใน EcmaScript โดยใช้ Iroh.js

การวิเคราะห์โค้ดแบบสถิตและไดนามิก

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

ข้อสรุป

Iroh.js เป็นเครื่องมือที่ทรงพลังและใช้งานได้จริงสำหรับการวิเคราะห์โค้ดแบบไดนามิกใน EcmaScript เครื่องมือนี้สามารถใช้ได้ทั้งสำหรับการวิเคราะห์โค้ด รวมถึงการสร้างกราฟการโทร การแสดงประเภทและค่าจริงในตัวแปรและออบเจกต์ และสำหรับการแก้ไขโค้ดทันที รวมถึงการแก้ไขโค้ดตามเหตุการณ์

การวิเคราะห์แบบไดนามิกเป็นวิธีที่ค่อนข้างซับซ้อน แต่สำหรับ EcmaScript เนื่องจากการพิมพ์แบบเป็ด การมีอยู่ของออบเจกต์โฮสต์และฟังก์ชันดั้งเดิมที่ช่วยให้คุณสามารถเปลี่ยนพฤติกรรมของโค้ดได้ทันที นี่เป็นวิธีเดียวในการวิเคราะห์และดีบั๊กโค้ด ที่รันไทม์ Iroh.js ยังใช้โค้ดเพื่อสร้างการทดสอบการทำงานได้โดยไม่ต้องแก้ไขเพื่อส่งออกค่า

ไม่ใช่ว่าโค้ดของฉันทุกบรรทัดจะสมบูรณ์แบบในครั้งแรก ในบางกรณี ... บางครั้ง ... โอเค - แทบไม่เคยเลย ความจริงก็คือฉันใช้เวลาในการแก้ไขข้อผิดพลาดโง่ ๆ ของตัวเองมากกว่าที่ฉันต้องการ นี่คือเหตุผลที่ฉันใช้ตัววิเคราะห์สแตติกในเกือบทุกไฟล์ JavaScript ที่ฉันเขียน

เครื่องมือวิเคราะห์แบบสถิตจะตรวจสอบโค้ดของคุณและพบข้อผิดพลาดก่อนที่คุณจะเรียกใช้ พวกเขาดำเนินการตรวจสอบอย่างง่าย เช่น บังคับใช้การตรวจสอบไวยากรณ์ (เช่น แท็บแทนการเว้นวรรค) และการตรวจสอบส่วนกลางเพิ่มเติม เช่น ตรวจสอบว่าฟังก์ชันไม่ซับซ้อนเกินไป เครื่องวิเคราะห์สถิตยังมองหาจุดบกพร่องที่ไม่สามารถพบได้ระหว่างการทดสอบ เช่น == แทนที่จะเป็น ===

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

JSLint, JSHint และตัวปิดคอมไพเลอร์

มีสามตัวเลือกหลักสำหรับตัววิเคราะห์สแตติกสำหรับ JavaScript: JSLint, JSHint และ Closure Compiler

JSLint เป็นเครื่องมือวิเคราะห์สแตติกตัวแรกสำหรับ JavaScript สามารถเรียกใช้บนเว็บไซต์อย่างเป็นทางการหรือใช้หนึ่งในโปรแกรมเสริมที่สามารถเรียกใช้บนไฟล์ในเครื่อง JSLint พบจุดบกพร่องที่สำคัญมากมาย แต่มันยากมาก นี่คือตัวอย่างที่สำคัญ:

var s = "mystring";
สำหรับ (var i = 0; i< s.length; i++) {
console.log (s.charAt (i));
}

JSLint แสดงข้อผิดพลาดสองข้อในรหัสนี้:

ไม่คาดคิด "++"
ย้ายการประกาศ "var" ไปที่ด้านบนของฟังก์ชัน

ปัญหาแรกคือนิยามของตัวแปร i ในเงื่อนไขลูป JSLint ยังไม่ยอมรับตัวดำเนินการ ++ ที่ส่วนท้ายของคำจำกัดความลูป เขาต้องการให้รหัสมีลักษณะดังนี้:

var s = "mystring";
ฉัน;
สำหรับ (i = 0; i< s.length; i = i + 1) {
console.log (s.charAt (i));
}

ฉันขอขอบคุณผู้สร้าง JSLint แต่สำหรับฉันมันเกินความสามารถ กลายเป็นว่ายากสำหรับ Anton Kovalev เช่นกัน ดังนั้นเขาจึงสร้าง JSHint

คุณสามารถเรียกใช้ JSHint ได้จากเว็บไซต์ แต่ในกรณีส่วนใหญ่ จะดีกว่าถ้าติดตั้ง JSHint เป็นเครื่องมือบรรทัดคำสั่งในเครื่องโดยใช้ Node.js เมื่อคุณติดตั้ง JSHint แล้ว คุณสามารถรันบนไฟล์ของคุณด้วยคำสั่งดังนี้:

jshint test.js

JSHint ยังรวมปลั๊กอินสำหรับโปรแกรมแก้ไขข้อความยอดนิยม ดังนั้นคุณจึงสามารถเรียกใช้ขณะที่เขียนโค้ดได้

ปิดคอมไพเลอร์

Closure Compiler ของ Google เป็นโปรแกรมประเภทที่ต่างไปจากเดิมอย่างสิ้นเชิง ตามชื่อของมัน มันไม่ได้เป็นเพียงโปรแกรมทดสอบ แต่ยังเป็นคอมไพเลอร์ด้วย มันเขียนด้วยภาษาจาวาและใช้ตัวแยกวิเคราะห์ Rhino ของ Mozilla Closure Compiler มีโหมดง่าย ๆ สำหรับการตรวจสอบโค้ดพื้นฐาน และโหมดที่ซับซ้อนมากขึ้นสำหรับการตรวจสอบเพิ่มเติมและบังคับใช้ข้อกำหนดของมุมมองเฉพาะ

Closure Compiler รายงานข้อผิดพลาดในโค้ด JavaScript แต่ยังสร้าง JavaScript เวอร์ชันย่อ คอมไพเลอร์ลบช่องว่าง ความคิดเห็น และตัวแปรที่ไม่ได้ใช้ และทำให้นิพจน์ยาวง่ายขึ้นเพื่อให้สคริปต์มีขนาดกะทัดรัดที่สุด

Google ได้สร้างคอมไพเลอร์เวอร์ชันพื้นฐานพร้อมใช้งานบนเน็ตแล้ว แต่เป็นไปได้มากว่าคุณจะต้องดาวน์โหลด Closure Compiler และเรียกใช้ในเครื่อง

Closure Compiler หลังจากตรวจสอบโค้ดแล้ว จะแสดงรายการไฟล์ออกเป็นไฟล์ย่อขนาดไฟล์เดียว ดังนั้นคุณจึงสามารถเรียกใช้ได้โดยดาวน์โหลดไฟล์ compiler.jar

java -jar คอมไพเลอร์.jar --js_output_file compress.js --js test1.js --js test2.js

การเลือกโปรแกรมตรวจสอบที่เหมาะสม

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

ตอนนี้เราได้ครอบคลุมบางโปรแกรมที่จะตรวจสอบแล้ว เรามาแยกย่อยโค้ดเสียบางส่วนกัน ตัวอย่างทั้ง 6 ตัวอย่างนี้คือโค้ดที่ไม่คุ้มที่จะเขียน และสถานการณ์ที่โปรแกรมตรวจสอบโค้ดสามารถช่วยคุณได้

บทความนี้ใช้ JSHint สำหรับตัวอย่างส่วนใหญ่ แต่โดยปกติแล้ว Closure Compiler จะสร้างคำเตือนที่คล้ายกัน

== หรือ ===?

JavaScript เป็นภาษาที่พิมพ์แบบไดนามิก คุณไม่จำเป็นต้องกำหนดประเภทในขณะที่คุณเขียนโค้ด ซึ่งจะมีเมื่อเริ่มต้น

JavaScript มีตัวดำเนินการเปรียบเทียบสองตัวสำหรับจัดการประเภทไดนามิกดังกล่าว: == และ === ลองมาดูตัวอย่างกัน

วาร์ n = 123;
var s = "123";

ถ้า (n == s) (
alert ("ตัวแปรมีค่าเท่ากัน");
}

ถ้า (n === s) (
alert ("ตัวแปรเหมือนกัน");
}

ตัวดำเนินการเปรียบเทียบ == เป็นเศษของภาษา C ที่ JavaScript มีรากอยู่ การใช้งานมักเป็นข้อผิดพลาด: การเปรียบเทียบค่าที่แยกจากประเภทมักไม่ค่อยเป็นสิ่งที่นักพัฒนาต้องการทำจริงๆ อันที่จริง หมายเลข "หนึ่งร้อยยี่สิบสาม" แตกต่างจากสตริง "หนึ่งสองสาม" ตัวดำเนินการเหล่านี้สะกดผิดได้ง่ายและอ่านผิดได้ง่ายยิ่งขึ้น ตรวจสอบรหัสนี้ด้วย JSHint และคุณจะได้รับสิ่งนี้:

test.js: บรรทัดที่ 9, col 12, คาดหวัง "===" และเห็น "==" แทน

ตัวแปรที่ไม่ได้กำหนดและคำจำกัดความที่ล่าช้า

เริ่มต้นด้วยรหัสง่ายๆ:

การทดสอบฟังก์ชัน () (
var myVar = "สวัสดี ชาวโลก";
console.log (myvar);
}

เห็นข้อผิดพลาด? ฉันทำผิดพลาดนี้ทุกครั้ง เรียกใช้รหัสนี้และคุณได้รับข้อผิดพลาด:

ReferenceError: ไม่ได้กำหนด myvar ไว้

มาทำให้ปัญหาซับซ้อนขึ้นเล็กน้อย:

การทดสอบฟังก์ชัน () (
myVar = "สวัสดีชาวโลก";
console.log (myVar);
}

เรียกใช้รหัสนี้และคุณจะได้รับสิ่งนี้:

สวัสดีชาวโลก

ตัวอย่างที่สองนี้ใช้งานได้ แต่มีผลข้างเคียงที่ไม่คาดคิดมาก กฎสำหรับการกำหนดตัวแปรและขอบเขต JavaScript ทำให้เกิดความสับสนได้ดีที่สุด ในกรณีแรก JSHint จะรายงานสิ่งต่อไปนี้:

test.js: บรรทัดที่ 3, col 17, "myvar" ไม่ได้กำหนดไว้

ในกรณีที่สอง เขาจะรายงานสิ่งนี้:

test.js: ไม่ได้กำหนดบรรทัดที่ 2, col 5, "myVar"
test.js: บรรทัดที่ 3, col 17, "myVar" ไม่ได้กำหนดไว้

ตัวอย่างแรกจะช่วยคุณหลีกเลี่ยงข้อผิดพลาดรันไทม์ คุณไม่จำเป็นต้องทดสอบแอปพลิเคชันของคุณ - JSHint จะค้นหาข้อผิดพลาดให้คุณ ตัวอย่างที่สองแย่กว่านั้น เนื่องจากคุณจะไม่พบจุดบกพร่องจากการทดสอบ

ปัญหาในตัวอย่างที่สองนั้นละเอียดอ่อนและซับซ้อนอย่างร้ายกาจ ตอนนี้ตัวแปร myVar ได้หายไปจากขอบเขตและเลื่อนขึ้นไปยังขอบเขตส่วนกลาง ซึ่งหมายความว่าจะมีอยู่จริงและมีค่า Hello, World แม้ว่าฟังก์ชันการทดสอบจะทำงานแล้วก็ตาม สิ่งนี้เรียกว่ามลพิษในขอบเขตทั่วโลก

ตัวแปร myVar จะมีอยู่ในฟังก์ชันอื่นๆ ทั้งหมดที่ทำงานหลังจากฟังก์ชันทดสอบ รันโค้ดต่อไปนี้หลังจากรันฟังก์ชันการทดสอบ:

console.log ("myVar:" + myVar);

คุณจะยังคงได้รับ Hello, World ตัวแปร myVar จะค้างตลอดทั้งโค้ดของคุณเหมือนกับเทมเพลต ซึ่งนำไปสู่ข้อบกพร่องที่ซับซ้อนซึ่งคุณจะค้นหาตลอดทั้งคืนก่อนการเปิดตัว ทั้งหมดเป็นเพราะคุณลืมเขียน var

รายการนี้ส่งผ่านบริการ Full-Text RSS - หากเป็นเนื้อหาของคุณและคุณ "กำลังอ่านข้อความนี้บนไซต์ของบุคคลอื่น" โปรดอ่านคำถามที่พบบ่อยที่ http://ift.tt/jcXqJW

JSLint, JSHint และตัวปิดคอมไพเลอร์

มีสามตัวเลือกหลักสำหรับตัววิเคราะห์สแตติกสำหรับ JavaScript: JSLint, JSHint และ Closure Compiler

Var s = "mystring"; สำหรับ (var i = 0; i< s.length; i++) { console.log(s.charAt(i)); }

JSLint แสดงข้อผิดพลาดสองข้อในรหัสนี้:

ไม่คาดคิด "++" ย้ายการประกาศ "var" ไปที่ด้านบนของฟังก์ชัน

Var s = "mystring"; ฉัน; สำหรับ (i = 0; i< s.length; i = i + 1) { console.log(s.charAt(i)); }

JSHint ทำงานเหมือนกับ JSLint แต่เขียนเพิ่มเติมจาก Node.js ดังนั้นจึงมีความยืดหยุ่นมากกว่า JSHint มีตัวเลือกมากมาย ช่วยให้คุณทำการตรวจสอบแบบกำหนดเองโดยการเขียนโปรแกรมสร้างรายงานของคุณเอง
คุณสามารถเรียกใช้ JSHint ได้จากเว็บไซต์ แต่ในกรณีส่วนใหญ่ จะดีกว่าถ้าติดตั้ง JSHint เป็นเครื่องมือบรรทัดคำสั่งในเครื่องโดยใช้ Node.js เมื่อคุณติดตั้ง JSHint แล้ว คุณสามารถรันบนไฟล์ของคุณด้วยคำสั่งดังนี้:

Jshint test.js

ปิดคอมไพเลอร์

Java -jar คอมไพเลอร์.jar --js_output_file compress.js --js test1.js --js test2.js

การเลือกโปรแกรมตรวจสอบที่เหมาะสม

== หรือ ===?

วาร์ n = 123; var s = "123"; if (n == s) (alert ("ตัวแปรเท่ากัน");) if (n === s) (alert ("ตัวแปรเหมือนกัน"))

ตัวดำเนินการเปรียบเทียบ == เป็นส่วนที่เหลือของภาษา C ที่ JavaScript มีรากฐานมา การใช้งานมักเป็นข้อผิดพลาด: การเปรียบเทียบค่าที่แยกจากประเภทมักไม่ค่อยเป็นสิ่งที่นักพัฒนาต้องการทำจริงๆ อันที่จริง หมายเลข "หนึ่งร้อยยี่สิบสาม" แตกต่างจากสตริง "หนึ่งสองสาม" ตัวดำเนินการเหล่านี้สะกดผิดได้ง่ายและอ่านผิดได้ง่ายยิ่งขึ้น ตรวจสอบรหัสนี้ด้วย JSHint และคุณจะได้รับสิ่งนี้:

Test.js: บรรทัดที่ 9, col 12, คาดหวัง "===" และเห็น "==" แทน

ตัวแปรที่ไม่ได้กำหนดและคำจำกัดความที่ล่าช้า

เริ่มต้นด้วยรหัสง่ายๆ:

การทดสอบฟังก์ชัน () (var myVar = "สวัสดี โลก"; console.log (myvar);)

ReferenceError: ไม่ได้กำหนด myvar ไว้

มาทำให้ปัญหาซับซ้อนขึ้นเล็กน้อย:

การทดสอบฟังก์ชัน () (myVar = "สวัสดี ชาวโลก"; console.log (myVar);)

เรียกใช้รหัสนี้และคุณจะได้รับสิ่งนี้:

สวัสดีชาวโลก

Test.js: ไม่ได้กำหนดบรรทัดที่ 3, col 17, "myvar"

ในกรณีที่สอง เขาจะรายงานสิ่งนี้:

Test.js: ไม่ได้กำหนดบรรทัดที่ 2, col 5, "myVar" test.js: บรรทัดที่ 3, col 17, "myVar" ไม่ได้กำหนดไว้