73react_todolist項目1

?

?

目錄

todolist項目：... 1

antd：... 2

階段1：... 2

服務層實現：... 2

視圖層實現，輸入框處理：... 3

階段2，列表顯示、更改todo的完成狀態：... 6

階段3，項目目錄調整：... 11

階段4，數據過濾：... 12

?

?

?

todolist項目：

todo，待辦；

?

人機交互，實質就是增刪改查；

前端MVC框架、后端MVC框架；

?

注：

開發環境用：npm + webpack + babel；

部署是另一套東西；

?

國際化：

中、英兩版；

復雜的網頁只作字符串轉換并不合適；

antd中的國際化；

?

瀑布式開發設計（傳統，需求調研，各種設計，時間周期長）；

敏捷開發（快速迭代）；

?

異步提交；部分刷新；事件通知機制；重繪DOM樹；

?

?

antd：

ant design，螞蟻金服開源的React UI庫；

?

https://ant.design/index-cn

https://ant.design/docs/react/introduce-cn

?

用戶提交，需要表單控件，對于React來說也是一個組件，但這些組件需要用戶看到，為了美觀引入antd；

?

$ npm i antd --save

……

+ antd@2.13.14

added 68 packages and updated 1 package in 44.219s

?

?

需求分析：

分層：

視圖層，負責顯示數據，每一個React組件一個xxx.js文件；

服務層，負責業務數據處理邏輯，命名為xxxService.js文件；

Model層，負責數據，用Local Storage代替；

文件均在項目根下的./src/里；

?

注：

服務層要與視圖層劃分清楚，這比較麻煩；

?

?

階段1：

服務層實現：

./src/service.js

JS不支持靜態變量，但支持靜態方法；

但在babel下可用static定義靜態變量；

import store from 'store';

?

export default class TodoService {?? //與組件無關，是類，大駝峰

??? static NAMESPACE = 'todo::';?? //前綴，查看https://www.zhihu.com/的Application中Local Storage，相同類型的用同一個前綴，易于區分；看業務情況分段，一般最多2段即可，否則代碼復雜

??? todos = [];?? //用數組存儲待辦事宜，是在內存中，刷新網頁后會清空，所以必須存在Local Storage中

?

??? create(title) {?? //提供create方法，創建todo，把數據存儲到Local Storage上（Local Storage當作是后臺數據庫，持久化用），同時插入到todos數組中；title從browser端來，是用戶提交的輸入，在視圖層提供用戶提交的文本框

??????? console.log('service');

??????? const todo = {

??????????? key: TodoService.NAMESPACE + (new Date()).valueOf(),?? //毫秒時間戳

??????????? title: title,

??????????? completed: false

??????? };

??????? this.todos.push(todo);

??????? store.set(todo.key, todo);

??????? return todo;

??? }

}

注：

前端的Model層相對簡單，不用ORM工具，而是用browser的Local Storage模擬的存儲；

后端的Model層要用ORM框架；

?

?

視圖層實現，輸入框處理：

<Input .../>，輸入框；

https://ant.design/components/input-cn/

?

輸入框，能夠讓用戶提交信息，使用接收回車鍵即提交信息（另，也可點一按鍵即提交，這是錦上添花），即鍵盤按下就是一個事件（與處理鼠標點擊一樣），在<Input/>中；

輸入框的“回車”和“按鈕”是一個事件，增加按鈕是錦上添花；

?

import { Input } from 'antd';

ReactDOM.render(<Input placeholder="Basic usage" />, mountNode);

addonBefore，前綴標簽；

addonAfter，后置標簽；

placeholder，占位詞；

onPressEnter，表示光標在輸入框中，按下了回車鍵觸發；

size="small"，小輸入框，large大輸入框；

?

./src/Create.js

import React from 'react';

import { Input,Card } from 'antd';?? //組合使用Input和Card組件

?

// import { Input } from 'antd';

import 'antd/lib/input/style';?? //樣式導入

// ReactDOM.render(<Input placeholder="Basic usage" />, mountNode);

?

// import { Card } from 'antd';

import 'antd/lib/card/style';

// ReactDOM.render(

//?? <Card

//???? title="Card title"

//???? extra={<a href="#">More</a>}

//???? style={{ width: 300 }}

//?? >

//???? <p>Card content</p>

//???? <p>Card content</p>

//???? <p>Card content</p>

//?? </Card>,

//?? mountNode);

?

// export default class Create extends React.Component {?? //一定要導入React否則有異常

//???? render() {

//??????? ?return (

//???????? <Card title='請輸入待辦事宜' style={{ width: 300 }}>

//???????????? <Input placeholder="Basic usage" onPressEnter={this.props.onCreate} />

//???????? </Card>

//???????? );

//???? }

// }

?

export default props =>?? //缺省導出無狀態組件，這樣寫就是讓不在這里面定義業務的方法

??? <Card title='請輸入待辦事宜' style={{ width: 300 }}>

??????? <Input placeholder="Basic usage" onPressEnter={props.onCreate}/>?? //等價于onPressEnter={(event) => {props.onCreate(event)}}；測試時可用onPressEnter={(...args) => console.log('args is ', args)}看打印出什么，就能決定參數怎么寫

?????? {/* <Input placeholder="Basic usage" onPressEnter={(event) => {props.onCreate(event)}}/> */}?? //onPressEnter本質就是要關聯一個單個參數的函數就行了，相當于綁定一個函數對象；onPressEnter實現的是一個函數定義，這個函數定義是一個參數，這個參數就是event對象，該箭頭函數本質就是調用props.onCreate(title)函數，這個箭頭函數只是作轉發，完全可省略，用上面那種寫法

??? </Card>

注：

?

?

./src/index.js

import React from 'react';

import ReactDom from 'react-dom';

?

import Create from './Create';

?

import TodoService from './service';

?

class Root extends React.Component {

??? constructor(props) {

??????? super(props);

??????? this.service = new TodoService();?? //將業務的TodoService實例化，作為Root實例的屬性

??? }

?

??? // handleCreate(...args) {?? //測試用，看打印的信息，可知參數如何寫；MDN里html幫助，W3CSchool中的幫助

??? //???? console.log('Root handlerCreate');

??? //???? console.log(this);

??? //???? console.log('args is ', args);

??? // }

??? handleCreate(event) {?? //該函數處理Input中獲取到的用戶的輸入，及拿到數據后調用業務層service.js中相應的方法處理

??????? console.log('Root handleCreate');

??????? console.log(this);

??????? console.log('event is ', event.target, event.target.value);

??????? this.service.create(event.target.value);?? //數據持久化，拿到用戶輸入的數據，之后的處理（不應該在Create.js組件里寫類似這樣的方法，數據交給index.js的Root組件處理，這就需要組件間數據共享，使用props），應調用service.js中TodoService類的create方法，構造器中有實例化該類

??? }

?

??? render() {

??????? return (

??????????? <div>

??????????????? <Create onCreate={this.handleCreate.bind(this)}/>?? //自定義組件屬性onCreate，其它名字也可，約定這樣寫，用于注入數據處理函數到Create組件的props中；此處要綁定Root的this，否則handleCreate中打印的是Create元素的this

??????????? </div>

??????? )

??? }

}

?

ReactDom.render(<Root />, document.getElementById('root'));

?

注：

?

若手動將Local Storage中的數據清掉，數組中仍有，這兩處不會同步；

若再次刷新網頁，內存數組中的會清掉；

?

?

?

階段2，列表顯示、更改todo的完成狀態：

增加的todo待辦事宜，得顯示出來；

?

CheckBox，多選框，用來選中（完成）和取消（未完成）；

onChange，選中|取消時觸發回調函數；

checked，是否選中，如在Todo.js中<Checkbox checked={props.todo.completed} .../>；

https://ant.design/components/checkbox-cn/

?

Grid柵格系統：

布局方案，ant desigh和bootstrap很像，都使用一套柵格系統，使用24柵格，即每一個內部都能切分為24份；

柵格卡片：

https://ant.design/components/card-cn/

?

例：

m.values()和m.keys()是迭代器（惰性求值），而array中的forEach()是立即返回；

m = new Map();

?

m.set(1,'a');

m.set(2,'b');

m.set(3,'c');

console.log(m);

?

let t = m.forEach((value,key) => console.log(key, '==', value));?? //forEach方法遍歷后，沒有返回值

console.log(t);

t = [...m.values()].map(item => item + 1);?? //map方法遍歷后，有返回值

console.log(t);

?

k = [...m.keys()].map(item => item + 1);

console.log(k);

輸出：

Map { 1 => 'a', 2 => 'b', 3 => 'c' }

1 '==' 'a'

2 '==' 'b'

3 '==' 'c'

undefined

[ 'a1', 'b1', 'c1' ]

[ 2, 3, 4 ]

?

?

?

./src/Todo.js，構建todo組件：

import React from 'react';

import { Checkbox, Card, Col, Row } from 'antd';

?

import 'antd/lib/checkbox/style';

import 'antd/lib/Card/style';

import 'antd/lib/Col/style';

import 'antd/lib/Row/style';

?

// import { Checkbox } from 'antd';

// function onChange(e) {

//?? console.log(`checked = ${e.target.checked}`);

// }

// ReactDOM.render(

//?? <Checkbox onChange={onChange}>Checkbox</Checkbox>,

//?? mountNode);

?

// import { Card, Col, Row } from 'antd';

// ReactDOM.render(

//?? <div style={{ background: '#ECECEC', padding: '30px' }}>

//???? <Row gutter={16}>

//?????? <Col span={8}>

//???????? <Card title="Card title" bordered={false}>Card content</Card>

//?????? </Col>

//?????? <Col span={8}>

//???????? <Card title="Card title" bordered={false}>Card content</Card>

//?????? </Col>

//?????? <Col span={8}>

//???????? <Card title="Card title" bordered={false}>Card content</Card>

//?????? </Col>

//???? </Row>

//?? </div>,

//?? mountNode);

?

export default props => (

??? <Card style={{ width: 300 }}>

??????? <Row>

??????????? <Col span={4}>

??????????????? <Checkbox checked={props.todo.completed} onChange={event => props.onChange(props.todo.key, event.target.checked)} />?? //若沒有checked屬性，刷新頁面后，完成狀態的待辦事宜不會選中，但Local Storage中的completed是true

??????????? </Col>

??????????? <Col span={20}>

??????????????? {props.todo.title}

??????????? </Col>

??????? </Row>

??? </Card>

)

?

?

./src/index.js

import React from 'react';

import ReactDom from 'react-dom';

?

import Create from './Create';

?

import TodoService from './service';

?

import Todo from './Todo';

?

class Root extends React.Component {

??? constructor(props) {

??????? super(props);

??????? this.service = new TodoService();

??????? this.state = ({todos: this.service.todos})?? //若無此句，新增title后，Root的state沒變化，頁面不會刷新導致看不到新增的，而在Local Storage中是有的

??? }

?

??? // handleCreate(...args) {

??? //???? console.log('Root handlerCreate');

??? //???? console.log(this);

??? //???? console.log('args is ', args);

??? // }

??? handleCreate(event) {

??????? // console.log('Root handleCreate');

??????? // console.log(this);

??????? // console.log('event is ', event.target, event.target.value);

??????? this.service.create(event.target.value);

??????? this.setState({todos: this.service.todos});

??? }

?

??? handleCheckedChange(key, checked) {?? //增加事件響應函數，handleCheckedChange(event),event.target.checked=false|true；

??????? console.log('handleCheckedChange', key, checked);

??????? this.service.setTodoState(key, checked);

??????? this.setState({todos: this.service.todos});

??? }

?

??? render() {

??????? return (

??????????? <div>

??????????????? <Create onCreate={this.handleCreate.bind(this)}/>

??????????????? <br />

??????????????? {/* {this.service.todos.map(

??????????????????? item => <Todo todo={item} key={item.key} onChange={this.handleCheckedChange.bind(this)}/>)

??????????????? } */}?? //迭代所有todos元素，返回一個個React組件；如下圖，要求迭代的元素有唯一的key，此處加上key={item.key}

??????????????? {

??????????????????? [...this.service.todos.values()].map(

??????????????????????? item => <Todo key={item.key} todo={item} onChange={this.handleCheckedChange.bind(this)} />

??????????????????? )

??????????????? }

??????????? </div>

??????? );

??? }

}

?

?

ReactDom.render(<Root />, document.getElementById('root'));

?

在index.js的<Todo />組件中，加key={item.key}

?

./service.js

import store from 'store';

?

export default class TodoService {

??? constructor() {

??????? // super();

??????? this.load();?? //刷新頁面后，從Local Storage裝載數據，否則刷新頁面后沒有數據

??? }

?

??? load() {

??????? store.each((value,key) => {

??????????? if (key.startsWith(TodoService.NAMESPACE))?? //前綴即表示業務，防止與其它業務沖突，只過濾指定的業務

??????????????? // this.todos.push(value);

??????????????? this.todos.set(key, value);

??????? });

??????? console.log(this.todos);

??? }

???

??? static NAMESPACE = 'todo::';

?

??? // todos = [];

??? todos = new Map();?? //遍歷數組找到key匹配的，為高效使用ES6提供的Map類型

?

??? create(title) {

??????? // console.log('service');

??????? const todo = {?? //todo有3個屬性，key、title、completed，completed表示完成狀態

??????????? key: TodoService.NAMESPACE + (new Date()).valueOf(),

??????????? title: title,

??????????? completed: false

??????? };

?

??????? // this.todos.push(todo);

??????? this.todos.set(todo.key, todo);?? //存儲todo

??????? store.set(todo.key, todo);?? //持久化todo

??????? return todo;

??? }

?

??? setTodoState(key, checked) {

??????? let todo = this.todos.get(key);

??????? if (todo) {

??????????? todo.completed = checked;

??????????? store.set(key, todo);?? //同步Local Storage

??????? }

??? }

}

?

注：

?

?

?

階段3，項目目錄調整：

./src/component/{Create.js,Todo.js,TodoApp.js,Filter.js}?? #渲染的事情歸TodoApp負責，并管理所有的狀態；Create負責顯示文本框，接收用戶的輸入；Todo負責每一條待辦事宜的顯示；Filter負責狀態的切換

./src/service/service.js?? #負責業務的處理，為了簡單，把數據處理也放在這里

./src/index.js

?

./src/index.js

import React from 'react';

import ReactDom from 'react-dom';

?

import TodoApp from './component/TodoApp';

?

ReactDom.render(<TodoApp />, document.getElementById('root'));

?

./src/component/TodoApp.js

import React from 'react';

?

import Create from './Create';

?

import TodoService from '../service/service';

?

import Todo from './Todo';

?

export default class Root extends React.Component {

??? ……

}

?

?

?

階段4，數據過濾：

過濾什么狀態的待辦事宜，有3種，未完成、完成、全部；

?

使用antd的select：

https://ant.design/components/select-cn/

?

./src/component/Filter.js

import React from 'react';

?

import {Select, Card, Row, Col} from 'antd';

?

import 'antd/lib/select/style';

import 'antd/lib/card/style';

import 'antd/lib/row/style';

import 'antd/lib/col/style';

?

// import { Select } from 'antd';

// const Option = Select.Option;

// function handleChange(value) {

//?? console.log(`selected ${value}`);

// }

// ReactDOM.render(

//?? <div>

//???? <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>

//?????? <Option value="jack">Jack</Option>

//?????? <Option value="lucy">Lucy</Option>

//?????? <Option value="disabled" disabled>Disabled</Option>

//?????? <Option value="Yiminghe">yiminghe</Option>

//???? </Select>

//???? <Select defaultValue="lucy" style={{ width: 120 }} disabled>

//?????? <Option value="lucy">Lucy</Option>

//???? </Select>

//?? </div>,

//?? mountNode);

?

const Option = Select.Option;

?

export default props => (

??? <Card style={{ width: 300 }}>

??????? <Row>

??????????? <Col span="4"></Col>

??????????? <Col span="20">

??????????????? <Select style={{ width: 120 }} defaultValue="uncompleted" onChange={value => props.onChange(value)}>

??????????????????? <Option value="all">所有</Option>

??????????????????? <Option value="completed">完成</Option>

??????????????????? <Option value="uncompleted">未完成</Option>

??????????????? </Select>

??????????? </Col>

??????? </Row>

??? </Card>

)

?

?

./src/component/TodoApp.js

import React from 'react';

?

import Create from './Create';

?

import TodoService from '../service/service';

?

import Todo from './Todo';

?

import Filter from './Filter';

?

export default class Root extends React.Component {

??? constructor(props) {

??????? super(props);

??????? this.service = new TodoService();

??????? this.state = ({todos: this.service.todos, filter: 'uncompleted'})

??? }?? //在state的屬性中加入filter

?

??? // handleCreate(...args) {

??? //???? console.log('Root handlerCreate');

??? //???? console.log(this);

??? //???? console.log('args is ', args);

??? // }

??? handleCreate(event) {

??????? // console.log('Root handleCreate');

??????? // console.log(this);

??????? // console.log('event is ', event, event.target, event.target.value);

??????? this.service.create(event.target.value);

??????? this.setState({todos: this.service.todos});

??? }

?

??? handleCheckedChange(key, checked) {?? //handleCheckedChange(event),event.target.checked=false|true

??????? console.log('handleCheckedChange', key, checked);

??????? this.service.setTodoState(key, checked);

??????? this.setState({todos: this.service.todos});

??? }

?

??? handleFilterChange(value) {?? //增加事件處理函數

??????? // console.log('~~~~~~~', args);

??????? // console.log(this);

?????? console.log(value);

??????? this.setState({filter: value});;

??? }

?

??? render() {

??????? return (

??????????? <div>

??????????????? <Create onCreate={this.handleCreate.bind(this)}/>

??????????????? <Filter onChange={this.handleFilterChange.bind(this)}/>

??????????????? <br />

??????????????? {/* {this.service.todos.map(

??????????????????? item => <Todo todo={item} key={item.key} onChange={this.handleCheckedChange.bind(this)}/>)

??????????????? } */}

??????????????? {/* {

??????????????????? [...this.service.todos.values()].map(

??????????????????????? item => <Todo key={item.key} todo={item} onChange={this.handleCheckedChange.bind(this)} />

??????????????????? )

??????????????? } */}

??????????????? {

??????????????????? [...this.service.todos.values()].filter(

??????????????????????? item => {

??????????????????????????? let fs = this.state.filter;

??????????????????????????? if(fs === 'all') {

??????????????????????????????? return true;

??????????????????????????? } else if(fs === 'completed') {

??????????????????????????????? // if(item.completed === true)

??????????????????????????????? //???? return true;

??????????????????????????????? // else

??????????????????????????????? //???? return false;

??????????????????????????????? return item.completed === true;

??????????????????????????? } else if(fs === 'uncompleted') {

??????????????????????? ????????// if(item.completed === false)

??????????????????????????????? //???? return true;

??????????????????????????????? // else

??????????????????????????????? //???? return false;

??????????????????????????????? return item.completed === false;

??????????????????????????? }

??????????????????????? }

??????????????????? ).map(

??????????????????????? item => <Todo key={item.key} todo={item} onChange={this.handleCheckedChange.bind(this)} />

??????????????????? )

??????????????? }?? //迭代待辦事宜時，加入數組的filter函數過濾

??????????? </div>

??????? );

??? }

}

?

?

?