最近在慕课网看一些关于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 +'&nbsp;<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库，功能一应俱全

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. SSM项目spring配置文件详细步骤（分门别类、灵巧记忆）

    spring-dao.xml文件 1.配置外部db.property文件: <context:property-placeholder location="classpath:jdbc ...

  2. MATLAB线性回归方程与非线性回归方程的相关计算

    每次比赛都需要查一下,这次直接总结到自己的博客中. 以这个为例子: 2.线性方程的相关计算 x=[1,2,3,4,5]';%参数矩阵 X=[ones(5,1),x];%产生一个5行一列的矩阵,后接x矩 ...

  3. 关闭ubuntu讨厌的内部错误提示

    修改/etc/default/apport 浏览下/etc/init/apport.conf 内容你会发现,控制此服务是否启动的是/etc/default/apport 所以把/etc/default ...

  4. React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson4 转载请注明出处,保留原文链接和作者信息. 为了让代码更灵活,可以写更多的组件,我们把这种模 ...

  5. 斗鱼扩展--localStorage备份与导出(九)

    之前我们都把数据 放在了 localStorage 里,但扩展一旦卸载,数据就会被清空, 在Console里备份,一次只能输出一条,小白操作起来很不方便,所以能不能 导入,导出文件来进行备份还原呢? ...

  6. c#比较两个字符串

    1. String.Compare(str1, str2) == 0  或者  str1.CompareTo(str2) == 0 2. str1.Equals(str2)  或者 String.Eq ...

  7. html学习笔记（一）div的透明设置

    要使得div的透明度设置,有两种方法. 第一种:使用opacity属性,单词的意思是不透明性,你可以设置它的值,范围是0到1,1为不透明,0为全透明.具体使用如下: css代码: #div01{ ba ...

  8. CentOS 上安装 GIT 服务

    获取 YUM 中 GIT 信息:    yum info git 查看当前 GIT 的版本:    git --version    或    git version 卸载当前版本的 GIT:     ...

  9. 安装BI Publisher Desktop报错：“Template Builder Installer Failed:Unexpected Error”

    原因:office的版本未安装正确,应该安装X86版本的,如果是X64的会出现,重新安装X86版本的office后解决问题.

  10. Web前端开发规范（二）

    3.HTML代码规范 .html文件必须存放在项目工程约定的目录中. .html文件的命名:以模块 + 功能的结合方式来命名,比如:newsList.html. 文档类型声明:HTML4中使用< ...