AngularJS의 MVVM 스타일 탭을 구현하기 전에 먼저 일반적으로 사용되는 jQuery 구현을 제거합니다.
1. jQuery는 단순하고 조잡한 탭 효과를 달성합니다
var nav = $ ( ". tabs"); // 탭 스위치 var box = $ ( ". box"); // 컨테이너 nav.on ( "click", function () {// event var this_index = $ (this) .index (); $ (this) .addclass ( "active"). box.eq (this_index) .show (). siblings (). hide ();});JS의 핵심 부분 만 여기에 제공되며 HTML 및 CSS는 상세하지 않습니다.
위의 코드는 간단하고 대략 탭 효과를 구현하고 클릭 이벤트를 사용하여 elem.index() 얻고 인덱스와 컨테이너를 함께 묶어 디스플레이를 제어하고 숨 깁니다.
2. AngularJS는 간단한 탭 효과를 구현합니다
HTML 부분
<섹션 ng-app = "myapp"> <div ng-controller = "tabcontroller as tab"> <av> ul> <li ng class = "{ 'current': tab.isset (1)}"> <a href = "#"ng-click = "tab.setcurrent (1)"> home </span> </ li> </li> </li> </li> </li> ng-class = "{ 'current': tab.isset (2)}"> <a href = "#"ng-click = "ng-click ="tab.setCurrent (2)> <span> work </li> </li> <li ng-class = "{ 'current': tab.isset (3)}"> <a href = "#" ng-click = "tab.setCurrent (3)"> <span> blog </span> </a >> </a> <li ng class = "{ 'current': tab.isset (4)}"> <a href = "#"ng-click = "ng-click ="tab.setcurrent (4) "> </li> </li> <li ng-class = "{ 'current': tab.isset (5)}"> <a href = "#"ng-click = "ng-click ="tab.setCurrent (5) "> <span> contact </li> </nav> <div> <섹션 ID ="섹션 -1 "ng-show ="tab.isset (1) "> ng-show = "tab.isset (2)"> <p> 2 </p> </section> <section id = "섹션 -3"ng-show = "tab.isset (3)"> <p> 3 </p> </section id = "섹션 -4"섹션 -4 "섹션 -4 <섹션 ID ="Section = "Section ="섹션 -5 " ng-show = "tab.isset (5)"> <p> 5 </p> </section> </div> </section> CSS 부품 (구문을 Less 사용할 수 있도록 어린이 신발은 CSS를 사용자 정의하여 개인화 된 효과를 달성 할 수 있습니다)
* {마진 : 0; 패딩 : 0;} 바디 {배경 : #e7ecea; 글꼴 중량 : 600; Font-Family : 'Raleway', Arial, Sans-Serif; Text-Align : Center;} a {색상 : #2cc185; 텍스트 결정 : 없음; 개요 : 없음; & : 호버 {색상 : #74777b; }}. 탭 {위치 : 상대; 너비 : 100%; 여백 : 30px 자동 0 Auto; nav {ul {위치 : 상대; 디스플레이 : Flex; 최대 width : 1200px; 여백 : 0 Auto; 목록 스타일 : 없음; 플렉스 흐름 : 행 랩; 정당화 컨텐츠 : 센터; li {flex : 1; & .current a {색상 : #74777b; }}}}} a {디스플레이 : 블록; 위치 : 상대; 오버플로 : 숨겨진; 라인 높이 : 2.5; 스팬 {수직-정상 : 중간; 글꼴 크기 : 1.5EM; }}}. 내용 {위치 : 상대; 섹션 { /* 디스플레이 : 없음; */ 마진 : 0 자동; 최대 width : 1200px; & .Content-Current { /* 디스플레이 : 블록; */} p {색상 : RGBA (40,44,42, 0.4); 여백 : 0; 패딩 : 1.75em 0; 글꼴 중량 : 900; 글꼴 크기 : 5EM; 선-높이 : 1; }}}. Tabs 스타일 {nav { /* 배경 : RGBA (255,255,255,0.4); */ ul li {a {오버플로 : 가시; 국경-바닥 : 1px 고체 RGBA (0,0,0,0.2); -webkit-transition : 컬러 0.2s; 전환 : 색상 0.2S; }} ul li li.current a {& : after, & : 이전 {content : ''; 위치 : 절대; 상단 : 100%; 왼쪽 : 50%; 너비 : 0; 높이 : 0; 국경 : 견고한 투명; } & : {마진 -왼쪽 : -10px; 국경비 : 10px; 국경-엽 색상 : #e7ecea; } & : 전 {마진 -왼쪽 : -11px; 국경비 : 11px; 국경-탑 콜로 : RGBA (0,0,0,0.2); }}}}JS 부분
Angular.Module ( 'myApp', []) .controller ( 'tabcontroller', function () {this.current = 1; this.setCurrent = function (the.current = tab;}; this.isset = function (return this.current == tab;});최종 효과는 아래 그림에 나와 있습니다.
위의 코드를 통해 구현의 핵심은 ng-class 및 ng-click 및 ng-show 지침이 AngularJS로 내장되어 있음을 알 수 있습니다.
간단히 말하면 : 컨트롤러는 현재 데이터를 정의합니다. 데이터의 기본값은 1입니다. ng-click 클릭 이벤트의 기능을 사용자 정의하고 current 데이터를 변경합니다. ng-class current 값 바인딩 조건을 얻고 현재 선택된 인덱스에 current 스타일을 추가합니다. 컨테이너는 또한 controller 에서 current 데이터를 얻고 ng-show 컨트롤을 통해 숨겨진 표시를 표시합니다.
3. AngularJS는 약간 복잡한 모바일 탭 효과를 달성합니다
HTML 부분
<script src = "http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"> </script> <script src = "http://cdn.bootcss.com/angular.js/1.3.8/angular-touch.min.js"> script> // a a a a a a a script>/a script Angularjs <div ng-app = 'myApp'ng-controller = "myController"> <div> <div ng-repeat = "[1,2,3,4]"ng-click = "ChangeIndex ($ index)"의 항목 "{{item}} </div> </div> <div> {div> {{{{{{{ ^ {a in in index)"> 25*ActiveIndex}}%"> < /div> < /div> <div ng-swipe-right ="swiperight () "ng-swipe-left ="swipeleft () "> <div style ="왼쪽 : {{-100*activeindex}}%"> <div ng-repeat ="항목 in <br /> <br />> <br />> <br />> /> <br/> <h1> tab {{item}} </h1> </div> </div> </div> </div> </div> </div> </div>CSS 부분
*{패딩 : 0; 여백 : 0; Font-Family : 'Arial';}. 타입 탭 {너비 : 100%; 높이 : 40px;}. Type-Tabs div {float : 왼쪽; 너비 : 25%; 라인 높이 : 40px; 텍스트 정렬 : 센터; 커서 : 포인터; 사용자 선택 : 없음; -webkit-user select : none;}. Guid-bar {위치 : 상대; 마진-탑 : -3px;}. Guid-Bar-Content {너비 : 25%; 높이 : 3px; 배경색 : #345; 위치 : 절대; 왼쪽 : 50%; 전환 : 모든 400ms 편의;}. 탭-콘텐츠 {너비 : 100%; 높이 : 500px; 배경색 : #CCC; 오버플로 : 숨겨진;}. Tab-Content-Inner {너비 : 400%; 위치 : 상대; 전환 : 모든 400ms;}. Tab-Content-Item {너비 : 25%; 플로트 : 왼쪽; 텍스트 정렬 : 센터;}JS 부분
var myapp = angular.module ( 'myapp', [ 'ngtouch']); myapp.controller ( 'myController', function ($ scope) {$ scope.activeindex = 0; $ scope.changeIndex = function (index) {$ scope.activeIndex = index;}; $ scope.scope.scopefeleft = function () {) { $ scope.ActiveIndex. if ($ scope.ActiveIndex <0) $ scope.ActiveIndex = 3;효과는 다음과 같습니다.
좋아요, 오늘 우리는이 두 가지 예를 제시 할 것입니다. 코드를 직접 보면 AngularJS에 대해 배운 어린이 신발을 빠르게 이해할 수 있습니다. 당신이 결코 이해하지 못한 어린이 신발은이 두 가지 예를 통해 MVVM의 흑 마법과 코드 조직 구조에 대해 배울 수 있습니다.
4. jQuery의 DOM 작동보다 MVVM AngularJS 모드에서 더 나은 것은 무엇입니까?
1. 거시적 관점에서, 하나는 데이터 및 프로세스 데이터를 작동하고 다른 하나는 DOM 및 UI 상호 작용을 작동하는 것입니다.
일반 웹 프로젝트의 프로세스는 세 가지 프로세스로 요약 될 수 있습니다. 1) 인터페이스에서 데이터를 얻으려면 2) 배경에서 데이터 교환 3) 데이터를 얻은 후 인터페이스를 다시 렌더링합니다. 이 과정에서 백엔드와의 데이터 교환을 어떻게 구현합니까? jQuery의 Ajax. Data Exchange API가 20 개 이상을 가정하면 $ .get 또는 $ .ajax는 몇 개를 포함시키기 위해 작성해야합니까? 또한 모든 API 링크는 같은 장소에 있지 않으므로 관리하기가 매우 귀찮습니다. AngularJS는 route 구성합니다.
데이터를 얻은 후이 데이터를 어떻게 관리하고 어떻게 데이터를 인터페이스로 렌더링합니까?
다양한 이벤트를 관리하는 방법? jQuery 자체는 이벤트 트리거링이 특징입니다. 여러 번, 이벤트> 처리 데이터를 트리거하는 프로세스를 작성할 때입니다. 분명히 더 많은 함수가 있으면 코드가 국수처럼 얽혀 있습니다. 2 ~ 3 년 동안 내 주변에는 많은 전통적인 jQuery 프론트 엔드가 있습니다. 이벤트 대표단, DOM 운영, 브라우저 렌더링 프로세스, 플러그인 구성 요소 포장 등에 대한 심층적 인 연구를 연구하지 않았으므로 코드 품질이 얼마나 나쁜지 상상할 수 있습니다. 실제로 JQuery는 개발 프레임 워크가 아닌 클래스 라이브러리입니다. JQ는 JS 네이티브 API의 추가 캡슐화로 DOM 운영, 애니메이션 작업 및 AJAX를보다 행복하게 수행 할 수 있습니다. 너무 유연하기 때문에 관리하기 어려운 코드를 작성하기가 더 쉽기 때문입니다.
2. 성능 : DOM 작동은 느리고 DOM 객체 자체는 JS 객체이기도합니다. 엄격하게 말하면,이 객체를 조작하는 것이 느리지는 않지만이 객체를 조작 한 후에는 레이아웃 및 페인팅과 같은 일부 브라우저 동작이 트리거됩니다.
요약
웹 제품이 점점 더 복잡해짐에 따라 계층 구조가 필수적입니다. 따라서, 양방향 결합은 오랫동안 인기있는 MVC 프레임 워크와 결합 된 해독제로 사용되며, MVVM 아티팩트가 도출되었다. 블로거는 MVVM이 프론트 엔드의 궁극적 인 솔루션이 될 것이라고 확신합니다. DOM 운영에서 데이터 운영에 이르기까지 프로세스가 필요하지만 결과가 좋으면 이러한 노력은 그만한 가치가 있습니다. 이 과정에서 그것은 또한 당신의 전문 능력을 향상시키는 것입니다. 어서, 내 친구들! ! !