Angularjs实现mvvm式的选项卡示例代码

JavaScript 2019-01-06

在实现Angularjs实现mvvm式的选项卡之前，先搬出我们常用的jquery实现。

1、jquery实现简单粗暴的选项卡效果

rush:js;"> var nav = $(".tabs");//tab切换 var Box = $(".Box");//容器 nav.on("click",function(){ //点击事件 var this_index=$(this).index(); $(this).addClass("active").siblings().removeClass("active"); Box.eq(this_index).show().siblings().hide(); });

在这里只给出js核心部分，html和css不做赘述。

以上代码，简单粗暴的实现了选项卡效果，用点击事件获得elem.index(),把索引和容器串起来控制显示隐藏。

2、angularjs实现一个简单选项卡效果

Html部分

rush:xhtml;">

Home
Work
Blog
About
Contact

css 部分

（这里为了方便我们使用Less语法，童鞋们可以自定义css实现个性效果）

rush:css;"> * { margin: 0; padding: 0; }

body {
background: #e7ecea;
font-weight: 600;
font-family: 'Raleway',Arial,sans-serif;
text-align: center;
}

a {
color: #2CC185;
text-decoration: none;
outline: none;

&:hover {
color: #74777b;
}
}

.tabs {
position: relative;
width: 100%;
margin: 30px auto 0 auto;

nav {
ul {
position: relative;
display: flex;
max-width: 1200px;
margin: 0 auto;
list-style: none;
flex-flow: row wrap;
justify-content: center;

li {
flex: 1;

&.current a {
color: #74777b;
}
}
}
}
a {
display: block;
position: relative;
overflow : hidden;
line-height: 2.5;

span {
vertical-align: middle;
font-size: 1.5em;
}
}
}

.content {
position: relative;

section {
/ display: none; /
margin: 0 auto;
max-width: 1200px;

&.content-current {
/ display: block; /
}

p {
color: rgba(40,44,42,0.4);
margin: 0;
padding: 1.75em 0;
font-weight: 900;
font-size: 5em;
line-height: 1;
}
}
}

.tabs-style {
nav {
/ background: rgba(255,255,0.4); /

ul li {
a {
overflow: visible;
border-bottom: 1px solid rgba(0,0.2);
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
}

ul li.current a{
&:after,&:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
border: solid transparent;
}
&:after {
margin-left: -10px;
border-width: 10px;
border-top-color: #e7ecea;
}
&:before {
margin-left: -11px;
border-width: 11px;
border-top-color: rgba(0,0.2);
}
}
}
}

js部分

rush:js;"> angular.module('myApp',[]) .controller('TabController',function() { this.current = 1;

this.setCurrent = function (tab) {
this.current = tab;
};

this.isSet = function(tab) {
return this.current == tab;
};
});

最后效果如下图所示：

通过以上代码，我们可以发现实现的核心是angularjs内置的ng-class和ng-click，ng-show指令。

通俗来讲：controller里定义了current 这条数据默认值为1，ng-click给点击事件自定义函数，改变current数据，ng-class通过获得current的值绑定条件，给当前选中的索引添加current样式，容器同样获得controller里的current数据通过ng-show控制显示隐藏。

3、angularjs实现一个稍微复杂的移动端选项卡效果

html部分

rush:xhtml;"> //angularjs的一个移动端touch事件库

<div ng-app='myApp' ng-controller="myController">
<div class="type-tabs">
<div ng-repeat="item in [1,2,3,4]" ng-click="changeIndex($index)">Tab{{item}}

Tab{{item}}

css部分

rush:css;"> *{ 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部分

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操作到数据操作需要一个过程去适应，但只要结果是好的，这些付出就都值得。在这个过程中，也是对你专业能力的一种提升。加油小伙伴们！！！

angularjs mvvm mvvm 架构架构选项卡选项卡效果