內(nèi)容：flux、Angular框架入門

一、flux

1.介紹

flux和react都是facebook推出的產(chǎn)品

它的主要作用是在大型的react項目中進(jìn)行狀態(tài)的管理。

2.特性

保持?jǐn)?shù)據(jù)、事件的單向流動

保持?jǐn)?shù)據(jù)的可預(yù)測變化

保證項目的狀態(tài)管理

提高項目的可維護(hù)性

3.工作流程

[圖片上傳失敗...(image-f6a244-1583235911142)]

①用戶訪問view

②用戶通過view發(fā)起action

③派發(fā)器dispatcher收到action，要求store進(jìn)行數(shù)據(jù)的變化

④store進(jìn)行數(shù)據(jù)更新，通知view更新頁面

⑤view收到通知后，觸發(fā)事件進(jìn)行頁面渲染

4.基本使用

(1)安裝

npm install flux --save

(2)創(chuàng)建倉庫

在src目錄下創(chuàng)建一個store文件夾，然后在store目錄下創(chuàng)建一個index.js文件

/src/store/index.js

import { Dispatcher } from 'flux'//引入派發(fā)器
import { EventEmmiter } from 'events'//引入事件監(jiān)聽器
class State extends EventEmmiter {
    name:'flux name',age:18
}
var state = new State();
var dispatcher = new Dispathcer();
//定義派發(fā)器具體的任務(wù)
dispatcher.register(action=>{
    switch(action.type){
        case 'changeName':
            state.name = action.params;
            break;
        case 'changeAge':
            state.age = action.params;
            break;
    }
    state.emit('change');//觸發(fā)一個change事件，告知使用倉庫數(shù)據(jù)的組件（數(shù)據(jù)已發(fā)生變化）
    console.log('派發(fā)器執(zhí)行了')
    console.log(state)
})
export default { state,dispatcher }

(3)在頁面組件中使用

import React, { Component } from 'react'
//引入倉庫
import Store from '../store'
export default class First extends Component {
    change(){
        //通過派發(fā)器派發(fā)任務(wù)
        Store.dispatcher.dispatch({
            type:'changeName',
            params:'first name'
        })
    }
    componentDidMount(){
        //當(dāng)前組件掛載完成后，監(jiān)聽change事件
        //一旦倉庫中觸發(fā)change事件，則進(jìn)行頁面重新渲染
        Store.state.on('change',()=>{
            this.setState({})
        })
    }
    render() {
        console.log(Store)
        return (
            <div>
                <h3>這是first組件</h3>
                <p>從倉庫中獲取到的name屬性值為：{ Store.state.name }</p>
                <button onClick={ ()=>this.change() }>點我改變倉庫name</button>
            </div>
        )
    }
}

二、Angular框架

1.簡介

? Angular 是一個應(yīng)用設(shè)計框架與開發(fā)平臺，用于創(chuàng)建高效、復(fù)雜、精致的單頁面應(yīng)用。

? AngularJS 誕生于2009年，由Misko Hevery 等人創(chuàng)建，后為Google所收購。是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。AngularJS有著諸多特性，最為核心的是：MVC（Model–view–controller）、模塊化、自動化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等等。

? 2009年開始開發(fā)

? 2010年發(fā)布初始版本 AngularJS 1 Javascript

? 2016年5月份 發(fā)布2.0 Typescript 微軟

? 2017年3月份 發(fā)布4.0

? 2017年11月份 發(fā)布5.0

? 2018年5月份 發(fā)布6.0

? 2018年10月份 發(fā)布7.0

? 2019年5月份 發(fā)布8.0

? 2019年11月份 發(fā)布9.0

2.官網(wǎng)

https://angular.cn/

前提條件：

3.腳手架

node.js環(huán)境，并且版本在10.9.0以上

(1)安裝

npm install @angular/cli -g

Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. No

(2)初始化項目

進(jìn)入指定目錄，然后執(zhí)行命令初始化項目

ng new 項目名稱

Would you like to add Angular routing? No 是否安裝路由（暫時不安裝）
? Which stylesheet format would you like to use? CSS 選擇項目樣式預(yù)處理器

(3)目錄結(jié)構(gòu)

myproject 項目名稱

? e2e 端對端的測試目錄 用于做自動化測試

? node_modules 第三方依賴包

? src 應(yīng)用源代碼目錄（主戰(zhàn)場）

? app 包含應(yīng)用的組件和模塊目錄

? assets 資源目錄

? environments 環(huán)境配置目錄（開發(fā)環(huán)境、測試環(huán)境、生產(chǎn)環(huán)境）

? favicon icon圖標(biāo)

? index.html 首頁

? main.ts 整個項目的入口，angular通過它來啟動項目

? polyfills.ts 用來導(dǎo)入一些必要的庫文件，為了讓angular能夠運行在老版本下

? styles.css 全局樣式

? test.ts 自動化測試

? .editorconfig 配置文件

? .gitignore git忽略提交的配置文件

? angular.json angular命令行工具的配置文件

? browserlist 兼容瀏覽器列表配置文件

? karma.conf.js 單元測試執(zhí)行器的配置文件

? package.json 第三方依賴包配置文件

? tsconfig.app.json typecript配置文件

? tslint.json 用來定義typescript代碼質(zhì)量檢查的規(guī)則

(4)啟動項目

命令行，進(jìn)入項目根目錄，執(zhí)行如下命令

npm start 或者 ng serve

(5)腳手架項目運行流程

/src/index.html > /src/main.ts > /src/app/app.module.ts > /src/app/app.component.*

angular中組件的文件類型構(gòu)成：

.css 組件的樣式表

.html 組件的頁面結(jié)構(gòu)

.ts 組件的業(yè)務(wù)邏輯

4.基本使用

(1)組件創(chuàng)建

在項目根目錄下執(zhí)行如下命令：

ng generate component [組件目錄/]組件名稱

可以簡寫成

ng g c [組件目錄/]組件名稱

(2)常用指令

①渲染變量

在組件的ts文件中定義變量

在組件的html文件中可以通過{{ 變量名 }}

{{ 單行js語法都可以執(zhí)行 }}

②事件

在組件的ts文件中定義好函數(shù)

在組件的html文件中，可以給標(biāo)簽元素綁定相應(yīng)的事件

<button (事件名)=“自定義函數(shù)名()”>按鈕</button>

③樣式

style：

在ts文件中定義一個對象類型的變量

styleA = {
    'color':'red',
    'fontSize':'30px'
}

在html文件中使用ngStyle來設(shè)置樣式

<p [ngStyle]='styleA'>心中充滿陽光</p>

class：

在css文件中定義好樣式

在html文件中使用樣式

<p [ngClass]="{red: true}">才能照亮別人</p>

④條件判斷

<p *ngIf="islogin" [ngClass]="{red: true}">歡迎：{{ username }}</p>
<p *ngElse>請登錄</p>

ng-container只是用來做判斷/循環(huán)用的標(biāo)簽，它不會頁面結(jié)構(gòu)中存在。

⑤循環(huán)

*ngFor

<ul>
    <!-- vue寫法 <li v-for="item of users"></li> -->
    <!-- 不帶下標(biāo) -->
    <li *ngFor="let item of users">
        <p>編號：{{ item.id }}</p>
        <p>姓名：{{ item.name }}</p>
    </li>
</ul>
<ol>
    <!-- 帶下標(biāo) -->
    <li *ngFor="let item of users;let i = index;">
        {{ i+1 }} --- {{ item.name }}
    </li>
</ol>