قبل بضع سنوات ، طالما أننا نكتب JavaScript ، يجب أن نستخدم العديد من الوظائف الشائعة الاستخدام ، مثل AddEventListener و Attachevent ، والتي ليست للتقنيات والوظائف المتقدمة ، ولكن فقط بعض المهام الأساسية ، والسبب ناتج عن الاختلافات بين المتصفحات المختلفة. مع مرور الوقت ، تتحسن التكنولوجيا باستمرار ، لا تزال هناك بعض وظائف JavaScript ضرورية لجميع مبرمجي الويب تقريبًا ، إما للأداء أو للوظائف.
وظيفة debounce التي تمنع المكالمات عالية التردد
هذه وظيفة Debounce هي وظيفة تعزيز الأداء الأساسية لأولئك الذين يعتمدون على المهام التي تعتمد على الحدث. إذا لم تستخدم وظيفة تقليصها عند استخدام التمرير ، والتغيير حجم ، والمفتاح* والأحداث الأخرى لتشغيل المهام ، فسوف ترتكب خطأً كبيرًا. يمكن أن تجعل دالة Debounce التالية التي ترددها الترددات غير فعالة من الكود:
// إرجاع وظيفة ، أنه ، طالما استمر الاحتجاج ، لن يتم تشغيل //. سيتم استدعاء الوظيفة بعد أن تتوقف عن الاتصال بـ // n milliseconds. إذا تم تمرير "فوري" ، فأعزف الوظيفة على الحافة الأمامية // بدلاً من debounce trame.function (func ، انتظر ، فوري) function function () {var context = this ، args = mations ؛ var later = function () {timeout = null ؛ إذا (! فور) funC.Apply (السياق ، args) ؛ } ؛ var callnow = forriatiate &&! timeout ؛ ClearTimeout (مهلة) ؛ timeout = setTimeout (لاحقًا ، انتظر) ؛ إذا (callnow) func.apply (السياق ، args) ؛ } ؛} ؛ // usagevar myeffentfn = debounce (function () {// جميع الأشياء الضريبية التي تقوم بها} ، 250) ؛ window.adDeventListener ('تغيير حجم' ، my -DevelientFn) ؛تسمح وظيفة Debounce فقط بوظيفة رد الاتصال التي تقدمها لتنفيذها مرة واحدة خلال فترة زمنية معينة ، مما يقلل من تردد التنفيذ. هذه القيود مهمة بشكل خاص عند مواجهة أحداث عالية التردد.
تعيين وظيفة الكشف عن دورة الوقت/التردد
يتم تشغيل وظيفة Debounce المذكورة أعلاه بمساعدة حدث ما. ولكن في بعض الأحيان لا يوجد مثل هذا الحدث المتاح ، لذلك يمكننا فقط كتابة وظيفة أنفسنا للتحقق من ذلك مرة واحدة كل فترة.
استطلاع الوظيفة (FN ، رد الاتصال ، ERR ، المهلة ، الفاصل الزمني) {var startTime = (New Date ()). GetTime () ؛ var pi = window.setInterval (function () {if (math.floor (((تاريخ جديد) .getTime () - وقت البدء) / 1000) <= timeout) {if (fn ()) {callback () ؛}} آخر {window.clearinterval (pi) ؛ err () ؛}} ،}بمجرد الوظيفة التي تحظر المكالمات المتكررة ولا تسمح إلا بالتنفيذ مرة واحدة
في كثير من الأحيان ، نريد فقط تنفيذ بعض الإجراءات مرة واحدة ، تمامًا مثلما نستخدم Onload لتقييده ليتم تنفيذه مرة واحدة فقط عند اكتمال الحمل. ستسمح الوظيفة التالية بتنفيذ عمليتك مرة واحدة ولن يتم تنفيذها بشكل متكرر.
وظيفة مرة واحدة (fn ، السياق) {var result ؛ Return Function () {if (fn) {result = fn.apply (context || هذا ، الوسائط) ؛ fn = null ؛ } نتيجة الإرجاع ؛ ؛ // "أطلقت!" canonlyfireonce () ؛ // ندىيمكن أن تضمن هذه الوظيفة بمجرد تنفيذ الوظيفة التي تقدمها مرة واحدة فقط ومنع التنفيذ المتكرر.
احصل على العنوان المطلق لرابط getabsoluteurl
الحصول على العنوان المطلق للرابط ليس بسيطًا كما تعتقد. فيما يلي وظيفة عملية للغاية يمكنها الحصول على العنوان المطلق بناءً على العنوان النسبي الذي أدخلته:
var getabsoluteurl = (function () {var a ؛ function function (url) {if (! a) a = document.createElement ('a') ؛ a.href = url ؛ return A.Href ؛} ؛}) () ؛ // uSageGetabsoluteUrl ('/something') ؛هنا نستخدم علامة HREF لإنشاء عنوان URL مطلقًا تمامًا ، وهو موثوق للغاية.
تحديد ما إذا كانت وظيفة javaScript هي وظيفة أصلية النظام
ستقدم العديد من البرامج النصية JS التابعة لجهة خارجية وظائف جديدة في المتغيرات العالمية ، وبعضها سيقوم بالكتابة فوق الوظائف الأصلية للنظام. الطريقة التالية هي التحقق مما إذا كانت وظيفة أصلية:
؛ (function () {// المستخدمة لحل `[[class]]` من القيم var toString = object.prototype.toString ؛ // المستخدمة لحل المصدر المقطوع للوظائف var fntostring = function.prototype.toString ؛ // المستخدمة في اكتشاف المضيفين (safari> 4 ؛ . +؟ Constructor/] $/ .replace (/[.*+؟^$ {} () | [/] ///]/g ، '// $ &') .replace (/toString | Renative.test (fntostring.call (القيمة) // isnative ؛} () ؛ // useisnative (تنبيه) ؛على الرغم من أن هذه الطريقة ليست موجزة جدًا ، إلا أنها لا تزال قادرة على إكمال المهمة!
قم بإنشاء قواعد CSS جديدة مع JavaScript inserTrule
في بعض الأحيان ، نستخدم محدد CSS (مثل المستند. FerySelectorAll) للحصول على عقيد ثم تعديل الأنماط لكل منها بدوره. في الواقع ، هذا ليس نهجا فعالا. إنه نهج فعال لإنشاء قاعدة جديدة من نمط CSS باستخدام JavaScript:
// بناء ورقة كائن ورقة أفضل = (دالة () {// بناء نمط var style = document.createElement ('style') ؛ style.setattribute ('media' ، 'screen') ؛ style.appendchild (document.createTextNode ('')) ؛ document.appendchild (style) ؛ style.seet.cssrules.length) ؛هذه الممارسات فعالة للغاية. في بعض السيناريوهات ، مثل استخدام Ajax لتحميل HTML جديد ، لا تحتاج إلى تشغيل محتوى HTML الذي تم تحميله حديثًا.
حدد ما إذا كانت عناصر صفحة الويب لها سمات وأنماط معينة
وظيفة matchesselector (EL ، Selector) {var p = element.prototype ؛ var f = p.matches || P.WebKitMatchessElector || P.MozMatchessElector || P.MSMatchessElector || الوظائف (s) {return [] .indexof.call (document.queryselectorall (s) ، this)! == -1 ؛ } ؛ return f.call (EL ، Selector) ؛} // UsageMatchessElector (document.getElementById ('mydiv') ، 'Div.SomesElector [some-attribute = true]')وظائف JavaScript 7 هذه هي كل ما يجب أن يعرفه كل مبرمج ويب كيفية استخدامها.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.