为什么我开始写博客了呢？因为今天有个场景下我需要实现这个功能，没有网络的情况下手写。逻辑写出来了，但是代码冗余量很大，其次呢，我发现好多博客写的确多多少少有点问题，所以我就扯出来这么一篇博客了
为什么需要深拷贝
因为对象直接复制给另外一个变量时，2个变量的值指向堆栈中同一条数据，改变其中一个变量中某个key的value，都会影响到另外一个变量的值
数据类型
很多博客直接就typeof判断数据类型了，时间new Data()，那也是返回的‘object’的，还有些用变量的构造函数初始化需要赋值的变量数据类型，实在是有些大才小用了

曾经看书，javascript高级程序设计中提到判断变量的数据类型，一下给出源码
const judgeDataType = function(n,type){
    return Object.prototype.toString.call(n)===type;
}


使用递归
写这个函数本有点问题一直把result的初始化放在了if中，实在是有点服我自己的，导致我想了会儿为什么返回的数据不对
const deepCopy = function(n){
    let result;
    const flag1 = judgeDataType(n,'[object Array]');
    if( flag1 ||judgeDataType(n,'[object Object]')){
        result = flag1?[]:{};
        for(let key in n){
            result[key] = deepCopy(n[key])
        }
    }else{
        result = n;
    }
    return result;
}


测试数据
以下为测试数据，欢迎来提bug
let num = {
    a:1,
    arr:[1,2,3,[4,5],{flag:false}],
    obj:{
        objChild:{
            n:undefined,
            d:new Date(),
            e:'sssss'
        }
    },
    fn:function(n){
        ++n
        console.log(1)
    }
}


ps：后续我会坚持写博客，一直想分享一个原生js实现的断点续传组件，若有需要可以评论中留言。

转载请注明出处，谢谢！

Vue
一，基础
1，ES6--语法
关于 let 和 var
关于闭包
关于const
对象字面量的增强写法
2，事件监听
1，v-on
2，条件判断
3，v-show
4，组件的key属性
5，检测数据更新--响应式
3，双向绑定 v-model
1，v-model：radio
2，v-model：checkbox
3，v-model：select
4，值绑定
5，修饰符
4，组件化
父子组件的通讯
5，模块化
6，webpack
1，配置文件
2，局部安装webpack
3，依赖css文件
4，依赖less文件
5，依赖图片
6，ES6语法处理
7，导入Vue
8，配置文件的分离
7，vue-cli2->vue-cli3
1，vue-cli2初始化项目
2，vue-cli3初始化项目
3，动态路由
4，路由懒加载
5，路由嵌套
6，参数传递
8，异步操作
1，Promise
2，Promise三种状态
9，网络请求框架axios

一，基础
1，ES6–语法
关于 let 和 var

块级作用域

详细

ES5中的var是没有块级作用域的(if/for)
ES6中的let是有块级作用的(if/for)

关于闭包


用let 就行了

关于const

对象字面量的增强写法

2，事件监听
1，v-on


v-on修饰符



2，条件判断

v-if ，v-else if，v-else



3，v-show

4，组件的key属性

  <hr/>
  <ul>
    <!--官方推荐要添加 一个  :key 的属性-->
    <li v-for="go in gogo" :key="go">{{go}}</li>
  </ul>

5，检测数据更新–响应式

3，双向绑定 v-model


原理：

  <input type="text" v-model="message">
相当于
  <input type="text" :value="message" @input="message = $event.target.value">

1，v-model：radio

2，v-model：checkbox

3，v-model：select

4，值绑定

5，修饰符

4，组件化
步骤：


创建组件构造器
注册组件
使用组件





父子组件的通讯

父传子


props 里面定义属性


子传父


1.@click=“btclick(item)”  子模板调用子方法

<template id="cpn">
  <div>
    <button v-for="item in categories"
            @click="btclick(item)">
      {{item.name}}
    </button>
  </div>
</template>


2.btclick(item)    子方法调用v-on标签的方法

  <script>
  const cpn={
    template:'#cpn',
    data(){
      return{
        categories:[
          {id: '1',name:'小米'},
          {id: '2',name:'小高'},
          {id: '3',name:'笑笑'},
          {id: '4',name:'KIA'},
        ]
      }
    },
    methods:{
      btclick(item){
        // console.log(item);
        this.$emit('itemclick',item)
      }
    }
  }
  </script>


3.itemclick   — v-on标签调用父类的方法

<cpn @itemclick="cpnclick"></cpn>


4.const app = new Vue

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好呀！',
    },
    components:{
      cpn
    },
    methods: {
      cpnclick(item){
        console.log(item.name);
      }
    }
  })

5，模块化
6，webpack
1，配置文件

编写webpack.config.js

const path = require('path');

module.exports={
  entry:'./src/main.js',   //入口
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js',
  }, //出口
}

-在控制台执行  npm init，会生成package.json文件
2，局部安装webpack
npm install webpack@3.6.0 --save-dev

3，依赖css文件


在main.js 中

const {add,mul} = require('./js/mathUtils.js');
console.log(add(12, 23));
console.log(mul(12, 2));


//依赖css文件
require('./css/normal.css');

//依赖less文件
require('./css/special.less')

在添加css样式，重新 npm run build时会包如下的错
ERROR in ./src/css/normal.css
Module parse failed: E:\WebVue\13-webpack的使用\02-webpack的配置\src\css\normal.css Unexpected token (1:4)
You may need an appropriate loader to handle this file type.


此时要在webpack.config.js中修改

const path = require('path');

module.exports={
  entry:'./src/main.js',   //入口
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js',
  }, //出口
  module: {
    rules: [
      {
        test: /\.css$/,
        //css-loader 只负责加载css文件 不解析
        //style-loader 负责将样式添加到DOM中
        //从右往左加载，位置换掉后会报错
        use: ['style-loader','css-loader' ]
      }
    ]
  }
}


然后在终端执行以下的命令

npm install --save-dev css-loader
npm install style-loader --save-dev

4，依赖less文件

终端

npm install --save-dev less-loader less


webpack.config.js

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

5，依赖图片

注意



 {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片，小于limit时，会将图片编译成base64字符串形式
              //当加载的图片，大于limit时，需要使用file-loader模块进行加载
              limit: 8192,
              //以这种方式命名
              name: 'img/[name].[hash:9].[ext]',
            }
          }
        ]
      },

6，ES6语法处理
babel-loader
文档
7，导入Vue


npm install --save vue


在main.js声明（使用）




在webpack_config.js配置






使用 .vue 文件


添加 loader

npm install vue-loader vue-template-compiler --save-dev


修改配置





8，配置文件的分离


安装插件

npm install webpack-merge --save-dev


分离文件，dev.confog.js

const WebpackMerge = require('webpack-merge');
const baseConfig = require('./base.config.js');

module.exports = WebpackMerge(baseConfig,{
  devServer:{
    contentBase:'./dist',
    inline:true,
  }
})


base.config.js是一个基础的配置文件



package.json


7，vue-cli2->vue-cli3
1，vue-cli2初始化项目

2，vue-cli3初始化项目

3，动态路由

新建.vue文件
在index.js中映射关系


在APP.vue中使用路由

   <router-link replace :to="'/user/'+userName" tag="button">用户</router-link>


在User.vue中获取传过去的值



4，路由懒加载

5，路由嵌套

index.js

  {
    path: '/home',
    component: Home,
    children:[
      {
        path:'',
        redirect:'new',
      },
      {
        path:'new',
        component:HomeNews,
      },
      {
        path: 'message',
        component: HomeMessage,
      }
    ]
  },



Home.vue




效果




6，参数传递

App.vue

<router-link replace :to="{path:'/profile',query:{name:'Mr-Jies',age:18,height:1.8}}" tag="button">档案</router-link>


Profile.vue



8，异步操作
1，Promise
<script>
  //什么情况下会用到Promise?
  //一般情况下是有异步操作时，使用Promise对这个异步操作进行封装
  // new ->构造函数(1.保存了一些状态信息 2.执行传入的函数)
  //在执行传入的回调函数时，会传入两个参数，resolve, reject.本身又是函数

  new Promise((resolve, reject) => {
    //耗时操作1
    setTimeout(() => {
      //成功时调用resolve
      resolve('hello world')
      //失败时调用
      // reject()
    }, 1000)

  }).then((data) => {

    console.log(data);
    console.log(data);

   return new Promise((resolve, reject) => {
      //耗时操作2
      setTimeout(() => {
        resolve('你好呀！！')
      }, 1000)
    })

  }).then((data)=>{
    console.log(data);
    console.log(data);

    return new Promise((resolve, reject) => {
      //耗时操作3
      setTimeout(() => {
        reject('错误！！')
      }, 1000)
    })

  }).catch((err)=>{
    console.log(err);
  })
  
</script>

2，Promise三种状态

9，网络请求框架axios

request.js

export function request(config) {

  //1.创建axios实例
  const instance = axios.create({
    baseURL:'********',
    timeout:5000,
  })


  //2.拦截器
  //2.1,请求拦截器
  instance.interceptors.request.use(config=>{

    //1.比如拦截config中的一些信息不符合服务器的要求

    //2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标

    //3.某些网络请求，必须携带一些特殊的信息

    return config
  },error => {

  });

  //2.2,响应拦截器
  instance.interceptors.response.use(config=>{

    return config.data
  },error => {

  })

  //3.发送真正的网络请求
  return instance(config)

}


使用上面的封装函数

import {request} from "./network/request";

//最后的版本---为什么可以使用.then .catch 因为他的底层是AxiosPromise
request({
  url: '/api/h8/home/data',
  //请求参数拼接
  params: {
    type: 'pop',
    page: 1,
  }
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})