ไม่กี่ปีที่ผ่านมาตราบใดที่เราเขียน JavaScript เราต้องใช้ฟังก์ชั่นที่ใช้กันทั่วไปหลายฟังก์ชั่นเช่น AddEventListener และ AttachEvent ซึ่งไม่ได้มีไว้สำหรับเทคโนโลยีและฟังก์ชั่นขั้นสูง แต่มีงานพื้นฐานบางอย่างและเหตุผลที่เกิดจากความแตกต่างระหว่างเบราว์เซอร์ต่างๆ เมื่อเวลาผ่านไปเทคโนโลยีมีการปรับปรุงอย่างต่อเนื่องยังคงมีฟังก์ชั่น JavaScript บางอย่างที่จำเป็นสำหรับโปรแกรมเมอร์เว็บเกือบทั้งหมดไม่ว่าจะเป็นประสิทธิภาพหรือสำหรับการใช้งาน
ฟังก์ชั่น debounce ที่ป้องกันการโทรที่มีความถี่สูง
ฟังก์ชั่น debounce นี้เป็นฟังก์ชั่นการเพิ่มประสิทธิภาพที่จำเป็นสำหรับผู้ที่แสดงงานที่ขับเคลื่อนด้วยเหตุการณ์ หากคุณไม่ได้ใช้ฟังก์ชั่นการลดขนาดเมื่อใช้สกรอลล์ปรับขนาดปุ่ม* และเหตุการณ์อื่น ๆ เพื่อเรียกใช้งานคุณจะทำผิดพลาดครั้งใหญ่ ฟังก์ชั่น debounce debounce ความถี่ลงไปนี้สามารถทำให้รหัสของคุณมีประสิทธิภาพ:
// ส่งคืนฟังก์ชั่นที่ตราบใดที่มันยังคงถูกเรียกใช้จะไม่ // จะถูกเรียกใช้ ฟังก์ชั่นจะถูกเรียกหลังจากหยุดเรียกว่า // n มิลลิวินาที หากผ่าน `` ทันที `ให้ทริกเกอร์ฟังก์ชั่นบน // นำขอบแทนที่จะเป็น trailing.function debounce (func, รอทันที) {var timeout; return function () {var context = this, args = อาร์กิวเมนต์; var later = function () {timeout = null; ถ้า (ทันที) func.apply (บริบท, args); - var callnow = ทันที &&! หมดเวลา; ClearTimeout (หมดเวลา); หมดเวลา = settimeout (ในภายหลังรอ); ถ้า (callnow) func.apply (บริบท, args); };}; // usageVar myefficientfn = debounce (function () {// สิ่งที่ต้องเสียภาษีทั้งหมดที่คุณทำ}, 250); window.addeventListener ('ปรับขนาด', myefficientfn);ฟังก์ชั่น debounce อนุญาตให้ใช้ฟังก์ชันการโทรกลับที่คุณให้การดำเนินการหนึ่งครั้งภายในช่วงเวลาที่กำหนดเท่านั้นซึ่งจะช่วยลดความถี่ในการดำเนินการ ข้อ จำกัด ดังกล่าวมีความสำคัญอย่างยิ่งเมื่อพบเหตุการณ์ที่เกิดขึ้นกับความถี่สูง
ตั้งค่าฟังก์ชั่นการตรวจจับวัฏจักรเวลา/ความถี่
ฟังก์ชั่น debounce ที่กล่าวถึงข้างต้นนั้นเกิดจากความช่วยเหลือของเหตุการณ์ แต่บางครั้งไม่มีเหตุการณ์ดังกล่าวดังนั้นเราจึงสามารถเขียนฟังก์ชั่นด้วยตนเองเพื่อตรวจสอบได้ทุกครั้ง
การสำรวจฟังก์ชัน (fn, callback, err, หมดเวลา, ช่วงเวลา) {var starttime = (วันที่ใหม่ ()). getTime (); var pi = window.setInterval (function () {if (math.floor (((วันที่ใหม่) .getTime () - starttime) / 1000) <= หมดเวลา) {ถ้า (fn ()) {callback ();}} อื่น {window.clearinterval (pi); err ();เมื่อฟังก์ชั่นที่ห้ามการโทรซ้ำและอนุญาตให้ดำเนินการเพียงครั้งเดียว
หลายครั้งที่เราต้องการให้มีการดำเนินการบางอย่างเพียงครั้งเดียวเช่นเดียวกับที่เราใช้ OnLoad เพื่อ จำกัด ให้ดำเนินการเพียงครั้งเดียวเมื่อโหลดเสร็จสมบูรณ์ ฟังก์ชั่นต่อไปนี้จะช่วยให้การดำเนินการของคุณถูกดำเนินการหนึ่งครั้งและจะไม่ถูกดำเนินการซ้ำ ๆ
ฟังก์ชั่นหนึ่งครั้ง (fn, บริบท) {ผลลัพธ์ var; return function () {ถ้า (fn) {result = fn.apply (บริบท || สิ่งนี้, อาร์กิวเมนต์); fn = null; } ผลตอบแทนผลลัพธ์; };} // usageVar canonlyfireonce = หนึ่งครั้ง (ฟังก์ชั่น () {console.log ('ถูกไล่ออก!');}); canonlyfireonce (); // "ยิง!" Canonlyfireonce (); // นาดาเมื่อฟังก์ชั่นนี้สามารถมั่นใจได้ว่าฟังก์ชั่นที่คุณให้จะถูกดำเนินการเพียงครั้งเดียวและป้องกันการดำเนินการซ้ำ ๆ
รับที่อยู่สัมบูรณ์ของลิงค์ getabsoluteurl
การรับที่อยู่ที่แน่นอนของลิงค์นั้นไม่ง่ายอย่างที่คุณคิด ต่อไปนี้เป็นฟังก์ชั่นที่ใช้งานได้จริงซึ่งสามารถรับที่อยู่สัมบูรณ์ตามที่อยู่สัมพัทธ์ที่คุณป้อน:
var getAbsoluteUrl = (ฟังก์ชัน () {var a; ฟังก์ชั่นการส่งคืน (url) {ถ้า (! a) a = document.createelement ('a'); a.href = url; return a.href;};}) ();ที่นี่เราใช้แท็ก href เพื่อสร้าง URL สัมบูรณ์ที่สมบูรณ์ซึ่งเชื่อถือได้มาก
ตรวจสอบว่าฟังก์ชั่น JavaScript เป็นฟังก์ชันดั้งเดิมของระบบ ISNATIONS
สคริปต์ JS ของบุคคลที่สามจำนวนมากจะแนะนำฟังก์ชั่นใหม่ ๆ ในตัวแปรทั่วโลกและบางส่วนจะเขียนทับฟังก์ชั่นดั้งเดิมของระบบ วิธีการต่อไปนี้คือการตรวจสอบว่าเป็นฟังก์ชันดั้งเดิมหรือไม่:
; (ฟังก์ชั่น () {// ใช้เพื่อแก้ไขภายใน `[[คลาส]]` ของค่า var toString = Object.prototype.toString; // ใช้เพื่อแก้ไขแหล่งที่มาของฟังก์ชั่น decompiled var fntostring = function.prototype.toString; // . +? constructor/] $/; // รวบรวม regexp โดยใช้วิธีการทั่วไปเป็นแม่แบบ .replace (/[.*+?^$ {} () | [/] /////]/g, '// $ &') // แทนที่การกล่าวถึงของ `toString` ด้วย`.*? `เพื่อให้เทมเพลตทั่วไป . retplace (/toString | (ฟังก์ชั่น).*? (? =/// () | สำหรับ. +? (? =///])/g, '$ 1*?') + '$'); Renative.test (fntostring.call (value)) // ทางเลือกในการตรวจสอบวัตถุโฮสต์เนื่องจากสภาพแวดล้อมบางอย่างจะเป็นตัวแทนของ // สิ่งต่าง ๆ เช่นอาร์เรย์ที่พิมพ์ออกมาเป็นวิธี DOM ซึ่งอาจไม่สอดคล้องกับรูปแบบ // ปกติ isnative;} ()); // usageisnative (แจ้งเตือน);แม้ว่าวิธีนี้จะไม่กระชับ แต่ก็ยังสามารถทำงานให้เสร็จได้!
สร้างกฎ CSS ใหม่ด้วย JavaScript InserTrule
บางครั้งเราใช้ตัวเลือก CSS (เช่น document.querySelectorall) เพื่อรับ nodelist แล้วปรับเปลี่ยนสไตล์ให้กับแต่ละคน ในความเป็นจริงนี่ไม่ใช่วิธีที่มีประสิทธิภาพ มันเป็นวิธีที่มีประสิทธิภาพในการสร้างกฎสไตล์ CSS ใหม่โดยใช้ JavaScript:
// สร้างแผ่นวัตถุแผ่นที่ดีกว่า = (ฟังก์ชั่น () {// // สร้างสไตล์ var style = document.createElement ('style'); style.setAttribute ('Media', 'Screen'); style.appendchild (document.createtextnode ('')); document.head.aphedchild (สไตล์); style.sheet.cssrules.length);};}) (); // จากนั้นเรียกเป็น functionsheet (". Stats {ตำแหน่ง: ญาติ; top: 0px}");แนวทางปฏิบัติเหล่านี้มีประสิทธิภาพมาก ในบางสถานการณ์เช่นเมื่อใช้ AJAX เพื่อโหลด HTML ใหม่คุณไม่จำเป็นต้องใช้งานเนื้อหา HTML ที่โหลดใหม่
ตรวจสอบว่าองค์ประกอบของหน้าเว็บมีคุณลักษณะและรูปแบบบางอย่าง MatchessElector
ฟังก์ชั่น matchessElector (el, ตัวเลือก) {var p = element.prototype; var f = p.matches || P.WebkitMatchessElector || P.MozMatchessElector || P.MSMATCHESSELECTER || ฟังก์ชั่น {return [] .indexof.call (document.QuerySelectorAll (s), สิ่งนี้)! == -1; - return f.call (el, selector);} // usageMatchessElector (document.getElementById ('mydiv'), 'div.someselector [some-attribute = true]') ')ฟังก์ชั่น JavaScript 7 รายการเหล่านี้เป็นสิ่งที่โปรแกรมเมอร์เว็บทุกคนควรรู้วิธีใช้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น