Comparación del método de enlace de eventos Angular vs React vs Vue vs UISYS (los principiantes deben ver)

1. Empiece de cero

La vinculación de eventos es la segunda lección para los principiantes en el desarrollo web. La vinculación de eventos de aprendizaje representa un nuevo curso en el que desafiará la interacción.
Primero veamos cómo lo hace el HTML nativo + JavaScript:

Manera nativa:

<div>
  <button onclick="greet()">Greet</button>
</div>
<script>
	function greet(){
     
     
		alert("html and javascript");
 	}
</script>

Este es un ejemplo muy simple, pero este ejemplo es una página web, por lo que no se puede empaquetar ni modular.
La falta de modularidad es el problema de las páginas web.A principios de w3c, se lanzó el estándar de componentes web, pero se abolió en el período posterior.
Entonces, hay tres marcos principales para las personas, a saber, Angular, React y Vue. Estos tres marcos se pueden modularizar. Quizás también haya oído hablar de la gratitud de BEM. Puede descargarlo en línea. Al mismo tiempo, también proporcionan enlace de datos, MVVM y otros conceptos (este artículo no lo presentará, demasiado cansado para escribir).
Además, quiero presentar una nueva herramienta de desarrollo. Puedes entenderla como la herramienta modular WEB airoot-uisys. La versión v1 acaba de ser lanzada este año. Es realmente fácil de usar. Tiene un motor de análisis independiente y es muy rápida en la compilación en tiempo real.
Bien, entonces veamos los métodos de enlace de eventos de estos pocos.

1. Enlace de eventos angular

Angular sabe que la gente entiende lo que está pasando, y es más académico, y puede ver que la idea de los controladores de eventos está integrada en él.

<div ng-app="myApp" ng-controller="myctrl">
	<button ng-click="greet()">Greet</button>
</div>
<script>
	var app = angular.module('myApp', []);
	app.controller('myctrl', function($scope) {
     
     
	    $scope.greet = function() {
     
     
	       alert("Angular");
	    };
	});
</script>

2. Reaccionar enlace de eventos

React es relativamente parecido al nativo Si la habilidad de js es relativamente fuerte, existe la sensación de usar ThinkPad (con Caperucita Roja, sin mouse).

<div id="example"></div>
<script type="text/babel">
function App() {
     
     
  function greet(e) {
     
     
  	e.preventDefault();
    alert('React');
  }
  return (
    <button  href="#" onClick={
     
     greet}>Greet</button>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('example')
);
</script>

3. Enlace de eventos de Vue

El método de vincular objetos Vue a través de v-on o @click, creo que debería considerarse como una referencia a React, por supuesto, vue en sí es una idea de angluar.

<div id="app">
  <button v-on:click="greet">Greet</button>
</div>
<script>
	var vue = new Vue({
     
     
  		el: '#app',
  		data: {
     
     
    		name: 'Vue.js'
  		},
  		methods: {
     
     
	    	greet: function (event) {
     
     
		      	alert("Vue.js");
	    	}
  		}
	});
</script>

4. Enlace de eventos UISYS

uisys es el más directo, casi exactamente igual que el nativo, y se puede modularizar y referenciar.
Airoot uisys es una herramienta modular rápida de interfaz de usuario lanzada por airoot.cn. Se siente muy poderosa, pero el ecosistema no es tan grande como lo es. Después de todo, las personas están patrocinadas por grandes empresas.

<div>
  <button onclick="@this.greet()">Greet</button>
</div>
<script>
	func greet(){
     
     
		alert("airoot uisys");
 	}
</script>

uisys es más flexible de usar, también puede escribir así:

<div>
  <button id="greet">Greet</button>
</div>
<script>
	greet.addEventListener("click",func(){
     
     
		alert("airoot uisys");
 	});
</script>

También puede en el punto original:

<div>
  <button id="greet">Greet</button>
</div>
<script>
	//注意通过getElementById 获取，需要在greet前面加个$
	document.getElementById("$greet").addEventListener("click",func(){
     
     
		alert("airoot uisys");
 	});
</script>

Segundo, una pequeña prueba

Aquí usamos Vue y Uisys para sentarnos y demostrar. Dado que estos marcos se consideran para negocios reales, intentemos.
Ejemplo: Hablando de escribir un módulo, su módulo tiene un indicador de variable. Cuando el indicador se establece en verdadero desde el mundo exterior , se puede hacer clic en el módulo; de lo contrario, no se puede hacer clic en él.

1. Ver

De hecho, hay muchas formas de escribir esto, somos como usar v-if y v-else para mostrárselo.
Para facilitar su verificación, utilizo el método setTimeout y cambio la bandera a falsa después de 5 segundos .

<div id="app">
	<div v-if="flag" @click="greet()">
	 添加产品
	</div>
	<div v-else>
	 添加产品
	</div>
</div>
<script>
	var vue = new Vue({
     
     
  		el: '#app',
  		data: {
     
     
    		flag: true
  		},
  		methods: {
     
     
	    	greet: function (event) {
     
     
		      	alert("Vue.js");
	    	}
  		}
	});
	//开始可以点击，5秒后点击效果就失效了。
	setTimeout(function(){
     
     
		vue.flag = false;
	},5000);
</script>

2. uisys

uisys es muy sencillo, solo toma el arma, es genial.
Para facilitar su verificación, utilizo el método setTimeout y cambio la bandera a falsa después de 5 segundos .

<div id="app">
	添加产品
</div>
<script>
	func greet(){
     
     
		alert("airoot uisys");
	}
	
	set flag(value){
     
     
		app.onclick = value ? greet : null;//三目运算符
	}
	
	//初始化函數
	func init(){
     
     
		flag = true;
		//开始可以点击，5秒后点击效果就失效了。
		setTimeout(function(){
     
     
			flag = false;
		},5000);
	}
</script>

Tres, resumen

Los tres principales frameworks web y airoot uisys se han presentado a todos. Es excelente en la vinculación de eventos. A excepción de Angluar, algunos socios pequeños se preguntarán por qué Angluar es tan complicado. De hecho, Angluar ha considerado mucho para proyectos empresariales a gran escala al comienzo de su diseño, y sus componentes son los más maduros. Después de todo, React y Vue No es tan complicado como Google, por lo que cuando Angluar comenzó a aprender, sentí un poco de "ganas de quitarse los pantalones y tirarse un pedo", pero a medida que aprenda más profundamente, comprenderá el dilema del autor.

Pero no quiere decir que React y Vue sean inferiores a angluar. Como dice el refrán, "Un viaje de miles de millas comienza con un paso", y las comunidades de React y Vue son cada vez más grandes, y los componentes que imitan angluar y adobe flex son casi los mismos, por lo que son difíciles de distinguir.

Finalmente, evalúe los uisys de fresh airoot. Para ser honesto, este tipo es completamente compatible con los tres marcos web principales. Escribió todo el análisis html y luego generó código html, js a través de su propio motor de análisis y una navegación completamente establecida. La capa inferior del dispositivo, por lo que la eficiencia de modularización con él es definitivamente mayor. Si los socios que han conocido el contenedor conocen la diferencia entre Docker y VMware, uisys es el principio de Docker, y los tres marcos son el principio de VMWare. Así que uisys está realmente hambriento, pero ahora las empresas eligen plataformas para observar el ecosistema, mirar los componentes, simplemente no quieren escribir más, por lo que uisys es inferior, pero uisys ahora quiere impulsar el marco TMax, se dice que varios complementos JS se pueden convertir en HTML, todo tipo de "estrellas que atraen", espera y verás.

De acuerdo, aprender el front-end es en realidad bastante desafiante. Aprender bien es una experiencia creativa. Si no aprendes bien, se convertirá en una impresora (la interfaz es la misma y el complemento se diseñará de acuerdo con el diseño). Espero que todos se conviertan en un gran desarrollador Full Stack . Gracias por mirar.