Hablemos de HTML

escrito delante

Recientemente leí algunos artículos sobre htmx, eché un vistazo al sitio web oficial y fui a Youtube para ver su demostración en la conferencia de prensa de htmx. Estas son algunas de mis opiniones sobre esta llamada nueva tecnología.

cual es su fuente

En primer lugar, déjame decirte que, aunque es un nuevo tipo de tecnología, en realidad es un poco arroz frito. En realidad es una reescritura de [intercoolerjs] de jQuery (https://intercoolerjs.org/reference.html, es decir, en el pasado, intercoolerjs pudo lograr un efecto similar a htmx, es decir, no necesita vincular ningún evento, solicita directamente una dirección de la etiqueta y muestra directamente la información devuelta en la página correspondiente. . Estas funciones ya existen. También hay muchos artículos sobre intercoolerjs en Internet. Si estás interesado, puedes comprobarlo tú mismo y citar una DEMO oficial.

<!--
  This is the initial UI (which would normally be generated by the userDisplayTemplate below of course)
  Note that the button targets the outer div which encloses the entire contact UI because that's what we
  want to replace when the button is clicked.
  -->
  <div id="contact-div">
    <div><strong>First Name</strong>: Joe</div>
    <div><strong>Last Name</strong>: Smith</div>
    <div><strong>Email</strong>: joesmith@example.com</div>
    <button ic-target="#contact-div" ic-get-from="/contact/1/edit" class="btn btn-default">
      Click To Edit
    </button>
  </div>

  <script>

    //========================================================================
    // Mock Server-Side HTTP End Points
    //========================================================================
    $.mockjax({
     
     
      url: "/contact/1/edit",
      response: function (settings) {
     
     
        var mockUser = dataStore.findUser("1");
        this.responseText = userFormTemplate(mockUser);
      }
    });

    $.mockjax({
     
     
      url: "/contact/1",
      response: function (settings) {
     
     
        var mockUser = dataStore.findUser("1");
        var params = parseParams(settings.data);
        if (params['_method']== 'PUT') {
     
     
          mockUser.firstName = params['firstName'];
          mockUser.lastName = params['lastName'];
          mockUser.email = params['email'];
        }
        this.responseText = userDisplayTemplate(mockUser);
      }
    });

    //========================================================================
    // Mock Server-Side Templates
    //========================================================================
    function userFormTemplate(mockUser) {
     
     
      // Pretty simple bootstrap form, but note that the form uses an ic-put-to and the cancel button uses
      // an ic-get-from rather than the usual HTML attributes
      return '\
<form ic-put-to="/contact/1" ic-target="#contact-div"> \
  <div class="form-group"> \
    <label>First Name</label> \
    <input type="text" class="form-control" name="firstName" value="' + mockUser.firstName + '"> \
  </div> \
  <div class="form-group"> \
    <label>Last Name</label> \
    <input type="text" class="form-control" name="lastName" value="' + mockUser.lastName + '"> \
  </div> \
  <div class="form-group"> \
    <label>Email address</label> \
    <input type="email" class="form-control" name="email" value="' + mockUser.email + '"> \
  </div> \
  <button class="btn btn-default">Submit</button> \
  <button ic-get-from="/contact/1" ic-target="#contact-div" class="btn btn-danger">Cancel</button> \
</form>';
    }

    function userDisplayTemplate(mockUser) {
     
     
      return '\
<div><strong>First Name</strong>: ' + mockUser.firstName + '</div> \
<div><strong>Last Name</strong>: ' + mockUser.lastName + '</div> \
<div><strong>Email</strong>: ' + mockUser.email + '</div> \
<button ic-target="#contact-div" ic-get-from="/contact/1/edit" class="btn btn-default"> \
  Click To Edit \
</button>';
    }

    //========================================================================
    // Mock Data Store
    //========================================================================
    var dataStore = (function() {
     
     
      var mockUser = {
     
     
        "firstName": "Joe",
        "lastName": "Smith",
        "email": "[email protected]"
      };
      return {
     
     
        findUser : function(id) {
     
     
          return mockUser
        }
      }
    })()
  </script>

Qué puede hacer él

Dicho esto, no hay una demostración formal de lo que puede hacer. Lo que puede hacer es escribir directamente algunas cosas que js puede hacer en las etiquetas html. Su propósito es de-js, escribir la menor cantidad de escritura posible o ninguna. js, porque sabemos que el navegador en realidad solo entiende el código html, y tiene una ventaja inherente al compilar código html, es decir, si solo hay código html en nuestro código, la velocidad de renderizado es teóricamente muy rápida, pero Depende del servidor, es decir, el código js anterior a nuestro front end no ha desaparecido, sino que se ha ejecutado en el lado del servidor, también se puede ver en el código anterior, entonces lo que puede hacer es enviar lo que solicitud en qué etiqueta, solicitud. Él especificará dónde colocar el contenido devuelto y, al mismo tiempo, cómo diseñar una interacción y retroalimentación con el usuario en el medio, él hará esto, ¡y solo esto!

¿Manifestación?

También probé su función yo mismo y es relativamente simple de usar. Puede importar directamente la instalación de CDN o npm i de la misma manera que jQuery, luego podemos usar su sintaxis directamente en html.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 htmx 的用法</title>
		<script src="./js/[email protected]" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>
	</head>
	<body>
		<script type="text/javascript">
			// const baseGetRequest = 'http://jsonplaceholder.typicode.com/users'
			// window.baseGet = baseGetRequest
		</script>
		<!-- 测试基础的 get 请求 -->
		<div hx-get="http://jsonplaceholder.typicode.com/users">
			Put To Messages
		</div>
		<!-- 测试基础的 post 请求  并将请求的结果给到另一个 span 的元素上 -->
		<div hx-post="http://jsonplaceholder.typicode.com/posts/1/comments" hx-target='#aimDiv'>测试一条数据</div>
		<span id="aimDiv"></span>

		<!-- 模拟一个对话框的请求 -->
		<button hx-get="http://jsonplaceholder.typicode.com/users" hx-confirm="Are you sure you wish to delete your account?">
			Delete My Account
		</button>

		<!-- 测试一个 boost 的请求 -->
		<div hx-boost="true">
			<a href="http://jsonplaceholder.typicode.com/users">Blog</a>
		</div>

		<!-- 测试一个表单 -->
		<div id="search-results"></div>
		<form action="/search" method="POST">
			<input class="form-control" type="search" name="search" placeholder="Begin typing to search users..." hx-post="http://jsonplaceholder.typicode.com/posts/1/comments" hx-trigger="keyup changed delay:500ms, search" hx-target="#search-results" hx-indicator=".htmx-indicator">
		</form>

		<!-- 测试 table -->
		<input class="form-control" type="search" name="search" placeholder="Begin Typing To Search Users..." hx-post="http://jsonplaceholder.typicode.com/posts/1/comments" hx-trigger="keyup changed delay:500ms, search" hx-target="#search-results" hx-indicator=".htmx-indicator">
		<table class="table">
			<thead>
				<tr>
					<th>First Name</th>
					<th>Last Name</th>
					<th>Email</th>
				</tr>
			</thead>
			<tbody id="search-results">
			</tbody>
		</table>
	</body>
</html>

Si no comprende las etiquetas que contiene, puede echar un vistazo a la introducción de su sitio web oficial. Aunque el sitio web oficial htmx está en inglés, la escritura sigue siendo muy clara y, en general, comprensible.

El resultado de ejecutar el código anterior es el siguiente:

inserte la descripción de la imagen aquí

Por supuesto, no necesito mirar el estilo. Simplemente lo probé y descubrí que cuando hice clic en enviar mensaje, el lado derecho envió la solicitud directamente. Después de un tiempo, devolvió directamente el contenido correspondiente y lo representó. para mí al mismo tiempo, pero mi formato de datos es json, por lo que no es razonable, puedes ignorarlo, porque acabo de demostrar que puede volver a renderizarse normalmente.

inserte la descripción de la imagen aquí

¿Qué comodidad ofrece?

La solicitud no requiere funciones contenedoras.
La aceleración antivibración se puede configurar directamente a través de propiedades
El método de solicitud se configura directamente a través de atributos.
Se puede especificar la representación de referencia de retorno a un elemento
Hay muchas formas de especificar (selector CSS, selector de elementos, etc.)
El coste de la sustitución parcial del contenido es muy bajo.
Muy poco código de interfaz
El renderizado del navegador es rápido

cuales son sus desventajas

El tamaño del proyecto no debe ser demasiado grande, de modo que la presión sobre el servidor sea demasiado grande.
Las operaciones demasiado complejas no son factibles; después de todo, todas están configuradas y la configuración significa que el grado de satisfacción de los requisitos personalizados no será demasiado alto.
Demasiada dependencia del servidor, el front-end es solo para configuración
La dependencia de Django también es relativamente grande, porque se usa con él (aquí también le pregunté a mi amigo quién usa Django a mi alrededor, y su respuesta es: jango tiene herramientas de desarrollo web integradas y puede usar {} para directamente obtener los atributos del objeto de respuesta. Todavía era muy poderoso en la era en la que los extremos frontal y posterior no estaban separados. No funciona ahora)

Nivel de recomendación personal, quiero decir algunas palabras.

Se puede usar y aprender, pero debido a que no hay muchos escenarios aplicables, basta con comprenderlo y se puede usar cuando haya un negocio correspondiente. Personalmente, sigo recomendando el uso de marcos relativamente completos como vue y reaccionar. No elige escenarios y es competente para casi todas las aplicaciones web. El desarrollo de la tecnología finalmente ha llegado a una etapa en la que el frente y el reverso están separados. "Y ahora quiero volver. No es imposible, no es muy recomendable. No repetiré los beneficios de separar el front-end y el back-end aquí, y cualquiera que lo haya desarrollado durante varios años puede entenderlo.

Aquí hay una palabra de queja. Es muy doloroso hacer desarrollo en China, porque la última tecnología generalmente se pasa del extranjero. Además, los primeros documentos técnicos están todos en inglés y hay muy pocos chinos, incluso después de la traducción. Inexacto, utilizamos documentos inexactos y utilizamos idiomas desarrollados por extranjeros. Ya es genial que se pueda utilizar muy bien, pero eso no significa que sea correcto seguir la tendencia sin pensar. Por ejemplo este htmx, sabemos claramente que es cosa de comida refractaria, pero todavía hay mucha gente que quiere promocionarlo sin pensar, solo hablando de cosas buenas, no hablando de cosas malas, parece que mientras Si sigues los pasos de países extranjeros, debe ser la última tecnología. Aquí estoy. No estoy a favor de ello. Es bueno explorar la tecnología, pero es bueno reinventar la rueda. La rueda sale con un nombre y aprende de acuerdo con cosas nuevas. No se me ocurre ninguna buena razón excepto el aumento en los costos de aprendizaje. Espero que esta situación sea menor en el futuro. Ya sea que suceda o no, no tengo ningún rencor hacia htmx. Creo que efectivamente ha resuelto algunos escenarios de aplicación. También dijeron en la conferencia de prensa que si su aplicación necesita este tipo de escenario, le recomiendo que lo use, pero es complicado. No recomendamos algunos de ellos. Puede continuar Usar la pila de tecnología que crees que es buena, pero se convertirá en una gran tecnología nueva cuando se extienda a China. ¡No me puedo quejar de eso! Pero el aprendizaje en sí es correcto, porque sólo si comprendes todas las diferentes tecnologías, es más probable que las domines. La amplitud y profundidad de la tecnología son muy importantes, y la profundidad ayuda a investigar nuevas tecnologías. Cosas, la amplitud te ayuda Identifique las limitaciones y aplicabilidad de la tecnología en sí, hay demasiadas tonterías y está cansado de verlo, se acabó.

escrito en la parte de atrás

Después de leer este artículo, es posible que también sienta que este artículo en realidad no tiene demasiadas demostraciones de código, sino que solo habla sobre su uso básico y escenarios aplicables, porque creo que esto por sí solo resuelve algunos puntos débiles del front-end, pero no puede resolver el problema real. En realidad, resuelve algunas aplicaciones pequeñas y hermosas sin usar marcos relativamente pesados como vue o reaccionar. Después de todo, todavía requiere un poco de nivel técnico para configurar un conjunto de estantes de proyectos front-end, por lo que aquí htmx puede ser útil. Por supuesto, su backend es suficiente para permitirle devolver el código html correspondiente en la etapa inicial.