前端jquery之后的进阶

AY02————学习了node.js建立服务器
时间的获取：ES6的方法：Date.now()——时间戳
Date.toISOString().substr(0,10)  获取当前日期，格式为“2017-4-15”
——————————————————————————————————————————————
用到了http模块，url(url地址)模块，request模块，cheerio模块
一个简单的爬虫数据的例子：
const http = require("http");
const request = require("request"); // 请求三方模块;
const cheerio = require("cheerio");  //爬虫模块
var data ="";
request("http://www.bilibili.com/",function (err,res,body) {
console.log(res);
if(!err&&res.statusCode==200){
console.log(body)
//加载爬虫爬去的数据
var $=cheerio.load(body);
//取出数据进行赋值
data = $(".m-i-last").html()
}
})






http.createServer((req,res)=>{
// text/plain 字符串数据 text/html 服务器可以解析HTML标签
res.writeHead(200,{"Content-Type":"text/html"});
//数据插入到页面
res.write(data);
res.end();
}).listen(4500,function () {     // listen是监听的端口号
console.log("服务器又搭建完毕了")
})


//实时监听服务器的变化 supervisor 三方模块
//npm install -g supervisor
//运行 supervisor 文件名 可以实时监听了


//1.项目搭建的时候要先设置Npm 初始化 npm init
——————————————————————————————————————————————
path模块：
1.path.basename只取最后的文件格式
2.__dirname 输出当前文件的绝对路径
3.path.dirname() ==  __dirname
4.path.join(__dirname,"doc")  合并路径
——————————————————————————————————————————————
一个用ejs模板搭建的路由
//调用express 模块的方法
// 1.首先要安装 express 全局的
// 2.然后要安装 express 局部的 局部的要有依赖关系
// 3.请求express 模块 调用express的方法
// 4.发起get请求 
// 5.使用use方法 设置路由


var express = require("express");
var path = require("path");
var app = express();
// 6.分离路由，每个模块作为单独的模块来引入
var indexRouter = require("./router/index");
var userRouter = require("./router/user");


// 7.全部是用use方法来加载各个模块
app.use("/",indexRouter)
app.use("/user",userRouter)


//设置模板的路径
app.set("views", path.join(__dirname,"views"));
//设置模板的引擎
app.set("view engine","ejs");




// 8.搭建服务器
var server = app.listen(4000,function () {
var port = server.address().port;
  console.log("express搭建的服务器完毕了,监听的端口是"+port)
})


//9.安装EJS模板
// npm install --save-dev ejs
————————————————————————————————————————————————————————————————————————————————————————
DAY03————使用了express模板引擎生成项目        ——————————启动项目在文件夹的bin目录下的www文件    命令行：supervisor server www
居中问题:
1、使用弹性盒模型：  display：flex；     justify-content：center;  align-items:center;
2、已知宽高使用定位absolute，使用left以及top属性设置50%减去宽高的一半
3、使用table属性：display：table-cell        vertical-align:middle；
双飞翼布局:
两边固定宽度：中间部分自适应：中间部分先显示
css的长度表达式计算:  /*calc减号两边一定要加空格*/       示例:width: calc(100% - 400px);
————————————————————————————————————————————————————————————————————————————————————————
DAY04————登录注册的demo
ejs模板可以通过  <%- include('header')%>  这种方式是项目模块化  <%   %>  表达式中可以写js
from表单提交post提交的方式提交的数据存在提交数据的body对象中
redirect是页面重定向的设置
————————————————————————————————————————————————————————————————————————————————————————
DAY05————主要内容移动端的布局，以及SVN的多人协作项目提交冲突的解决方案
normalize.css文件是项目初始化的一个css样式文件
css的整合：@import url("normalize.css");         通过import整合css资源
  @import url("amazeui.min.css");
    @import url("active.css");
    @import url("common.css");
rem单位的根字体的设置是在html上的font-size设置    ：font-size：15.625vw；
而字体大小继承的是body的根字体设置   ：  一般设置为   font-size：12px；
SVN多人合作项目提交代码冲突的解决情况的大致步骤：
1.先将自己的代码备份，以防止丢失
2.将代码打开，将代码中自动生成的错误代码信息删除
3.将生成的错误文件删除，
4.将SVN代码库中的文件update下来，对文件夹进行clear
5.最后将自己的代码放入，commit
————————————————————————————————————————————————————————————————————————————————————————
DAY06————mongodb
————————————————————注册的业务逻辑
// 1.请求mongodb服务器模块


var mongodb = require("mongodb");


// 2.搭建mongodb的服务器


function registerDatabase(data){
    
var server = new mongodb.Server(
        
// 设置服务器的端口号和主机名
        
"localhost",
        
"27017",
        
// 开启自动连接模式
        
{
            
auto_reconnect:true
        
}
    
);
    
// 实例化mongodb模块
    
var db = mongodb.Db(
        
"music",
        
server,


        // 以安全模式开启数据库
        
{
            
safe:true
       
 }
    
);
    
// 3.使用node开启数据库
    
db.open(function(err,db){
        
if(err){
            
console.log('------------------------------------');
            
console.log(err);
            
console.log('------------------------------------');
        
}else{
            
db.collection(
                
"albums",
                
{
                    
safe:true
                
},
                
// conn代表就是数据库当前的集合
                
function(err,conn){
                    
// 数据库查询的方式，转换成数组在控制台显示
                    
// 转换成数组是两个属性 err 值
                    
// conn.find({},{"title":1}).toArray(function(err,item){
                    
//     console.log(item);
                    
//     // 关闭数据库
                    
//     db.close();
                    
// })
                    
conn.insert(data);
                
}
            
)
        
}
    
})
}


module.exports = registerDatabase;
————————————————————————登录的业务逻辑
router.post('/login', function(req, res, next) {
   var result = req.body;
   var server = new mongodb.Server(
        // 设置服务器的端口号和主机名
        "localhost",
        "27017",
        // 开启自动连接模式
        {
            auto_reconnect:true
        }
    );
    // 实例化mongodb模块
    var db = mongodb.Db(
        "music",
        server,
        // 以安全模式开启数据库
        {
            safe:true
        }
    );
    // 3.使用node开启数据库
    db.open(function(err,db){
        if(err){
            console.log('------------------------------------');
            console.log(err);
            console.log('------------------------------------');
        }else{
            db.collection(
                "albums",
                {
                    safe:true
                },
                // conn代表就是数据库当前的集合
                function(err,conn){
                    // // 数据库查询的方式，转换成数组在控制台显示
                    // // 转换成数组是两个属性 err 值
                    // conn.find({},{"title":1}).toArray(function(err,item){
                    //     console.log(item);
                    //     // 关闭数据库
                    //     db.close();
                    // })
                    // conn.insert(data);
                    conn.find(result).toArray(function(err,item){
                       if(result.userName == item[0].userName && result.passWord == item[0].passWord){
                           console.log("登录成功");
                           res.redirect("/");
                           db.close();
                       }
                    })
                }
            ) 
        }
    })
});
————————————————————————————————————————————————————————————————————————————————————————
DAY07————————移动端的触发事件touch.js       swiper幻灯片框架
————————————————————————————————————————————————————————————————————————————————————————
DAY08————————iscroll的使用
————————————————————————————————————————————————————————————————————————————————————————
DAY10————————Canvas的使用
随机生成4位数字：
function setRandomNum(max,min){
var arr = [];
for(var i = 0; i < 4; i ++){
arr.push(Math.round(Math.random()*(max -min) + min))
}
console.log(arr);
return arr.join("");
}
canvas的小demo：
var canvas = document.querySelector("canvas");        //获取容器
canvas.setAttribute("width",500);//设置宽度
canvas.setAttribute("height",200);//设置高度

var ctx = canvas.getContext("2d");//设置2d的环境
ctx.fillStyle = "#000";//填充的背景颜色
ctx.fillRect(0,0,500,200);//填充长度
ctx.fill(); //填充


ctx.beginPath();
ctx.fillStyle = "#fff";     //字体的颜色
ctx.font = "50px 微软雅黑";//字体设置
ctx.fillText(setRandomNum(9,0),190,120);//字体的位置     字体的位置是字体的左下角是0,0的位置
ctx.closePath();
————————————————————————————————————————————————————————————————————————————————————————
DAY11————————audio以及video的使用
document.querySelector这是ES5原生自带的选择器
————————————-例：
var audio = document.querySelector("audio");
audio.addEventListener("canplay",function(){
// audio.duration  //音频的总时长
// audio.currentTime   //当前音频播放的时间
getTime(audio.duration);
//3.使用控制条控制播放进度
$(".rangebox").attr("max",parseInt(audio.duration));


$(".rangebox").change(function(){
$(".curTime").html(getTime($(".rangebox").val()));
audio.currentTime = $(".rangebox").val();
})
$(".allTime").html(getTime(audio.duration));

})
var playStatus = true;   //开关状态
$(".play").on("click",function(){
//元素选择器      jquery音频视频必须使用数组结构
if(playStatus){
$("audio")[0].play();
playStatus == false;

$(".allTime").html(getTime(audio.duration));


}else{
$("audio")[0].pause();
playStatus == true;
}
//当前的播放状态
audio.addEventListener("timeupdate",function(){
console.log(audio.currentTime);
$(".curTime").html(getTime(audio.currentTime));
})

})
//静音模块
var metedStatus = true;  
$(".muted").on("click",function(){
if(metedStatus){
$("audio")[0].muted = true;
metedStatus = false;
}else{
$("audio")[0].muted = false;
metedStatus = true;
}

})
//格式化事件
function getTime(alltime){
var min = parseInt(alltime / 60),
sec = Math.round(alltime % 60);
if(min < 10){
min = "0" + String(min);
}
if(sec < 10){
sec = "0" + String(sec);
}
var time = min + ":" + sec;
return time;
}
function getlrc(){
$.ajax({
type:"GET",
url:"../public/audio/当你.lrc",
}).done(function(data){
var lrc = data;
var timereg = /\[\d*\:\d*((\.|\:)\d*)*\]/g;
//歌词时间
var timeregArr = lrc.match(timereg);
//歌词文本
var text = lrc.replace(timereg,"");

for(var i = 0; i < timeregArr.length; i ++){
var t = timeregArr[i]
t.match()
}
});
}
————————————————————————————————————————————————————————————————————————————————————————
DAY12————————利用swiper和animate制作微信活动页
————————————————————————————————————————————————————————————————————————————————————————
DAY16————————angular————————todolist
一个angular简单的todolist的小demo
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../node_modules/angular/angular.min.js"></script>
    <script>
        angular.module("myApp",[])
        .controller("myCtrl",['$scope',function($s){
            // 原始的数据库表 保证数据的安全
            var arr  = [
                {
                    name:"马奥博",
                    done:false
                },
                {
                    name:"郑红军",
                    done:true
                },
                {
                    name:"郑红军",
                    done:true
                },
                {
                    name:"郑红军",
                    done:true
                },
                {
                    name:"郑红军",
                    done:true
                },
                {
                    name:"郑红军",
                    done:true
                }
            ]
           $s.todolists  = []; //临时表  浅拷贝
           for(var i = 0; i<arr.length;i++){
               $s.todolists [i] = arr [i]
           }
            $s.add=function(){
               // 通过ng-moduel来映射数据
               // 数据做临时的修改
               if($s.todolists.todoText){
                    $s.todolists.push({
                        name:$s.todolists.todoText,//挂在到数组对象上的属性
                        done:true
                    })
                    $s.todolists.todoText = ""
                }
            }
            $s.active=function(){
            //filter 过滤方式只返回 结果 true的 
            // 过滤出true的数组重新赋值
              $s.todolists = $s.todolists.filter(function(item){
                    return  item.done
                })
              $s.todolists.len = $s.todolists.length;
            }
            $s.delete=function($index){
                //获取当前数组的位置 
                $s.todolists.splice($index,1)
            }
        }])
    </script>
</head>
<body ng-controller="myCtrl">
    <form>
        <dl>
            <dt>新增人员 <a href="#this" ng-click="active()">已选中 {{todolists.len}}个</a></dt>
            <!--通过ng-model 来绑定数组对象上的值-->
            <dd><input id="val" type="text" ng-model="todolists.todoText" > <button ng-click="add()"> 增加 </button></dd>
        </dl>
    </form>
    <ul>
        <!--解决重复值的bug track by $index-->
        <li ng-repeat="items in todolists track by $index">
           <span>
               <input type="checkbox" ng-model="items.done">
           </span>     
           <span class="done-{{items.done}}">
            {{
                items.name
            }}
           </span>
           <a href="#this" ng-click="">
              修改
           </a>
           <a href="#this" ng-click="delete($index)">
               删除
           </a>
        </li>
    </ul>
    <style>
    .done-true{
        text-decoration: line-through;
    }
    </style>
</body>
</html>
——————————————————————————————————————————
$scope.$watch方法相当于——$watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。
$watch(watchFn,watchAction,deepWatch)
watchFn:angular表达式或函数的字符串
watchAction(newValue,oldValue,scope):watchFn发生变化会被调用
deepWatch：可选的布尔值命令检查被监控的对象的每个属性是否发生变化
$watch会返回一个函数，想要注销这个watch可以使用函数
在标签上绑定数据的四种方式：
<p ng-bind="name"></p>
<p ng-cloak>{{name}}</p>
<p ng-bind-template="{{name}}"></p>
<p ng-bind-html="name"></p>
————————————————————————————————————————————————————————————————————————————————————————
DAY18————————angular的路由
——————————ng-router基本配置
main.config(["$routeProvider","$locationProvider",function($routeProvider,$locationProvider){
    $routeProvider
    .when("/tab1",{
        templateUrl:"../view/tab01.html",
        controller:"myTab01"
    })
    .when("/tab2:num",{
        templateUrl:"../view/tab02.html",
        controller:"myTab02"
    })
    .otherwise({
        redirectTo:"/tab1"
    })
}])
————————————————————————————————————————————————————————————————————————————————————————
DAY19————————angular的三大自定义服务——1.factory，service，provider
————————三种自定义服务的区别
1.factory 配置简单处理程序 工厂模式
————————例
m1.factory("myService",function(){
            // var obj = {} // 工厂里工人 
            // obj.name = "王哲" // 工厂里的原料
            // obj.age = 90
            // return obj; //出厂 产品
            return {
                name:"王哲"
            }
        });
m1.factory("youService",function(){
    // 隐式返回 默认返回renturn 使用JS垃圾回收机制
    // 闭包 
    return function(max,min){
        return   Math.random()*(max - min)+min
    }
})
// spa  single page application; 
m1.factory("getData",["$http",function($http){
    return function (url) { 
        $http.jsonp(url).then(function(data){
            console.log(data)
        })  
     }
}])
2.service 用面向对象的方式来处理服务
————————例
// service 就是构造函数 面向对象的思想
m1.service("liyingService",Liying)
function Liying (){
    this.name  ="李英"
    this.age=20
}
//原型 protoype  原型链  _proto_
Liying.prototype.num = 100;
Object.prototype.num = 200;
Liying.prototype.say=function () { 
    console.log( this.name+'今年,'+this.age + "岁，至今未婚，好可爱啊")
 }


//原型继承


function Liyingson(){
    // this.name ="李英子"
    this.run = function(){
        console.log(this.name+"边跑边唱")
    }
}


Liyingson.prototype = new Liying();


var liyingson = new Liyingson();
3.provider 配置 参数修改数据项 $get 所有服务的底层
————————例
m1.provider("mySetNum",function () {
    return {
        flag:true,//true 是整数 //false 是小数
        init:function (arg) { 
            if(arg){
                this.flag = true
            }else{
                this.flag = false
            }
         },
        
        $get:function () { 
           var _this =  this; // 作用域链 （原形链)
            return function(max,min){
                    return  _this.flag ? Math.round(Math.random()*(max - min) + min) : Math.random()*(max - min) + min
                }
         }
    }   
});
// Provider 所有服务的底层  服务名+Provider
m1.config(["mySetNumProvider",function(mySetNumProvider){
    mySetNumProvider.init(true)
}])
// Provider  $get config([ 服务名+Provider,function( 服务名+Provider){ } ]) 与 factory  return 


——————————————————————————————————————————————————————————————————
————作用域之间的通信
1.父controller套用子controller，子controller的$scrope可以使用父controller的，父子之间的通信
2.通过$rootscope全局scope实现通信
3.通过子组件$emit服务上传参数，父组件通过$broadcast广播，实现通信————————通过$on监听事件
4.通过service来通信
————————————四种通信的事例
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
    
    <script>
       
        m1.controller("myCtrl",["$scope",'myService','youService',"getData",'mySetNum','liyingService',function($s,myService,youService,getData,mySetNum,liyingService){
               
        }])
        //1 父子之间作用域进行通信
        // m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){
        //         // $scope.name = "李英父亲大人"
                
        // }])
        // m1.controller("child",["$scope",function($scope){


        // }])
        //自定义服务 不要加$ 自定义的东西不能加入controller
        //2.rootScope 挂在全局作用域上 适用范围更广
        //  m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){
        //         // $scope.name = "李英父亲大人"
        //         $scope.name = "李英大人";
        //         $rootScope.name = $scope.name;
        // }])
        // m1.controller("child",["$scope",function($scope){


        // }])
        // 3.基于事件 的数据传递 组件 webcompoents
        // m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){
        //             // 父组件来接受数据 
        //             $scope.$on("changName",function(event,data){
        //                 console.log(data);
        //                 //广播事件
        //                 $scope.$broadcast("nohurting",data)
        //             })
        // }])
        // m1.controller("child",["$scope",function($scope){
        //         //子组件发送给父组件，
        //     $scope.name  ="李雪又要挨欺负了"
        //     $scope.change=function(){
        //         $scope.$emit("changName","李雪同学不容易啊,李雪的妹妹揍她了")
        //     } 
        // }]);
        // m1.controller("secChild",["$scope",function($scope){
        //       $scope.$on("nohurting",function(event,data){
        //           console.log(data)
        //           $scope.name = data
        //       })
        // }]);
        //4 基于service 进行数据传递 
        m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){
                    
        }])
        m1.controller("child",["$scope",'myData',function($scope,myData){
             $scope.data = myData 
        }]);
        m1.controller("secChild",["$scope",'myData',function($scope,myData){
            console.log(myData.name)
              $scope.data = myData 
        }]);
        
        m1.factory("myData",function(){
            return {
                name :"马奥博大帅哥又撒谎了"
            }
        })
    </script>
</head>
<body ng-controller="myCtrl">
     <div ng-controller="Parent">
           
            <div ng-controller="child">
                <input type="text" ng-model="data.name" ng-change="change()">
            </div>
            <div ng-controller="secChild">
                <input type="text" ng-model="data.name">
            </div>
     </div>
     
</body>
</html>
————————————————————————————————————————————————————————————————————————————————————————
DAY21————————angular的ui-router以及directive的组件模块化开发
————————ui-router的基本配置
main.config(["$stateProvider","$urlRouterProvider",function($stateProvider,$urlRouterProvider){
    $stateProvider
    .state("home",{
        url:"/home",
        templateUrl:"../view/templates/main.html"
    })
    .state("home.tab1",{
        url:"/tab1",
        templateUrl:"../view/templates/tab1.html"
    })
    .state("home.tab2",{
        url:"/tab2",
        templateUrl:"../view/templates/tab2.html"
    })
    $urlRouterProvider.otherwise("home")
}])
——————————directive的组件模块化开发
————————示例：
main.directive("myHeader",function(){
    return {
        restrict:"A",
        replace:true,
        scope:{
            // myTitle:"@",
            myAttr:"="
            // myTitle:"&"
        },
        template:`<header>
                    <h1>{{title}}</h1>
                    </header>`,
        controller:["$scope",function($scope){
            $scope.title = "晓天"
        }],
        // templateUrl:"../view/templates/header.html"
        link:function(scope,element,attr){
            console.log(scope);
            console.log(element);
            console.log(attr);
            scope.myAttr = "my-newTitle"
        }
    }
})
————————————————————————————————————————————————————————————————————————————————————————
DAY22————————ES6的学习以及简单的react使用
 let 声明与var  let 不指向全局 块记作用域 作用域更加安全 
解构赋值————等号左右两边 格式一样 [] = [] , [ [] ] = [ [] ]   字符串特殊 [a,b] = "我是王者"——        （对于set 的解构赋值）
1. 数组的解构赋值，解构赋值 注意事项，左右风格需要统一 都是数组的形式 
2.对象的解构赋值
3.字符串解构赋值 
4.函数的解构赋值
——————————Symbol。创建一个独一无二的值 不能使用.的形式进行调用  只能使用[] 关联数组的形式进行调用
————————————————————————————————————————————————————————————————————————————————————————
DAY23————————react使用,webpack的简单配置 
PropTypes是规定数据类型，常用来校验
——————————webpack的简单配置 
module.exports = {
    entry:__dirname + "/public/js/main.js",
    output:{
        path:__dirname + "/app",
        filename:"bundle.js"
    },
    devServer: {
        contentBase: "./",//本地服务器所加载的页面所在的目录
        colors: true,//终端中输出结果为彩色
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module:{
        loaders:[
            {
                test:/\.js$/,
                loader:"babel-loader",
                query:{
                    presets:["es2015","react"]
                }
            },{
                test:/\.css$/,
                loader:"style-loader!css-loader?module"
            }
        ]
    }
}
————————————————————————————————————————————————————————————————————————————————————————
DAY25-26————————react制作todolist，以及wabpack的使用，详细配置
————————————todolist的例子
 import React, { Component } from 'react';
import ReactDOM , { render } from "react-dom";
import Style from "../css/style.css"
// -----------------------------父组件--------------------------------
class TodoList extends Component {
    constructor(props){
        super(props);
        this.state = {
            items : [
                {name:"天妈妈1号",done:true},
                {name:"天妈妈2号",done:true},
                {name:"天妈妈3号",done:true},
                {name:"天妈妈4号",done:true},
                {name:"天妈妈5号",done:true},
                {name:"天妈妈6号",done:true},
                {name:"天妈妈7号",done:true},
                {name:"天妈妈8号",done:true}
            ]
        }
    }
    // 更新State
    handlechange (items) {
        this.setState({
            items : items
        })
    }
    render() {
        return (
            <div>
                <Typenew entries={this.state.items} onPush={this.handlechange.bind(this)}/>
                <List entries={this.state.items} onDel={this.handlechange.bind(this)}/>
            </div>
        );
    }
}
// -----------------------------输入框组件--------------------------------
class Typenew extends Component {
    constructor(props){
        super(props);
    }
    // 新增obj
    handlePush (event) {
        event.preventDefault();
        var items = this.props.entries;
        var pushtxt = this.refs.Input.value;
        var obj = {};
        obj["name"] = pushtxt;
        obj["done"] = true;
        items.push(obj);
        this.props.onPush(items);
    }
    render() {
        return (
            <form>
                <input type="text" ref="Input" placeholder="请输入要新增的内容"/>
                <input type="button" value="新增" onClick={this.handlePush.bind(this)}/>
            </form>
        );
    }
}
// -----------------------------列表组件--------------------------------
class List extends Component {
    constructor(props){
        super(props);
        this.state = {
            modify : -1
        }
    }
    // 删除方法
    handleDelete (event) {
        var index = event.target.getAttribute("data-key");
        var items = this.props.entries;
        items.splice(index,1);
        this.props.onDel(items);
    }
    // 修改方法，改变模块
    handleXiugai (event) {
        var index = event.target.getAttribute("data-key");
        this.setState({
            modify : index
        })
    }
    // input框输入时更新State状态
    handleInput (event) {
        var index = event.target.getAttribute("data-key");
        var items = this.props.entries;
        var inputtxt = event.target.value;
        items[index].name = inputtxt;
        this.props.onDel(items);
        
    }
    // 完成更改模块
    handleOk () {
        this.setState({
            modify : -1
        })
    }
    // 复选框的State
    handleCheck (event) {
        var done = event.target.checked
        var index = event.target.getAttribute("data-key");
        var items = this.props.entries;
        items[index].done = done;
        this.props.onDel(items);
    }
    render() {
        return (
            <ul>
                {
                    this.props.entries.map(function(value,i){
                        if(this.state.modify != i){
                            return (
                                <li>
                                    <input data-key={i} type="checkbox" ref="checkbox" checked={value.done} onClick={this.handleCheck.bind(this)}/>
                                    <span className={"check-" + value.done}>{value.name}</span>
                                    <button data-key={i} onClick={this.handleXiugai.bind(this)}>修改</button>
                                    <button data-key={i} onClick={this.handleDelete.bind(this)}>删除</button>
                                </li>
                            )
                        }else{
                            return (
                                <li>
                                    <input type="checkbox" checked={value.done}/>
                                    <input type="text" data-key={i} onChange={this.handleInput.bind(this)} value={value.name}/>
                                    <button onClick={this.handleOk.bind(this)}>完成</button>
                                    <button data-key={i} onClick={this.handleDelete.bind(this)}>删除</button>
                                </li>
                            )
                        }
                        
                    }.bind(this))
                }
            </ul>
        );
    }
}
render(<TodoList />,document.getElementById("box"))
————————————————————————————————wabpack的使用，详细配置
var webpack = require("webpack");
module.exports = {
    devtool:"source-map",
    entry: {
        main:["webpack/hot/dev-server",__dirname + "/app/main.js"],
        app:["webpack/hot/dev-server",__dirname + "/app/app.js"]
    },
    output:{
        path: __dirname + "/build",
        filename:"[name].js"
    },
    module:{
        loaders:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:"babel-loader"
            },
             {
                test:/\.css$/,
                loader:"style-loader!css-loader"
            },
            {
                test:/\.(jpg|png)$/,
                loader:"url-loader?limit=5000000"
            }
        ]
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        // new webpack.optimize.CommonsChunkPlugin({
        //     name:"vendor",
        //     filename:"vendor.min.js"
        // })
        
    ]
}
————————————————————————————————————————————————————————————————————————————————————————
DAY27-28————————react路由的配置
————————————————————————main.js
import React, { Component } from 'react';
import ReactDOM , { render } from "react-dom";
import {Router, Route, hashHistory,Link,IndexRoute,Redirect} from "react-router"
import App from "./app.js";
import About from "./about.js";
import User from "./user.js";
import Home from "./home.js";
import Style from "../css/header.css";


var doc = document.getElementById("box");




render((
    <Router history={hashHistory}>
        <Route path="/" component={App}>
            <IndexRoute path="/home" component={Home} ></IndexRoute>
            <Route path="/home" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/user" component={User}/>
            <Redirect from="/about" to="/user"></Redirect>
        </Route>
    </Router>
),doc)
——————————————————————app.js（配置文件）
import React, { Component } from 'react';
import { Link } from "react-router"
import Style from "../css/header.css";
console.log(Style);
class App extends Component {
    render() {
        return (
            <div>
                <header>
                    {this.props.children}
                </header>
                <div className="done">
                    {
                        this.props.children
                    }
                </div>
                <ul>
                    <li><Link to="/home" activeClassName="play">主页</Link></li>
                    <li><Link to="/user" activeClassName="play">用户信息</Link></li>
                    <li><Link to="/about" activeClassName="play">关于我们</Link></li>
                </ul>
            </div>
        );
    }
}


export default App;


————————————————————————————————————————————————————————————————————————————————————————
DAY29————————react的生命周期
import React, { Component, PropTypes } from 'react';
import ReactDOM ,{ render } from "react-dom";
import Jquery from "jquery";
window.$ = Jquery
window.jQuery = Jquery;
class App extends Component {
    constructor(props) {
        // 顺序：2     配置的状态
        super(props);
        this.state={
            // 顺序：3     设置的默认的状态
            name : "天孙子"
        }
    }


    componentWillMount() {
        // 顺序：4     最后一次修改状态 this.state 然后render
        this.setState({
            name : "天儿子"
        })
    }


    componentDidMount() {
        // 顺序：6     通过jq的ajax请求输入，该周期是ajax的操作
        $.get(this.props.source,function(data){
            console.log(data);
            $(".data").html(data)
        })
    }


    componentWillReceiveProps(nextProps) {
        //顺序 8 子组件属性改变  父组件状态修改时触发


    }


    shouldComponentUpdate(nextProps, nextState) {
        //顺序 9 判断是否要重新渲染UI组件   返回值是true /false
    }


    componentWillUpdate(nextProps, nextState) {
        //顺序 10 组件会重新渲染UI
    }


    componentDidUpdate(prevProps, prevState) {


    }


    componentWillUnmount() {
        //顺序 7 从虚拟DOM节点中移出，插入到真实DOM节点 所有的钩子韩式都被销毁了


    }


    render() {
        // 顺序：5     把DOM节点插入到内存当中
        return (
            <div>
                天妈妈是个{this.props.title}
                <div>{this.state.name} 是。。。</div>
                <p className="data"></p>
            </div>
        );
    }
}
App.defaultProps = {
    // 顺序：1     设置的默认属性
    title : "美女"
}
App.propTypes = {
    // title : React.props.title.string.isRequired
};
var doc = document.getElementById("box");
render(<App source="http://japi.juhe.cn/comic/category?=&key=239195b2a2e66fc2c8f4fdd177d6d47f"/>,doc)
——————————————————————promiseajax的封装
function ajax(url){
return new Promise (function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.open("GET",url);
xhr.send();
xhr.onload = resolve;     //成功交给resolve
xhr.onerror = reject;//失败交给reject
})
}
ajax("http://api.geihub.com/users/octocat/gists").then(function(data){
console.log(data)
},function(){})




day30===============================================================================