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库，功能一应俱全
jQuery、Angluar、Avalon对比的更多相关文章
- js与jQuery实现方式对比汇总
CreateTime--2016年12月16日09:11:23Author:Marydonjs与jQuery实现方式对比汇总 <div id="ListContainer" ...
- php开发面试题---jquery和vue对比（整理）
php开发面试题---jquery和vue对比(整理) 一.总结 一句话总结: jquery的本质是更方便的选取和操作DOM对象,vue的本质是数据和页面分离 反思的回顾非常有用,因为决定了我的方向和 ...
- TwentyTwenty – 使用 jQuery 实现图片对比功能
这是一款非常棒的图片对比工具,能够方便的应用到你的网站中.其基本思路是把两张图片层叠在一起,当你拖动滑竿的时候,利用 CSS clip 裁剪图片,进行形成视觉对比效果. 您可能感兴趣的相关文章 Met ...
- jQuery coveringBad 效果对比
Covering-Bad 是一个可拉动大小的元素,覆盖在原有的元素上面,从而两者进行对比. 在线实例 实例演示1 实例演示2 使用方法 <div class="covered&q ...
- bootstrap和jquery mobile的对比
最近一直在研究bootstrap这东西,确实是个好的框架,但是诸多优势背后也隐藏着一些不好的地方,对此,我把它和另一套响应式框架jquery mobile做了一下对比,我的总结如下: 1.boo ...
- jquery和vue对比
1.jquery介绍:想必大家都用过jquery吧,这个曾经也是现在依然最流行的web前端js库,可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替,随着浏览器厂商对HTML5规范统一遵 ...
- webpack 集成 jQuery 和 Avalon
webpack 系列 三:webpack 如何集成第三方js库 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webp ...
- Jquery与mootools对比
换了新公司以后就很少使用原生Js来实现界面交互了,而是更多的依赖Jquery. 1.Jquery优点: 良好的一致性$().().xxxxx与强大的DOM api组件可以让一个js菜鸟一周之类立马开发 ...
- js与jquery基础知识对比（一）---2017-05-06
用表格做的,想要对比的内容一目了然,红色部分为重点 js jquery 取元素 id: document.getElementById("aa"); 取到的是dom对象 cla ...
随机推荐
- vue-cli生成的重要代码详解
安装好vue-cli之后,我们可以在package.json中看到下面所示: { // 项目名称 "name": "myvue", // 项目版本 " ...
- java 日志框架的选择Log4j->SLF4j->Logback
Log4j->SLF4j->Logback是同一个人开发的 import lombok.extern.slf4j.Slf4j; import org.junit.Test; import ...
- 《JavaScript高级程序设计》第5章 Object类型---Array---学习心得
1.创建数组的方法: 使用Array构造函数: var colors=new Array() var colors=new Array(20)//l创建一个包含20项的数组 var colors=ne ...
- Video 视频播放防作弊和禁止下载
1.实现效果 - 查看源码 实现视频可播放不能下载,禁止右键下载.F12源码打开链接下载 实现只在当前窗口播放,切换窗口.窗口最小化.窗口被遮挡停止播放,恢复后继续播放 在线demo:缓存完再播放 . ...
- Slickflow.NET 开源工作流引擎基础介绍-.NET Core2.0 版本实现介绍 (转)
前言:.NET Core 是.NET Framework的新一代版本,是微软开发的第一个跨平台 (Windows.Mac OSX.Linux) 的应用程序开发框架(Application Framew ...
- Http和Https的区别--笔记
学习链接: 知乎:https://www.zhihu.com/question/19577317 法号桑菜 http://blog.csdn.net/jasonjwl/article/details/ ...
- 【Android学习入门】Android studio基本设置
1.背景设置 依次选择File->Settings-->Appearance & Behaviour->Apprearance,然后勾选 show line number. ...
- SQL Server 2008 角色
固定服务器角色:按照从最低级别的角色(bulkadmin)到最高级别的角色(sysadmin)的顺序进行描述:Bulkadmin:这个服务器角色的成员可以运行BULK INSERT语句.这条语句允许从 ...
- Eclipse + Tomcat 环境下配置 JSTL 标签
1.下载 jar 包. 网址:http://archive.apache.org/dist/jakarta/taglibs/standard/binaries/ 2.解压后将jstl.jar和stan ...
- 你真的会用ABAP, Java和JavaScript里的constructor么?
如果constructor里调用了一个成员方法,这个方法被子类override了,当初始化一个子类实例时,父类的构造函数被的调用,此时父类构造函数的上下文里调用的成员方法,是父类的实现还是子类的实现? ...