7 Javascript funções que os programadores da web devem ter

Alguns anos atrás, desde que escrevamos JavaScript, devemos usar várias funções comumente usadas, como AddEventListener e AnexeEvent, que não são para tecnologias e funções avançadas, mas apenas algumas tarefas básicas, e o motivo é causado pelas diferenças entre vários navegadores. À medida que o tempo passa, a tecnologia está melhorando constantemente, ainda existem algumas funções JavaScript que são essenciais para quase todos os programadores da Web, seja para desempenho ou para funcionalidade.

Função de debounce que impede chamadas de alta frequência

Essa função de debounce é uma função essencial para aumentar o desempenho para aqueles que executam tarefas orientadas por eventos. Se você não usar a função de redução de redução ao usar rolagem, redimensionar, chave* e outros eventos para acionar tarefas, você cometerá um grande erro. A seguinte função de debounce de frequência de baixa frequência pode tornar seu código eficiente:

 // retorna uma função, que, desde que continue sendo invocada, não será acionada. A função será chamada depois que parar de ser solicitada por // n milissegundos. Se o `imediato` for aprovado, acione a função na aresta // de frente, em vez da trilha. retornar function () {var context = this, args = argumentos; var mais tarde = function () {timeout = null; if (! imediato) func.apply (contexto, args); }; var callnow = imediato &&! Timeout; ClearTimeout (tempo limite); timeout = setTimeout (mais tarde, espere); if (callnow) func.apply (context, args); };}; // uSageVar myeffientfn = debounce (function () {// Todas as coisas que você faz}, 250); window.addeventListener ('redimensionamento', myeftabilityfn);

A função Debounce permite apenas a função de retorno de chamada que você fornece para executar uma vez dentro de um determinado intervalo de tempo, reduzindo assim sua frequência de execução. Tais restrições são particularmente importantes quando os eventos acionados por alta frequência são encontrados.

Definir a função de detecção do ciclo de tempo/frequência

A função Debounce acima mencionada é desencadeada pela ajuda de um evento. Mas, às vezes, não existe esse evento disponível; portanto, podemos apenas escrever uma função para verificá -lo de vez em quando.

 Poll function (fn, retorno de chamada, err, tempo limite, intervalo) {var startTime = (new Date ()). getTime (); var pi = window.setInterval (function () {if (math.floor (((new Date) .getTime () - startTime) / 1000) <= timeout) {if (fn ()) {callback ();}} else {window.clearinterval (pi); err ();}}, interval)}

Uma vez que a função que proíbe chamadas repetidas e permite apenas a execução uma vez

Muitas vezes, queremos apenas que alguma ação seja executada uma vez, assim como usamos o ONLOAD para limitá -la para ser executada apenas uma vez quando a carga é concluída. A função a seguir permitirá que sua operação seja executada uma vez e não será executada repetidamente.

 função uma vez (fn, context) {var resultado; retornar function () {if (fn) {resultado = fn.apply (context || this, argumentos); fn = nulo; } resultado de retorno; };} // uSagevar CanonLyFireonce = ONE (FUNCTION () {console.log ('disparado!');}); Canonlyfireonce (); // "Despedido!" canonlyfireonce (); // NADA

Essa função uma vez pode garantir que a função que você fornece seja executada apenas uma vez e impedir a execução repetida.

Obtenha o endereço absoluto de um link getAbsoluteurl

Obter o endereço absoluto do link não é tão simples quanto você pensa. A seguir, é apresentada uma função muito prática que pode obter o endereço absoluto com base no endereço relativo que você inseriu:

 var getAbsoluteurl = (function () {var a; retorna função (url) {if (! a) a = document.createElement ('a'); a.href = url; retorna a.href;};}) (); // usagegetabsoluteurl ('/algo');

Aqui, usamos a tag href para gerar um URL absoluto completo, que é muito confiável.

Determinar se uma função de javascript é uma função nativa do sistema é nativa

Muitos scripts JS de terceiros introduzirão novas funções em variáveis globais, e alguns até substituem as funções nativas do sistema. O método a seguir é verificar se é uma função nativa:

 ; (function () {// usado para resolver o interno `[[class]]` de valores var tostring = object.prototype.toString; // usado para resolver a fonte de funções em decomposição var fntostring = function.protype.ToString; . +? Construtor/] $/; // Compile um regexp usando um método nativo comum como modelo. .Place (/[.*+?^$ {} () | [/] ////]/g, '// $ &') // Substitua menções de `ToString` por`.*? `Para manter o modelo adicional. .Prace (/ToString | (função).*? (? = /// () | para. +? (? Renative.test (FNTOSTRING.CALL (VALOR)) // Fallback de uma verificação de objeto host, porque alguns ambientes representam // coisas como matrizes digitadas como métodos DOM que podem não se conformar com o // padrão nativo normal. Isnative;} ()); // Usageisnative (alerta);

Embora esse método não seja tão conciso, ele ainda pode concluir a tarefa!

Crie novas regras CSS com JavaScript Insertrule

Às vezes, usamos um seletor CSS (como document.QuerySelectorAll) para obter uma lista de nodelas e modificar os estilos para cada um deles. De fato, essa não é uma abordagem eficiente. É uma abordagem eficiente para criar uma nova regra de estilo CSS usando JavaScript:

 // Construa uma folha de objeto melhor da folha = (function () {// construir estilo var style = document.createElement ('style'); style.setAttribute ('mídia', 'screen'); style.appendChild (document.createTextNode ('' '); style.sheet.cssrules.length);

Essas práticas são muito eficientes. Em alguns cenários, como ao usar o AJAX para carregar um novo HTML, você não precisa operar o conteúdo HTML recém -carregado.

Determine se os elementos da página da web têm certos atributos e estilos MatchaSelector

 function matchSelector (el, seletor) {var p = element.prototype; var f = p.Matches || P.WebkitMatchesSelector || P.MozMatchesSelector || P.MsMatchESSELECTOR || função (s) {return [] .Indexof.Call (document.QuerySelectorAll (s), isso)! == -1; }; Return f.call (el, seletor);} // USageMatchesSelector (document.getElementById ('mydiv'), 'div.someseSelector [some-attribute = true]')

Essas 7 funções JavaScript são tudo o que todo programador da web deve saber como usá -las.

O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.