JavaScript se está volviendo cada vez más popular. Se ha convertido en la primera opción para el desarrollo frontal. Con NodeJ basados en el lenguaje JavaScript, también podemos desarrollar servicios de fondo de alto rendimiento. Incluso he visto a JavaScript aparecer en el campo de la programación de hardware. JavaScript está evolucionando gradualmente a un lenguaje de desarrollo completo.
Pero no es fácil usar bien JavaScript. Además de dominar su sintaxis y saber cómo escribir un código de alta calidad, también debe comprender cómo resolver los escenarios de necesidades que se encontrarán en casi todos los proyectos, como: juzgar las fechas, resaltar el texto, limitar el número de caracteres, etc. Hinchado y también afectará el rendimiento del sistema. Mi enfoque es recopilar y usar esos fragmentos comunes de JavaScript y usarlos primero cuando sea necesario. A continuación hay 10 piezas de código práctico de JavaScript que he recopilado. Según ellos, también puede crear complementos JS más potentes o funciones funcionales.
1. Determinar si la fecha es válida
La función de fecha incluida en JavaScript sigue siendo demasiado simple, y es difícil satisfacer las necesidades de análisis y juzgar diferentes formatos de fecha en proyectos reales. JQuery también tiene bibliotecas de terceros para simplificar el procesamiento de la fecha, pero a veces es posible que necesite una función muy simple sin introducir una enorme biblioteca de terceros. En este momento, puede usar el código de verificación de la fecha siguiente, que le permite personalizar el formato de fecha y verificar la validez de la fecha.
función isValidDate (valor, userFormat) {// Establecer formato predeterminado si el formato no se proporciona userFormat = userFormat || 'mm/dd/yyyy'; // Encuentra delimitador personalizado excluyendo // caracteres de mes, día y año var delimitador =/código^mdyfontado/.exec(userFormat)[0]; // Crear una matriz con mes, día y año // para que conozcamos el orden de formato por índice var theformat = userFormat.split (delimitador); // Crear matriz desde la fecha del usuario var thedate = value.split (delimitador); función isDate (fecha, formato) {var m, d, y, i = 0, len = format.length, f; para (i; i <len; i ++) {f = format [i]; if (/m/.test(f)) m = date [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 si es un día válido del mes d <= (nueva fecha (y, m, 0)). getDate ()); } return isDate (thedate, theFormat);}Cómo usar:
La siguiente llamada devuelve falso porque no hay 31 días en noviembre
ISVALIDDATE ('DD-MM-YYYY', '31/11/2012 ')
2. Obtenga el ancho o altura máximo de un conjunto de elementos
La siguiente función es muy útil para los desarrolladores que necesitan realizar un diseño dinámico.
var getMaxHeight = function ($ elms) {var maxHeight = 0; $ elms.each (function () {// En algunos casos, puede usar externosheight () en su lugar var altura = $ (this) .Height (); if (altura> maxHeight) {maxHeight = altura;}}); devolver maxheight;};Cómo usar:
$ (elementos) .Height (getMaxHeight ($ (elementos)));
3. Resaltar texto
Hay muchas bibliotecas de terceros de JQuery que pueden implementar la función de resaltar el texto, pero prefiero usar la siguiente pequeña pieza de código JavaScript para implementar esta función. Es muy corto y puede modificarse de acuerdo con mis necesidades, y puede definir el estilo de resaltar usted mismo. Las siguientes dos funciones pueden ayudarlo a crear su propio complemento de resaltado de texto.
Función resalta (texto, palabras, etiqueta) {// etiqueta predeterminada si no se proporciona etiqueta etiqueta = etiqueta || 'durar'; var i, len = words.length, re; para (i = 0; i <len; i ++) {// global regex para resaltar todas las coincidencias re = new regexp (palabras [i], 'g'); if (re.test (text)) {text = text.replace (re, '<' + tag + '> $ & </' + tag + '>'); }} Texto de retorno;}También necesitará funciones no iluminadas:
función unhighlight (texto, etiqueta) {// etiqueta predeterminada si no se proporciona etiqueta etiqueta = etiqueta || 'durar'; var re = new Regexp ('(<'+Tag+'.+?> | <//'+tag+'>)', 'g'); return text.replace (re, '');}Cómo usar:
$ ('P'). Html (destacado ($ ('P'). Html (), // El texto ['foo', 'bar', 'baz', 'hola mundo'], // lista de palabras o frases para resaltar 'strong' // personalización personalizada));4. Efecto de movimiento del texto
A veces desea agregar movimiento a un párrafo de su texto para que cada palabra pueda moverse. Puede usar el siguiente código de complemento jQuery para lograr este efecto. Por supuesto, debe combinar un estilo de transición CSS3 para lograr mejores resultados.
$ .fn.animatetext = function (demora, klass) {var text = this.Text (); Var letras = text.split (''); return this.each (function () {var $ this = $ (this); $ this.html (text.replace (/./ g, '<span> $ & </span>')); $ this.find ('span.letter'). Cada (function (i, el) {setTimeOut (function () {$ (el) .addclass (klass);}, demora);});});}); });Cómo usar:
$ ('P'). Animatetext (15, 'foo');
5. Ocultar elementos uno por uno
El siguiente complemento JQuery puede ocultar un grupo de elementos uno por uno de acuerdo con la longitud del paso (tiempo de intervalo) que establece. Utilizado en los elementos de la lista de recarga puede lograr buenos resultados.
$ .fn.fadeall = function (ops) {var o = $ .extend ({retraso: 500, // retraso entre la velocidad de los elementos: 500, // facilitar la velocidad de animación: 'swing' // Otros requieren complementos de facilidad}, OPS); var $ el = this; for (var i = 0, d = 0, l = $ el.length; i <l; i ++, d+= o.delay) {$ el.eq (i) .delay (d) .fadein (o.speed, o.ease); } return $ el;}Cómo usar:
$ (elementos) .fadeall ({retraso: 300, velocidad: 300});
6. Limite el número de palabras en el texto
El siguiente script le permite interceptar el texto de acuerdo con la longitud del personaje dada. Si el texto se intercepta, será seguido automáticamente por un ellipsis.
function Exactpt (str, nwords) {var words = str.split (''); Words.splice (nwords, words.length-1); devuelve palabras.join ('') + (words.length! == str.split ('') .length? '...': '');}7. Determine la adaptabilidad actual en el diseño correspondiente
Muchos diseños han adoptado diseños receptivos para adaptarse a la visualización del sitio web o la aplicación en diferentes dispositivos. A menudo necesita determinar en qué adaptación de pantalla se encuentra actualmente en el código.
función isbreakpoint (bp) {// Los puntos de interrupción que establece en su CSS var bps = [320, 480, 768, 1024]; var w = $ (ventana) .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]; romper; }} return w> min && w <= max;}Cómo usar:
if (isbreakpoint (320)) {// punto de interrupción a 320 o menos} if (isbreakpoint (480)) {// punto de interrupción entre 320 y 480} ...8. Conteo global
En algunos escenarios de juego o publicidad, debe registrar la cantidad de veces que el usuario hace clic en un botón en la página actual. En este momento, puede usar la función .data () jQuery para manejarla:
$ (elemento) .data ('contador', 0) // comienza el contador en cero .Click (function () {var contador = $ (this) .data ('contador'); // get $ (this) .data ('contador', contador + 1); // set // haz algo más ...});9. Incrustar el video de Youku
función EmbedYouKu (Link, OPS) {var o = $ .extend ({ancho: 480, altura: 320, params: ''}, OPS); var id = //?v/=(/w+)/.exec(link)[1]; return '<embed allowedFullScreen="true" id="embedid" quality="high" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" src="'+id+'?'+o.ops'"';}Cómo usar:
EMBEDEOUKU ('http://static.youku.com/v/swf/qplayer.swf', {'wintype = adshow & videoids = xmte3nzq0ntky & isautoplay = false & isshowrelatedVideo = false'});10. Cree un menú dinámico o lista desplegable
En muchos escenarios, necesitamos crear menús, listas desplegables o elementos de lista dinámicamente. La siguiente es una parte del código más básico para implementar las funciones anteriores, y puede expandirlas en consecuencia de acuerdo con las necesidades reales.
función makemenu (elementos, etiquetas) {etiquetas = etiquetas || ['ul', 'li']; // etiquetas predeterminados var parent = etiquetas [0]; var child = etiquetas [1]; VAR item, value = ''; for (var i = 0, l = items.length; i <l; i ++) {elementos = elementos [i]; // El elemento y el valor separado si el valor está presente si (/:/.test(item)) {elementos = elementos [i] .split (':') [0]; valor = elementos [i] .split (':') [1]; } // envuelve el elemento en los elementos de la etiqueta [i] = '<'+child+''+(valor && 'value = "'+valor+'"')+'>'+// Agregar valor si el elemento presente+'</'+child+'>'; } return '<' + parent + '>' + items.Join ('') + '</' + parent + '>';}Cómo usar:
// desplegable Seleccione MontMakEmenu (['enero: enero', 'febrero: febrero', 'marzo: mar'], // item: valor ['select', 'opción']); // Lista de comestiblesmakemenu (['zanahorias', 'lechuga', 'tomatos', 'leche'], ['ol', 'li']);
Lo anterior es solo una pequeña parte de esos fragmentos prácticos de código JavaScript. También le recomiendo que preste atención a la recopilación o la redacción de tales fragmentos de código básico. Se pueden usar en muchos proyectos o proporcionar funciones más completas a través de algunas modificaciones. El uso de estos fragmentos de código le ahorrará mucho tiempo de desarrollo.