内容：flux、Angular框架入门
一、flux
1.介绍
flux和react都是facebook推出的产品
它的主要作用是在大型的react项目中进行状态的管理。
2.特性
保持数据、事件的单向流动
保持数据的可预测变化
保证项目的状态管理
提高项目的可维护性
3.工作流程
[图片上传失败...(image-f6a244-1583235911142)]
①用户访问view
②用户通过view发起action
③派发器dispatcher收到action，要求store进行数据的变化
④store进行数据更新，通知view更新页面
⑤view收到通知后，触发事件进行页面渲染
4.基本使用
(1)安装
npm install flux --save
(2)创建仓库
在src目录下创建一个store文件夹，然后在store目录下创建一个index.js文件
/src/store/index.js
import { Dispatcher } from 'flux'//引入派发器
import { EventEmmiter } from 'events'//引入事件监听器
class State extends EventEmmiter {
name:'flux name',age:18
}
var state = new State();
var dispatcher = new Dispathcer();
//定义派发器具体的任务
dispatcher.register(action=>{
switch(action.type){
case 'changeName':
state.name = action.params;
break;
case 'changeAge':
state.age = action.params;
break;
}
state.emit('change');//触发一个change事件，告知使用仓库数据的组件（数据已发生变化）
console.log('派发器执行了')
console.log(state)
})
export default { state,dispatcher }
(3)在页面组件中使用
import React, { Component } from 'react'
//引入仓库
import Store from '../store'
export default class First extends Component {
change(){
//通过派发器派发任务
Store.dispatcher.dispatch({
type:'changeName',
params:'first name'
})
}
componentDidMount(){
//当前组件挂载完成后，监听change事件
//一旦仓库中触发change事件，则进行页面重新渲染
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 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。
AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
2009年开始开发
2010年发布初始版本 AngularJS 1 Javascript
2016年5月份 发布2.0 Typescript 微软
2017年3月份 发布4.0
2017年11月份 发布5.0
2018年5月份 发布6.0
2018年10月份 发布7.0
2019年5月份 发布8.0
2019年11月份 发布9.0
2.官网
前提条件：
3.脚手架
node.js环境，并且版本在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)初始化项目
进入指定目录，然后执行命令初始化项目
ng new 项目名称
Would you like to add Angular routing? No 是否安装路由（暂时不安装）
? Which stylesheet format would you like to use? CSS 选择项目样式预处理器
(3)目录结构
myproject 项目名称
e2e 端对端的测试目录 用于做自动化测试
node_modules 第三方依赖包
src 应用源代码目录（主战场）
app 包含应用的组件和模块目录
assets 资源目录
environments 环境配置目录（开发环境、测试环境、生产环境）
favicon icon图标
index.html 首页
main.ts 整个项目的入口，angular通过它来启动项目
polyfills.ts 用来导入一些必要的库文件，为了让angular能够运行在老版本下
styles.css 全局样式
test.ts 自动化测试
.editorconfig 配置文件
.gitignore git忽略提交的配置文件
angular.json angular命令行工具的配置文件
browserlist 兼容浏览器列表配置文件
karma.conf.js 单元测试执行器的配置文件
package.json 第三方依赖包配置文件
tsconfig.app.json typecript配置文件
tslint.json 用来定义typescript代码质量检查的规则
(4)启动项目
命令行，进入项目根目录，执行如下命令
npm start 或者 ng serve
(5)脚手架项目运行流程
/src/index.html > /src/main.ts > /src/app/app.module.ts > /src/app/app.component.*
angular中组件的文件类型构成：
.css 组件的样式表
.html 组件的页面结构
.ts 组件的业务逻辑
4.基本使用
(1)组件创建
在项目根目录下执行如下命令：
ng generate component [组件目录/]组件名称
可以简写成
ng g c [组件目录/]组件名称
(2)常用指令
①渲染变量
在组件的ts文件中定义变量
在组件的html文件中可以通过{{ 变量名 }}
{{ 单行js语法都可以执行 }}
②事件
在组件的ts文件中定义好函数
在组件的html文件中，可以给标签元素绑定相应的事件
<button (事件名)=“自定义函数名()”>按钮</button>
③样式
style：
在ts文件中定义一个对象类型的变量
styleA = {
'color':'red',
'fontSize':'30px'
}
在html文件中使用ngStyle来设置样式
<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只是用来做判断/循环用的标签，它不会页面结构中存在。
⑤循环
*ngFor
<ul>
<!-- vue写法 <li v-for="item of users"></li> -->
<!-- 不带下标 -->
<li *ngFor="let item of users">
<p>编号：{{ item.id }}</p>
<p>姓名：{{ item.name }}</p>
</li>
</ul>
<ol>
<!-- 带下标 -->
<li *ngFor="let item of users;let i = index;">
{{ i+1 }} --- {{ item.name }}
</li>
</ol>
网友评论