JavaScript está se tornando cada vez mais popular. Tornou-se a primeira escolha para o desenvolvimento do front-end. Com o NodeJS com base no idioma JavaScript, também podemos desenvolver serviços de back-end de alto desempenho. Até vi JavaScript aparecer no campo da programação de hardware. O JavaScript está gradualmente evoluindo para uma linguagem de desenvolvimento geral.
Mas não é fácil usar bem o JavaScript. In addition to mastering its syntax and knowing how to write high-quality code, you also need to understand how to solve the needs scenarios that will be encountered in almost every project, such as: judging dates, highlighting text, limiting the number of characters, etc. There are many third-party libraries that can solve these problems, but these libraries may not be created just to solve this problem, which means you need to introduce a lot of irrelevant code, which will make your entire O sistema inchado e também afetará o desempenho do sistema. Minha abordagem é coletar e usar esses trechos de javascript comuns e usá -los primeiro sempre que necessário. Abaixo estão 10 peças de código JavaScript prático que colecionei. Com base neles, você também pode criar plug-ins mais poderosos ou funções funcionais.
1. Determine se a data é válida
A função de data incluída no JavaScript ainda é muito simples e é difícil atender às necessidades de analisar e julgar diferentes formatos de data em projetos reais. O JQuery também possui bibliotecas de terceiros para simplificar o processamento relacionado a data, mas às vezes você pode precisar apenas de uma função muito simples sem introduzir uma enorme biblioteca de terceiros. No momento, você pode usar o seguinte código de verificação de data, que permite personalizar o formato da data e verificar a validade da data.
função isvaliddate (value, userFormat) {// Defina o formato padrão se o formato não for fornecido userFormat = userFormat || 'mm/dd/aaa'; // Encontre delimitador personalizado excluindo // personagens do mês, do dia e do ano var delimiter = /−Mdy/.exec(UserFormat). // Crie uma matriz com mês, dia e ano // para sabermos o pedido de formato por índice var theFormat = userFormat.split (delimiter); // Crie matriz a partir da data do usuário var thedate = value.split (delimiter); função isdate (data, formato) {var m, d, y, i = 0, len = format.length, f; para (i; i <len; i ++) {f = formato [i]; if (/m/.test(f)) m = data [i]; if (/d/.test(f)) d = date [i]; if (/y/.test(f)) y = date [i]; } return (m> 0 && m <13 && y && y.length === 4 && d> 0 && // Verifique se é um dia válido do mês d <= (nova data (y, m, 0)). getDate ()); } Retornar Isdate (Thedate, TheFormat);}Como usar:
A chamada seguinte retorna falsa porque não há 31 dias em novembro
isValiddate ('dd-mm-yyyy', '31/11/2012 ')
2. Obtenha a largura ou a altura máxima de um conjunto de elementos
A função a seguir é muito útil para desenvolvedores que precisam executar layout dinâmico.
var getMaxHeight = função ($ elms) {var maxHeight = 0; $ elms.EECH (function () {// Em alguns casos, você pode usar o OuterHeight () em vez de var a altura = $ (this) .Height (); if (altura> maxHeight) {maxHeight = altura;}}); retornar maxHeight;};Como usar:
$ (elementos) .Height (getMaxHeight ($ (elementos)));
3. Texto de destaque
Existem muitas bibliotecas de terceiros do jQuery que podem implementar a função de destacar o texto, mas eu prefiro usar o seguinte código JavaScript para implementar esta função. É muito curto e pode ser modificado com flexibilidade de acordo com minhas necessidades, e você pode definir o estilo de destaque você mesmo. As duas funções a seguir podem ajudá -lo a criar seu próprio plug -in de destaque em texto.
função destaque (texto, palavras, tag) {// tag padrão se nenhuma tag for fornecida tag = tag || 'span'; var i, len = words.length, re; for (i = 0; i <len; i ++) {// regex global para destacar todas as correspondências re = novo regexp (palavras [i], 'g'); if (re.test (text)) {text = text.replace (re, '<' + tag + '> $ & </' + tag + '>'); }} retornar texto;}Você também precisará funções não iluminadas:
functive sem alegria (texto, tag) {// tag padrão se nenhuma tag for fornecida tag = tag || 'span'; var re = novo regexp ('(<'+tag+'.+?> | <//'+tag+'>)', 'g'); Return text.Replace (re, '');}Como usar:
$ ('p'). html (destaque ($ ('p'). html (), // o texto ['foo', 'bar', 'baz', 'hello world'], // lista de palavras ou frases para destacar 'forte' // tag personalizado));4. Efeito do movimento do texto
Às vezes, você deseja adicionar movimento a um parágrafo do seu texto para que cada palavra possa se mover. Você pode usar o seguinte código de plug-in jQuery para alcançar esse efeito. É claro que você precisa combinar um estilo de transição CSS3 para obter melhores resultados.
$ .fn.animateText = function (atraso, klass) {var text = this.text (); var letters = text.split (''); Retorne this.each (function () {var $ this = $ (this); $ this.html (text.replace (/./ g, '<pan> $ & </span>')); $ this.find ('span.Letter'). cada (kl) (kL) {Settimeout (), {{$). });Como usar:
$ ('P'). AnimateText (15, 'Foo');
5. ocultar elementos um por um
O seguinte plug-in jQuery pode ocultar um grupo de elementos um por um de acordo com o comprimento da etapa (tempo de intervalo) que você definiu. Usados na lista de recarregamento Os elementos podem obter bons resultados.
$ .fn.fadeall = function (ops) {var o = $ .extend ({atraso: 500, // atraso entre os elementos Velocidade: 500, // facilidade de velocidade de animação: 'swing' // Outros requerem plug -in de ativação}, operações); var $ el = this; para (var i = 0, d = 0, l = $ el.length; i <l; i ++, d+= o.delay) {$ el.eq (i) .delay (d) .fadein (o.speed, o.ease); } retornar $ el;}Como usar:
$ (elementos) .Fadeall ({atraso: 300, velocidade: 300});
6. Limite o número de palavras no texto
O script abaixo permite interceptar o texto de acordo com o comprimento do caractere fornecido. Se o texto for interceptado, ele será automaticamente seguido por uma elipse.
Função trecho (str, nwords) {var words = str.split (''); words.splice (nwords, words.length-1); Return words.join ('') + (words.length! == str.split ('') .Length? '…': '');}7. determinar a adaptabilidade atual no layout correspondente
Muitos designs adotaram layouts responsivos para se adaptar à exibição do site ou aplicativo em diferentes dispositivos. Você geralmente precisa determinar em qual adaptação da tela está atualmente no código.
função isbreakpoint (bp) {// os pontos de interrupção que você define no seu css var bps = [320, 480, 768, 1024]; var w = $ (janela) .Width (); var min, max; for (var i = 0, l = bps.length; i <l; i ++) {if (bps [i] === bp) {min = bps [i-1] || 0; max = bps [i]; quebrar; }} retornar w> min && w <= max;}Como usar:
if (isbreakpoint (320)) {// ponto de interrupção em 320 ou menos} if (isbreakpoint (480)) {// ponto de interrupção entre 320 e 480}…8. Contagem global
Em alguns cenários de jogo ou publicidade, você precisa gravar o número de vezes que o usuário clica em um botão na página atual. Neste momento, você pode usar a função .Data () do jQuery para lidar com isso:
$ (elemento) .data ('contador', 0) // Comece o contador em zero .click (function () {var counter = $ (this) .data ('contador'); // get $ (this) .data ('contador', contador + 1); // set // faça algo mais ...});9. Incorporar vídeo Youku
function incdedyouku (link, ops) {var o = $ .extend ({width: 480, altura: 320, params: ''}, ops); var id = //?v/=(/w+)/.exec(link) Oh1]; return '<incorped materialfullScreen = "true" id = "incorpidId" Quality = "High" align = "Middle" PermscriptAccess = "sempre" type = "Application/x-shockwave-flash" src = "'+id+'?'+o.ops '";}Como usar:
Embededyouku ('http://static.youku.com/v/swf/qplayer.swf', {'wintype = adshow & videoids = xmte3nzq0ntky & isautoplay = false & isShowrelatedVideo = false'});10. Crie um menu dinâmico ou lista suspensa
Em muitos cenários, precisamos criar menus, listas suspensas ou listar itens dinamicamente. A seguir, é apresentado um pedaço do código mais básico para implementar as funções acima e você pode expandi -las de acordo com as necessidades reais.
função makemenu (itens, tags) {tags = tags || ['ul', 'li']; // tags padrão var pai = tags [0]; var filho = tags [1]; var item, value = ''; for (var i = 0, l = items.length; i <l; i ++) {item = itens [i]; // Item e valor separados se o valor estiver presente se (/:/.test(item)) {item = itens [i] .split (':') [0]; valor = itens [i] .split (':') [1]; } // Enrole o item em itens de tag [i] = '<'+filho+''+(value && 'value = "'+value+'' '')+'' ''+// Adicione valor se presente item+'</' Child+'' ''; } retornar '<' + pai + '>' + items.join ('') + '</' + pai + '' ';}Como usar:
// suspenso Selecione MonthmakeMenu (['Janeiro: Jan', 'Fevereiro: Fev', 'Março: Mar'], // Item: Value ['Selecione', 'Opção']); // Lista de Groceriesmakemenu ('Cenouras', 'Lettuce', 'Tomatos', 'Milk'], ['', ';O exposto acima é apenas uma pequena parte desses trechos práticos de código JavaScript. Eu também recomendo que você preste atenção à coleta ou a escrever esses trechos básicos de código. Eles podem ser usados em muitos projetos ou fornecer funções mais completas por meio de algumas modificações. O uso desses trechos de código economizará muito tempo de desenvolvimento.