一、从零开始

事件绑定是web开发新手的第二课，学会事件绑定代表你将挑战交互的新课程。
我们先来看下原生html + JavaScript 如何做的：

原生方式：

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

这是一个非常简单的例子，但是这个例子是个网页，因此不能封装，也不能模块化。
没有模块化是网页的痛点，早期 w3c 出了webcomponent的标准，但是后期废除了。
于是民间出了 三大框架，分别是 Angular、React、Vue。这三大框架可以实现模块化，可能你也听说过BEM的感念，你都可以上网科普下。同时，他们还提供了数据绑定的、MVVM等概念（本文就不介绍了，写太多累）。
另外要介绍的是一个新开发工具，你可以理解为WEB模块化工具 airoot-uisys，今年刚出 v1 版本，确实很好用，有独立的解析引擎，即时编译非常快。
OK，那么我们看下这几位的事件绑定方式。

1. Angular 事件绑定

angular 懂得人明白怎么回事，学术性比较强，可以看到事件控制器的思想融入到里面。

<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 事件绑定

React 还算是比较接近原生的，如果js能力比较强，有种使用ThinkPad的感觉（有小红帽，不用鼠标）。

<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 事件绑定

通过 v-on 或者 @click 来绑定Vue对象的方法，我认为应该算是借鉴了React，当然vue本身是从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 事件绑定

uisys 最为直接，和原生就几乎一模一样，而且还可以模块化，被引用。
airoot uisys 是 airoot.cn 推出的ui 快速模块化工具，自感觉非常强大，但是生态圈没上面大，毕竟人家都是大公司有赞助的。

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

uisys 用起来比较灵活，还可以这样写：

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

还可以在原生点：

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

二、小试牛刀

这里我们用 Vue 和 Uisys 来坐下演示 ，由于这些框架都是考虑的实际业务的，所以我们来试试。
举例：说编写一个模块，你模块有个变量 flag ，当外界给 flag 为 true 的时候模块可以被点击，否则不能被点击。

1. Vue

其实这个有多种写法，我们这里就像用用 v-if 和 v-else 给大家看看。
为了方便大家验证，我用 setTimeout 方法，在5秒后改变 flag 为 false.

<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 很直接，提枪就上，很棒。
为了方便大家验证，我用 setTimeout 方法，在5秒后改变 flag 为 false.

<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>

三、总结

web三大框架和 airoot uisys 都给大家介绍了一番。在事件绑定上都很棒，除了angluar 有些小伙伴会疑问，angluar为啥那么复杂，其实 angluar 设计之初就为大型企业项目考虑了很多，而且他的组件是最成熟的，React 和 Vue 毕竟不是做成google 那么复杂，所以angluar开始学的时候，感觉有点“脱裤子放屁的感觉”，但是你学深入了，你就明白作者的困境了。

但是也不是说React 和 Vue 不如 angluar，俗话说，“万里之行始于跬步”，React 和 Vue 的社区也越来越大，模仿 angluar 和 adobe flex 的组件也差不多了，所以难分伯仲。

最后评价小清新 airoot uisys， 说实话这家伙完全和WEB三大框架两种打法，他是把整个html的解析写了一遍，然后通过它自己的解析引擎生成html，js代码，完全建立的浏览器底层，所以用它模块化效率肯定更高，如果了解过容器的伙伴知道 Docker 和 VMware 的区别，uisys 就是 Docker的原理，三大框架就是VMWare的原理。所以 uisys 真的很吊了，不过现在企业选择平台都看生态圈，看组件，简单说就是不想多写，所以 uisys 就逊色了，不过uisys 现在要推TMax框架，传说可以各种JS插件变为HTML，各种“吸星大法”，拭目以待吧。

OK ，学前端其实挺挑战的，学好是一个创造体验，学不好就会变为打印机（做的界面都一样，就会按着设计垒插件）。希望大家都成为伟大 Full Stack Developer ，谢谢您的观看。