La columna vertebral debe confiar en un subscore.js para ser utilizado. Debe usar funciones en bajo subscore para completar las operaciones básicas de acceso a elementos de página y elementos de procesamiento.
Nota: Backbone funciona bien con otras bibliotecas JS, por lo que es una biblioteca, no un marco.
Subscore no extiende el objeto nativo, pero llama al método _ () para encapsular. Una vez que se completa la encapsulación, el objeto JS se convierte en un objeto inferior. También puede obtener los datos en el objeto JS nativo a través del método value () del objeto subrayado. (jQuery obtiene objeto jQuery a través del método $ ())
Subsensor tiene más de 60 funciones en total. De acuerdo con los diferentes objetos de procesamiento, se puede dividir en cinco módulos principales: clase de recolección, clase de matriz, clase de función funcional, clase de objetos y clase de función de herramienta.
Plantilla subrayada () Descripción de la función:
Esta función contiene tres plantillas:
(1) < % %>: contiene código lógico y no se mostrará después de la representación.
(2) < %= %>: Tipo de datos, Muestra datos después de representar.
(3) < %- %>: Convierta las etiquetas HTML en cadenas comunes para evitar ataques de código.
Formato de llamada:
_.template (TemplateString, [datos], [configuración])
No se implementa el enlace de datos de dos vías.
1. Encapsulación de objetos subrayados
Underscore no se extiende en el prototipo de objeto JavaScript nativo, pero encapsula los datos en un objeto personalizado como jQuery (en lo sucesivo denominado "objeto subrayado").
Puede obtener datos nativos de JavaScript llamando al método Value () de un objeto subrayado, por ejemplo:
// Defina un objeto incorporado JavaScript var jsdata = {name: 'data'} // Crea el objeto como un objeto de bajo costo a través del método _ () // El prototipo del objeto subscoredata contiene todos los métodos definidos en bajo subscore. Puede usar var underscoredata = _ (jsData); // Obtener datos nativos a través del método de valor, es decir, JSData Underscoredata.value ();2. Llamada prioritaria a JavaScript 1.6 Métodos incorporados
Existen muchos métodos en un bajo servicio que se han incluido en la especificación en JavaScript 1.6. Por lo tanto, dentro del objeto subrayado, los métodos incorporados proporcionados por el entorno del host (si el entorno del host ha implementado estos métodos) se llamará primero para mejorar la eficiencia de ejecución de la función.
Para los entornos de host que no admiten JavaScript 1.6, el subscore los implementará a su manera, y para los desarrolladores, estos son completamente transparentes.
El entorno de host mencionado aquí puede ser el entorno nodo.js en ejecución o el navegador cliente.
3. Cambia el espacio de nombres
Underscore usa _ (bajo) de forma predeterminada para acceder y crear objetos, pero este nombre puede no cumplir con nuestras especificaciones de nombres o puede causar fácilmente conflictos de nombres.
Podemos cambiar el nombre de bajo el método noconflict () y restaurar el valor antes de la variable _ (bajo), por ejemplo:
<script type = "text/javaScript"> var _ = 'personalizado variable'; </script> <script type = "text/javaScript" src = "subscore/subscore-min.js"> </script> <script type = "text/javaScript"> // subscore object console.dir (_); // Cambie el nombre del objeto subrayado a nosotros, y luego acceda y cree el objeto subrayado a través de nosotros var us US = _.noconflict (); // emitir "variable personalizada" console.dir (_); </script>
4. Operación en cadena
¿Recuerdas cómo hacemos las operaciones de enlace en jQuery? Por ejemplo:
$ ('a') .css ('posición', 'relativo') .attr ('href', '#') .show ();Underscore también admite las operaciones de la cadena, pero debe llamar al método de cadena () para declarar:
var arr = [10, 20, 30]; _ (arr) .chain () .map (function (item) {return item ++;}) .first () .value ();Si se llama al método de cadena (), el subscore encapsulará el método llamado en un cierre, encapsulará el valor de retorno en un objeto inferior y return:
// Esta es una función clave en un bajo para implementar operaciones de cadena. Encapsula el valor de retorno en un nuevo objeto inferior y llama nuevamente el método Chain () para proporcionar soporte para la siguiente función en la cadena de métodos. VAR result = function (obj, cadena) {cadena de retorno? _ (obj) .chain (): obj; }5. Expandir bajo
Podemos extender fácilmente los métodos personalizados al método bajo a través de mixin (), por ejemplo:
_.mixin ({método1: function (object) {// toDo}, método2: function (arr) {// tODO}, método3: function (fn) {// tODO}});Estos métodos se agregan al objeto prototipo de subrayamiento, que pueden ser utilizados por todos los objetos subrayados creados, y disfrutan del mismo entorno que otros métodos.
6. Traverse la colección
Cada métodos () y map () son los dos métodos más utilizados. Se utilizan para iterar sobre una colección (matriz u objeto) y procesar cada elemento en la colección a su vez, por ejemplo:
var arr = [1, 2, 3]; _ (arr) .map (función (elemento, i) {arr [i] = elemento + 1;}); var obj = {Primero: 1, segundo: 2} _ (obj) .each (function (value, key) {return obj [key] = valor + 1;});El método MAP () tiene el mismo rol y parámetros que cada método (), pero registra el resultado devuelto por cada función de iteración a una nueva matriz y devoluciones.
7. Función de estrangulamiento
La función de la función se refiere a controlar la frecuencia de ejecución o el intervalo de una función (al igual que la puerta que controla el flujo de agua). Subscore proporciona dos métodos: Debunce () y Throttle () para la función de la función.
Para describir estos dos métodos más claramente, suponga que necesitamos implementar dos requisitos:
Requisito 1: Cuando el usuario ingresa los criterios de búsqueda en el cuadro de texto, las palabras clave coincidentes se consultan automáticamente y se lo solicita al usuario (al igual que cuando se ingresa la palabra clave de búsqueda en tmall)
Primero, analice el primer requisito. Podemos unir el evento KeyPress del cuadro de texto. Cuando cambie el contenido del cuadro de entrada, consulte la palabra clave coincidente y muestrelo. Supongamos que quiero consultar "Windows Phone", que contiene 13 caracteres, y solo me tomó 1 segundo completar la entrada (parece un poco rápido, eso es lo que significa), luego, en este segundo, el método de consulta se llamó 13 veces. Esto es algo muy aterrador, y si Tmall se implementa así, me preocupa que muera antes del Día de los Singles (por supuesto, no es tan frágil, pero definitivamente no es la mejor solución)
Un mejor enfoque es consultar la palabra clave coincidente cuando el usuario ha terminado de ingresar o está esperando un aviso (tal vez es demasiado vago para ingresar el siguiente contenido).
Finalmente, descubrimos que en ambos casos esperábamos, el usuario detendrá temporalmente la entrada, por lo que decidimos consultar después de que el usuario detiene la entrada de 200 milisegundos (si el usuario está constantemente escribiendo contenido, entonces creemos que puede ser muy claro sobre la palabra clave que desea, así que espere y lo solicite nuevamente)
En este momento, utilizando la función de desbloqueo () en bajo subscore, podemos implementar fácilmente este requisito:
<input type = "text" id = "search" name = "search" /> <script type = "text /javaScript"> var query = _ (function () {// operación de consulta aquí}). Debuncion (200); $ ('#Search'). Bind ('KeyPress', consulta); </script>Puede ver que nuestro código es muy conciso, y el control de estrangulamiento se ha implementado en el método Debunce (). Solo decimos que si la función de consulta no se ha llamado dentro de 200 milisegundos, ejecutaremos nuestra operación de consulta y luego vincularemos la función de consulta al evento KeyPress en el cuadro de entrada.
¿Cómo surgió la función de consulta? Cuando llamamos al método Debunce (), pasaremos una función que realiza la operación de consulta y una hora (milisegundos). El método Debunce () estrellará la función en función del tiempo que pasamos y devolverá una nueva función (es decir, la función de consulta). Podemos llamar a la función de consulta con confianza y audacia, y el método de debuncion () nos ayudará a controlarla según sea necesario.
Requisito 2: Cuando el usuario arrastre la barra de desplazamiento del navegador, llame a la interfaz del servidor para verificar si hay un nuevo contenido
Analicemos el segundo requisito. Podemos unir el método de consulta a la ventana.
¿Podemos usar el método de debuncia () anterior para realizar un control de estrangulamiento? Cuando el usuario ha terminado de arrastrar la barra de desplazamiento, ¿luego consulta un nuevo contenido? Pero esto es inconsistente con los requisitos, y los usuarios esperan ver cambios en el nuevo contenido durante el proceso de arrastre.
Así que decidimos hacer esto: cuando el usuario se arrastra, el intervalo entre cada dos consultas es no menos de 500 milisegundos, si el usuario se arrastra por 1 segundo, esto puede desencadenar 200 eventos de Onscroll, pero solo hacemos 2 consultas como máximo.
Usando el método de Throttle () en bajo subscore, también podemos implementar fácilmente este requisito:
<script type = "text/javaScript"> var query = _ (function () {// operación de consulta aquí}). Throttle (500); $ (ventana) .bind ('scroll', consulta); </script>El código sigue siendo muy conciso, porque dentro del método de Throttle (), todos los controles para los que hemos implementado ya están.
Es posible que haya encontrado que los dos métodos de debuncia () y el acelerador () son muy similares (incluido el método de llamada y el valor de retorno), pero sus funciones son diferentes.
Todos se usan para la limitación de funciones, y las funciones de control no se llaman con frecuencia, guardando recursos del cliente y del servidor.
El método DEBOUSE () se centra en el intervalo entre la ejecución de la función, es decir, el tiempo de llamada de la función dos veces no puede ser menor que el tiempo especificado.
El método de Throttle () se centra más en la frecuencia de ejecución de la función, es decir, la función solo se llamará una vez dentro de la frecuencia especificada.
8. Análisis de plantillas
Underscore proporciona una función de análisis de plantilla liviana que nos ayuda a organizar efectivamente la estructura y la lógica de la página.
Lo presentaré con un ejemplo:
< <%= item.lastName%> </span> <span> <%-item.city%> </span> </li> <%}%> </script> <script type = "text/javascript" src = "subraycore/subscore-min.js"> </script> <script type = "text/javascrip $ ('#elemento'), tpl = $ ('#tpl'). html (); // Create data, which may be the var data you get from the server = { list: [ {firstName: '<a href="#">Zhang</a>', lastName: 'San', city: 'Shanghai'}, {firstName: 'Li', lastName: 'Si', city: '<a href="#">Beijing</a>'}, {firstName: 'Wang', LastName: 'Wu', City: 'Guangzhou'}, {FirstName: 'Zhao', LastName: 'Liu', City: 'Shenzhen'}]} // analizar la plantilla, devolver el contenido analizado var html = _.template (tpl, datos); // llenar el contenido analizado al elemento de representación elemento.html (html); </script>En este ejemplo, colocamos el contenido de la plantilla en una etiqueta <script>, es posible que haya notado que el tipo de etiqueta es texto/plantilla en lugar de texto/javascript, porque no se puede ejecutar directamente como un script de JavaScript.
También le recomiendo que coloque el contenido de la plantilla en <Script> porque si los escribe en una <div> u otras etiquetas, se puede agregar al árbol DOM para analizar (incluso si oculta esta etiqueta, no se evitará).
_. La función de plantilla de plantilla solo puede analizar 3 tipos de etiquetas de plantilla (esto es mucho más simple que Smarty y JSTL):
< % %>: Se usa para contener el código JavaScript que se ejecutará cuando se rendericen los datos.
< %= %>: Utilizado para emitir datos, puede ser una variable, el atributo de un objeto o una llamada de función (para obtener el valor de retorno de la función).
< %- %>: se usa para generar datos y convertir caracteres HTML contenidos en los datos en formularios de entidad (por ejemplo, convierte las cotizaciones dobles para formar), para evitar ataques XSS.
Cuando queremos mostrar HTML en los datos como texto, a menudo usamos la etiqueta < %- %>.
Underscore también le permite modificar estas 3 formas de etiquetas. Si queremos usar { % %}, { %= %}, { %- %} como etiquetas, podemos hacerlo modificando plantillas, simplemente así:
_.templateettings = {evaluación: // {%([/s/s/s]+?)/%/}/g, interpolate: // {%= ([/s/s/s]+?)/%/}/g, escape: // {%-([/s/s]+?)%/}/g}En este ejemplo, pasamos el contenido de la plantilla y los datos para ser poblados en el método de plantilla, que se procesará en el siguiente orden:
(1) analizar el contenido de la plantilla en JavaScript ejecutable (etiquetas de plantilla de análisis)
(2) Modifique el alcance de JavaScript analizado al objeto de datos que pasamos con la declaración, lo que nos permite acceder directamente a las propiedades del objeto de datos a través de variables en la plantilla.
(3) Ejecutar JavaScript analizado (llenar los datos en la plantilla)
(4) Devuelva el resultado después de la ejecución
A menudo encontramos una situación en la que el método de plantilla se llama varias veces para hacer que los datos a la misma plantilla.
Supongamos que tenemos una lista de paginación, y cada dato en la lista se representa a través de una plantilla. Cuando el usuario ingrese a la página siguiente, obtendremos los datos de la página siguiente y volveremos a renderizar. De hecho, la plantilla es la misma cada vez que se representa, pero todos los procesos de procesamiento de la plantilla descrita ahora siempre se ejecutarán.
De hecho, el método de plantilla de subrayamiento proporciona una forma de llamar más eficiente. Modificamos las dos últimas oraciones en el código anterior a:
// analiza la plantilla, devuelve el contenido analizado var render = _.template (tpl); var html = render (datos); // llenar el contenido analizado al elemento render Element.html (html);
Encontrará una diferencia sutil: cuando llamamos al método de plantilla, solo pasamos el contenido de la plantilla, pero no los datos. En este momento, el método de plantilla analizará el contenido de la plantilla, generará el código JavaScript ejecutable analizado y devolverá una función, y el cuerpo de la función es el JavaScript analizado. Por lo tanto, cuando llamamos a esta función para representar datos, omitimos la acción de análisis de plantilla.
Debe almacenar la función devuelta (al igual que la almaceno en la variable de renderizado), y luego representar los datos llamando a la función, especialmente si la misma plantilla se puede representar varias veces. Hacerlo puede mejorar la eficiencia de la ejecución (la mejora específica debe depender de la longitud y la complejidad de su plantilla, pero de todos modos es un buen hábito).