jQuery、Angluar、Avalon对比
最近在慕课网看一些关于avalon的视频，记录下一些笔记及代码实例以便日后自己复习可以用到，另外也可以给不想花时间看视频的小伙伴提供一丝丝帮助
这里主要是做一个简单的todolist
分别用三种不同的方式实现：
1、jquery
HTML代码示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>todo list</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body> <div class="container"> <div class="row"> <div class="col-md-5"> <form action="" id="todoForm"> <label for="todoInput">将下面输入的文字放入todo list中！</label> <input type="text" id="todoInput" class="form-control" /> </form> <p id="todoCount"></p> <ol id="todoList"></ol> </div> </div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/example-jQuery.js"></script> </body> </html>
js代码示例
(function(){ var $todoForm = $('#todoForm'); var $todoInput = $('#todoInput'); var $todoList = $('#todoList'); var $todoCount = $('#todoCount'); function count(){ var len = $todoList.children().length; $todoCount.html(len > 0 ? '现有' + len + '项 todo List' : ''); } $todoForm.submit(function(e){ e.preventDefault(); var input_value = $todoInput.val(); $todoList.append('<li>' + input_value +' <a href="#" class="todoDelete">X</a></li>'); $todoInput.val(''); count(); }); $todoList.on('click','.todoDelete',function(e){ $(this).parent().remove(); count(); }); })();
2、Angular
HTML代码示例
<!DOCTYPE html> <html ng-app="todoApp"> <head> <meta charset="utf-8" /> <title>todo list</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body ng-controller="todos"> <div class="container"> <div class="row"> <div class="col-md-5"> <form ng-submit="add()"> <label for="">将下面输入的文字放入todo list中！</label> <input type="text" ng-model="txt" class="form-control" /> </form> <p ng-hide="todolist.length === 0">现有{{todolist.length}}项todo list</p> <ol> <li ng-repeat="todo in todolist track by $index"> {{todo}} <a href="javascript:void(0);" ng-click="todolist.splice($index,1)" class="todoDelete">X</a> </li> </ol> </div> </div> </div> <script type="text/javascript" src="js/angular.min.js" ></script> <script type="text/javascript" src="js/example-angular.js" ></script> </body> </html>
js代码示例
var app = angular.module('todoApp',[]); app.controller('todos',['$scope',function($scope){ $scope.todolist = []; $scope.add = function(){ $scope.todolist.push($scope.txt); $scope.txt = ''; }; }]);
3、avalon
HTML代码示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>todo list</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body> <div class="container"> <div class="row"> <div class="col-md-5" ms-controller="todos"> <form ms-on-submit="add"> <div class="form-group"> <label for="todoInput">将下面输入的文字放入todo list中！</label> <input type="text" ms-duplex='txt' class="form-control" autocomplete="off"/> </div> </form> <p ms-if="todolist.size()>0">现有{{todolist.size()}}项todo list</p> <ol> <li ms-repeat="todolist"> {{el}} <a href="javascript:void(0);" ms-click="$remove" class="todoDelete"></a> </li> </ol> </div> </div> </div> <script type="text/javascript" src="js/avalon.js"></script> <script type="text/javascript" src="js/example-avalon.js"></script> </body> </html>
js代码示例
var vm = avalon.define({ $id: "todos", txt: '', todolist:[], add:function(e){ !!vm.txt.trim() && vm.todolist.push(vm.txt); vm.txt = ''; } });
从以上三种方法中我们可以总结出avalon的一些优势
Avalon相对jquery的优势
1、代码逻辑清晰，编写起来更优雅和清爽，代码量也少
2、不在纠结类似于jQuery的DOM查找、DOM操作以及复杂的事件绑定和处理
Avalon相对Angular的优势
1、Angular学习成本高
2、Angular使用依赖注入的方式，对压缩不友好
3、Avalon提供了更简单方便的语法
Avalon框架的特性
1、体积小：无任何依赖，体积小，自带加载器。压缩后不到50k；能将jQuery写的业务代码减少50%体积
2、编程体验好：爽快的编程体验，不再纠结于DOM操作！
3、兼容适配性好：符合国情，兼容IE6与移动端！
4、自动化测试完善：独有的avalon.test模块，专门用于avalon的单元测试
5、UI库丰富：拥有全职的团队帮它打造UI库，功能一应俱全
