www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

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

2019-07-05 03:16 来源:未知

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

选项卡是现代web网页中最常用的效果之一。
本文重点是用angularjs这个非常火mvvm框架,实现选项卡效果。在此之前,先搬出我们常用的jquery实现。

tab栏:

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

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

Web前端 1

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();
});
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不做赘述。

在这里只给出js核心部分,html和css不做赘述。
以上代码,简单粗暴的实现了选项卡效果,用点击事件获得elem.index(), 把索引和容器串起来控制显示隐藏。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Tab 标签</title> 
  <style> 
    body { 
      margin: 0; 
      padding: 0; 
      background-color: #F7F7F7; 
    } 
    .tabs { 
      width: 400px; 
      margin: 30px auto; 
      background-color: #FFF; 
      border: 1px solid #C0DCC0; 
      box-sizing: border-box; 
    } 
    img { 
      width: 400px; 
    } 
    .tabs nav { 
      height: 40px; 
      text-align: center; 
      line-height: 40px; 
      overflow: hidden; 
      background-color: #C0DCC0; 
      display: flex; 
    } 
    nav a { 
      display: block; 
      width: 100px; 
      border-right: 1px solid #FFF; 
      color: #000; 
      text-decoration: none; 
    } 
    nav a:last-child { 
      border-right: 0 none; 
    } 
    nav a.active { 
      background-color: #9BAF9B; 
    } 
    .cont { 
      overflow: hidden; 
      /*display: none;*/ 
    } 
    .cont ol { 
      line-height: 30px; 
    } 
    p { 
      text-align: center; 
      height: 30px; 
      line-height: 30px; 
    } 
    li { 
      list-style: none; 
      height: 30px; 
      line-height: 30px; 
    } 
  </style> 
  <!--[if lte IE 6]> 
  <![endif]--> 
</head> 
<body ng-app="Tabs"> 
  <div class="tabs" ng-controller="TabsController"> 
    <nav> 
    <!-- 指令之间没有分号 --> 
      <a href="javascript:;" ng-class="{active: type == 'local'}" ng-mouseover="switch('local')">白山茶</a> 
      <a href="javascript:;" ng-class="{active: type == 'global'}" ng-mouseover="switch('global')">作曲</a> 
      <a href="javascript:;" ng-class="{active: type == 'sports'}" ng-mouseover="switch('sports')">背景</a> 
      <a href="javascript:;" ng-class="{active: type == 'funny'}" ng-mouseover="switch('funny')">歌词</a> 
    </nav> 
    <div ng-switch on="type"> 
      <section class="cont" ng-switch-when="local"> 
        <p>2017.5.24</p> 
      </section> 
      <section class="cont" ng-switch-when="global"> 
        <p>作曲:陈雪凝</p> 
        <p>作词:陈雪凝</p> 
        <p>编曲:海艺音乐</p> 
      </section> 
      <section class="cont" ng-switch-when="sports"> 
          <img src="bsc.png"> 
      </section> 
      <section class="cont" ng-switch-when="funny"> 
        <ul> 
          <li>你认真的说你喜欢白山茶</li> 
          <li>怡然自得的收起别的红玫瑰</li> 
          <li>你温柔的说你眷恋我</li> 
          <li>然后迫不及待的爱别人</li> 
          <li>然后迫不及待的爱别人</li> 
          <li>然后迫不及待的爱别人</li> 
          <li>然后迫不及待的爱别人</li> 
        </ol> 
      </section> 
    </div> 
  </div> 
  <script src="../../js/angular.min.js"></script> 
  <script> 
    angular.module('Tabs',[]).controller('TabsController',['$scope',function($scope){ 
       $scope.type = 'local'; 
       $scope.switch = function(type){ 
        $scope.type = type; 
       } 
    }]); 
  </script> 
</body> 
</html> 

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

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

mvc小案例:

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

Html部分

Web前端 2

Html部分

 <section ng-app="myApp">
       <div class="tabs tabs-style" ng-controller="TabController as tab">
         <nav>
           <ul>
             <li ng-class="{'current':tab.isSet(1)}">
               <a href="#" ng-click="tab.setCurrent(1)">Home</a></li>
             <li ng-class="{'current':tab.isSet(2)}">
               <a href="#" ng-click="tab.setCurrent(2)">Work</a></li>
             <li ng-class="{'current':tab.isSet(3)}">
               <a href="#" ng-click="tab.setCurrent(3)">Blog</a></li>
             <li ng-class="{'current':tab.isSet(4)}">
               <a href="#" ng-click="tab.setCurrent(4)">About</a></li>
             <li ng-class="{'current':tab.isSet(5)}">
               <a href="#" ng-click="tab.setCurrent(5)">Contact</a></li>
           </ul>
         </nav>
         <div class="content">
           <section id="section-1"  ng-show="tab.isSet(1)">
             <p>1</p>
           </section>
           <section id="section-2"  ng-show="tab.isSet(2)">
             <p>2</p>
           </section>
           <section id="section-3" ng-show="tab.isSet(3)">
             <p>3</p>
           </section>
           <section id="section-4" ng-show="tab.isSet(4)">
             <p>4</p>
           </section>
           <section id="section-5" ng-show="tab.isSet(5)">
             <p>5</p>
           </section>
         </div>
       </div>
   </section>

代码:

 <section ng-app="myApp">
  <div class="tabs tabs-style" ng-controller="TabController as tab">
   <nav>
   <ul>
    <li ng-class="{'current':tab.isSet(1)}">
    <a href="#" ng-click="tab.setCurrent(1)">Home</a></li>
    <li ng-class="{'current':tab.isSet(2)}">
    <a href="#" ng-click="tab.setCurrent(2)">Work</a></li>
    <li ng-class="{'current':tab.isSet(3)}">
    <a href="#" ng-click="tab.setCurrent(3)">Blog</a></li>
    <li ng-class="{'current':tab.isSet(4)}">
    <a href="#" ng-click="tab.setCurrent(4)">About</a></li>
    <li ng-class="{'current':tab.isSet(5)}">
    <a href="#" ng-click="tab.setCurrent(5)">Contact</a></li>
   </ul>
   </nav>
   <div class="content">
   <section id="section-1" ng-show="tab.isSet(1)">
    <p>1</p>
   </section>
   <section id="section-2" ng-show="tab.isSet(2)">
    <p>2</p>
   </section>
   <section id="section-3" ng-show="tab.isSet(3)">
    <p>3</p>
   </section>
   <section id="section-4" ng-show="tab.isSet(4)">
    <p>4</p>
   </section>
   <section id="section-5" ng-show="tab.isSet(5)">
    <p>5</p>
   </section>
   </div>
  </div>
 </section>

css 部分(这里为了方便我们使用Less语法,童鞋们可以自定义css实现个性效果)

<!doctype html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Template • TodoMVC</title> 
    <!-- <link rel="stylesheet" href="css/base.css"> --> 
    <link rel="stylesheet" href="css/index.css"> 
    <!-- CSS overrides - remove if you don't need it --> 
    <link rel="stylesheet" href="css/app.css"> 
  </head> 
  <body ng-app="Todos"> 
    <section class="todoapp" ng-controller="TodoController"> 
      <header class="header"> 
        <h1>todos</h1> 
        <form ng-submit="add()"> 
        <!-- 用户输入点 --> 
          <input class="new-todo" placeholder="What needs to be done?" ng-model="text" autofocus> 
        </form> 
      </header> 
      <section class="main"> 
        <input class="toggle-all" type="checkbox"> 
        <label for="toggle-all">Mark all as complete</label> 
        <ul class="todo-list"> 
          <li ng-repeat="(key,todo) in todos"> 
            <div class="view"> 
              <input type="checkbox" class="toggle" ng-click="done(key)" > 
              <label>{{todo.text}}</label> 
              <button class="destroy" ng-click="delete(todos,key)" ></button> 
            </div> 
            <input class="edit" value="Create a TodoMVC template"> 
          </li> 
          <li><h5>已完成</h5></li> 
          <li class="completed" ng-repeat="todo in doneTodos"> 
            <div class="view"> 
              <input class="toggle" type="checkbox" ng-checked="todo.flag" > 
              <label>{{todo.text}}</label> 
              <button class="destroy" ng-click="delete(doneTodos,key)"></button> 
            </div> 
            <input class="edit" value="Rule the web"> 
          </li> 
        </ul> 
      </section> 
      <footer class="footer"> 
        <strong></strong> {{todos.length}} item left 
        <button class="clear-completed">Clear completed</button> 
      </footer> 
    </section> 
    <footer class="info"> 
      <p>Double-click to edit a todo</p> 
      <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p> 
      <p>Created by <a href="http://todomvc.com">you</a></p> 
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p> 
    </footer> 
  </body> 
  <script src="../../js/angular.min.js"></script> 
  <script> 
    angular.module('Todos',[]).controller('TodoController',['$scope',function($scope){ 
      // 定义一个数组存储用户输入的数据 
      $scope.todos = []; 
      $scope.doneTodos = []; 
      $scope.add = function(){ 
        $scope.todos.push({text:$scope.text,flag:false}); 
        $scope.text = ''; 
      } 
      $scope.done = function(key){ 
      var todo = $scope.todos.splice(key,1)[0]; 
      todo.flag = true; 
      $scope.doneTodos.push(todo); 
      // console.log($scope.todos.splice(key,1)); 
      } 
      $scope.delete = function(todos,key){ 
        todos.splice(key,1); 
      } 
    }]); 
  </script> 
</html> 

css 部分(这里为了方便我们使用Less语法,童鞋们可以自定义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,255,0.4); */

    ul li {
      a {
        overflow: visible; 
        border-bottom: 1px solid rgba(0,0,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,0,0.2);
      }
    }
  }
}

以上所述是小编给大家介绍的AngularJS tab栏实现和mvc小案例实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

* {
 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,255,0.4); */

 ul li {
  a {
  overflow: visible; 
  border-bottom: 1px solid rgba(0,0,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,0,0.2);
  }
 }
 }
}

js部分

您可能感兴趣的文章:

  • angularJs中datatable实现代码
  • Angularjs bootstrap table多选(全选)支持单击行选中实现编辑、删除功能
  • 对比分析Django的Q查询及AngularJS的Datatables分页插件
  • AngularJS ng-table插件设置排序
  • 用AngularJS的指令实现tabs切换效果
  • angularjs表格ng-table使用备忘录
  • Angularjs实现mvvm式的选项卡示例代码
  • AngularJS入门教程之学习环境搭建
  • AngularJS中的模块详解
  • AngularJS实现表单验证
  • AngularJS中的指令全面解析(必看)
  • AngularJS实现tab选项卡的方法详解

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;
  };
});
angular.module('myApp', [])
 .controller('TabController', function() {
 this.current = 1;

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

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

最后效果如下图所示:

最后效果如下图所示:

Web前端 3

Web前端 4

angularjs-tabs.png

通过以上代码,我们可以发现实现的核心是angularjs内置的ng-classng-clickng-show指令。

通过以上代码,我们可以发现实现的核心是angularjs内置的ng-class和ng-click,ng-show指令。通俗来讲:controller里定义了current 这条数据默认值为1,ng-click给点击事件自定义函数,改变current数据,ng-class通过获得current的值绑定条件,给当前选中的索引添加current样式,容器同样获得controller里的current数据通过ng-show控制显示隐藏。

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

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

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

html部分

html部分

<script src="http://www.god137.com/uploads/allimg/190705/031A131G-4.jpg"></script>
<script src="http://www.god137.com/uploads/allimg/190705/031A1NU-5.jpg"></script>
//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}}</div>
    </div>
    <div class="guid-bar">
      <div class="guid-bar-content" style="left:{{ 25*activeIndex}}%"></div>
    </div>
    <div class="tab-content" ng-swipe-right="swipeRight()" ng-swipe-left="swipeLeft()">
      <div class="tab-content-inner" style="left:{{ -100*activeIndex}}%">
        <div class="tab-content-item" ng-repeat="item in [1,2,3,4]" >
          <br /><br /><br /><br />
          <h1>Tab{{item}}
          </h1></div>
      </div>
    </div>
</div>
<script src="http://www.god137.com/uploads/allimg/190705/031A131G-4.jpg"></script>
<script src="http://www.god137.com/uploads/allimg/190705/031A1NU-5.jpg"></script>
//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}}</div>
 </div>
 <div class="guid-bar">
  <div class="guid-bar-content" style="left:{{ 25*activeIndex}}%"></div>
 </div>
 <div class="tab-content" ng-swipe-right="swipeRight()" ng-swipe-left="swipeLeft()">
  <div class="tab-content-inner" style="left:{{ -100*activeIndex}}%">
  <div class="tab-content-item" ng-repeat="item in [1,2,3,4]" >
   <br /><br /><br /><br />
   <h1>Tab{{item}}
   </h1></div>
  </div>
 </div>
</div>

css部分

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;
}
*{
 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部分

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;
    }
})
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;
 }
})

当当当当,效果如下:

效果如下:

Web前端 5

Web前端 6

ng-touch.png

好了,今天我们就给出这两个例子,对angularjs了解过的童鞋,直接看代码应该可以很快看懂。没了解过的童鞋,也能通过这两个例子,了解到mvvm的黑魔法,以及它的代码组织结构。

好了,今天我们就给出这两个例子,对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)。具体想了解的童鞋请点击链接查看详情:https://leozdgao.me/why-dom-slow/

结尾

随着web产品越来越复杂,分层架构是必不可少的,因此双向绑定作为解药,结合很早就流行的MVC框架,衍生出MVVM这神器。博主坚信,mvvm会是前端的终极解决方案。由DOM操作到数据操作需要一个过程去适应,但只要结果是好的,这些付出就都值得。在这个过程中,也是对你专业能力的一种提升。加油小伙伴们!!!

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中datatable实现代码
  • AngularJS tab栏实现和mvc小案例实例详解
  • Angularjs bootstrap table多选(全选)支持单击行选中实现编辑、删除功能
  • 对比分析Django的Q查询及AngularJS的Datatables分页插件
  • AngularJS ng-table插件设置排序
  • 用AngularJS的指令实现tabs切换效果
  • angularjs表格ng-table使用备忘录
  • AngularJS入门教程之学习环境搭建
  • AngularJS中的模块详解
  • AngularJS实现表单验证
  • AngularJS中的指令全面解析(必看)
  • AngularJS实现tab选项卡的方法详解
TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:Angularjs实现mvvm式的选项卡示例代码,Angularjs实现