1. Start from scratch
Event binding is the second lesson for newcomers to web development. Learning event binding represents a new course in which you will challenge interaction.
Let's first look at how native html + JavaScript does it:
Native way:
<div>
<button onclick="greet()">Greet</button>
</div>
<script>
function greet(){
alert("html and javascript");
}
</script>
This is a very simple example, but this example is a web page, so it cannot be packaged or modularized.
The lack of modularity is the pain point of web pages. In the early days, w3c produced the webcomponent standard, but it was abolished later.
So there are three major frameworks for the people, namely Angular, React, and Vue. These three frameworks can be modularized. Maybe you have also heard of BEM's gratitude. You can download it online. At the same time, they also provide data binding, MVVM and other concepts (this article will not introduce it, too tired to write).
In addition, I want to introduce a new development tool. You can understand it as the WEB modular tool airoot-uisys. The v1 version has just been released this year. It is really easy to use. It has an independent analysis engine and is very fast in real-time compilation.
OK, then let's look at the event binding methods of these few.
1. Angular event binding
Angular knows that people understand what's going on, and it is more academic, and you can see that the idea of event controllers is integrated into it.
<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. React event binding
React is relatively close to native. If the js ability is strong, there is a feeling of using ThinkPad (with Little Red Riding Hood, no 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. Vue event binding
The method of binding Vue objects through v-on or @click, I think it should be regarded as a reference to React, of course, vue itself is an idea from 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. UISYS event binding
uisys is the most direct, almost exactly the same as the original one, and can be modularized and referenced.
Airoot uisys is a ui quick modular tool launched by airoot.cn. It feels very powerful, but the ecosystem is not as big as it is. After all, people are sponsored by big companies.
<div>
<button onclick="@this.greet()">Greet</button>
</div>
<script>
func greet(){
alert("airoot uisys");
}
</script>
uisys is more flexible to use, you can also write like this:
<div>
<button id="greet">Greet</button>
</div>
<script>
greet.addEventListener("click",func(){
alert("airoot uisys");
});
</script>
You can also in the original point:
<div>
<button id="greet">Greet</button>
</div>
<script>
//注意通过getElementById 获取，需要在greet前面加个$
document.getElementById("$greet").addEventListener("click",func(){
alert("airoot uisys");
});
</script>
Second, a small test
Here we use Vue and Uisys to sit down and demonstrate. Since these frameworks are considered for actual business, let's try.
Example: Speaking of writing a module, your module has a variable flag. When the flag is set to true from the outside world , the module can be clicked, otherwise it cannot be clicked.
1. View
In fact, there are many ways to write this, we are like using v-if and v-else to show you.
In order to facilitate your verification, I use the setTimeout method and change the flag to false after 5 seconds .
<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 is very straightforward, just pick up the gun, it’s great.
In order to facilitate your verification, I use the setTimeout method and change the flag to false after 5 seconds .
<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>
Three, summary
The three major web frameworks and airoot uisys have been introduced to everyone. The event binding is great. In addition to angluar, some small partners will wonder why angluar is so complicated. In fact, Angluar has considered a lot for large-scale enterprise projects at the beginning of its design, and its components are the most mature, React and Vue after all It’s not as complicated as google, so when Angluar started learning, it felt a little "feeling like taking off your pants and farting", but as you learn more deeply, you will understand the author’s dilemma.
But it is not to say that React and Vue are inferior to angluar. As the saying goes, "A journey of thousands of miles begins with a step", and the communities of React and Vue are getting bigger and bigger, and the components imitating angluar and adobe flex are almost the same, so they are hard to distinguish.
Finally, evaluate the fresh airoot uisys. To be honest, this guy is completely compatible with the three major web frameworks. He wrote the entire html parsing, and then generated html and js codes through its own parsing engine, which was completely established browsing The bottom layer of the device, so it must be more efficient in modularization. If a partner who has known containers knows the difference between Docker and VMware, uisys is the principle of Docker, and the three frameworks are the principle of VMWare. So uisys is really hungry, but now companies choose platforms to look at the ecosystem, look at the components, simply don’t want to write more, so uisys is inferior, but uisys now wants to push the TMax framework, it is said that various JS plug-ins can be changed into HTML, all kinds of "attracting stars", wait and see.
OK, learning the front-end is actually quite challenging. Learning well is a creative experience. If you don't learn well, it will become a printer (the interface is the same, and the plug-in will be designed according to the design). I hope everyone will become a great Full Stack Developer . Thank you for watching.