Cómo jquery encapsula los complementos jquery encapsula los complementos
Prefacio Hoy en día, jquery es casi una herramienta esencial para el desarrollo web. Incluso VS Artifact comenzó a incorporar Jquery y UI en proyectos web en 2010. En cuanto a los beneficios de usar jquery, no entraré en detalles aquí. Conozco todos los usados. Hoy discutiremos el mecanismo de complemento de jquery, que tiene miles de complementos de terceros. A veces escribimos una función independiente. Si queremos usarla junto con jquery, podemos llamarla usando la cadena jquery. Es necesario extender jquery y escribirlo como complemento. Por ejemplo, la siguiente es una demostración sencilla de cómo extender objetos jquery:
//sample: métodos para extender objetos jquery. Bold() se utiliza para poner la fuente en negrita.
(función($){
$.fn.extend({ resumen/summary en negrita
Devuelve esto. CSS({ peso de fuente:bold p> p>
}
});
})(jQuery);
Método de llamada:
Este es una extensión muy simple. A continuación, analicemos el código anterior paso a paso.
Primero, el mecanismo de complemento de jquery
Para facilitar a los usuarios la creación de complementos. proporciona el método jQuery.extend() y jQuery.fn.extend()
1. El método jQuery.extend() tiene una sobrecarga
JQuery.extend(object). se usa para extender los parámetros de la clase JQuery, es decir, agregar una nueva función o llamar a un método estático entre clases JQuery/nulos con nombre. Por ejemplo, los métodos ajax integrados de jQuery se llaman con jQuery.ajax (), que es. un poco como "nombre de clase". Método estático. Nombre del método". Escribamos un ejemplo de jquery. extend(object):
//Extiende el objeto jQuery en sí jquery. Extend({"minvalue:function). (a,b)){ //resumen/resumen
Volver
}, Resumen/Resumen
Volver
}
} );//Llamar
vari = 100j = 101 varmin _ v = $. minValue(I,j); //min_v es igual a 100.
varmax_v=$. valor máximo (I, j); //max_v es igual a 101.
Sobrecargado: jquery. extend([deep], target, object1, [objectn])
Extiende un objeto con uno o más objetos y devuelve el objeto extendido.
Si no se especifica ningún objetivo, jQuery se nombrará vacío para extenderse. Esto ayuda a los autores de complementos a agregar nuevos métodos a jQuery.
Si el primer parámetro se establece en verdadero, jQuery devuelve una copia profunda, copiando recursivamente cualquier objeto que encuentre. De lo contrario, la copia compartirá la estructura con el objeto original.
Las propiedades no definidas no se copiarán, pero sí las propiedades heredadas del prototipo del objeto.
Parámetros
Profundidad: Opcional. Si se establece en verdadero, fusiona recursivamente.
Objetivo: El objeto a modificar.
1: El objeto que se fusionará con el primer objeto.
ObjetoN: Opcional. El objeto que se fusionará con el primer objeto.
Ejemplo 1:
Fusionar configuraciones y opciones, modificar y devolver configuraciones.
Configuración de Var={validar:falso,límite:5,nombre:foo.
Varoptions={validar: verdadero, nombre: barra.
JQuery.extend(configuración, opciones);
Resultado:
Configuración == {validación: verdadero, límite: 5, nombre:
vardefaults={validate:false,limit:5,name:foo
Varoptions={validate:true,name: bar.
var settings = jquery . extend(vacío, predeterminado, opción);
Resultado:
settings == {validación: verdadero, límite: 5, nombre :columna.
};
Resulta que jQuery.fn=jQuery.prototype es el prototipo del objeto jQuery. Entonces el método jQuery.fn.extend() es el método prototipo para extender el objeto jQuery. Sabemos que extender un método en el prototipo equivale a agregar un "método miembro" al objeto, y el "método miembro" de la clase solo puede ser llamado por el objeto de la clase, así que use jQuery extend fn. Método extendido (objeto), clase jQuery Las instancias pueden usar esta "función miembro". Debe diferenciar entre los métodos jquery.fn.extend(object) y jquery.extend(object).
Dos. Ejecución automática de funciones/cierres anónimos
1. ¿Qué es una función anónima autoejecutable?
Se refiere a dicha función: (función {//código}) ();
2. Pregunte por qué se puede ejecutar (función {//código}) (); function { //code }(); ¿Informarás un error?
Análisis
(1). Primero, aclare la diferencia entre los dos: (función{//código}) es una expresión y función{//código} es una función. declaración.
(2). Seguido de js, debido a que function(){//code} se ha interpretado en la etapa de "compilación", js omitirá function(){//code} e intentará ejecutar (). ); por lo que informará un error;
Cuando js se ejecuta en (función{//código})(); cuando, debido a que (función{//código}) es una expresión, js resolverá en Obtenga el valor de retorno. Debido a que el valor de retorno es una función, encontré ();
Además, el método de convertir una función en una expresión no depende necesariamente del operador de agrupación (). También podemos usar el operador void, operador ~, ! Operador...
Por ejemplo:
Cómo escribir complementos en el marco de arranque;
! Función ($) {
//Hacer algo
} (jQuery);
y
(Función ($) {
//Haz algo;
}) (jQuery); Esto es lo mismo.
El mayor uso de funciones anónimas es crear cierres (que es una de las características del lenguaje JavaScript. También puede crear espacios de nombres para reducir el uso de variables globales).
Por ejemplo:
vara = 1;
(función()(){
vara=100
})();
Alert(1); //Popup 1
Para más cierres y funciones anónimas, consulte el artículo Funciones anónimas y autoejecución de Javascript. .
En tercer lugar, empaquete gradualmente el complemento JQuery.
A continuación, escribamos un complemento jqury resaltado.
1. Establezca un área cerrada para evitar que el complemento se "contamine"
//El cierre se define en la (función vacía ($)
}) (window.jquery);
2.jQuery.fn.extend(object) extiende los métodos jQuery y crea complementos.
//El cierre se define en la función vacía($)
$.fn.extend({highlighted
}) (window. jquery
3. Proporcione los parámetros predeterminados del complemento para implementar la función del complemento
// El cierre se define en la función vacía nombrada ($));
<. p>$.fn.extend({ Resaltar//Anular los parámetros predeterminados del complemento.This.each(function(){//Este es un objeto jQuery.
//Al llamar a la colección de complementos resaltados(), iterar a través de todos los doms que se resaltarán
var $this = $(this); //Obtener el objeto jQuery de. el dom actual, que es el bucle actual.
//Establece el estilo de dom según los parámetros
$ this. >Color de fondo:
Color: opts. prospect
});
});
}
});//parámetros predeterminados
vardefaluts={
Primer plano: rojo,
Fondo: amarillo
}; p>
}) (ventana. jquery);
En este punto, las funciones básicas del complemento de resaltado están disponibles. El código de llamada es el siguiente:
. $(function(){
$(p//Llamado desde Definir complemento resaltado});
Solo se puede llamar directamente aquí, no en la cadena. Sabemos que se puede llamar a jQuery en la cadena, es decir, se pueden llamar a varios objetos jQuery. Método, por ejemplo:
$(# id 100 pixels }). Pero nuestro complemento anterior no se puede encadenar de esta manera. Por ejemplo: $(p 100 píxeles); // Informaré que no se encuentra el método css porque mi complemento personalizado no devuelve el objeto jQuery después de completar la función. A continuación, devuelva el objeto jQuery para que nuestro complemento también admita llamadas en cadena (en realidad es muy simple, es decir, cuando completamos la función. Después de nuestro código de complemento, se devuelve el objeto jQuery, que no es diferente). del código anterior. )
¿Cómo obtiene jquery el contenido del archivo de entrada?
¿Cómo obtiene jquery el contenido del archivo de entrada? ; // De esta manera puede obtener su valor (es decir, contenido)
1.jQuery es un marco de JavaScript rápido y conciso y una excelente biblioteca de código JavaScript después de Prototype. El propósito del diseño de jQuery es "writeLess, DoMore", que aboga por escribir menos código y hacer más. Encapsula códigos de funciones JavaScript comunes, proporciona patrones de diseño JavaScript simples y optimiza las operaciones de documentos HTML, el manejo de eventos, el diseño de animaciones y la interacción Ajax.
2.2. Las características principales de jQuery se pueden resumir en: sintaxis de cadena única y una interfaz multifuncional breve y clara; tiene un selector CSS eficiente y flexible que se puede expandir; tiene un complemento conveniente; -In mecanismo de expansión y complementos enriquecidos.
¿Cómo utilizar el complemento?
1. Cargue el marco jquery usando etiquetas de script. 2. Cargue el complemento con la etiqueta script. 3. Compruebe si el complemento tiene una API y llámelo según la API. 4. Si no hay API, mire usted mismo el código fuente.
En términos generales, el método de llamada del complemento jquery es $('elemento'). plugName (parámetro); donde elemento es el objeto que elige para ejecutar el método del complemento, plugName es el nombre del método en su complemento y parámetro es el parámetro del método del complemento. Por supuesto, algunos complementos no se llaman de esta manera y algunos complementos requieren que agregue la siguiente clase a la etiqueta html. Esto aún depende de la API del complemento que utilice.
Explique en detalle cómo hacer referencia correctamente a los complementos jquery y jquery-ui en proyectos vue.
Vue-cliwebpack presenta jquery a nivel global.
1. Primero agréguelo en package.json,
luego nmpinstall
2. Agréguelo en webpack.base.conf.js
<. p>3. Agregue al final de module.exportsPlugin:
4. Luego asegúrese de ejecutar dev nuevamente.
5. Simplemente introdúzcalo en main.js
Introduzca módulos de terceros que no sean NPM. archivo vue.
Vue-cli introduce archivos externos
Agregar archivos externos a webpack.base.conf.js
Swiper en externos es la clave y el valor correspondiente debe Es la variable Swiper definida por el complemento swiper.js:
Luego importe el archivo al archivo index.html en el directorio raíz: script src = "static/lib/wiper.js"》 /script>
p>De esta manera, puede agregar esta línea de código: importSwiperfrom'swiper' al archivo que necesita usar swiper.js para que pueda usarse normalmente.
¿Qué son los complementos de la página de inicio?
Categoría de herramientas
Una biblioteca de herramientas para operar objetos, matrices, etc.
Subrayado. js
Lo-dash y subrayado. La API de js es básicamente la misma que la de guión bajo. Tiene la ventaja de una estructura personalizada.
Sugar agrega algunas herramientas y métodos a los objetos nativos.
Functional.js ha recibido suficiente soporte de la biblioteca.
Watch.js monitorea cambios en objetos o propiedades.
Programación funcional de Bacon.js, genial
Streamjs realiza una serie de operaciones en matrices y objetos a través de transmisiones.
Control de procesos asíncrono
Eventproxy producido por Park Ling.
Detalles de Arbiter.js
Publicar y suscribirse
Estilo QPromise
Asincrónico. js
Mocked
Mock.js genera datos aleatorios y solicitudes simuladas de Ajax.
Solicitud jquery-mockjaxmockajax
Base de tiempo
Instantáneo
Fecha
Detección del navegador
Buser detecta navegadores y versiones específicas.
Ua-parser-js detecta navegadores y versiones específicas, sistemas operativos, tipos de dispositivos, etc.
Prueba/depuración de ejecución de prueba
Console-polyfill permite utilizar de forma segura métodos de consola como console.log().
El registro estiliza el registro de salida de la consola.
Konsole.js genera detalles de información de registro en un elemento de la página.
Operaciones de Uri.jsuri
Biblioteca de herramientas de cookies para agregar, eliminar y cambiar cookies
Detalles de la biblioteca de enrutamiento del front-end del controlador
Número operaciones de BigDecimal.js para mejorar la precisión
JSDoc genera detalles de documentación API basados en la información anotada en el archivo javascript.
Encapsulación de eventos de teclado de teclas de acceso rápido
MD5 cifra la biblioteca de archivos a través de MD5.
Clases de mejora del navegador
Biblioteca que mejora algunos navegadores antiguos
Selectivizr convierte a IE6-8 en algunos selectores CSS3.
IeBetter ofrece funciones avanzadas de navegador ie6-8.
ExplorerCanvas permite que el navegador IE8 admita lienzo.
CSS3Pie permite que IE6-9 admita bordes radiales, sombras de cuadros y gradientes lineales. Puedes usar. archivo htc (nota Minetype) o. archivo js. Cuando se utiliza Pie.js, si el elemento box-radious tiene un color de fondo, el color de fondo no se muestra. . .
FormFive permite que los navegadores más antiguos admitan algunas funciones de los formularios HTML5, como marcadores de posición y enfoque automático.
/anselmh/object-fit permite que el navegador admita reglas CSS de adaptación de objetos.
HTML5CrossBrowserPolyfills es un montón de Polyfills.
La flexibilidad permite que el antiguo IE sea compatible con Flexbox.
Mejora del selector
Lining.js permite que el navegador logre efectos similares a ::nth-line(), ::nth-last-line().
No confidencial
Prefixfree lo usa para que no sea necesario agregar un prefijo de navegador al escribir CSS.
Nivel de forma
jquery-file-Subir detalles del componente del archivo
Control de vista de árbol de archivos ZTree
Editor de árbol. La sensación de una presentación sensorial es muy similar a la de un mapa mental.
FileAPI maneja algunos archivos en el cuadro de selección de archivos
Validación de formulario
. Detalles de validación
Motor de validación jQuery
Embellecimiento de elementos de formulario
Uniform proporciona embellecimiento de elementos de formulario como cuadros desplegables, menús, casillas de verificación y botones .
Cuadro desplegable de selección múltiple Seleccione 2
La selectividad y la incertidumbre son similares.
Cuadro desplegable DropKick, selección única o múltiple. Se ve mejor que uniforme
Componente de cambio tipo Switch ios7
Nouislider usa barras de desplazamiento para configurar/controlar (volumen, etc.).
Range.css embellecido El apariencia del elemento de entrada.
Clase de imagen
Holderjs genera imágenes de marcador de posición.
Lazyman
La carga de imágenes realiza la recuperación después de que se hayan cargado todas las imágenes seleccionadas.
CSSgram implementa la biblioteca de filtros de Instagram utilizando filtros CSS3.
Categoría de iconos
Resumen de fuentes de iconos
Iconos creados por SVG
svgicons
Icono
HYBICON con efectos interactivos. Por ejemplo, al pasar el cursor o hacer clic en
icono de entidad de carácter HTML
/
al hacer clic en el ícono de transformicons, habrá algunos efectos de transformación. Por ejemplo, el signo más se convierte en una cruz.
Textura enlosable generada por css3patternscss3. La compatibilidad del navegador no es buena.
Buscar imágenes
Fancybox aparece para ver imágenes, vídeos y otras demostraciones.
Yoxview aparece para ver imágenes y el tamaño de la imagen cambia de forma natural.
Picture Wall
Wukemark
Marco de interfaz de usuario
WeUI está diseñado por el equipo de diseño oficial de WeChat para el desarrollo web de WeChat.
Framework 7
Clase de componente UI
Arrastrar
Dragula admite arrastrar, soltar y ordenar. Se siente más liviano y fácil de usar que jqueryUI.
Angular-dragula dragula versión angular oficial
Visualización de datos (gráfico)
Echarts producidos por Baidu.
Highcharts es muy potente. Hay una tarifa.
Dibujable. Biblioteca de gráficos JS basada en D3.
El documento de Flot no es potente
La presentación del documento chino de chartJs es hermosa y clara. Relativamente ligero.
Una persona en China de ichartJs lo hizo y se siente bien.
Componente de selección de tiempo
Selector de fechas de Foundation
Un calendario simple y detallado
Fullcalendar admite la publicación para cambiar el tiempo de las tareas pendientes.
SimpleEventsCalendar tiene un aspecto similar. Cuesta $5
JQueryuidatepicker es clásico, no muy agradable.
Pickadate es liviano, atractivo y compatible con dispositivos móviles. Pero parece que solo se puede mostrar en la capa emergente, no en la pantalla desplegable.
Zebra-datepicker es muy configurable. Pero parece que sólo puede aparecer en la esquina superior derecha. . .
Estilo de arranque del selector de fecha Bootstrap
DateRangePicker selecciona un período de tiempo. Estilo Bootstrap Este componente se basa en TwitterBootstrap, Moment.js y jQuery.
Barra de desplazamiento personalizada
Barra de desplazamiento perfecta, barra de desplazamiento ligera. Parece la barra de desplazamiento de Chrome en Mac.
Iscroll funciona bien en dispositivos móviles.
Efecto de carga
CSSSpinnersCSS lo hace
Loaders.cssCSS lo hace.
Componente de tabla
jsGridDataGrid.
Cuadrícula de datos detallada basada en backgrid
Excellentexport genera el contenido de la tabla en Excel. Compatible con Firefox, Chrome e IE6+
La tabla de datos es interactiva (clasificación, eliminación, etc.). )
Handsontable genera datos en apariencia Excel.
Biblioteca de componentes para datos de tablas JSpreadsheets
Obtener color
Rango
Compartir en redes sociales
Esto Generar código compartido.
Editar
El editor de código Ace, se puede utilizar para demostración.
Editor
Ueditor está hecho por Baidu.
Tinymce edita contenidos html en tiempo real.
Summernote funciona bien en dispositivos móviles.
Componente de notificación
notie.js
Reproductor HTML5
Jwplayer es utilizado por una gran cantidad de sitios web.
html 5 media simple H5 player, liviano
Jplayer es potente y puede cambiar máscaras.
Mostrar
Impress.js tiene varias rotaciones y una experiencia extraña.
Visualización en pantalla completa. Utilice la rueda de desplazamiento para pasar las páginas en detalle.
Zepto.fullpage se centra en fullPage.js en el lado móvil y se basa en Zepto.
El apilamiento de páginas es similar al de páginas completas.
Turn.js crea un libro con un hermoso efecto de paso de página.
Mostrar diapositivas
Slidesjs es muy fácil de usar, pero debes escribir tu propio CSS para la navegación de diapositivas, que es detallado.
Detalles del componente deslizante javascript ISlider de la plataforma móvil sin dependencias de complementos.
La presentación de diapositivas en pantalla completa de Bgstretcher cambiará a medida que cambie el tamaño de la página.
Swiper es un sitio web chino Swiper con complemento deslizante táctil móvil, potente, gratuito y de código abierto.
El control deslizante de monedas es compatible con IE6. Muy bien~. Sin embargo, el cambio de modos se realiza bloque por bloque. No se puede configurar el modo de conmutación. . .
Al cambiar, la presentación de diapositivas de Wowslider mostrará varios efectos interesantes. Cargar.
Las diapositivas normales de Cycle2 no admiten el desplazamiento vertical. . .
La presentación de diapositivas ordinaria de Jcarousel no es compatible con IE6.
Muestra desplazamiento tridimensional. Es bueno hacer ppt.
Nodeppt está hecho por chinos y el ppt es bastante bueno. Mejor que revelar en algunos aspectos. Pero existen algunos problemas al generar html exportado.
Interruptor Roundabout3d, mira el borde de la imagen detrás.
Popup
Magnifico-Popup es compatible con PC y dispositivos móviles. No está mal, más de 5k estrellas.
Una capa desarrollada por chinos, compatible con ie6+. No me gusta como se llama.
Efectos de animación
Mixitup utiliza hermosos efectos de animación para completar la clasificación y el filtrado.
Efecto marquesina
Efecto de giro rápido de tarjeta
Efecto de giro 2 La compatibilidad es correcta. El método de escritura es relativamente simple: 1, solo admite voltear en la dirección X 2, el nombre de la clase se especifica como 3 y solo se puede llamar una vez. Requiere reescribir mi versión mejorada aquí.
El teatro simula dos personas hablando en una pantalla.
El color del texto de medianoche.js cambia con el fondo y explota.
El complemento de animación de degradado de color de Color-animationjquery La animación de jquery no admite cambios en los valores de color. Las bibliotecas de cambios pueden proporcionar este soporte.
Transit convierte elementos en CSS.
Se detalla el efecto de nube de etiquetas Tagcanvas3D.
Animación de cambio de pantalla de iconos
Efecto de apariencia de navegación izquierda/derecha de Snap.js
Animación de vibración CSS
Después de hacer clic en ClickSpark.js Algunos efectos geniales
Complemento de diferencia visual
Scrollorama es relativamente simple.
Superscrollorama puede hacer más, pero requiere el uso de una biblioteca de interpolación de terceros, use