Несколько лет назад, пока мы пишем JavaScript, мы должны использовать несколько часто используемых функций, таких как AddEventListener и AttedEvent, которые предназначены не для расширенных технологий и функций, а только некоторые основные задачи, и причина вызвана различиями между различными браузерами. Со временем технологии постоянно улучшаются, все еще есть некоторые функции JavaScript, которые необходимы почти для всех веб -программистов, либо для производительности, либо для функциональности.
Функция дебюра, которая предотвращает высокочастотные вызовы
Эта функция дебюра является важной функцией повышения производительности для тех, кто выполняет задачи, управляемые событиями. Если вы не используете функцию снижения при использовании прокрутки, измените размер, ключ* и другие события для запуска задач, вы совершите серьезную ошибку. Следующая понижающая функция дебюра дебюра может сделать ваш код эффективным:
// Возврат функции, которая, пока она продолжает вызывать, не будет // запускать. Функция будет вызвана после того, как она перестанет призывать к // n миллисекунд. Если `necotiate 'пройден, запустите функцию на переднем крае // вместо trailing.function debounce (func, wate, gistiate) {var timeout; return function () {var context = this, args = аргументы; var позже = function () {timeout = null; if (! Непосредственно) func.apply (контекст, args); }; var callnow = сразу &&! Timeout; ClearTimeout (тайм -аут); timeout = settimeout (позже, подождите); if (callnow) func.apply (контекст, args); };}; // usagevar myeffIftfn = debounce (function () {// Все налогообложения, которые вы делаете}, 250); window.addeventListener ('resize', myeffiftfn);Функция Debounce позволяет предоставлять функцию обратного вызова только один раз в течение определенного интервала времени, тем самым снижая частоту выполнения. Такие ограничения особенно важны, когда возникают высокочастотные инициированные события.
Установить функцию обнаружения времени/частотного цикла
Вышеупомянутая функция дебюра вызвана помощи события. Но иногда такого события нет, поэтому мы можем написать функцию сами, чтобы проверять ее время от времени.
Функциональный опрос (fn, обратный вызов, ERR, Timeout, интервал) {var startTime = (new Date ()). getTime (); var pi = window.setInterval (function () {if (math.floor (((новая дата) .gettime () - startTime) / 1000) <= timeout) {if (fn ()) {callback ();}} else нуПосле функции, которая запрещает повторяющиеся вызовы и позволяет выполнять только один раз.
Много раз мы хотим, чтобы какое -то действие было выполнено один раз, точно так же, как мы используем Onload, чтобы ограничить его для выполнения только один раз после завершения нагрузки. Следующая функция позволит выполнять вашу операцию один раз и не будет выполняться неоднократно.
Функция Once (fn, context) {var result; return function () {if (fn) {result = fn.Apply (контекст || это, аргументы); fn = null; } return Result; };} // usagevar canonlyfireonce = one (function () {console.log ('увольнение!');}); Canonlyfireonce (); // "Уволенный!" canonlyfireonce (); // nadaЭта функция после того, как предоставленная вами функция выполняется только один раз и предотвращает повторное выполнение.
Получите абсолютный адрес ссылки Getabsoluteurl
Получение абсолютного адреса ссылки не так просто, как вы думаете. Ниже приведена очень практическая функция, которая может получить абсолютный адрес на основе введенного вами относительного адреса:
var getabSoluteUrl = (function () {var a; return function (url) {if (! a) a = document.createElement ('a'); a.href = url; return a.href;};}) (); // usagegetAbsoluteUrl ('/something');Здесь мы используем тег href для создания полного абсолютного URL, который очень надежен.
Определите, является ли функция Javascript Isnaints Isnaints
Многие сторонние сценарии JS будут вводить новые функции в глобальные переменные, а некоторые даже перезаписывают собственные функции системы. Следующий метод должен проверить, является ли она собственной функцией:
; (function () {// используется для разрешения внутреннего `[[class]]` of значений var toString = object.prototype.toString; // используется для разрешения декомпилированного источника функций var fntoString = function.prototype.toString; // используется для обнаружения конструкторов -хозяев (safari> 4; . +? Constructor/] $/; .Replace (/[.*+?^$ {} () | [/] ////]/g, '// $ &') // Заменить упоминания о `toString` на`.*? `Для сохранения графической информации // заменить такую вещь. .Replace (/ToString | (функция).*? (? = /// () | для. +? (? = ///])/g, '$ 1.*? renative.test (fntoString.call (значение)) // Стоимость проверки объекта хоста, потому что некоторые среды будут представлять // такие вещи, как типичные массивы, которые не могут соответствовать // нормальному нативному шаблону. Isnative;} ()); // использование (предупреждение);Хотя этот метод не такой краткий, он все еще может выполнить задачу!
Создать новые правила CSS с помощью вставки JavaScript
Иногда мы используем селектор CSS (например, Document.queryselectorallal), чтобы получить Nodelist, а затем изменить стили для каждого из них по очереди. На самом деле, это не эффективный подход. Это эффективный подход для создания нового правила стиля CSS с использованием JavaScript:
// Создание лучшего листового объекта листа = (function () {// Строительный стиль var style = document.createElement ('style'); style.setattribut style.sheet.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), это)! == -1; }; return f.call (el, selector);} // usagematchesselector (document.getelementbyid ('mydiv'), 'div.someselector [some-attribute = true]')Эти 7 функций Javascript - все, что каждый веб -программист должен знать, как их использовать.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.