在实现Angularjs实现mvvm式的选项卡之前,先搬出我们常用的jquery实现。
1、jquery实现简单粗暴的选项卡效果
在这里只给出js核心部分,html和css不做赘述。
以上代码,简单粗暴的实现了选项卡效果,用点击事件获得elem.index()
,把索引和容器串起来控制显示隐藏。
2、angularjs实现一个简单选项卡效果
Html部分
- Home
- Work
- Blog
- About
- Contact
在实现Angularjs实现mvvm式的选项卡之前,先搬出我们常用的jquery实现。
在这里只给出js核心部分,html和css不做赘述。
以上代码,简单粗暴的实现了选项卡效果,用点击事件获得elem.index()
,把索引和容器串起来控制显示隐藏。
Less
语法,童鞋们可以自定义css实现个性效果)
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);
}
}
}
}
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
控制显示隐藏。
<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}}
css部分
}
.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;
}
效果如下:
好了,今天我们就给出这两个例子,对angularjs了解过的童鞋,直接看代码应该可以很快看懂。没了解过的童鞋,也能通过这两个例子,了解到mvvm的黑魔法,以及它的代码组织结构。
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操作到数据操作需要一个过程去适应,但只要结果是好的,这些付出就都值得。在这个过程中,也是对你专业能力的一种提升。加油小伙伴们!!!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。