最近在慕课网看一些关于avalon的视频，记录下一些笔记及代码实例以便日后自己复习可以用到，另外也可以给不想花时间看视频的小伙伴提供一丝丝帮助

这里主要是做一个简单的todolist

分别用三种不同的方式实现：

1、jquery

HTML代码示例

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>todo list</title>
  6.         <link rel="stylesheet" href="css/bootstrap.min.css" />
  7.     </head>
  8.     <body>
  9.         <div class="container">
  10.             <div class="row">
  11.                 <div class="col-md-5">
  12.                     <form action="" id="todoForm">
  13.                         <label for="todoInput">将下面输入的文字放入todo list中！</label>
  14.                         <input type="text" id="todoInput" class="form-control" />
  15.                     </form>
  16.                     <p id="todoCount"></p>
  17.                     <ol id="todoList"></ol>
  18.                 </div>
  19.             </div>
  20.         </div>
  21.         <script type="text/javascript" src="js/jquery.min.js"></script>
  22.         <script type="text/javascript" src="js/example-jQuery.js"></script>
  23.     </body>
  24. </html>

js代码示例

  1. (function(){
  2.     var $todoForm = $('#todoForm');
  3.     var $todoInput = $('#todoInput');
  4.     var $todoList = $('#todoList');
  5.     var $todoCount = $('#todoCount');
  6.  
  7.     function count(){
  8.         var len = $todoList.children().length;
  9.         $todoCount.html(len > 0 ? '现有' + len + '项 todo List' : '');
  10.     }
  11.  
  12.     $todoForm.submit(function(e){
  13.         e.preventDefault();
  14.         var input_value = $todoInput.val();
  15.         $todoList.append('<li>' + input_value +'&nbsp;<a href="#" class="todoDelete">X</a></li>');
  16.         $todoInput.val('');
  17.         count();
  18.     });
  19.  
  20.     $todoList.on('click','.todoDelete',function(e){
  21.         $(this).parent().remove();
  22.         count();
  23.     });
  24. })();

2、Angular

HTML代码示例

  1. <!DOCTYPE html>
  2. <html ng-app="todoApp">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>todo list</title>
  6.         <link rel="stylesheet" href="css/bootstrap.min.css" />
  7.     </head>
  8.     <body ng-controller="todos">
  9.         <div class="container">
  10.             <div class="row">
  11.                 <div class="col-md-5">
  12.                     <form ng-submit="add()">
  13.                         <label for="">将下面输入的文字放入todo list中！</label>
  14.                         <input type="text" ng-model="txt" class="form-control" />
  15.                     </form>
  16.                     <p ng-hide="todolist.length === 0">现有{{todolist.length}}项todo list</p>
  17.                     <ol>
  18.                         <li ng-repeat="todo in todolist track by $index">
  19.                             {{todo}}
  20.                             <a href="javascript:void(0);" ng-click="todolist.splice($index,1)" class="todoDelete">X</a>
  21.                         </li>
  22.                     </ol>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.         <script type="text/javascript" src="js/angular.min.js" ></script>
  27.         <script type="text/javascript" src="js/example-angular.js" ></script>
  28.     </body>
  29. </html>

js代码示例

  1. var app = angular.module('todoApp',[]);
  2. app.controller('todos',['$scope',function($scope){
  3.     $scope.todolist = [];
  4.     $scope.add = function(){
  5.         $scope.todolist.push($scope.txt);
  6.         $scope.txt = '';
  7.     };
  8. }]);

3、avalon

HTML代码示例

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>todo list</title>
  6.         <link rel="stylesheet" href="css/bootstrap.min.css" />
  7.     </head>
  8.     <body>
  9.         <div class="container">
  10.             <div class="row">
  11.                 <div class="col-md-5" ms-controller="todos">
  12.                     <form ms-on-submit="add">
  13.                         <div class="form-group">
  14.                             <label for="todoInput">将下面输入的文字放入todo list中！</label>
  15.                             <input type="text" ms-duplex='txt' class="form-control" autocomplete="off"/>
  16.                         </div>
  17.                     </form>
  18.                     <p ms-if="todolist.size()>0">现有{{todolist.size()}}项todo list</p>
  19.                     <ol>
  20.                         <li ms-repeat="todolist">
  21.                             {{el}}
  22.                             <a href="javascript:void(0);" ms-click="$remove" class="todoDelete"></a>
  23.                         </li>
  24.                     </ol>
  25.                 </div>
  26.             </div>
  27.         </div>
  28.         <script type="text/javascript" src="js/avalon.js"></script>
  29.         <script type="text/javascript" src="js/example-avalon.js"></script>
  30.     </body>
  31. </html>

js代码示例

  1. var vm = avalon.define({
  2.     $id: "todos",
  3.     txt: '',
  4.     todolist:[],
  5.     add:function(e){
  6.         !!vm.txt.trim() && vm.todolist.push(vm.txt);
  7.         vm.txt = '';
  8.     }
  9. });

从以上三种方法中我们可以总结出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库，功能一应俱全

jQuery、Angluar、Avalon对比的更多相关文章

  1. js与jQuery实现方式对比汇总

      CreateTime--2016年12月16日09:11:23Author:Marydonjs与jQuery实现方式对比汇总 <div id="ListContainer" ...

  2. php开发面试题---jquery和vue对比（整理）

    php开发面试题---jquery和vue对比(整理) 一.总结 一句话总结: jquery的本质是更方便的选取和操作DOM对象,vue的本质是数据和页面分离 反思的回顾非常有用,因为决定了我的方向和 ...

  3. TwentyTwenty – 使用 jQuery 实现图片对比功能

    这是一款非常棒的图片对比工具,能够方便的应用到你的网站中.其基本思路是把两张图片层叠在一起,当你拖动滑竿的时候,利用 CSS clip 裁剪图片,进行形成视觉对比效果. 您可能感兴趣的相关文章 Met ...

  4. jQuery coveringBad 效果对比

    Covering-Bad 是一个可拉动大小的元素,覆盖在原有的元素上面,从而两者进行对比. 在线实例 实例演示1    实例演示2 使用方法 <div class="covered&q ...

  5. bootstrap和jquery mobile的对比

    最近一直在研究bootstrap这东西,确实是个好的框架,但是诸多优势背后也隐藏着一些不好的地方,对此,我把它和另一套响应式框架jquery mobile做了一下对比,我的总结如下:    1.boo ...

  6. jquery和vue对比

    1.jquery介绍:想必大家都用过jquery吧,这个曾经也是现在依然最流行的web前端js库,可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替,随着浏览器厂商对HTML5规范统一遵 ...

  7. webpack 集成 jQuery 和 Avalon

    webpack 系列 三:webpack 如何集成第三方js库 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webp ...

  8. Jquery与mootools对比

    换了新公司以后就很少使用原生Js来实现界面交互了,而是更多的依赖Jquery. 1.Jquery优点: 良好的一致性$().().xxxxx与强大的DOM api组件可以让一个js菜鸟一周之类立马开发 ...

  9. js与jquery基础知识对比（一）---2017-05-06

    用表格做的,想要对比的内容一目了然,红色部分为重点   js jquery 取元素 id: document.getElementById("aa"); 取到的是dom对象 cla ...

随机推荐

  1. Linux大文件快速处理小方法

    背景 工作中使用MapReduce任务导出一批含有路径的文件,共计行数300W+,需要检测文件是否在对应的服务器中存在,而文件所在的服务器并非hadoop集群的服务器,因此打算采用bash脚本进行.具 ...

  2. 设置windows 10 wifi

    1.cmd 管理员 2.执行:netsh wlan set hostednetwork mode=allow ssid=test key=123456789 3.执行:netsh wlan start ...

  3. D5上

    好慌啊 0分?? T1 感觉是组合数,不知道对不对. #include<iostream> #include<cstring> #include<cstdio> # ...

  4. Oracle错误——ORA-03113:通信通道的文件结尾

    请参考:http://blog.csdn.net/zwk626542417/article/details/39667999 今天跟往常一样,登陆PL/SQL,确登陆失败,出现一个错误“ORA-010 ...

  5. Java中的阻塞队列-ArrayBlockingQueue（一）

    最近在看一些java基础的东西,看到了队列这章,打算对复习的一些知识点做一个笔记,也算是对自己思路的一个整理,本章先聊聊java中的阻塞队列 参考文章: http://ifeve.com/java-b ...

  6. 手把手教你用android studio创建第一个安卓程序加载html5页面（二）

    经过上一篇,我们已经可以打开html页面了,但是有很多细节方面的内容我们还需要调整. 打开链接的问题 细心的网友可能已经发现,打开百度页面后,点击顶部的链接,会在手机的浏览器中打开相应的页面,这显然不 ...

  7. (C# 基础) 接口

    接口是表示一组函数成员,而不实现成员的引用类型.类和结构可以实现接口. 例如BCL声明了一个叫做IComparable的接口,包含了一个CompareTo方法, 但没有实现其方法,用“:”结尾. pu ...

  8. nvd3基于时间轴流程图

    doc http://nvd3-community.github.io/nvd3/examples/documentation.html https://github.com/mbostock/d3/ ...

  9. 微信小程序之怎样识别一个小程序用户

    本节主要是说下怎样识别一个小程序的用户,需要用什么数据来做标识呢: 我们应该都知道判断是不是一个用户大部分都是通过userid来判断,如果这个用户访问的应用发送了一个请求,把userid之类的数据发给 ...

  10. Bloom Filter (海量数据处理)

    什么是Bloom Filter 先来看这样一个爬虫相关问题:文件A中有10亿条URL,每条URL占用64字节,机器的内存限制是4G,现有一个URL,请判断它是否存在于文件A中(爬过的URL无需再爬). ...