*{ padding:0; margin:0; font-family:'Arial'; } .type-tabs{ width: 100%; height: 40px; } .type-tabs div{ float: left; width: 25%; line-height: 40px; text-align: center; cursor:pointer; user-select:none; -webkit-user-select:none; } .guid-bar{ position: relative; margin-top: -3px; } .guid-bar-content{ width: 25%; height: 3px; background-color: #345; position: absolute; left: 50%; transition:all 400ms ease; } .tab-content{ width: 100%; height: 500px; background-color: #ccc; overflow: hidden; } .tab-content-inner{ width: 400%; position: relative; transition: all 400ms; } .tab-content-item{ width: 25%; float: left; text-align:center; }
js部分
var myApp=angular.module('myApp',['ngTouch']); myApp.controller('myController',function($scope){ $scope.activeIndex=0; $scope.changeIndex=function(index){ $scope.activeIndex=index; }; $scope.swipeLeft=function(){ $scope.activeIndex=++$scope.activeIndex; $scope.check(); }; $scope.swipeRight=function(){ $scope.activeIndex=--$scope.activeIndex; $scope.check(); }; $scope.check=function(){ if($scope.activeIndex>3) $scope.activeIndex=0; if($scope.activeIndex<0) $scope.activeIndex=3; } })
效果如下：
好了，今天我们就给出这两个例子，对angularjs了解过的童鞋，直接看代码应该可以很快看懂。没了解过的童鞋，也能通过这两个例子，了解到mvvm的黑魔法，以及它的代码组织结构。
4、angularjs的mvvm模式比jquery的dom操作好在哪里？
1、从宏观上来说，一种是操作数据处理数据，一种是操作dom和ui交互。
一般网页项目的流程可以总结为三个流程：1） 你要获取界面上的数据 2）后台交换数据3）获取数据后，对界面重新进行渲染。这个过程中，你和后台数据交换怎么实现？jquery的ajax吧，如果数据交换的API假设20多个，那么$.get或者$.ajax你要写多少个才能全部包含进去？而且所有API链接都不在一个地方，管理起来相当麻烦。而angularjs只要配置一下route就行了。
获取了数据后，你又如何管理这些数据，如何把数据渲染到界面上去？
如何管理各种事件?jquery本身特性，也就是事件触发，很多时候，就是你在编写 触发事件->处理数据 的流程。很显然，功能一多，代码就会和面条一样，交织在一起了。身边不乏两三年的传统jquery前端，事件委托、dom操作、浏览器渲染过程、插件组件封装等等都没有去深入研究，可想而知代码质量有多烂。事实上jquery是一个类库，并不是一个开发框架，jq是对js原生api的进一步封装，让你更加愉快的进行dom操作、动画操作以及ajax，正是因为他太过灵活，所以更容易写出难以维护的代码。
2、性能方面：DOM操作慢，DOM对象本身也是一个js对象，所以严格来说，并不是操作这个对象慢，而是说操作了这个对象后，会触发一些浏览器行为，比如布局（layout）和绘制（paint）。
总结
随着web产品越来越复杂，分层架构是必不可少的，因此双向绑定作为解药，结合很早就流行的MVC框架，衍生出MVVM这神器。博主坚信，mvvm会是前端的终极解决方案。由DOM操作到数据操作需要一个过程去适应，但只要结果是好的，这些付出就都值得。在这个过程中，也是对你专业能力的一种提升。加油小伙伴们！！！
您可能感兴趣的文章: