JS裡計數器的使用

這次帶給大家JS裡計數器的使用，使用JS裡計數器的注意事項有哪些，下面就是實戰案例，一起來看一下。

angular2+ 的學習成本應該是三大框架中最高的一個，教程及案例稀缺，流程較為複雜，這裡我用計數器和在線獲取用戶數據並渲染成列表這兩個案例來幫大家快速入手angular2+。

在開始之前，希望你能先掌握rxjs以及typescript，否則對其中的一些寫法可能會覺得難以理解。

在開始之前，需要先安裝@ngrx/store和@ngrx/effects

yarn add @ngrx/store @ngrx/effects

本教學所使用的 ngrx/effects和ngrx/store版本皆為5.2.0。

先來大致說一下開發流程：

開始 -> 編寫資料模型-> 編寫action# -> 編寫redurces並配置到對應module -> 編寫services -> 編寫effects並配置到對應module -> 建立元件-> 元件綁定資料模型-> 渲染

我們先完成計數器案例。此案例由於沒有非同步任務，所以可以省略掉services和effects。 從

建立專案

到啟動初始頁面之間的步驟這裡就不講了。注意style要使用scss。還有不要使用cnpm安裝套件。改用yarn或npm，這樣後期使用不容易報錯。

ng new your-project --style scss

第一步：寫資料模型（app/models/num.ts）

export class Num {
  count: number;
 
  constructor(num: number) {    this.count = num;
  }
}

第二步：寫action（app /actions/num.ts）

import {Action} from '@ngrx/store';
 
export enum NumActionType {
  Add = 'ADD'}
 
export class ADD implements Action {
  readonly type = NumActionType.Add;  //固定写法，必须叫type}

第三步：寫redurcers（app/redurces/modelNum.ts）

import {Num} from '../models/num';
import {Action} from '@ngrx/store';
import {NumActionType} from '../actions/num';
 
 
export const modelNum = (state: Num = new Num(0), action: Action) => {       
  switch (action.type) {    case NumActionType.Add:
      state.count++;      return state;    default:      return state;
  }
};

#不要忘記設定

redurcer（app/app.module.ts）

  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    StoreModule.forRoot({ modelNum}),      //配置redurcer
  ],

第四部：建立元件

ng g component model-num

第五步：元件綁定數據模型（連帶完成第六步）

元件html檔：

<p>
  <input (click)="add()" value="+" type="button">
  <p>{{num.count}}</p>
  <input value="-" type="button">
  <br/>
  <a routerLink="/list">to list demo</a></p>

元件ts檔：

import {Component, OnInit} from '@angular/core';
import {Num} from '../models/num';
import {Store} from '@ngrx/store';
import {NumActionType} from '../actions/num';

@Component({
  selector: 'app-model-demo',
  templateUrl: './model-demo.component.html',
  styleUrls: ['./model-demo.component.scss']
})
export class ModelDemoComponent implements OnInit {
  constructor(private _store: Store<any>) {
    this._store.select(&#39;modelNum&#39;).subscribe(mNum => {    //涉及到rxjs。    
      this.num = mNum;
      console.log(mNum);
    });
  }
  public num: Num;
  public add() {
    console.log(&#39;add&#39;);
    this._store.dispatch({          //调用dispatch触发添加redurces
      type: NumActionType.Add
    });
  }
  ngOnInit() {
  }
}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網

其它

相關文章！

推薦閱讀：

JavaScript之優化DOM

#Vue的計算屬性#########

以上是JS裡計數器的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！