1. 哪些优点是vue有而avalonjs没有的
快速:异步批处理方式更新 DOM。
组合:用解耦的、可复用的组件组合你的应用程序。
紧凑:~18kb min+gzip,且无依赖。
强大:表达式 & 无需声明依赖的可推导属性 (computed properties)。
对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。
2. avalon.js怎么把变量添加到属性
avalon中的数组具有以下变量:
$index:用于指明当前数组中的指针所在索引值,即指向数组中第几个元素(索引值从0开始)
示例代码:
[plain] view plain
<!DOCTYPE html>
<html>
<head>
<span style="white-space:pre"> </span><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js" ></script>
<script>
var model = avalon.define({
$id: "test",
array: ["aaa","bbb","ccc"]
})
</script>
</head>
<body ms-controller="test">
<ul>
<li ms-repeat="array">{{el}} --- {{$index}}</li> <!---通过{{$index}}在页面上显示出了遍历时数组的索引值0,1,2。---->
</ul>
</body>
</html>
$last:判断当前指向的是否为数组中的最后一个元素
$first:判断当前指向的是否为数组中的第一个元素
$remove:删除当前指向的数组中的元素
示例代码:
[html] view plain
<body ms-controller="test">
<ul>
<li ms-repeat="array"
ms-click="$remove">{{xx}}:{{$index}}</li> <!----点击标签内容时,触发$remove,即删除当前标签中所指向的元素----->
</ul>
</body>
$outer:指向外围数组元素。
[html] view plain
<body ms-controller="test">
<table border="1">
<tr ms-repeat-el="array"> <!---1、array为一个3行4列的数组 2、ms-repeat-XX="数组名",表示遍历指定数组,遍历得到的数组元素,用XX表示。3、哪个标签需要多次出现,就在哪个标签中定义ms-repeat。比如想让数组A在一行表示出来,也就是说需要出现多次出现td标签,则需要在td标签中定义ms-repeat="A",而非在tr标签定义---->
<td ms-repeat-elem="el">{{elem}} 它位于第<b style="color:orchid">{{$outer.$index}}</b>行</td> <!---此处$outer指向的就是上层遍历所指向的元素,即外围数组元素,该元素是一个1X4的数组---->
</tr>
</table>
</body>
avalon中的数组具有以下方法:
every方法。
该方法可用于判断布尔类型的数组中,是否所有元素都为真,若是,返回true,否则返回false(该方法可能也有其他功能,但目前本人只使用该方法实现过这一个功能)。该方法通常用于对于全选checkbox功能的实现。使用格式为:数组名.every(function(el){return el})。代码示例:
vm定义代码:
[javascript] view plain
var model=avalon.define({
$id:"test",
single_checkbox_array:[{checked:false},{checked:false},{checked:false}],
all_select:false,
single_checkbox_changed:function(){
model.all_select=model.single_checkbox_array.every(function(el){
return el.checked
})
}<!---当single_checkbox_array数组中所有元素皆为true时,all_select为true,否则为false---->
})
forEach方法
该方法用于迭代循环依次对数组中的所有元素执行某一操作。比如,以下代码的作用为给数组中每个元素赋值:
[javascript] view plain
var model=avalon.define({
$id:"test",
single_checkbox_array:[{checked:false},{checked:false},{checked:false}],
all_select:false,
all_select_changed:function(){
model.single_checkbox_array.forEach(function(el){
el.checked=model.all_select<!----将数组中每个元素赋值为all_select的值---->
})
}
})
其使用格式为数组名.forEach(function(el){......对元素所进行操作的代码})
sort方法
通过名字就可以猜到,该方法用于对数组中的元素进行排序。对于该方法的使用分为两种:不带参数的排序和带参数的排序。
不带参数的排序:数组名.sort()。则该方法将数组中的对象按照字母表中的顺序进行排序。
示例代码:
[javascript] view plain
var a=[33,4,1111,222];
a.sort();<!---则排序的结果为:1111,222,33,4--->
带参数的排序:使用方法为数组名.sort(function(a,b){.....})其中a和b分别表示进行比较的两个数组中的元素。当返回值为负数时,a排在b的后面,否则a排在b的前面。
示例代码:
[javascript] view plain
var a=[33,4,1111,222];
a.sort(function(a,b){return a-b;});<!--从小到大排序--->
a.sort(function(a,b){return b-a;});<!--从大到小排序--->
更多相关资料可参考http://www.viiboo.cn
3. 如何通过 Vue+Webpack 来做通用的前端组件化架构设计
angular:
我觉得angularjs的学习上手周期比较长,可能遇到问题,都无法立刻解决,而且编码的质量明显的很差,如果团队没有制定规范,那写出来的代码就没法看。对于一个选用angularjs的团队来说,我认为编码规范是很重要的,否则对编码能力是没有提升的。
avalon:
avalonjs文档资料没有那么全,我感觉一些开源支持的力量不够多。不过,如果有项目需求,需要去做IE浏览器的支持话,我建议选择avalonjs
vue:
vuejs 文档比较齐全,vue吸取了angularjs 的一些优点,规避了一些缺点,至少编码规范上有了一个质的飞跃,学习上手的周期比较短。vue起初只是一个轻量级的类库,用来做类似于react的事情,同时vue也是可以拿来做前端架构设计的,比如:vueify + vue-router(spa框架)。
4. vue,angular,avalon这三种MVVM框架之间有什么优缺点
Vue.js
优点:
简单:官文档清晰比 Angular 简单易
快速:异步批处理式更新 DOM
组合:用解耦、复用组件组合应用程序
紧凑:~18kb min+gzip且依赖
强:表达式 & 需声明依赖推导属性 (computed properties)
模块友:通 NPM、Bower 或 Duo 安装强迫所代码都遵循 Angular 各种规定使用场景更加灵
缺点:
新:Vue.js新项目20143月20发布0.10.0 Release Candidate版本目前github面新0.11.4版本没angular熟
影响度:google关于Vue.js性或者说丰富性少于其些名库
支持IE8:哈哈AngularJS 1.3抛弃IE8支持avalon支持IE6+应该努力优化点于些需要支持IE8项目web前端发趋势像IE低版本应该退历史舞台通改变我前端思维顺应些使用版本升级
AngularJS
优点:
态视图:前没想js扩展HTML属性AngularJs做替我静态HTML加扩展性功能种让HTML由死变觉
完善:比较完善前端MVW框架包含模板数据双向绑定路由模块化服务依赖注入等所功能模板功能强丰富并且声明式自带丰富 Angular 指令
Google维护:AngularJSGoogle维护疑强台于推广维护明显比Vue.jsavalon优势社区非泼能够促进发展
AngularJS & Ionic:Ionic: Advanced HTML5 Hybrid Mobile App Framework俩基友Ionic通用AngularJS创建框架适合发丰富强应用程序
缺点:
全:习起难度于我讲习曲线曲折比较难理解些
推翻重写:前段候逛社区发现AngularJS2.0前推翻重写两框架改变基本两框架等于说等2.0需要始支持IE8貌似2.0变支持移端等再看吧
Avalon.js
优点
使用简单HTML添加绑定JS用avalon.define定义ViewModel再调用avalon.scan能
兼容 IE6 (其MVVM框架KnockoutJS(IE6), AngularJS(IE9), EmberJS(IE8), WinJS(IE9) )另avalon.mobile更高效运行于IE10等新版本浏览器
没任何依赖5000行压缩50KiB
支持管道符风格滤函数便格式化输
局部刷新颗粒度已细化文本节点特性节点
要操作节点第扫描与视图刷新函数相绑定并缓存起没选择器场余
让DOM操作代码近乎绝迹
使用类似CSS重叠覆盖机制让各ViewModel区交替渲染页面
节点移除智能卸载应视图刷新函数节约内存
操作数据即操作DOMViewModel操作都同步View与Model
自带AMD模块加载器省与其加载器进行整合
缺点
1数组滤没angular面avalon滤器能用于ms-text, ms-html
2没英文文档宣传受限制(许误我博客园入门教程官网)
3OniUI皮肤够看许说要配合boostrap社区没主站做事
5. avalonjs为什么在ie8不支持json.stringfiy
可能进入了非标准文档模式。为了保险起见,可以引入 JSON2.js,防止浏览器不支持
6. angularjs和avalon哪个好实际工作中主要用哪个
看项目规模。
angularjs由Google维护,名气和使用人数要多一些,学习的人也多,项目大,参与的人多,建议还是选名气大的。
avalon小巧轻快,学习成本也低,中小型项目可以考虑这个。
7. avalon checkbox选中值怎么获取
avalon是通过ms-repeat实现对一组数据的批量输出。这一组数据可以是一个数组,也可以是一个哈希(或叫对象)。我们先从数组说起吧。
第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放在$skipArray数组里,都会转会监控数组。监控数组其实就是一个被重写了push、unshift、shift、pop、 splice、sort、reverse方法的普通数组。当然它也添加了其他一些方法,如set、 pushArray、remove、removeAt、removeAll、clear、ensure、 contains、size。我们只要操作这些方法就能同步视图。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js" ></script>
<script>
var model = avalon.define({
$id: "test",
array: ["aaa","bbb","ccc"]
})
</script>
</head>
<body ms-controller="test">
<ul>
<li ms-repeat="array">{{el}} --- {{$index}}</li>
</ul>
</body>
</html>
8. avalon.js 被抛弃了吗
1,对数组的过滤没有angular那么方面,avalon的过滤器只能用于ms-text, ms-html
2,没有英文文档,宣传受到限制(许多人也误把我在博客园的入门教程当成官网)
3,OniUI的皮肤不够好看,许多人说要配合boostrap,但社区还没有人主动站出来做这事
avalon现在在BAT都有部门在使用,网络还是3个部门,因此所有这些都会慢慢得到解决的。
9. 如果去除avalon前端框架中的使用"#"的超链接标识,可从哪些方面入手
Vue.js优点:简单:官方文档很清晰,比Angular简单易学。快速:异步批处理方式更新DOM。组合:用解耦的、可复用的组件组合你的应用程序。紧凑:~18kbmin+gzip,且无依赖。强大:表达式&无需声明依赖的可推导属性(computedproperties)。对模块友好:可以通过NPM、Bower或Duo安装,不强迫你所有的代码都遵循Angular的各种规定,使用场景更加灵活。缺点:新生儿:Vue.js是一个新的项目,2014年3月20日发布的0.10.0ReleaseCandidate版本,目前github上面最新的是0.11.4版本,没有angular那么成熟。影响度不是很大:google了一下,有关于Vue.js多样性或者说丰富性少于其他一些有名的库。不支持IE8:哈哈不过AngularJS1.3也抛弃了对IE8的支持,但是avalon是支持IE6+的,应该下了很多努力去优化。这一点对于那些需要支持IE8的项目就不好了,不过这也是web前端开发的一个趋势,像IE低版本就应该退出历史舞台了,通过改变我们的前端思维,而不是顺应那些使用老版本而不去升级的人。AngularJS优点:动态视图:以前从来没有想过js可以如此扩展HTML的属性,但是AngularJs做到了,它替我们静态的HTML加了很多扩展性功能,有一种让HTML由死变活的感觉。完善:是一个比较完善的前端MVW框架,包含模板,数据双向绑定,路由,模块化,服务,依赖注入等所有功能,模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令。Google维护:AngularJS有Google来维护,无疑有了一个强大的后台,对于推广和维护明显比Vue.js和avalon有优势,社区也非常活泼,能够很好促进它的发展。AngularJS&Ionic:Ionic:,这俩就是一个好基友,Ionic通过用AngularJS为了创建一个框架,最适合开发的丰富和强大的应用程序。缺点:大而全:学习起来有难度,对于我来讲学习曲线很曲折,比较难理解一些。推翻重写:前段时候逛社区发现AngularJS2.0会把之前的推翻重写,两个框架的改变很大,基本是两个框架了,等于是说等到2.0出来后又需要从头开始,不支持IE8以下,貌似2.0变得只支持移动端了,等到出来后再看吧。Avalon.js优点使用简单,在HTML中添加绑定,在JS中用avalon.define定义ViewModel,再调用avalon.scan方法,它就能动了!兼容到IE6(其他MVVM框架,KnockoutJS(IE6),AngularJS(IE9),EmberJS(IE8),WinJS(IE9)),另有avalon.mobile,它可以更高效地运行于IE10等新版本浏览器中没有任何依赖,不到5000行,压缩后不到50KiB支持管道符风格的过滤函数,方便格式化输出局部刷新的颗粒度已细化到一个文本节点,特性节点要操作的节点,在第一次扫描就与视图刷新函数相绑定,并缓存起来,因此没有选择器出场的余地。让DOM操作的代码近乎绝迹使用类似CSS的重叠覆盖机制,让各个ViewModel分区交替地渲染页面节点移除时,智能卸载对应的视图刷新函数,节约内存操作数据即操作DOM,对ViewModel的操作都会同步到View与Model去自带AMD模块加载器,省得与其他加载器进行整合。缺点1,对数组的过滤没有angular那么方面,avalon的过滤器只能用于ms-text,ms-html2,没有英文文档,宣传受到限制(许多人也误把我在博客园的入门教程当成官网)3,OniUI的皮肤不够好看,许多人说要配合boostrap,但社区还没有人主动站出来做这事
10. avalon.js怎么遍历json
<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var array = [1,2,3,4,5,6,7,8,9];
var filterarray = $.grep(array,function(value){
return value > 5;//筛选出大于5的
});
for(var i=0;i<filterarray.length;i++){
alert(filterarray[i]);
}
for (key in filterarray){
alert(filterarray[key]);
}
}
);
</script>