首頁 > 文章 > web前端 > JS裡計數器的使用

JS裡計數器的使用

php中世界最好的语言原創: 2018-03-19 16:27:013093瀏覽

這次帶給大家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檔：

e388a4556c0f65e1904146cc1a846bee
  76f625d29d91ff4c359a75491cf07c39
  e388a4556c0f65e1904146cc1a846bee{{num.count}}94b3e26ee717c64999d7867364b1b4a3
  1a1811f9091ca6cacbc217ee2d376c6d
  076402276aae5dbec7f672f8f4e5cc81
  0403914373b426d6655839ccdad6ceb9to list demo5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3

元件ts檔：

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

@Component({
  selector: &#39;app-model-demo&#39;,
  templateUrl: &#39;./model-demo.component.html&#39;,
  styleUrls: [&#39;./model-demo.component.scss&#39;]
})
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中文網

其它

JS裡計數器的使用

相關文章