Paste_Image.png

1.总体架构Main.js

import React from 'react';
import ReactDOM from 'react-dom';

import app from './app.js';
import Item from './item.jsx';


require('./css/index.css');
require('./css/base.css');

class Main extends React.Component{
    render(){

        var dataArr = this.props.dataArr;
        var content,footer,num=0;



        dataArr.reduce((n,item)=>{
            num = item.compile ? num : num+1;
        },0);


        if(dataArr.length !== 0){
            content = <section className="main">
                            <input className="toggle-all" 
                                type="checkbox" 
                                checked={num === 0}
                                onChange={this.toggleAll} 
                            />
                            <ul className="todo-list">
                                {
                                    dataArr.map(function(item,index){
                                        return <Item key={index} {...item} 
                                                    toggle={app.toggle.bind(this,item.id)} 
                                                    delectItem={app.delectItem.bind(this,item.id)}
                                               />
                                    }.bind(this))
                                }
                            </ul>
                        </section>

            footer = <footer className="footer">
                        <span className="todo-count">
                            <strong>{num}</strong>
                            <span>条未选中</span>
                        </span>
                    </footer>
        }


        return (

            <div>
                <header className="header" >
                    <h1>todos</h1>
                    <input 
                        className="new-todo" 
                        placeholder="请输入内容" 
                        defaultValue=""
                        onKeyDown={this.downHandle}
                    />
                </header>
                {content}
                {footer}
            </div>
        )
    }

    downHandle(ev){
        if( ev.keyCode === 13 ){
            app.addItem(ev.target.value);
            ev.target.value = "";
        }
    }

    toggleAll(ev){
        app.toggleAll(ev.target.checked)
    }
}



var section = document.createElement('section');
section.className = "todoapp"
document.body.appendChild(section);

function render(dataArr){
    ReactDOM.render(<Main dataArr={dataArr} />,section)
}

render(app.dataArr);

app.render = render;

2.item.js 负责展示列表项

import React from 'react';
import ReactDOM from 'react-dom';

import {classNames} from './util.js';

export default class Item extends React.Component{
    render(){
        return <li className={classNames({
                    completed:this.props.compile
                })}>
                <div className="view">
                    <input className="toggle" type="checkbox" 
                    checked={this.props.compile} onChange={this.props.toggle} />
                    <label>{this.props.content}</label>
                    <button className="destroy" onClick={this.props.delectItem}></button>
                </div>
                <input className="edit" defaultValue="多多对对对" />
            </li>
    }
}

3.app.js 负责控制器的作用

import {store} from './util.js';

let app = {
    dataArr:[],
    info:function (){
        store("todo",app.dataArr);  
    },
    addItem:function (value){
        app.dataArr.push({
            id:Date.now(),
            content:value,
            compile:false
        });

        app.info();

        app.render(app.dataArr);
    },
    toggleAll:function (bl){
        app.dataArr.forEach((item)=>{
            item.compile  = bl;
        })  
        app.info();

        app.render(app.dataArr);
    },
    toggle:function (id){
        app.dataArr.forEach((item)=>{
            if( item.id === id ){
                item.compile  = !item.compile;
            }
        });
        app.info();

        app.render(app.dataArr);    
    },
    delectItem:function (id){
        var newArr = app.dataArr.filter((item)=>{
            return item.id !== id;
        });

        app.dataArr = newArr;
        app.info();
        app.render(app.dataArr);
    }
}

app.dataArr = store("todo") || [];

export default app;

4.工具类，负责存储到本地

let extend = (...args) => {
    var newObj = {};
    for (var i = 0; i < args.length; i++) {
        var obj = args[i];
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                newObj[key] = obj[key];
            }
        }
    }
    return newObj;
}

let store = (namespace, data) => {
    if (data) {
        return localStorage.setItem(namespace, JSON.stringify(data));
    }

    var store = localStorage.getItem(namespace);
    return (store && JSON.parse(store)) || [];
}

let hasOwn = {}.hasOwnProperty;
let classNames = (...args) => {
    var classes = '';

    for (var i = 0; i < args.length; i++) {
        var arg = args[i];
        if (!arg) continue;

        var argType = typeof arg;

        if (argType === 'string' || argType === 'number') {
            classes += ' ' + arg;
        } else if (Array.isArray(arg)) {
            classes += ' ' + classNames.apply(null, arg);
        } else if (argType === 'object') {
            for (var key in arg) {
                if (hasOwn.call(arg, key) && arg[key]) {
                    classes += ' ' + key;
                }
            }
        }
    }

    return classes.substr(1);
}

export {extend,store,classNames}