willson-wang / blog Goto Github PK

scrollY(newY) {
      const listHeight = this.listHeight;
      if (-newY < this.menuHeaderElHeight) {
        this.currentIndex = -1;
        return;
      }
      newY = newY + this.menuHeaderElHeight;
      if (-newY < listHeight[0]) {
        this.currentIndex = 0;
        return;
      }

      for (let i = 0; i < listHeight.length; i++) {
        let height1 = listHeight[i];
        let height2 = listHeight[i + 1];

        if (-newY >=height1 && -newY < height2) {
          // 如果修改结构，需要修改currentIndex的计算方式
          this.currentIndex = i + 1;
          this.diff = height2 + newY;
          return;
        }
      }

      this.currentIndex = listHeight.length - 2;
    }

_scrollTo(index, flag) {
      if (index < 0) {
        this.$refs.scroll.scrollTo(0, 0);
        this.scrollY = 0;
        return;
      } else if (index > this.listHeight.length - 2) {
        index = this.listHeight.length - 2;
      }
      console.log(index);
      this.$refs.scroll.scrollToElement(this.groudList[+index], 0);
      this.scrollY = this.$refs.scroll.scroll.y;
    },

<template>
  <div class="city-map relative">
    <div class="city-map__header">
      <span class="city-map__back" @click="$router.back()"><i class="brokericon icon-arrow-left"></i></span>
      <div>
        <span><i class="brokericon icon-search"></i></span>
        <input type="text" placeholder="请输入城市名称" v-model="searchCity">
      </div>
    </div>
    <div class="city-map__content" v-show="!searchResult.length && !searchCity && list.menu.length">
      <vue-better-scroll class="scroller-container"
        :class="designTime && 'design'"
        ref="scroll"
        :probeType="3"
        :listenScroll="listenScroll"
        :pullDownRefresh="pullDownRefreshObj"
        :pullUpLoad="pullUpLoadObj"
        @pullingDown="$emit('pullingDown')"
        @scroll="scrollHandler"
        @pullingUp="$emit('pullingUp')">
        <div class="city-map__menu">
          <slot name="header"></slot>
          <ul class="city-map__group" v-for="(group, index) in list.menu" :key="index">
            <li class="city-map__group__item city-map__group__item--scroll">
              <h2 class="city-map__group__anchor">{{group.name}}</h2>
              <ul class="city-map__group__list">
                <li v-for="(item, index) in group.items" :key="index" @click="click(item)">
                  <div>{{item.city_name}}</div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </vue-better-scroll>
      <ul class="city-map__nav" @touchstart="onTouchstartHandler" @touchmove.stop.prevent="onTouchmoveHandler" @touchend="onTouchendHandler">
        <li :data-index="-1" :class="fixedCurrentIndex === -1 ? 'activted' : ''" v-if="this.$slots['header']">#</li>
        <li v-for="(item, index) in list.nav" :key="index" :data-index="index" :class="fixedCurrentIndex === index ? 'activted' : ''">
          {{item}}
        </li>
      </ul>
      <div ref="fixed"
        v-show="isFixedTitle && fixedTitle"
        v-html="fixedTitle"
        class="city-map__group__anchor--fixed city-map__group__anchor">
      </div>
    </div>
    <div class="city-map__search" v-show="searchResult.length || searchCity">
      <ul v-if="searchResult.length">
        <li v-for="(city, index) in searchResult" class="city-map__search__item" :key="index" @click="click(city, true)">{{city.city_name}}</li>
      </ul>
      <div v-else class="no-data">
          <span class="no-data-img" />
          <p>暂无数据哦~</p>
      </div>
    </div>
    <div v-if="!list.menu.length" class="loading">
      <inline-loading></inline-loading>加载中
    </div>
  </div>
</template>

<script>
import VueBetterScroll from "vue2-better-scroll";
import { mapState, mapActions } from "vuex";
import { InlineLoading } from 'vux';

const cities = require('./cities.json').data.cities;


export default {
  name: 'cityMap',
  components: {
    VueBetterScroll,
    InlineLoading
  },
  props: {
    city: Object,
    isFixedTitle: {
        type: Boolean,
        default: false
    }
  },
  data() {
    return {
      pullDownRefreshObj: false,
      pullUpLoadObj: false,
      listenScroll: true,
      currentIndex: -1,
      diff: -1,
      scrollY: -1,
      subTitleEl: null,
      searchResult: [],
      searchCity: '',
      touchmoving: false,
      fixedCurrentIndex: -1,
      touchIndex: -1,
      locCity: {},
      cities: {},
    }
  },
  computed: {
    designTime() {
      return this.isDesignTime
    },
    fixedTitle() {
      return this.list.menu[this.currentIndex] ? this.list.menu[this.currentIndex].name : ''
    },
    list() {
      let nav = [];
      let menu = [];
      const cities = this.cities && this.cities.nested && this.cities.nested.by_pinyin || {};
      for (let prop in cities) {
        if (cities.hasOwnProperty(prop)) {
          nav.push(prop);
          menu.push({
            name: prop,
            items: cities[prop]
          })
        }
      }
      return {nav, menu}
    },
  },
  methods: {
    getRect(el) {
      if (!el) return;
      return el.getBoundingClientRect && el.getBoundingClientRect()
    },
    scrollHandler(e) {
      this.scrollY = e.y;
    },
    _calculateHeight() {
      // 这里是获取了包含固定项的，如果换个类名就需要同步，修改下scrollY内的currentIndex的计算方式
      this.groudList = this.$el.getElementsByClassName('city-map__group__item--scroll');
      this.subTitleEl = this.$el.getElementsByClassName('city-map__group__anchor--fixed')[0];
      this.subTitleHeight = this.subTitleEl ? this.getRect(this.subTitleEl).height : 0;

      this.navItemEles = this.$el.getElementsByClassName('city-map__nav')[0].children;
      this.navItemEl = this.navItemEles[0];
      this.navItemHeight = this.navItemEl ? this.getRect(this.navItemEl).height : 0;

      this.menuHeaderElHeight = (this.$slots['header'] && this.getRect(this.$slots['header'][0].elm).height) || 0;

      this.listHeight = [];

      if (!this.groudList) return;
      let height = 0;
      for (let i = 0; i < this.groudList.length; i++) {
        let item = this.groudList[i];
        height += item.clientHeight;
        this.listHeight.push(height);
      }

        console.log(this.listHeight);
    },
    showToast(ele) {
      this.$vux.toast.show({
        text: ele.innerHTML,
        position: 'middle',
        type: 'text',
        width: '12%'
      })
    },
    onTouchstartHandler(e) {
      const firstTouch = e.touches[0]
      const target = e.targetTouches[0].target.nodeName === 'LI' && e.targetTouches[0].target;
      if (!target) return;
      let navIndex = target.dataset && target.dataset.index;

      this.touch.y1 = firstTouch.pageY;
      this.touch.navIndex = navIndex;
      this.touchIndex = navIndex;

      this.showToast(target);
      this._scrollTo(navIndex, +navIndex < 0);
    },
    onTouchmoveHandler(e) {
      const firstTouch = e.touches[0];
      this.touch.y2 = firstTouch.pageY;
      let delTa = (this.touch.y2 - this.touch.y1) / this.navItemHeight | 0;
      let navIndex = parseInt(this.touch.navIndex) + delTa;
      this.touchIndex = navIndex;
      this.touchmoving = true;
      this._scrollTo(navIndex, +navIndex < 0);
    },
    onTouchendHandler() {
      this.touchmoving = false;
    },
    _scrollTo(index, flag) {
      if (index < 0) {
        this.$refs.scroll.scrollTo(0, 0);
        this.scrollY = 0;
        return;
      } else if (index > this.listHeight.length - 2) {
        index = this.listHeight.length - 2;
      }
      console.log(index);
      this.$refs.scroll.scrollToElement(this.groudList[+index], 0);
      this.scrollY = this.$refs.scroll.scroll.y;
    },
    click(city, flag) {
      this.$emit('checkAddr', city);
    }
  },
  watch: {
    currentIndex(val) {
      this.fixedCurrentIndex = val;
      this.touchmoving && this.showToast(this.navItemEles[val < 0 ? 0 : val]);
    },
    scrollY(newY) {
      const listHeight = this.listHeight;
      if (-newY < this.menuHeaderElHeight) {
        this.currentIndex = -1;
        return;
      }
      newY = newY + this.menuHeaderElHeight;
      if (-newY < listHeight[0]) {
        this.currentIndex = 0;
        return;
      }

      for (let i = 0; i < listHeight.length; i++) {
        let height1 = listHeight[i];
        let height2 = listHeight[i + 1];

        if (-newY >=height1 && -newY < height2) {
          // 如果修改结构，需要修改currentIndex的计算方式
          this.currentIndex = i + 1;
          this.diff = height2 + newY;
          return;
        }
      }

      this.currentIndex = listHeight.length - 2;
    },
    diff(newVal) {
      this.subTitleHeight = this.subTitleHeight ? this.subTitleHeight : this.getRect(this.subTitleEl).height;
      let fixedTop = (newVal > 0 && newVal < this.subTitleHeight) ? newVal - this.subTitleHeight : 0;

      if (this.fixedTop === fixedTop) return;

      this.fixedTop = fixedTop;
      this.$refs.fixed.style['transform'] = `translate3d(0,${fixedTop}px,0)`;
    },
    searchCity(val) {
      if (!val) {
        this.searchResult = [];
        this.$nextTick(() => {
          this._scrollTo(this.currentIndex, true);
        })
      } else {
        this.searchResult = [];
        this.list.menu.forEach((item) => {
          item.items.forEach((city) => {
            if (city.city_name.indexOf(val) > -1) {
              this.searchResult.push(city);
            }
          })
        })
        // this.searchResult = [...new Set(this.searchResult)];
      }
    },
    cities(val) {
      this.$nextTick(() => {
        this._calculateHeight();
      })
    },
    touchIndex(val) {
      if (val && +val > this.currentIndex) {
        this.fixedCurrentIndex = +val;
      } else {
        this.fixedCurrentIndex = this.currentIndex;
      }
    }
  },
  activated() {
    this.groudList = [];
    this.listHeight = [];
    this.subTitleHeight = 0;
    this.touch = {};
    this.searchCity = '';
    this.cities = cities;
    this.$nextTick(() => {
      this._calculateHeight();
    })
  }
}
</script>

<style lang="less" scoped>
  @import '~vux/src/styles/1px.less';

  ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .city-map {
    display: flex;
    height: 100%;
    flex-direction: column;

    &__header {
      flex: 0 0 45px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ddd;

      >span {
        flex: 0 0 56px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        i {
          color: #939899;
          font-size: 22px;
        }
      }

      >div {
        flex: 0 0 274px;
        align-items: center;
        position: relative;
        height: 30px;

        span {
          position: absolute;
          top: 50%;
          left: 12px;
          transform: translate(0, -50%);
          
          i {
            color: #aeaeae;
            font-size: 16px;
          }
        }

        input {
          color: #000;
          background-color: #e3e6e6;
          font-size: 14px;
          width: 100%;
          border: 0;
          outline: none;
          border-radius: 3px;
          text-indent: 34px;
          height: 30px;
          line-height: 30px;
        }
      }
    }

    &__content {
      flex: 1;
      position: relative;
      overflow: hidden;

      .scroller-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        bottom: 0;
        overflow: hidden;
      }
    }

    &__group {
      

      &__item {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      &__anchor {
        flex: 0 0 41px;
        width: 100%;
        line-height: 41px;
        border-bottom: 1px solid #f5f5f5;
        background-color: #f5f5f5;
        font-size: 12px;
        color: #999;
        padding-left: 22px;
        font-weight: normal;
      }

      &__list {
        display: flex;
        flex-direction: column;
        justify-content: center;

        >li {
          flex: 0 0 50px;

          >div {
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #e2e2e2;
            font-size: 16px;
            color: #000;
            padding-left: 22px;
            background-color: #fff;
          }

          &:last-of-type div {
            border-bottom: 1px solid #f5f5f5;
          }
        }
      }
    }

    &__nav {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;

      li {
        flex: 0 0 24px;
        width: 100%;
        font-size: 14px;
        line-height: 24px;
        color: #000;
        font-weight: 700;
      }

      .activted {
        color: orange;
      }
    }

    &__search {
      flex: 1;
      position: relative;
      overflow: hidden;

      &__item {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #ddd;
        font-size: 16px;
        color: #000;
        padding-left: 22px;
        background-color: #fff;
      }
    }

    .no-data{
        margin-top: 90px;
        font-size: 12px;
        color: #999;
        text-align: center;
        .no-data-img{
            background: url("./img/noData.jpg")  no-repeat center;
            display: inline-block;
            background-size: 100% 100%;
            width: 80px;
            height: 70px;
        }
    }

    .loading {
      margin-top: 90px;
      text-align: center;
    }
  }
</style>

<style lang="less" scoped>
.relative {
    position: relative;
}
html.ios,
html.iphone {
    &.is-app,
    &[data-runtime="app"] {
        .relative {
            position: relative;
            padding-top: 20px
        }
    }
}
@iphonex: ~"only screen and (device-width: 375PX) and (device-height: 812PX) and (-webkit-device-pixel-ratio: 3)";
@media @iphonex {
    html.ios,
    html.iphone {
        &.is-app,
        &[data-runtime="app"] {
            .relative{
                padding-top: 44px;
            }
        }
    }
}
</style>

var timeout = function (time = 2000) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('222');
        }, time)
    })
}

timeout().then((res) => {
    console.log(res);
})

// p1是一个 Promise，3 秒之后变为rejected。p2的状态在 1 秒之后改变，resolve方法返回的是p1。
// 由于p2返回的是另一个 Promise，导致p2自己的状态无效了，由p1的状态决定p2的状态。所以，后面的
// then语句都变成针对后者（p1）。又过了 2 秒，p1变为rejected，导致触发catch方法指定的回调函数。

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject(new Error('fail'))
    }, 3000)
});

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(p1);
    }, 1000)
})

p2.then((res) => {
    console.log('res', res);
}).catch((error) => {
    console.log('error', error);
});

// then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写
// 法，即then方法后面再调用另一个then方法

//采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是
// 一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才
// 会被调用。

const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p3');
    }, 2000)
})

const p4 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p4');
    }, 4100)
})

p3.then((res) => {
    console.log('res p3', res);
    // 注意这里可以return 任何值，可以是之前固定了状态的promise3,也可以是一个新的promise,也可以是
    // 一个常量，都会在后一个then中的回调函数中拿到，但是需要注意的是，如果返回的是一个新的
    // promise，则需要等待promise内的resolve or reject执行玩之后才能够执行then内的回调
    return p4; 
}).then((res) => {
    console.log('res p3 then2', res); // undefined,因为前一个then没有return值
})


// 如果 Promise 状态已经变成resolved，再抛出错误是无效的。同理如果状态变成reject，在resolve就无效
// 了，另外需要注意的是，promise内抛出错误与reject抛出错误是等效的

// Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下个
// catch语句捕获；跟传统的try/catch代码块不同的是，如果没有使用catch方法指定错误处理的回调函数，
// Promise 对象抛出的错误不会传递到外层代码，即不会有任何反应。
const p5 = new Promise((resolve, reject) => {
    resolve('p5');
    throw new Error('p5 faile');
});

p5.then((res) => {
    console.log('res p5', res);
}).catch((error) => {
    console.log('p5 error', error);
});

//Promise.prototype.finally() es8引入的语法，要考虑兼容性问题

const p6 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p6');
    }, 1000)
})


const p7 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('p7')
    }, 2000)
})

const p8 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p8')
    }, 4000)
})

// Promise.all方法传入的是一个数组promise,如果本身不是promise则会使用promise.resolve()被转化为
// promise对象,promise.all方法的返回值是包含每个promise结果的返回值数组，只有每一个promise都
// resolve才能够成功，如果有一个reject or error则会执行promise.all的catch方法；

// 如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()
// 的catch方法

// promise.all的方法常用于同时请求几个异步接口，但是每个异步接口之间又不互相依赖

const p9 = Promise.all([p6, p7, p8])

p9.then((res) => {
    console.log('res p9 all', res);
}).catch((error) => {
    console.log('error p9 all', error);
})


// pormise.race方法的使用与promise.all方=方法是一样的，区别市race方法是只要某个promise的状态先该
// 变了，那么race方法返回的promise的状态也会进行改变并与率先改变的primise状态保持一致

// promise.race方法常用于设置某个请求是否超时

const p10 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p10');
    }, 1000)
})


const p11 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('p11')
    }, 500)
})

const p12 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p12')
    }, 4000)
})

const p13 = Promise.race([p10, p11, p12])

p13.then((res) => {
    console.log('res p12 race', res);
}).catch((error) => {
    console.log('error p12 race', error);
})

const p14 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p14')
    }, 2000)
})

const p15 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('请求超时')
    }, 1500)
})

const p16 = Promise.race([p14, p15])

p16.then((res) => {
    console.log(res);
}).catch((err) => {
    console.log(err);
})

// promise.resolve()方法，将现有对象or原始值转化为promise对象or直接生成一个状态值为resolved的
// promise对象

// Promise.resolve('aaa') === new Promise((resolve) => {resolve('aaa')})

// 需要注意的是根据传入的参数来返回不同的值
// 1.传入的参数是promise对象，则promise.resolve方法不做任何修改原样返回

const p17 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p17')
    }, 2000)
})

const p18 = Promise.resolve(p17);

p18.then((res) => {
    console.log(res);
})

// 2. 参数是一个thenable对象,Promise.resolve方法会将这个对象转为 Promise 对象，然后就立即执行
// thenable对象的then方法

let thenable = {
    then: function(resolve, reject) {
        resolve(42);
    }
};

let p19 = Promise.resolve(thenable);
    p19.then(function(value) {
        console.log(value);
});

// 3. 参数不是具有then方法的对象，或根本就不是对象,则Promise.resolve方法返回一个新的 Promise 对
//象，状态为resolved。由于对象or字符串不属于异步操作（判断方法是字符串对象不具有 then 方法），返
// 回 Promise 实例的状态从一生成就是resolved，所以回调函数会立即执行。Promise.resolve方法的参
// 数，会同时传给回调函数。

const p20 = Promise.resolve({
    name: 'jack',
    age: 20
})

p20.then((res) => {
    console.log(res);
})

// 4. 不带有任何参数，Promise.resolve方法允许调用时不带参数，直接返回一个resolved状态的 Promise 
// 对象，立即resolve的 Promise 对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件
// 循环”的开始时

const p21 = Promise.resolve();

p21.then((res) => {
    console.log(res, 'p21');
})

// promise.reject()方法返回一个新的promise对象，且该实例的状态为rejected,注意，Promise.reject()方法
// 的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致

const info = {
    name: 'jack',
    age: 20
}
const p22 = Promise.reject(info);

p22.then((res) => {
    console.log(res);
}).catch((e) => {
    console.log(e === info, e); // true
})

// promise.try()

// 这种写法有一个缺点，就是如果f是同步函数，那么它会在本轮事件循环的末尾执行。
const f1 = () => console.log('now');
const p23 = Promise.resolve().then(f1);
console.log('next');

// 那么有没有一种方法，让同步函数同步执行，异步函数异步执行，并且让它们具有统一的 API 呢？回答是
// 可以的，并且还有两种写法。第一种写法是用async函数来写,async () => f()会吃掉f()抛出的错误。所以，
// 如果想捕获错误，要使用promise.catch方法。另一种写法是使用new promise
const f2 = () => console.log('now2');
(async () => f2())();
console.log('next2');

const f3 = () => console.log('now3');
(
    () => new Promise((resolve) => {
        resolve(f3())
    })
)()
console.log('next3');

// 使用promise.try()来处理函数f不管函数是同步函数还是异步操作，想用 Promise 来处理它。因为这样就可
// 以不管f是否包含异步操作，都用then方法指定下一步流程，用catch方法处理f抛出的错误

// const f4 = () => console.log('now4');
// Promise.try(f4).then((res) => {
//     console.log('try', res);
// }).catch((err) => {
//     console.log('try err', err);
// })
// console.log('next4');

function *hello () {
    yield 'i';
    yield 'love'
    yield 'you'
    return 'ending' 
}

// Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用
// Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象;下
// 一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部
// 指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。
// 换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

// next方法返回一个对象，它的value属性就是当前yield表达式的值hello，done属性的值false or true，表
// 示遍历还没有结束和遍历结束

// 总结一下，调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调
// 用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状
// 态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

const h = hello(); // 返回的是一个指向内部状态的指针对象
console.log(h);
console.log(h.next()); // {value: "i", done: false}
console.log(h.next()); // {value: "love", done: false}
console.log(h.next()); // {value: "you", done: false}
console.log(h.next()); // {value: "ending", done: true}
console.log(h.next()); // {value: undefined, done: true}

const arr = [1, [[2, 3], 4], [5, 6]];

function *flat(a) {
    const length = a.length;
    for (let i = 0; i < length; i++) {
        const item = a[i];
        if (typeof item !== 'number') {
            yield *flat(item);
        }else {
            yield item;
        }
    }
}

// for...of循环可以自动遍历 Generator 函数时生成的Iterator对象，且此时不再需要调用next方法。

for (let f of flat(arr)) {
    console.log(f);
}

// generator函数处理异步请求

function request(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(data = {
                name: 'jack',
                age: 18
            })
        }, 3000)
    })
    
}

function *gen() {
    var result = yield request('http://xxx.com');
    console.log('yield之后');
}

const g = gen();
const result = g.next();
console.log(result);

result.value.then((res) => {
    console.log('res', res);
}).then(() => {
    g.next(); // 需要在第一次调用next方法返回promise之后，在promise成功之后在继续调用next方法，可
// 以继续执行下一个yiled之前的代码
}).catch((err) => {
    console.log('err', err);
})

function request(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(url);
        }, 2000)
    })
}

const gen = function *() {
    const f1 = yield request('http://xxxx.com/api/getCode');
    const f2 = yield request('http://xxxx.com/api/getInfo');
    console.log(f1);
    console.log(f2);
}

const g = gen();
const r1 = g.next()
r1.value.then((res) => {
    console.log('res', res);
    var r2 = g.next(res);
    r2.value.then((res2) => {
        console.log('res2', res2);
        g.next(res2);
    }) 
})

// 改成async的书写方式
async function aGen () {
    const f1 = await request('http://xxxx.com/api/getCode');
    const f2 = await request('http://xxxx.com/api/getInfo');
    console.log('aGen', f1);
    console.log('aGen', f2);
    return {name: 'jack'}
}

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

// 比较async与gennerator
// 书写上async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已
// 1. Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async
// 函数的执行，与普通函数一模一样，只要一行aGen(),完全不像 Generator 函数，需要调用next方法，或
// 者用co模块，才能真正执行，得到最后结果。

// 2. 更好的语义,async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表
// 示紧跟在后面的表达式需要等待结果。

// 3. 更广的适用性,co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命
// 令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）

// 4. 返回值是 Promise,async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令
// 就是内部then命令的语法糖

// 基本用法，获取有依赖关系的异步操作，因为async函数返回一个 Promise 对象，可以使用then方法添加
// 回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面
// 的语句

function getCode() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('84898');
        }, 1000)
    })
}

function getInfo(code) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({
                code,
                name: 'lose'
            })
        }, 3000)
    })
}

async function getUserInfo () {
    const code = await getCode();
    const result = await getInfo(code);
    console.log('result', result);
    return result;
}

getUserInfo().then((res) => {
    console.log('getUserInfo res', res);
}).catch((err) => {
    console.log('getUserInfo err', err);
})

// async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状
// 态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行
// then方法指定的回调函数。

async function f1() {
    return await 123;  // await命令后面是一个 Promise 对象。如果不是，会被转成一个立即resolve的 Promise 对象。
}

f1().then((res) => {
    console.log('res', res);
})

// 只要一个await语句后面的 Promise 变为reject，那么整个async函数都会中断执行。
async function f2() {
    await Promise.reject('error f2');
    console.log('是否执行'); // 不执行了
    await Promise.resolve('succ f2');
}

f2().then((res) => {
    console.log('res f2', res);
}).catch((err) => {
    console.log('res error', err);
})

// 注意await后面的异步操作，是否有依赖关系，如果有则依次执行，没有则并发执行；
// 1. 有依赖关系，需要依次执行，比较耗时
function getVarilCode () {
    return new Promise((resolve) => {
        console.log('先获取手机验证码');
        setTimeout(() => {
            resolve('4678');
        }, 500)
    })
}

function getList () {
    return new Promise((resolve) => {
        console.log('获取用户信息列表');
        setTimeout(() => {
            resolve([
                {
                    book: 'js',
                    id: 1
                },
                {
                    book: 'php',
                    id: 2
                }
            ]);
        }, 1000)
    })
}


async function login(code) {
    const list = await getList(); // 注意这个await只能放在promise外面，不能放里面，因为awite只能放
// async关键字的函数内
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({
                name: 'kils',
                age: 20,
                sex: '男',
                list,
            });
        }, 2000)
    })
}

async function getAutoUserInfo () {
    const newDate = +new Date();
    const code = await getVarilCode(); // await表达式返回的是对应prmise对象，resolve or reject的值，因
// 为await表达式会把后面不是promise的对象转化为promise对象， 所以async函数返回的是一个promise对
// 象，而await表达式返回的是一个具体的值
    const result = await login(code);
    const test = await '123';
    const oldDate = +new Date();
    console.log('result', result, oldDate - newDate, test);
    return result;
}

getAutoUserInfo().then((res) => {
    console.log('getUserInfo res', res);
}).catch((err) => {
    console.log('getUserInfo err', err);
})

// 无依赖关系，可以并行执行，然后等待每个并行执行异步操作的结果

function f3() {
    return new Promise((resolve) => {
        console.log('并行执行 f3');
        setTimeout(() => {
            resolve('f3');
        }, 2000)
    })
}

function f4() {
    return new Promise((resolve) => {
        console.log('并行执行 f4');
        setTimeout(() => {
            resolve('f4');
        }, 2000)
    })
}

async function all() {
    const newDate = +new Date();
    const r1 = f3();
    const r2 = f4();
    const result1 = await r1;
    const result2 = await r2;
    console.log('all', +new Date() - newDate, result1, result2);
}

all();

// async函数实现的原因
function spawn(genF) {
    return new Promise((resolve, reject) => {
        // 获取generator函数
        const gen = genF();
        function step(nextF) {
            let next;
            try{
                next = nextF();
            }catch(e){
                return reject(e);
            }
            // 如果结束，则返回最后一次next.value
            if(next.done) {
                return resolve(next.value);
            }
            // 包装一下next.value，便于promise方式调用
            Promise.resolve(next.value).then((val) => {
                // 如果done不是true，则继续调用next方法
                step(() => {
                    return gen.next(val);
                });
            }, (e) => {
                // 如果报错则，reject错误
                step(() => {
                    return gen.throw(e);
                });
            })
        }
        // 执行第一次next方法
        step(() => {
            return gen.next(undefined);
        });
    })
}

function f5() {
    return new Promise((resolve) => {
        console.log('并行执行 f5');
        setTimeout(() => {
            resolve('f5');
        }, 2000)
    })
}

function f6() {
    return new Promise((resolve) => {
        console.log('并行执行 f6');
        setTimeout(() => {
            resolve('f6');
        }, 2000)
    })
}

function asyncCopy(args) {
    // 返回spawn函数调用的结果
    return spawn(function *() {
        const newDate = +new Date();
        const r1 = f5();
        const r2 = f6();
        const result1 = yield r1;
        const result2 = yield r2;
        console.log('asyncCopy all', +new Date() - newDate, result1, result2);
    })
}

asyncCopy();

const animations = [toTop, toRight, toBottom];

function toTop(ele) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('toTop');
        }, 1000)
    })
}

function toRight(ele) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('toRight');
        }, 2000)
    })
}

function toBottom(ele) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('toBottom');
        }, 2000)
    })
}

function animationsPromise (ele, animations) {
    let ret = null;

    let p = Promise.resolve();

    for(let anim of animations) {
        // 利用then函数必须要等道promise的状态发生改变之后才会继续后面的then操作
        p = p.then((val) => {
            console.log('val', val);
            ret = val;
            return anim(ele);
        })
    }
    console.log('p', p);
    return p.catch((e) => {}).then((res) => {
        console.log('last res', res);
        return res ? res : ret;
    })
}

// animationsPromise(null, animations).then((res) => {
//   console.log('res', res);
// }).catch((err) => {
//     console.log('err', err);
// });

function animationsGenerator(elem, animations) {
    function spawn(genF) {
        return new Promise((resolve, reject) => {
            // 获取generator函数
            const gen = genF();
            function step(nextF) {
                let next;
                try{
                    next = nextF();
                }catch(e){
                    return reject(e);
                }
                // 如果结束，则返回最后一次next.value
                if(next.done) {
                    return resolve(next.value);
                }
                // 包装一下next.value，便于promise方式调用
                Promise.resolve(next.value).then((val) => {
                    // 如果done不是true，则继续调用next方法
                    step(() => {
                        return gen.next(val);
                    });
                }, (e) => {
                    // 如果报错则，reject错误
                    step(() => {
                        return gen.throw(e);
                    });
                })
            }
            // 执行第一次next方法
            step(() => {
                return gen.next(undefined);
            });
        })
    }

    return spawn(function *() {
        let ret = null;
        
        try{
            for (let prop of animations) {
                ret = yield prop(elem)
            } 
        }catch(e) {

        }
        return ret;
    })
}

animationsGenerator(null, animations).then((res) => {
    console.log('animationsGenerator res', res);
}).catch((err) => {
    console.log('animationsGenerator err', err);
});

// 依次执行，并返回最后一次的结果
async function animationsAsync(elem, animations) {
    let ret = null;
    try {
        for(let anim of animations) {
            ret = await anim(elem);
        }
    } catch(e) {
        /* 忽略错误，继续执行 */
        console.log('e', e);
    }
    return ret;
}

// animationsAsync(null, animations).then((res) => {
//     console.log('animationsAsync res', res);
// }).catch((err) => {
//     console.log('animationsAsync err', err);
// });

function getUrl(url, time = 1000) {
return new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve({
        code: 0,
        data: {
        time: +new Date(),
        url,
        list: [1, 2, 5]
        }
    });
    }, time)
})
}

function getCode() {
return getUrl('/api/getCode', 1000);
}

function getInfo() {
return getUrl('/api/getInfo', 2000);
}

// 链式调用处理顺序promise,该方法多个顺序promise调用是，书写不便
function fn() {
function recode(results, value){
    results.push(value);
    return results;
}

// bind方法，fun.bind(thisArg[, arg1[, arg2[, ...]]])，当绑定函数被调用时，这些参数将置于实参之前传递给
// 被绑定的方法。
const pushValue = recode.bind(null, []); // 

// return getCode().then(pushValue).then(getInfo).then(pushValue);
// const arr = [];
// return getCode().then((res) => {
//   arr.push(res);
// }).then(() => {
//   return getInfo();
// }).then((res) => {
//   arr.push(res);
//   return arr;
// })

const arr = [];
return getCode().then((res) => {
    arr.push(res);
}).then(getInfo).then((res) => {
    arr.push(res);
    return arr;
})
} 

// fn().then((res) => {
//   console.log('fn res', res);
// }).catch((err) => {
//   console.log('fn err', err); 
// })

// for循环，调用顺序promise

function fn1() {
function recode(results, value){
    results.push(value);
    return results;
}

const pushValue = recode.bind(null, []);

const task = [getCode, getInfo];

let p = Promise.resolve();

// 通过不断对promise进行处理，不断的覆盖 p 变量的值，以达到对p对象的累积处理效果。一定要先声明
// 一个p变量
for(let prop of task) {
    p = p.then(prop).then(pushValue);
}

return p;
}

// fn1().then((res) => {
//   console.log('fn1 res', res);
// }).catch((err) => {
//   console.log('fn1 err', err); 
// })

// 利用reduce方法来进行处理

function fn2() {
    function recode(results, value){
        results.push(value);
        return results;
    }

    const pushValue = recode.bind(null, []);

    const task = [getCode, getInfo];
    return task.reduce(function (promise, task) {
        return promise.then(task).then(pushValue);
    }, Promise.resolve());
}

// fn2().then((res) => {
// console.log('fn1 res', res);
// }).catch((err) => {
// console.log('fn1 err', err); 
// })

// 使用async来处理,顺序处理
async function fn3() {
    const tasks = [getCode, getInfo];
    let res;
    for (let task of tasks) {
        res = await task();
        console.log(res);
    }
    return res;
}

// fn3().then((res) => {
//     console.log('fn3 res', res);
// }).catch((err) => {
//     console.log('fn3 err', err);
// })

// 使用async来处理,并发处理,并发与顺序的区别是，并发是await promise的结果，顺序是await整个promise过程
async function fn4() {
    const newDate = +new Date();
    const tasksPromise = [getCode(), getInfo()];
    let res;
    for (let task of tasksPromise) {
        res = await task;
        console.log(res);
    }
    console.log(+new Date - newDate);
    return res;
}

fn4().then((res) => {
    console.log('fn4 res', res);
}).catch((err) => {
    console.log('fn4 err', err);
})

console.log(1)

setTimeout(() => {
    console.log(2)
    new Promise(resolve => {
        console.log(4)
        resolve()
    }).then(() => {
        console.log(5)
    })
})

new Promise(resolve => {
    console.log(7)
    resolve()
}).then(() => {
    console.log(8)
})

setTimeout(() => {
    console.log(9)
    new Promise(resolve => {
        console.log(11)
        resolve()
    }).then(() => {
        console.log(12)
    })
})
//1、7、8、2、4、5、9、11、12

<template>
  <div class="swiper-wrap" ref="swiper" :style="{height}">
    <div class="swiper-item clearfix" :style="{width: width * list.length + 'px'}">
      <div v-for="(item, index) in newList" :key="index">
        <img :src="item.img" :alt="'banner' + index" :style="{width: width + 'px', height}">
      </div>
    </div>
    <div class="swiper-dots">
      <span v-for="(item, index) in list" :key="index" :class="[index === currentIndex ? 'active' : '']"></span>
    </div>
    <div class="swiper-prev" @click="changeItem('prev')">&lt;</div>
    <div class="swiper-next" @click="changeItem('next')">&gt;</div>
  </div>
</template>

<script>
import Swiper from './swiper'

export default {
  name: 'swiper',
  props: {
    list: {
      type: Array,
      default: []
    },
    direction: {
      type: String,
      default: 'horizontal'
    },
    showDots: {
      type: Boolean,
      default: false
    },
    dotsPosition: {
      type: String,
      default: 'center'
    },
    height: {
      type: String,
      default: '180px'
    },
    auto: {
      type: Boolean,
      default: false
    },
    loop: {
      type: Boolean,
      default: false
    },
    duration: {
      type: Number,
      default: 300
    },
    interval: {
      type: Number,
      default: 2000
    }
  },
  computed: {
    width() {
      console.log(typeof window !== 'undefined', window.innerWidth);
      return typeof window !== 'undefined' && window.innerWidth
    },
    newList() {
      if (this.loop) {
        const tempArr =  JSON.parse(JSON.stringify(this.list));
        tempArr.unshift(this.list[this.list.length - 1]);
        tempArr.push(this.list[0]);
        return tempArr;
      }
      return this.list;
    }
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  methods: {
    changeItem(key) {
      this.swiper.changeItem(key);
    }
  },
  moundted() {
    const { direction, auto, loop, duration, interval } = this;
    const options = {
      direction,
      auto,
      loop,
      duration,
      interval,
      data: this.newList
    }
    this.swiper = new Swiper(this.$refs.swiper, options);
  }
}
</script>

<style lang="less" scoped>
.swiper-wrap {
  width: 100%;
  position: relative;
  overflow: hidden;

  .swiper-item {

    >div {
      float: left;

    }
  }

  .swiper-dots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translate(-50%, 0);
    font-size: 0;
    span {
      display: inline-block;
      vertical-align: middle;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: transparent;
      margin-right: 5px;
      border: 1px solid #fff;

      &:last-of-type {
        margin-right: 0;
      }

      
    }

    .active {
      background-color: rgb(0, 174, 133);
      border-color:  rgb(0, 174, 133) 
    }
  }

  .swiper-prev, .swiper-next {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
    margin-top: -15px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
  }

  .swiper-prev {
    left: 5%;
  }

  .swiper-next {
    right: 5%;
  }
}
</style>

const DEFAULT_OPTIONS = {
  direction: 'horizontal',
  auto: false,
  loop: false,
  duration: 300,
  interval: 2000
}

class Swiper {
  constructor(wrap, options) {
    this.options = Object.assign({}, DEFAULT_OPTIONS, options);
    this.wrap = wrap;

    this.initSwiper();
    this.initEvent();
  }

  initSwiper() {

  }

  initEvent() {

  }

  changeItem(key) {
  }
}

export default Swiper;

autoPlay () {
    const { interval } = this.options
    this.timer1 && clearTimeout(this.timer1)
    var _move = () => {
      this.timer1 = setTimeout(() => {
        this.go(++this.currentIndex, 'next')
        _move()
      }, interval)
    }
    _move()
  }

focusHandler () {
    this.focusTime = +new Date()
    console.log('focus', +new Date(), this.focusTime - this.blurTime)
    this.options.auto && this.autoPlay()
  }

  blurHandler () {
    this.blurTime = +new Date()
    console.log('blur', +new Date())
    this.stop();
  }

init () {
    if (!this.data.length) return
    this.getListWidthsOrHeight()
    this.bindEvent()
    this.stop()
    this.options.auto && this.autoPlay()
  }

recomputed() {
      const rect = this.$refs.swiper.getBoundingClientRect()
      this.width = rect.width + 'px'
      const initTransform = this.direction === 'horizontal' ? rect.width : parseInt(this.height)
      this.transformx = this.loop && this.isTransition ? `-${initTransform}px` : 0
      this.left = this.loop && !this.isTransition ? `-${initTransform}` : 0
    }

mounted () {
    this.$nextTick(() => {
      this.recomputed()
      this.initSwiper()
    })
  },

<meta name="viewport" content="width=device-width, initial-scale=1.0">

E[attr]：只使用属性名，但没有确定任何属性值；
E[attr="value"]：指定属性名，并指定了该属性的属性值；
E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

需要注意的是
对于E[attr="value"]这种属性值选择器有一点需要注意：属性和属性值必须完全匹配，特别是对于属性值是词列表的形式时，如：

<a href="" class="links item" title="open the website">7</a>
a[class="links"] {} 不能匹配上，只有a=[class="links item"] {}才能匹配上

属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是value时才匹配

七种属性选择器中E[attr="value"]和E[attr*="value"]是最实用的，其中E[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等，而E[attr*="value"]能在网站中帮助我们匹配不同类型的文件，比如说你的网站上不同的文件类型的链接需要使用不同的icon图标，用来帮助你的网站提高用户体验，就像前面的实例，可以通过这个属性给".doc",".pdf",".png",".ppt"配置不同的icon图标，如a[href$="png"]{background:orange;color:green;}

只有ie6不支持，所以使用的时候没有兼容性问题

伪类选择器分三类
第一类：动态伪类选择器，因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是我们在链接中常看到的锚点伪类，如":link",":visited";另外一种被称作用户行为伪类，如“:hover”,":active"和":focus"。顺序为爱恨原则LoVe/HAte

对于:hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被支持。

第二类：UI元素状态伪类，":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例，比如说你想将"disabled"的文本框与别的文本框区别出来，你就可以这样应用

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
IE6-8不支持":checked",":enabled",":disabled"这三种选择器。

第三类：CSS3的:nth选择器
:first-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()选择指定的元素；
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；
:only-child选择的元素是它的父元素的唯一一个了元素；
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty选择的元素里面没有任何内容。

p:empty {display: none;} 选中p标签没有内容的元素

:nth-child(length);/*参数是具体数字*/
:nth-child(n);/*参数是n,n从0开始计算*/，:nth-child(0)没有选中任何元素，:nth-child(1)选中第一个元素
:nth-child(n*length)/*n的倍数选择，n从0开始算*/
:nth-child(n+length);/*选择大于length后面的元素*/
:nth-child(-n+length)/*选择小于length前面的元素*/
:nth-child(n*length+1);/*表示隔几选一*/

:nth-child(2n)”也等于":nth-child(even)"选择偶数项
:nth-child(2n-1)”也等于":nth-child(odd)"选择奇数项

注意:nth-child(n);与:nth-of-type()的区别

否定选择器（:not）需要注意的是权重的计算是根据:not(选择器)内的选择器权重来进行计算，:not本身权重为0
input:not([type="submit"]) {border: 1px solid red;} 选中除type="submit"之外的input元素

ie9+以上没有兼容性问题

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动

伪元素如果没有设置“content”属性，伪元素是无用的，通常插入的伪元素在默认情况下是内联元素，如果要设置宽高需要我们显示的设置display属性

伪元素也是会继承有继承规则的css样式如font-size，font-family等，而不具有继承性的css样式是不会被继承的，如padding与margin之类的

before和after伪元素插入的内容不会被注入到目标元素的前或后注入，而是目标元素内容的前后

.clearfix:before,
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

input, textarea, div {
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

// 创建iframe，并想iframe内发送消息
function createIframe () {
    const iframe = document.createElement('iframe')
    iframe.id="my_iframe"
    iframe.className = 'my-iframe'
    iframe.src = 'xxxx'
    iframe.onload = function () {
          // 这里需要注意两个地方，第一个参数是传递的参数，最好是字符串，如果是对象使用JSON.stringfiy处理一下，第二个参数表示可以接收到postMessage传递过去消息的域，如果不想指定就写上*，不过为了安全性，最好写上域
          iframe.contentWindow.postMessage('message',  'xxxx')
    }
    iframe.onerror = function () {}
    document.body.appendChild(iframe)
}

// 监听所有iframe内发送来的消息
function receiveIframeMessage () {
     window.addEventListener('message', function (event) {
           if (event.origin === 'xxx' && event.data === 'yyy') {
               removeIframe()
           }
     }, false)
}

// 删除创建的iframe
function removeIframe () {
    const iframe = document.getElementId('my_iframe')
    document.body.removeChild(iframe)
}

window.addEventListener('message', function (event) {
           if (event.origin === 'xxx' && event.data === 'yyy') {
               clearCookie().then(() => {
                    window.parent.postMessage('cookie清除成功', '*')
               }).catch(() => {
                    window.parent.postMessage('cookie清除失败', '*')
               })
           }
}, false)

function createIframe () {
    const iframe = document.createElement('iframe')
    iframe.id="my_iframe"
    iframe.className = 'my-iframe'
    iframe.src = 'xxxx'
    var timer = null;
    var myPostMessage = function () {
        // 轮询的目的是，iframe内还没设置好监听，避免通信不成功
        timer = setTimeout(() => {
            var iframeEle = document.getElementById('my_iframe')
            iframeEle && iframe.contentWindow.postMessage('message', `xxxx`)
            if (iframeEle) {
                myPostMessage()
            }
        }, 500)
    }
    iframe.onload = function () {
        myPostMessage()
    }
    iframe.onerror = function () {
        console.log('iframe onerror')
    }
    document.body.appendChild(iframe)
}

var myRegExp = {
    // 检查字符串是否为合法QQ号码
    isQQ: function(str) {
        // 1 首位不能是0  ^[1-9]
        // 2 必须是 [5, 11] 位的数字  \d{4, 9}
        var reg = /^[1-9][0-9]{4,9}$/gim;
        if (reg.test(str)) {
            console.log('QQ号码格式输入正确');
            return true;
        } else {
            console.log('请输入正确格式的QQ号码');
            return false;
        }
    },
    // 检查字符串是否为合法手机号码
    isPhone: function(str) {
        var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|18[0-9]|14[57]|17[678])[0-9]{8}$/;
        if (reg.test(str)) {
            console.log('手机号码格式输入正确');
            return true;
        } else {
            console.log('请输入正确格式的手机号码');
            return false;
        }
    },
    // 检查字符串是否为合法Email地址
    isEmail: function(str) {
        var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        // var reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
        if (reg.test(str)) {
            console.log('Email格式输入正确');
            return true;
        } else {
            console.log('请输入正确格式的Email');
            return false;
        }
    },
    // 检查字符串是否是数字
    isNumber: function(str) {
        var reg = /^\d+$/;
        if (reg.test(str)) {
            console.log(str + '是数字');
            return true;
        } else {
            console.log(str + '不是数字');
            return false;
        }
    },
    // 去掉前后空格
    trim: function(str) {
        var reg = /^\s+|\s+$/g;
        return str.replace(reg, '');
    },
    // 检查字符串是否存在中文
    isChinese: function(str) {
        var reg = /[\u4e00-\u9fa5]/gm;
        if (reg.test(str)) {
            console.log(str + ' 中存在中文');
            return true;
        } else {
            console.log(str + ' 中不存在中文');
            return false;
        }
    },
    // 检查字符串是否为合法邮政编码
    isPostcode: function(str) {
        // 起始数字不能为0，然后是5个数字  [1-9]\d{5}
        var reg = /^[1-9]\d{5}$/g;
        // var reg = /^[1-9]\d{5}(?!\d)$/;
        if (reg.test(str)) {
            console.log(str + ' 是合法的邮编格式');
            return true;
        } else {
            console.log(str + ' 是不合法的邮编格式');
            return false;
        }
    },
    // 检查字符串是否为合法身份证号码
    isIDcard: function(str) {
        var reg = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
        if (reg.test(str)) {
            console.log(str + ' 是合法的身份证号码');
            return true;
        } else {
            console.log(str + ' 是不合法的身份证号码');
            return false;
        }
    },
    // 检查字符串是否为合法URL
    isURL: function(str) {
        var reg = /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i;
        if (reg.test(str)) {
            console.log(str + ' 是合法的URL');
            return true;
        } else {
            console.log(str + ' 是不合法的URL');
            return false;
        }
    },
    // 检查字符串是否为合法日期格式 yyyy-mm-dd
    isDate: function(str) {
        var reg = /^[1-2][0-9][0-9][0-9]-[0-1]{0,1}[0-9]-[0-3]{0,1}[0-9]$/;
        if (reg.test(str)) {
            console.log(str + ' 是合法的日期格式');
            return true;
        } else {
            console.log(str + ' 是不合法的日期格式，yyyy-mm-dd');
            return false;
        }
    },
    // 检查字符串是否为合法IP地址
    isIP: function(str) {
        // 1.1.1.1  四段  [0 , 255]
        // 第一段不能为0
        // 每个段不能以0开头
        //
        // 本机IP: 58.50.120.18 湖北省荆州市 电信
        var reg = /^([1-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])(\.([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])){3}$/gi;
        if (reg.test(str)) {
            console.log(str + ' 是合法的IP地址');
            return true;
        } else {
            console.log(str + ' 是不合法的IP地址');
            return false;
        }
    }
}

数字：^[0-9]*$
n位的数字：^\d{n}$
至少n位的数字：^\d{n,}$
m-n位的数字：^\d{m,n}$
零和非零开头的数字：^(0|[1-9][0-9]*)$
非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$
正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$
有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
非零的负整数：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
非负整数：^\d+$ 或 ^[1-9]\d*|0$
非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

汉字：^[\u4e00-\u9fa5]{0,}$
英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
长度为3-20的所有字符：^.{3,20}$
由26个英文字母组成的字符串：^[A-Za-z]+$
由26个大写英文字母组成的字符串：^[A-Z]+$
由26个小写英文字母组成的字符串：^[a-z]+$
由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
禁止输入含有~的字符：[^~\x22]+

/*eslint-disable */
const request = (function () {
  // 系统参数;
  const defaults = {
    timeout: 5000,
    reqState: false,
    url: '',
    header: '',
    data: '',
    method: '',
    dataType: 'json',
    success: (res) => { 
      console.log('success', res);
    },
    fail: () => { },
    complete: function () { },
  };

  // http适配器 
  function XhrAdapter(config) {
    return new Promise((resolve, reject) => {
      console.log('config', config, config.success);
      config.success = (res) => {
        console.log('success1', res);
        resolve(res);
      };
      config.fail = (res) => {
        reject(res);
      };
      console.log('request', config, config.success);
      wx.request(config);
    });

  }
  // 派发请求
  function dispatchRequest(config) {
    const adapter = new XhrAdapter(config);
    return adapter.then(function onAdapterResolution(response) {
      return response;
    }, function onAdapterRejection(reason) {
      return Promise.reject(reason);
    });
  }
  function InterceptorManager() {
    this.handlers = [];
  }
  InterceptorManager.prototype.use = function use(fulfilled, rejected) {
    this.handlers.push({
      fulfilled: fulfilled,
      rejected: rejected,
    });
    return this.handlers.length - 1;
  };
  InterceptorManager.prototype.forEach = function forEach(fn) {
    this.handlers.forEach(function forEachHandler(h) {
      if (h !== null) {
        fn(h);
      }
    });
  };
  function Axios(defaultConfig) {
    this.defaults = defaultConfig;
    this.interceptors = {
      request: new InterceptorManager(),
      response: new InterceptorManager(),
    };
  }

  ['delete', 'get'].forEach((method) => {
    Axios.prototype[method] = function ({url, config}) {
      return this.request(Object.assign({
        header: config || {},
      } || {}, {
        method: method,
        url: url,
      }));
    };
  });
  
  ['post', 'put'].forEach((method) => {
    Axios.prototype[method] = function (url, data, config) {
      return this.request(Object.assign({
        header: config || {},
      } || {}, {
        method: method,
        url: url,
        data: data,
      }));
    };
  });
  Axios.prototype.request = function request(config) {
    config.method = config.method.toLowerCase();
    config = Object.assign(defaults, this.defaults, config);
    console.log(config);
    var chain = [dispatchRequest, undefined];
    var promise = Promise.resolve(config);
    this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
      chain.unshift(interceptor.fulfilled, interceptor.rejected);
    });
    this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
      chain.push(interceptor.fulfilled, interceptor.rejected);
    });
    while (chain.length) {
      promise = promise.then(chain.shift(), chain.shift());
    }
    return promise;
  };
  function createInstance(defaultConfig) {
    let context = new Axios(defaultConfig);
    return context;
  }
  let axios = createInstance(defaults);
  return axios;
})();

//  自定义请求拦截器
request.interceptors.request.use((data) => {
  console.log(`url:${data.url} method:${data.method}`);
  wx.showLoading({
    title: '加载中',
  });
  return data;
}, error =>{
  return Promise.reject(error);
});

//  自定义返回拦截器
request.interceptors.response.use((data) => {
  wx.hideLoading();
  return data;
}, error => {
  return Promise.reject(error);
});

export default request;

const DEFAULT_CONTENT_TYPE = {
  'Content-Type': 'application/x-www-form-urlencoded',
};


function getDefaultAdapter() {
  return xhrAdapter;
}

const defaults = {
  adapter: getDefaultAdapter(),
  timeout: 0,
  headers: {
    common: {
      Accept: 'application/json, text/plain, */*',
    },
  },
};

function encode(val) {
  return encodeURIComponent(val)
      .replace(/%40/gi, '@')
      .replace(/%3A/gi, ':')
      .replace(/%24/g, '$')
      .replace(/%2C/gi, ',')
      .replace(/%20/g, '+')
      .replace(/%5B/gi, '[')
      .replace(/%5D/gi, ']');
}

function isURLSearchParams(val) {
  return typeof URLSearchParams !== 'undefined' && val instanceof URLSearchParams;
}

function isDate(val) {
  return Object.prototype.call(val) === '[object Date]';
}

function enhanceError(error, config, code, request, response) {
  error.config = config;
  if (code) {
    error.code = code;
  }
  error.request = request;
  error.response = response;
  return error;
}

function createError(message, config, code, request, response) {
  const error = new Error(message);
  return enhanceError(error, config, code, request, response);
}

function settle(resolve, reject, response) {
  const validateStatus = response.config.validateStatus;
    // Note: status is not exposed by XDomainRequest
  if (!response.status || !validateStatus || validateStatus(response.status)) {
    resolve(response);
  } else {
    reject(createError(
        `Request failed with status code ${response.status}`,
        response.config,
        null,
        response.request,
        response,
      ));
  }
}

function buildUrl(url, params) {
  if (!params) {
    return url;
  }
  let serializedParams;
  if (isURLSearchParams(params)) {
    serializedParams = params.toString();
  } else {
    const parts = [];

    params.forEach((val, key) => {
      if (val === null || typeof val === 'undefined') {
        return;
      }

      if (Array.prototype.isArray(val)) {
        key += '[]';
      } else {
        val = [val];
      }

      val.forEach((v) => {
        if (isDate(v)) {
          v = v.toISOString();
        } else if (Object.prototype.isObject(v)) {
          v = JSON.stringify(v);
        }
        parts.push(`${encode(key)}=${encode(v)}`);
      });
    });

    serializedParams = parts.join('&');
  }
  if (serializedParams) {
    url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams;
  }

  return url;
}

function transformData(data, headers, fns) {
  /* eslint no-param-reassign:0 */
  fns.forEach((fn) => {
    data = fn(data, headers);
  });

  return data;
}

function dispatchRequest(config) {
  config.headers = config.headers || {};

  // Transform request data
  config.data = transformData(
    config.data,
    config.headers,
    config.transformRequest,
  );

  config.headers = Object.assign(
    config.headers.common || {},
    config.headers[config.method] || {},
    config.headers || {},
  );

  ['delete', 'get', 'head', 'post', 'put', 'patch', 'common'].forEach(
    (method) => {
      delete config.headers[method];
    },
  );

  const adapter = config.adapter || defaults.adapter;

  return adapter(config).then((response) => {
    response.data = transformData(
      response.data,
      response.headers,
      config.transformResponse,
    );
  }, (reason) => {
    if (reason && reason.response) {
      reason.response.data = transformData(
        reason.response.data,
        reason.response.headers,
        config.transformResponse,
      );
    }
    return Promise.reject(reason);
  });
}

function InterceptorManager() {
  this.handlers = [];
}

InterceptorManager.prototype.use = function (fulfilled, rejected) {
  this.handlers.push({
    fulfilled: fulfilled,
    rejected: rejected,
  });
  return this.handlers.length - 1;
};

InterceptorManager.prototype.eject = function (id) {
  if (this.handlers[id]) {
    this.handlers[id] = null;
  }
};

InterceptorManager.prototype.forEach = function (fn) {
  this.handlers.forEach((h) => {
    if (h !== null) {
      fn(h);
    }
  });
};

function Axios(instanceConfig) {
  this.defaults = instanceConfig;
  this.interceptors = {
    request: new InterceptorManager(),
    response: new InterceptorManager(),
  };
}

Axios.prototype.request = function (config) {
  if (typeof config === 'string') {
    config = arguments[1] || {};
    config.url = arguments[0];
  } else {
    config = config || {};
  }

  config = Object.assign(this.defaults, config);

  config.method = config.method ? config.method.toLowerCase() : 'get';

  const chain = [dispatchRequest, undefined];

  let promise = Promise.resolve(config);

  this.interceptors.request.forEach((interceptor) => {
    chain.unshift(interceptor.fulfilled, interceptor.rejected);
  });

  this.interceptors.response.forEach((interceptor) => {
    chain.push(interceptor.fulfilled, interceptor.rejected);
  });

  while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
  }

  return promise;
};

// Provide aliases for supported request methods
['delete', 'get', 'head', 'options'].forEach((method) => {
    /* eslint func-names:0 */
  Axios.prototype[method] = function (url, config) {
    return this.request(Object.assign(config || {}, {
      method: method,
      url: url,
    }));
  };
});

['post', 'put', 'patch'].forEach((method) => {
    /* eslint func-names:0 */
  Axios.prototype[method] = function (url, data, config) {
    return this.request(Object.assign(config || {}, {
      method: method,
      url: url,
      data: data,
    }));
  };
});

function xhrAdapter(config) {
  return new Promise((resolve, reject) => {
    let requestData = config.data;
    const requestHeaders = config.headers;

    let request = new XMLHttpRequest();
    const loadEvent = 'onreadystatechange';

    request.open(config.method.toUpperCase(), buildUrl(config.url, config.params), true);

    request.timeout = config.timeout;

    request[loadEvent] = function handleLoad() {
      if (!request) {
        return;
      }
      const responseData = !config.responseType || config.responseType === 'text' ? request.responseText : request.response;

      const response = {
        data: responseData,
            // IE sends 1223 instead of 204 (https://github.com/axios/axios/issues/201)
        status: request.status === 1223 ? 204 : request.status,
        statusText: request.status === 1223 ? 'No Content' : request.statusText,
        headers: null,
        config: config,
        request: request,
      };

      settle(resolve, reject, response);

      request = null;
    };

    request.onabort = function handleAbort() {
      if (!request) {
        return;
      }

      reject(createError('Request aborted', config, 'ECONNABORTED', request));

          // Clean up request
      request = null;
    };

    request.onerror = function handleError() {
        // Real errors are hidden from us by the browser
        // onerror should only fire if it's a network error
      reject(createError('Network Error', config, null, request));

        // Clean up request
      request = null;
    };

    request.ontimeout = function handleTimeout() {
      reject(createError(`timeout of ${config.timeout}ms exceeded`, config, 'ECONNABORTED',
          request));

        // Clean up request
      request = null;
    };

    if ('setRequestHeader' in request) {
      requestHeaders.forEach((val, key) => {
        if (typeof requestData === 'undefined' && key.toLowerCase() === 'content-type') {
            // Remove Content-Type if data is undefined
          delete requestHeaders[key];
        } else {
            // Otherwise add header to the request
          request.setRequestHeader(key, val);
        }
      });
    }

    if (config.responseType) {
      try {
        request.responseType = config.responseType;
      } catch (e) {
          // Expected DOMException thrown by browsers not compatible XMLHttpRequest Level 2.
          // But, this can be suppressed for 'json' type as it can be parsed by default 'transformResponse' function.
        if (config.responseType !== 'json') {
          throw e;
        }
      }
    }

    if (requestData === undefined) {
      requestData = null;
    }

      // Send the request
    request.send(requestData);
  });
}


['delete', 'get', 'head'].forEach((method) => {
  defaults.headers[method] = {};
});

['put', 'post', 'patch'].forEach((method) => {
  defaults.headers[method] = Object.assign({}, DEFAULT_CONTENT_TYPE);
});

function bind(fn, thisArg) {
  return function wrap() {
    const args = new Array(arguments.length);
    for (let i = 0; i < args.length; i++) {
      args[i] = arguments[i];
    }
    return fn.apply(thisArg, args);
  };
}

function createInstance(defaultConfig) {
  const context = new Axios(defaultConfig);
  const instance = bind(Axios.prototype.request, context);

  return instance;
}

const axios = createInstance(defaults);

export default axios;

                function getScrollBar () {
			  var div = document.createElement('div'),
			        noScrollWidth,
				scrollWidth;
				div.style.width = '200px';
				div.style.height = '300px';
				div.style.position = 'absolute';
				div.style.left = '99999px';
				noScrollWidth = document.body.appendChild(div).clientWidth;
				div.style.overflowY = 'scroll';
				scrollWidth = div.clientWidth;
				document.body.removeChild(div);
				return noScrollWidth - scrollWidth;
		}

                     function getScrollBar () {
				var div = document.createElement('div'),
					clientWidth,
					offsetWidth;
				div.style.width = '200px';
				div.style.height = '300px';
				div.style.overflowY = 'scroll'
				div.style.position = 'absolute';
				div.style.left = '99999';
				clientWidth = document.body.appendChild(div).clientWidth;
				offsetWidth = div.offsetWidth;
				return offsetWidth - clientWidth;
			}

<div class="box"></div>

var box = document.getElementsByClassName("box")[0];
var WAIT_TIME = 500;

var throttle1 = function (func, time){
	var previous = 0,
		_this,
		args;
	return function (){
		var now = +new Date(); //使用时间搓
		_this = this;
		args = arguments;
		
		if(now - previous > time){
			func.apply(_this, args);
			previous = now;
		}
	}
}

var throttle2 = function (func, time){
	var _this,
		timeout,
		args;
	return function (){
		_this = this;
		args = arguments;
		if(!timeout){
			timeout = setTimeout(function (){
				func.apply(_this, args);
				timeout = null;
			}, time);
		}
		
	}
}

var throttle3 = function (func, time){//时间戳与定时器的结合
	var previous = 0,
		_this,
		timeout,
		args; 
		
	var later = function (){
		previous = +new Date();
		timeout = null;
		func.apply(_this, args);
	}
	
	return function (){
		var now = +new Date();	
		var remaining = time - (now - previous); //下次执行func剩余的时间
		
		_this = this;
		args = arguments;
		
		if(remaining < 0 || remaining > time){
			if(timeout){
				clearTimeout(timeout);
				timeout = null;
			}
			previous = now;
			func.apply(_this, args);
		}else if(!timeout) {
			timeout = setTimeout(later, remaining);
		}
	}
	
}

var throttle4 = function (func, time, options){//时间戳与定时器的结合
	var previous = 0,
		_this,
		timeout,
		args; 
		
	if (!options) options = {};
		
	var later = function (){
		previous = options.leading === false ? 0 : new Date().getTime();
		timeout = null;
		func.apply(_this, args);
		if (!timeout) _this = args = null;
	}
	
	return function (){
		var now = +new Date();	
		if(!previous && options.leading === false) previous = now;
		var remaining = time - (now - previous); //下次执行func剩余的时间
		
		_this = this;
		args = arguments;
		
		if(remaining < 0 || remaining > time){
			if(timeout){
				clearTimeout(timeout);
				timeout = null;
			}
			previous = now;
			func.apply(_this, args);
			if (!timeout) _this = args = null;
		}else if(!timeout && options.trailing !== false) {
			timeout = setTimeout(later, remaining);
		}
	}
	
}

var getUserAction = function (){
	console.log(this);
	console.log(arguments);
}

// box.onmousemove = throttle1(getUserAction, 1000);
// box.onmousemove = throttle2(getUserAction, 1000);
// box.onmousemove = throttle3(getUserAction, 1000);
// box.onmousemove = throttle4(getUserAction, 1000,{
// leading：false 表示禁用第一次执行  trailing: false 表示禁用停止触发的回调
// });

box.onmousemove = throttle4(getUserAction, 1000,{
	trailing: false
});

background-position
bottom, left, right, top
height, width
margin-bottom, margin-left, margin-right, margin-top
min-height, min-width
padding-bottom, padding-left, padding-right, padding-top
text-indent

关于文字排版的属性如：
font
word-break
letter-spacing
text-align
text-rendering
word-spacing
white-space
text-indent
text-transform
text-shadow
line-height
color
visibility
cursor

// 阻止元素被浮动元素覆盖
.normal {
	overflow: auto; // 设置触发BFC的属性
	height: 100px;
	background-color: pink;
}
.float {
	float: left;
	width: 100px;
	height: 50px;
	background-color: red;
}

<div class="box">
	<div class="float">float</div>
	<div class="normal"></div>
</div>

// 包含浮动元素，避免高度塌陷
.wrap {
	overflow: auto; // 设置触发BFC的属性
	background-color: green;
}
.content {
	float: left;
	width: 200px;
	height: 100px;
	background-color: blue;
}

<div class="wrap">
	<div class="content">content</div>
</div>

// 阻止margin会发生重叠
.box1,.box2-child {
	height: 100px;
	background-color: #ccc;
	margin: 20px 0;
}
.box2-child {
	background-color: #0099FF;
}
.box2 {
	overflow: auto;
}
<div class="main">
	<div class="box1">box1</div>
	<div class="box2">
		<div class="box2-child">box2</div>
	</div>
</div>

// 第一种  position: absolute + transform 实现垂直居中，宽高自适应，兼容ie9+ （优先使用此方式）
.box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: pink;
}
<div class="box">position: absolute + transform</div>

// 第二种 position： absolute，top+left+top+bottom等0实现水平垂直居中，需要设置具体宽高，兼容ie6+（其次使用此方式）
.box1 {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 50%;
	height: 50px;
	background-color: pink;
}
<div class="box1">position： absolute，top+left+top+bottom</div>

// 第三种 flex实现 
// 父元素
.wrap3 {
	width: 100%;
	height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: blue;
	margin-top: 10px;
}

// 居中子元素
.box3 {
	width: 10%;
	flex: 0 0 50px;
	background-color: pink;
	align-self: center;
}
<div class="wrap3">
	<div class="box3">flex布局</div>
</div>

// 第四种 table-cell实现
.wrap4 {
	display: table;
	width: 100%;
	height: 200px;
	
	margin-top: 10px;
}
.box4 {
	display: table-cell;
	
	background-color: blue;
	vertical-align: middle;
	text-align: center; 
}
.content {
	width: 50%;
	height: 50px;
	margin: auto;
	background-color: pink;
}

<div class="wrap4">
	<div class="box4">
		<div class="content">display:table-cell</div>
	</div>
</div>

// 第一种方式，定宽的元素float脱离文档流，右侧元素给对应宽度的margin-left（优先推荐使用该方法）
.wrap {
	width: 100%;
	height: 200px;
	margin-top: 10px;
	background-color: blue;
}
.left {
	float: left;
	width: 200px;
	background-color: pink;
}
.right {
	margin-left: 200px;
	height: 200px;
	background-color: gray;
}
<div class="wrap">
	<div class="left">left，左侧浮动，脱离文档流，右侧设置一个margin-left</div>
	<div class="right">right</div>
</div>

// 第二种方式左右两侧都浮动，左侧设置固定宽度，及一个固定宽度的margin-right负值，右侧设置宽度100%，然后在右侧div内设一个子元素，给子元素设置一个margin-left
.left1 {
        float: left;
        margin-right: -200px;
        width: 200px;
        background-color: pink;
}
.right1 {
	float: left;  
	width: 100%; 
}
<div class="wrap">
	<div class="left1">left</div>
	<div class="right1">
		<div class="content">right</div>
	</div>
</div>

// 第三种方式 flex，这种方法需要注意兼容性，ie10+,移动端可以用
.wrap1 {
	display: flex;
	width: 100%;
	height: 200px;
	margin-top: 10px;
	background-color: blue;
}
.left2 {
	flex: 0 0 200px;
	background-color: pink;
}
.right2 {
	flex: 1;
	background-color: gray;
}

<div class="wrap1">
	<div class="left2">left,这种方法需要注意兼容性，ie10+,移动端可以用</div>
	<div class="right2">right</div>
</div>

tr:nth-child(2n+1) === tr:nth-child(odd)选择奇数行；
tr:nth-child(2n) === tr:nth-child(even)选择偶数行；
span:nth-child(0n+1) === span:nth-child(1) === first-child匹配第一个元素；
span:nth-child(-n+3)匹配前三个元素

export default {
  namespaced: true,
  state: {
    msgList: {}
  },
  getters: {
    getListByType: state => type => (state.msgList[type] || {})
  },
  mutations: {
    setMsgList(state, playload) {
      const type = playload.group_id;
      const {data}  = playload.result;
      console.log('setMsgList', state, type);
      if (state.msgList[type]) {
        state.msgList = {...state.msgList, [type]: {
          list: state.msgList[type].list.concat(data),
        }};
      } else {
        state.msgList = {...state.msgList, [type]: {
          list: data,
        }};
      }
    },
    cleanMsg(state, type) {
      console.log('cleanMsg', state, type);
      if (type && state.msgList[type]) {
        state.msgList[type] = {
          list: [],
        }
      }else {
        state.msgList = {}
      }
    }
  },
  actions: {
    async getMsgList({commit, state}, playload) {
      const {group_id, lastest_create_unixtime = 0, oldest_create_unixtime = 0} = playload;
      const result = await getMessageList({
        group_id,
        limit: 20,
      });
      const { data } = result;
      commit('setMsgList', {result, group_id});
      return data;
    }
  }
}

启动命令
httpd –k start 

停止命令
httpd –k stop

启动mysql服务
net start mysql  

退出mysql命令
mysql > \q

暂停mysql服务
net stop mysql  

1. 修改wampserver的安装目录，在打开里面的“script”文件夹，用记事本打开里面的config.inc.php
// 注意，windows下表示路径的“\”在这里必须改为“/”）
// $wwwDir = $c_installDir.'/www';  => $wwwDir = 'F:/directus-build'   新的根目录

2. 修改wamp目录下Apach目录下面的httpd.conf文件
# DocumentRoot "${INSTALL_DIR}/www"
# <Directory "${INSTALL_DIR}/www/">

替换成需要的新目录

DocumentRoot "F:/directus-build/"
<Directory "F:/directus-build/">

3. 修改wamp目录下Apach目录下面的httpd-vhosts.conf文件
// 替换DocumentRoot与Directory 后面的路径
<VirtualHost *:80>
  ServerName localhost
  ServerAlias localhost
  DocumentRoot "F:/directus-build/"
  <Directory "F:/directus-build/">
    Options +Indexes +Includes +FollowSymLinks +MultiViews
    AllowOverride All
    Require local
  </Directory>
</VirtualHost>


到此为止就可以通过localhost访问新的www根目录了

4. 配置多站点，只需要在httpd-vhosts.conf文件内添加新的host

<VirtualHost *:80>
  ServerName www.abc.com
  ServerAlias www.abc.com
  DocumentRoot "F:/php-demo/"
  <Directory "F:/php-demo/">
    Options +Indexes +Includes +FollowSymLinks +MultiViews
    AllowOverride All
    Require local
  </Directory>
</VirtualHost>

5. 修改本机的hosts文件C:\Windows\System32\drivers\etc
// 添加如下内容，以此类推，然后我们就可以通过www.abc.com来访问F:/php-demo/目录下的内容了
127.0.0.1 localhost
127.0.0.1 www.abc.com

const http = axios.create({
	baseURL: 'https://some-domain.com/api/',
  	timeout: 1000,
  	headers: {'X-Custom-Header': 'foobar'}
})

http.interceptors.request.use((config) => {
	return config;
}, (error) => {
	return Promise.reject(error)
})

http.interceptors.response.use((response) => {
	if (response.code === 0) {
		return response.data;
	}

	return Promise.reject({
		msg: response.errMsg,
		code: response.code
	})
}, (err) => {
	return Promise.reject(err)
})


function get(url, opts = {params: {}}) {
	return new Promise((resolve, reject) => {
		// 这里直接做一些对url及传入params的处理
		http.get(url, opts).then((res) => {
			resolve(res);
		}).catch((err) => {
			// 这里可以统一处理提示错误的方式
			reject(err);
		})
	})
}

function post(url, data, opts) {
	return new Promise((resolve, reject) => {
		http.post(url, data, opts).then((res) => {
			resolve(res);
		}).catch((err) => {
			reject(err);
		})
	})
}

let $httpResolve;
let apiDomain = '';

let $httpPromise = new Promise((resolve) => {
	$httpResolve = resolve;
})


if (axios) {
        // 这里可以换成任何基于axios封装的方法
	$httpResolve(axios);
}

function makeHttp(method, arg) {
	return $httpPromise
		.then(($http) => {
			return $http[method](...arg);
		})
		.then((res) => {
			if (res.data.retCode === '-1500004') {
				throw new Error('缺少参数');
			}
			return res;
		})
}

function get(...args) {
	const [url, ...rest] = args;
	return $httpPromise.then(() => {
		return makeHttp('get', [addBaseUrl(addBaseParam(url)), ...rest]);
	})
}

function post(...args) {
	const [url, ...rest] = args;
	return $httpPromise.then(() => {
		return makeHttp('post', [addBaseUrl(addBaseParam(url)), ...rest]);
	})
}


function request(...args) {
	const [url, ...rest] = args;
	return $httpPromise.then(() => {
		return makeHttp('request', [addBaseUrl(addBaseParam(url)), ...rest]);
	})
}

// 利用async函数，对返回值进行处理
const wrap = (fn) => {
	return async (...args) => {
		const res = await fn(...args);

		const { retCode, errMsg, data} = res.data;

		if (retCode === 0) {
			return data;
		}

		throw new BuildInHttpError(errMsg, retCode, res);
	}
}

function BuildInHttpError(message, retCode, data) {
	this.message = message;
  this.data = data;
  this.retCode = retCode;
}

function addBaseParam(url) {
	if(/^\/api\//.test(url)) {
		const param = {
			token: 'afsad66332',
			orgCode: 'kklhjsk'
		}
		return `${url}${url.indexOf('?') > 0 ? '&' : '?'}${Qs.stringify(param)}`
	}	
	return url;
}

function addBaseUrl(url) {
	if(/^\/api\//.test(url)) {
		return `${apiDomain}${url}`
	}
	return url;
}

export default {
	get,
	post,
	request,
	apiGet: wrap(get),
	apiPost: wrap(post),
	apiRequest: wrap(request)
}

function onchange (e) {
  const 
  const url = window.URL.createObjectURL(e.target.files[0]) || 
  window.webkitURL.createObjectURL(e.target.files[0])

  img.src =  url
}

function onchange (e) {
  const fileReader = window.FileReader()
  fileReader.onload = function (res) {
    
     img.src = res.target.result
  }
  fileReader.readAsDataURL(e.target.files[0])
}

function compressImage (src) {
    const canvas = document.getElementById('uploadImage')
    const cxt = canvas.getContext('2d')
    const img = new Image()
    img.src = src
    img.onload = () => {
         // 固定画布尺寸，也就是固定来输出图片的尺寸
         canvas.witdh = 750
         canvas.height = 562.5
         cxt.drawImage(img, 0, 0, 750, 562.5)
         // toDataURL返回一个base64链接
         const newUrl = canvas.toDataURL('image/jpeg', 0.6)
         
         // 或者可以使用toBlob方法返回一个二进制blob对象传到后台
         canvas.toBlob((blob) => {
             // 上传的逻辑，blob对象对img的src是无法识别的
         }, 'image/jpeg', 0.6)
    }

    img.onerror = () => {}
} 

<template>
    <div>
        <div >
            <p>表单上传</p>
            <!-- enctype有三个值application/x-www-form-urlencoded（默认值），multipart/form-data， text/plain -->
            <form action="/api/broker/customer/upload-image?token=fomozg1498552329&orgCode=yajuleadmin_test" method="post" enctype="multipart/form-data">
                <input type="file" name="file">
                <input type="submit" value="上传" accept="image/jpeg, image/png">
            </form>
        </div>
        <div>
            <p>formData上传</p>
            <input type="file" name="file" @change="changeFile">
        </div>
        <div>
            <p>base64上传</p>
            <input type="file" name="file" @change="changeFile2">
        </div>
        <div>
            <img style="width: 200px; height: 200px" :src="imgSrc" alt="">
        </div>
        <div>
            <canvas id="uploadImg"></canvas>
        </div>
    </div>
</template>

<script>
    import http from 'broker-http';
    import axios from 'axios'

    export default {
        props: {},
        data() {
            return {
                imgSrc: ''
            }
        },
        computed: {},
        watch: {},
        methods: {
            uploadImg(params) {
                // return http.apiPost('/api/broker/customer/upload-image', params)
                // return $app.http.post('/api/broker/customer/upload-image', params)
                return axios.post('/api/broker/customer/upload-image', params)
            },
            changeFile(e) {
                console.log(e);
                const file = e.target.files[0];
                // URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。兼容ie10+
                // const url = window.URL.createObjectURL(file);

                

                const form = new FormData();
                form.append('token', 'fomozg1498552329');
                form.append('orgCode', 'yajuleadmin_test');
                form.append('from', 'paas_app');

                form.append('file', file);
                form.append('file', 'file');
                

                this.uploadImg(form).then((res) => {
                    console.log(res);
                })
                // this.imgSrc = url;
            },
            changeFile2(e) {
                const file = e.target.files[0];

                const fileReader = new window.FileReader();
                fileReader.onload = (e) => {
                    // 转base64
                    this.imgSrc = e.target.result;

                    const form = new FormData();
                    form.append('token', 'fomozg1498552329');
                    form.append('orgCode', 'yajuleadmin_test');
                    form.append('from', 'paas_app');

                    form.append('file', e.target.result);
                    form.append('file', 'file');
                    
                    this.createCanvas(e.target.result);
                    // this.uploadImg(form).then((res) => {
                    //     console.log(res);
                    // })
                }
                fileReader.readAsDataURL(file)

                
            },
            createCanvas(src) {
                var canvas = document.getElementById("uploadImg");
                var cxt = canvas.getContext('2d');
                canvas.width = 640;
                canvas.height = 400;
                var img = new Image();
                img.src = src;
                img.onload = function() {
                    // var w=img.width;
                    // var h=img.height;
                    // canvas.width= w;
                    // canvas.height=h;
                    // 将图像绘制于Canvas画布当中,
                    cxt.drawImage(img, 0, 0,640,400); // 表示将图片从画布得左上方0，0得位置画起，宽为640高为400，如果不写这来给你个参数，则使用图片本身得宽高
                    //canvas.toDataURL(type, encoderOptions);type图片格式，默认为 image/png。encoderOptions在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略;该方法返回的是一个包含data URI的字符串，该字符串可直接作为图片路径地址填入<img>标签的src属性当中
                    // $(".showPic").show().attr('src', canvas.toDataURL("image/jpeg", 0.9));
                    console.log(canvas.toDataURL("image/jpeg", 0.9));
                    // this.uploadImg({}).then((res) => {
                    //     console.log(res);
                    // })
                    // axios({
                    //     url: "/front/uploadByBase64.do",
                    //     type: "POST",
                    //     data: {
                    //         "imgStr": canvas.toDataURL("image/jpeg", 0.9).split(',')[1]
                    //     },
                    //     success: function(data) {
                    //         console.log(data);
                    //         $(".showPic").show().attr('data-url',"/"+ data.url);
                    //     }
                    // });
                }
              
                img.onload = () => {
                      const originWidth = img.width
                      const originHeight = img.height
                      let resultWidth = INIT_WIDTH
                      let resultHeight = INIT_HEIGHT
                      // 按比例缩放图片尺寸
                      if (originWidth > resultWidth || originHeight > resultHeight) {
                          if (originWidth > resultWidth && originHeight > resultHeight) {
                              const scal = Math.max(originWidth / resultWidth, originHeight / resultHeight)
                              resultWidth = originWidth / scal
                              resultHeight = originHeight / scal
                          } else if (originWidth > resultWidth) {
                              const scal = originWidth / resultWidth
                              resultHeight = originHeight / scal
                          } else if (originHeight > resultHeight) {
                              const scal = originHeight / resultHeight
                              resultWidth = originWidth / scal
                          }
                     } else {
                         resultWidth = originWidth
                         resultHeight = originHeight
                     }
                     console.log({originWidth, originHeight, resultWidth, resultHeight})
                     canvas.width = resultWidth
                     canvas.height = resultHeight
                     cxt.drawImage(img, 0, 0, resultWidth, resultHeight)
                   }
               }
        },
        beforeCreate() {},
        created() {}
    }
</script>

var shallowCopy = function (src){
	var obj = {};
	for(var prop in src){
		if(src.hasOwnProperty(prop)){
			obj[prop] = src[prop]
		}
	}
	return obj
}

// 第一种方式
var deepCopy = function (source,target){
	var c = target || {};
	for(var prop in source){
		if(typeof source[prop] === "object"){
			if(source[prop].constructor === Array){
				c[prop] = [];
			}else if (source[prop].constructor === Object){
				c[prop] = {};
			}
			deepCopy(source[prop],c[prop]);
		}else {
			c[prop] = source[prop]
		}
	}
	return c
}

// 第二种方式
var deepCopy2 = function (obj) {
	return JSON.parse(JSON.stringify(obj));
}

// 第三种方式与第一种一样只是换个写法
var deepCopy3 = function(obj) {
    if (typeof obj !== 'object') return;
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepCopy3(obj[key]) : obj[key];
        }
    }
    return newObj;
}

directives.directive("myLaydate", ['$timeout', function($timeout) {
            return {
                require: "?ngModel",
                restrict: "A",
                scope: {
                    ngModel: "=",
                    maxDate: "@",
                    minDate: "@"
                },
                link: function(scope, ele, attrs, ngModel) {
                    var date = null,
                        config = {};
                    //					console.log(scope.$parent.startTime);
                    var timer = null;
                    $timeout.cancel(timer);
                    timer = $timeout(function() {
                        //初始化参数
                        config = {
                            elem: "#" + attrs.id,
                            format: attrs.format != undefined && attrs.format != "" ? attrs.format : "YYYY-MM-DD hh:mm:ss",
                            max: attrs.hasOwnProperty("maxDate") ? attrs.maxDate : laydate.now(+5),
                            min: attrs.hasOwnProperty("minDate") ? attrs.minDate : laydate.now(-5),
                            istime: true,
                            istoday: false,
                            choose: function(data) {
                                scope.$apply(setViewValue);
                            },
                            clear: function() {
                                ngModel.$setViewValue("");
                            }

                        };
                        //console.log(ngModel);  //这个ngModel是一个控制器，但不是ctrl1，我猜是angular自定义针对这个指令的控制器
                        //初始化日期实例
                        date = laydate(config);

                        //监听日期最大值
                        if (attrs.hasOwnProperty("maxDate")) {
                            attrs.$observe("maxDate", function(val) {
                                config.max = val;
                            });
                        }

                        //监听日期最小值
                        if (attrs.hasOwnProperty("minDate")) {
                            attrs.$observe("minDate", function(val) {
                                config.min = val;
                            });
                        }

                        //模型值同步到视图上
                        ngModel.$render = function() {
                            ele.val(ngModel.$viewValue || '');
                        }

                        //监听元素上的事件
                        ele.on("blur keyup change", function() {
                            scope.$apply(setViewValue);
                        });

                        //更新模型上的视图值
                        function setViewValue() {
                            var val = ele.val();
                            ngModel.$setViewValue(val);
                        }

                        setViewValue();

                    }, 0);

                }
            }
        }]);

directives.directive("independentpage", ['httpService', function(httpService) {
            return {
                restrict: "E",
                templateUrl: "independentPage",
                scope: {
                    // pagedata: "=pageData",
                    // haspage: "=hasPage",
                    pagedata: "=",
                    haspage: "=",
                    config: "@",
                    carrierid: "=",
                    carrierval: "="
                },
                link: function(scope, ele, attrs) {
                    scope.$watch("pagedata", function(newData, oldData) {
                        if (!newData) return;
                        if (newData.offset != 1) return;
                        finish(newData);
                    });
                    //获取总条数
                    var finish = function(data) {
                        //console.log(scope.pagedata);
                        if (!scope.config) return;
                        scope.pagedata = angular.fromJson(data);
                        scope.haspage = angular.fromJson(scope.haspage);
                        scope.config = angular.fromJson(scope.config);

                        scope.total = scope.pagedata.total;
                        //获取当前页
                        scope.offset = parseInt(scope.pagedata.offset);

                        //获取跳转页面的当前页
                        scope.selectOffset = scope.pagedata.offset;

                        //获取当前页面需要展示的条数
                        scope.limit = scope.pagedata.limit;

                        //计算需要分页数量
                        scope.pages = Math.ceil(scope.total / scope.limit);

                        //控制分页现实的条数
                        scope.newPages = scope.pages > 5 ? 5 : scope.pages;

                        //设置一个现实页码空数组
                        scope.pageList = [];

                        //添加显示的数据
                        scope.current_math = "" + scope.limit || "20";
                        scope.select_math = [{
                            id: 1,
                            value: '20'
                        }, {
                            id: 2,
                            value: '50'
                        }, {
                            id: 3,
                            value: '100'
                        }, {
                            id: 4,
                            value: '1000'
                        }];

                        //循环添加页码

                        if (!scope.haspage) {
                            //保证无分页时，有显示第一页页码
                            scope.pageList = [1];
                        } else {
                            for (var i = 0; i < scope.newPages; i++) {
                                scope.pageList.push(i + 1);
                            }
                        }

                        //点击分页按钮获取当前分页数值
                        scope.selectPage = function(page) {
                            if (page == "" || isNaN(page)) return;
                            var _page = parseInt(page),
                                newpageList = [];

                            if (_page < 1 || _page > scope.pages) return;
                            if (_page == 1 || _page == 2) {
                                for (var i = 0; i < scope.newPages; i++) {
                                    newpageList.push(i + 1);
                                }
                                scope.pageList = newpageList;
                            };
                            if (_page > 2) {
                                //重新进行分页
                                if (_page == scope.pages - 1) {
                                    for (var i = (_page - 4); i < ((_page + 2) > scope.pages ? scope.pages : (_page + 2)); i++) {
                                        if (i >= 0) {
                                            newpageList.push(i + 1);
                                        }

                                    }
                                } else if (_page == scope.pages) {
                                    for (var i = (_page - 5); i < ((_page + 2) > scope.pages ? scope.pages : (_page + 2)); i++) {
                                        if (i >= 0) {
                                            newpageList.push(i + 1);
                                        }

                                    }
                                } else {
                                    for (var i = (_page - 3); i < ((_page + 2) > scope.pages ? scope.pages : (_page + 2)); i++) {
                                        newpageList.push(i + 1);
                                    }
                                }
                                scope.pageList = newpageList;
                            }
                            scope.offset = _page;
                            scope.isActivePage(_page);
                            scope.selectOffset = _page;

                            scope.config.dataObj.offset = scope.offset;
                            scope.config.dataObj.limit = scope.limit;
                            //console.log(scope.config);
                            httpService.getDatas(scope.config.url, scope.config.dataObj, scope.getCommonListSucc);

                        };


                        //设置当前选中页样式
                        scope.isActivePage = function(page) {
                            return scope.offset == page;
                        };
                        //上一页
                        scope.Previous = function() {
                            scope.selectPage(scope.offset - 1);
                        };
                        //下一页
                        scope.Next = function() {
                            scope.selectPage(scope.offset + 1);
                        };

                        //首页
                        scope.firstPage = function() {
                            if (scope.offset == 1) {
                                return;
                            } else {
                                scope.selectPage(1);
                            }

                        }

                        //尾页
                        scope.lastPage = function() {
                            if (scope.offset == scope.pages) {
                                return;
                            } else {
                                scope.selectPage(scope.pages);
                            }

                        }

                        //分页请求成功回调
                        scope.getCommonListSucc = function(data) {
                            //console.log(data);
                            if (data.api_name == "customer/getCustomerList") {

                                scope.$parent.customerLists = data.list;
                                scope.pagedata = data.paging_data;
                                console.log(scope.carrierid);
                                scope.carrierid = [];
                                scope.carrierval = [];
                                console.log(scope.carrierid);
                                console.log(scope);
                                scope.haspage = data.has_paging;
                            } else if (data.api_name == "productinfo/getProductInfoList") {

                                if (scope.$parent.productLists) {
                                    scope.$parent.productLists = data.list;
                                } else {
                                    scope.$parent.childLists = data.list;
                                }
                                scope.pagedata = data.paging_data;
                                scope.haspage = data.has_paging;
                            } else if (data.api_name == "locationinfo/getLocationList") {
                                scope.$parent.kuweiLists = data.list;
                                scope.pagedata = data.paging_data;
                                scope.haspage = data.has_paging;
                            } else if (data.api_name == "Zonegroup/getZoneGroupList") {
                                scope.$parent.areaLists = data.list;
                                scope.pagedata = data.paging_data;
                                scope.haspage = data.has_paging;
                            } else if (data.api_name == "Zoneinfo/getZoneInfoList") {
                                scope.$parent.hsLists = data.list;
                                scope.pagedata = data.paging_data;
                                scope.haspage = data.has_paging;
                            } else if (data.api_name == "Locationgroupone/getLocationGroupOneList") {
                                scope.$parent.lOneLists = data.list;
                                scope.pagedata = data.paging_data;
                                scope.haspage = data.has_paging;
                            } else if (data.api_name == "Locationgrouptwo/getLocationGroupTwoList") {
                                scope.$parent.lTwoLists = data.list;
                                scope.pagedata = data.paging_data;
                                scope.haspage = data.has_paging;
                            } else if (data.api_name == "asntrace/getAsntraceList") {
                                scope.$parent.traceLists = data.list;
                                scope.pagedata = data.paging_data;
                                scope.haspage = data.has_paging;
                            } else if (data.api_name == "Inventory/getCheckTaskList") {
                                scope.$parent.getInventoryTaskListSucc(data);
                            } else if (data.api_name == "Stocktranslog/getlotList") {
                                scope.$parent.getTraceBatchListSucc(data);
                            } else if (data.api_name == "Shipmentorder/inventoryDetection") {
                                scope.$parent.stockCheckList = data.list;
                                scope.pagedata = data.paging_data;
                                scope.haspage = data.has_paging;
                            }
                        }

                        //改变显示数据条数时请求
                        scope.pageMathChange = function() {
                            //console.log(scope.config);
                            scope.config.dataObj.offset = 1;
                            scope.config.dataObj.limit = scope.current_math;
                            httpService.getDatas(scope.config.url, scope.config.dataObj, scope.getCommonListSucc);
                        }

                    }


                }
            }
        }]);

//全选
        directives.directive("allCheck", function() {
            return {
                restrict: "A",
                scope: {
                    scanList: "="
                },
                link: function(scope, ele, attrs) {
                    //全选
                    $(ele).on("click", function(event) {
                        var e = window.event || event;
                        e && e.stopPropagation ? e.stopPropagation() : window.event.cancelbubble = true;
                        var status = $(this).prop("checked");
                        console.log(status);
                        var tds = $(ele).parents(".com-table").find(".check-item");
                        scope.$parent.initPutawayList.length = 0;
                        tds.each(function(i, check) { //第一个参数为元素结合的下标，第二个参数为元素本身（原生dom对象）
                            $(check).prop("checked", status);
                            if (status) {
                                scope.$parent.initPutawayList.push($(this).attr('id'));
                            } else {
                                scope.$parent.initPutawayList.length = 0;
                            }

                        });

                    });

                    scope.$watch("scanList", function(newValue, oldValue) {
                        console.log(newValue, oldValue);
                        if (typeof(newValue) == "undefined") return;
                        $(ele).length ? $(ele).prop("checked", false) : "";
                        //清空数据操作
                        scope.$parent.initPutawayList.length = 0;
                    });

                }
            }
        });

        //单选
        directives.directive("itemCheck", function() {
            return {
                restrict: "A",
                scope: {},
                link: function(scope, ele, attrs) {
                    //单选
                    $(ele).on("click", function(event) {
                        var e = window.event || event;
                        e && e.stopPropagation ? e.stopPropagation() : window.event.cancelbubble = true;
                        var status = $(this).prop("checked"),
                            tds = $(ele).parents(".com-table").find(".check-item"),
                            ths = $(ele).parents(".com-table").find(".check-all"),
                            isAll = true;
                        console.log(status);
                        if (status) {
                            tds.each(function(i, check) {
                                if (!$(check).prop("checked")) {
                                    isAll = false;
                                    return false;
                                }
                                return true;
                            });
                        }

                        $(ths).prop("checked", status && isAll);

                        scope.$parent.initPutawayList.length = 0;
                        tds.each(function(i, check) {
                            if ($(check).prop("checked")) {
                                scope.$parent.initPutawayList.push($(check).attr('id'));
                            }
                        });
                    });
                }
            }
        });

directives.directive("contentmenu", function() {
            return {
                restrict: "EA",
                scope: {
                    contextMenuParent: "@",
                    contextMenuChild: "@",
                    cancel_order: "&closeMyOrder",
                    close_order: "&cancelMyOrder",
                    shipment_order: "&shipmentMyOrder",
                    distribution_order: "&distributionMyOrder",
                    cancel_allocation_order: "&cancelMyAllocationOrder",
                    create_wave_plan: "&createMyWavePlan",
                    picking_order: "&pickingMyOrder",
                    cancel_picking_order: "&cancelPickingMyOrder",
                    distribution_lin: "&distributionMyOrder",
                    cancel_allocation_lin: "&cancelMyAllocationOrder",
                    picking_lin: "&pickingMyOrder",
                    cancel_picking_lin: "&cancelPickingMyOrder",
                },
                replace: true,
                templateUrl: "contentmenu_tpl",
                link: function(scope, ele, attrs) {
                    scope.isParentShow = true;
                    scope.contextMenuParent = [];
                    scope.contextMenuChild = [];
                    var contentShow = function(e) {
                        var e = e || window.event,
                            x = e.pageX,
                            y = e.pageY;

                        //判断菜单出现在右边的位置
                        var clientx = $(window).width(),
                            eleWidth = $(ele).outerWidth();
                        if (clientx - x < eleWidth) {
                            //17是为了避免水平滚动条的出现
                            ele.css({
                                "left": x - eleWidth - 17 + "px",
                                "top": y + "px"
                            }).addClass("content-active");
                        } else {
                            ele.css({
                                "left": x + "px",
                                "top": y + "px"
                            }).addClass("content-active");
                        }
                        //执行当前行上的点击事件
                        // $(e.target).parent().click();

                        if ($(this).attr("id") === "parent_table") {
                            scope.$apply(function() {
                                scope.isParentShow = true;
                                scope.contextMenuParent = angular.fromJson(scope.contextMenuParent);
                            });

                        } else if ($(this).attr("id") === "child_table") {
                            scope.$apply(function() {
                                scope.isParentShow = false;
                                scope.contextMenuChild = angular.fromJson(scope.contextMenuChild);
                            });

                        }


                        console.log(scope);
                        return false;
                    }
                    $("#parent_table").on("contextmenu", contentShow);
                    $("#child_table").on("contextmenu", contentShow);

                    $(document).on("contextmenu", function() {
                        scope.isParentShow = true;
                        return false;
                    })

                    $(document).on("click", function() {
                        ele.removeClass("content-active");
                    });

                    ele.on("click", function(e) {
                        var e = e || window.event,
                            funcname = e.target.getAttribute("fun");
                        scope.$apply(function() {
                            scope.$parent.initStatus = true;
                            console.log(scope);
                            funcname && scope[funcname]();
                            //scope.$parent.cancelOrder();  //指令内部调用控制器内函数的第一种方式
                            // scope.cancelOrder(); //di二种方式
                            // scope.cancelMyOrder(); //第三种方式
                        });


                    });
                }
            }
        });

directives.directive('sureSingleReview', function() {
            return {
                restrict: "A",
                link: function(scope, ele, attrs) {

                    //用定时器模拟多线程，一个读取sku的线程，一个复核调用打印的线程  
                    var testArr = [],
                        timer1 = null,
                        timer2 = null,
                        flag1 = true,
                        flag2 = true,
                        num = 0;
                    ele.on("keypress", function(event) {
                        console.log(event.target);
                        if (event.keyCode == 13) {
                            $(this).focus();
                            $(this).select();
                            $(this).prop("disabled", true);
                            testArr.push($(this).val());
                            flag1 = false;
                            flag2 = false;
                            num++;
                            if (num == 1) {
                                test1();
                                test2();
                            }

                        }
                    });

                    var test1 = function() {
                        clearTimeout(timer1);
                        timer1 = setTimeout(function test3() {
                            if (flag1) return;
                            $(ele).prop("disabled", false);
                            $(ele).focus();
                            timer1 = setTimeout(test3, 200);
                        }, 200);
                    }

                    var test2 = function() {
                        clearTimeout(timer2);
                        timer2 = setTimeout(function test4() {
                            if (flag2) return;
                            if (testArr.length && $("#" + attrs.ele).val()) {
                                var currentSku = testArr.shift();
                                scope.fnSureReview(currentSku);
                                scope.$digest();
                            } else {
                                flag1 = true;
                                flag2 = true;
                                num = 0;
                                $(ele).prop("disabled", false);
                                // $(ele).focus();
                                $("#active-tip").find(".cfbtn").eq(0).focus();
                                testArr.length = 0;
                            }
                            timer2 = setTimeout(test4, 400);
                        }, 400);
                    }

                }
            }
        })

directives.directive("createIframe", function() {
            return {
                restrict: "EA",
                controller: ['$scope', function($scope) {
                    this.createIframe = function(url, auto, type) { // 区分打印类型
                            $("#mainIframe0").length && $("#mainIframe0").remove();
                            var iframe = document.createElement("iframe");
                            iframe.name = "mainIframe0";
                            iframe.id = "mainIframe0";
                            iframe.className = "mainIframe";
                            iframe.src = url;

                            if (iframe.attachEvent) {

                                $(".iframe-wrap-show").css("display", "block");
                                if (type) {
                                    $(".iframe-wrap-show").css("opacity", "0");
                                }
                                iframe.attachEvent("onload", function() {
                                    $(".iframe-wrap-show .next").removeClass("print_disabeld");
                                    $(".iframe-wrap-show .prev").removeClass("print_disabeld");
                                    $(".iframe-wrap-show .start_print").removeClass("print_disabeld");
                                    $(".iframe-wrap-show .close_print").removeClass("print_disabeld");
                                    var oIframe = window.frames["mainIframe0"];
                                    oIframe.focus();
                                    if (auto) {
                                        oIframe.printlabel();
                                    }

                                });
                            } else {
                                iframe.onload = function() {
                                    $(".iframe-wrap-show").css("display", "block");
                                    if (type) {
                                        $(".iframe-wrap-show").css("opacity", "0");
                                    }
                                    $(".iframe-wrap-show .next").removeClass("print_disabeld");
                                    $(".iframe-wrap-show .prev").removeClass("print_disabeld");
                                    $(".iframe-wrap-show .start_print").removeClass("print_disabeld");
                                    $(".iframe-wrap-show .close_print").removeClass("print_disabeld");
                                    var oIframe = window.frames["mainIframe0"];
                                    oIframe.focus();
                                    if (auto) {
                                        oIframe.printlabel();
                                    }

                                };
                            }
                            $(".iframe-wrap-show .iframe-content").prepend(iframe);
                        },
                        this.createIframeSingle = function(url, classname) {
                            $("#dataIframe").length && $("#dataIframe").remove();
                            var iframe = document.createElement("iframe");
                            iframe.name = "dataIframe";
                            iframe.id = "dataIframe";
                            iframe.className = "dataIframe";
                            iframe.src = url;

                            if (iframe.attachEvent) {
                                iframe.attachEvent("onload", function() {
                                    var oIframe = window.frames["dataIframe"];
                                    oIframe.focus();

                                });
                            } else {
                                iframe.onload = function() {
                                    var oIframe = window.frames["dataIframe"];
                                    oIframe.focus();

                                };
                            }

                            $("." + classname).prepend(iframe);
                        }
                }],
                controllerAs: "createIframeCtrl"
            }
        });

directives.directive("printFile", ['DialogService', 'TranslateService', function(DialogService, TranslateService) {
            return {
                restrict: "EA",
                require: "^createIframe",
                scope: {
                    orderNo: "=",
                    soNo: "=",
                    secondExportClose: "&"
                },
                link: function(scope, ele, attrs, createIframeCtrl) {
                    //console.log(scope.soNo);

                    ele.on("click", function() {
                        if (attrs.isFirst === "1") {
                            //打印
                            if ($(this).hasClass("btn-bg")) return;
                            if (!scope.$parent.canPrint) return;
                            var str = TranslateService.t_lang('send_order_hint');
                            DialogService.InfoMd(str, function() {
                                $(".delivery-mask").css("display", "block");
                                $(".print-file-wrap").css("display", "block");
                                $(".print-file-btns").attr("num", "1");
                                var url = layout_config.viewUrl + "outstock/deliveryorder/printViewInvoice?order_no=" + scope.orderNo + "&isfirst=1";
                                createIframeCtrl.createIframeSingle(url, "print-file-wrap");
                            });

                        } else if (attrs.isFirst === "2") {
                            //补打印
                            if ($(this).hasClass("btn-bg")) return;
                            if (typeof(scope.soNo) == "undefined" || !scope.soNo) return;
                            $(".delivery-mask").css("display", "block");
                            $(".print-file-wrap").css("display", "block");
                            $(".print-file-btns").attr("num", "2");
                            // SL170419000010
                            var url = layout_config.viewUrl + "outstock/deliveryorder/printViewInvoice?order_no=" + scope.soNo + "&isfirst=2";
                            createIframeCtrl.createIframeSingle(url, "print-file-wrap");
                            scope.$apply(function() {
                                scope.secondExportClose();
                            });
                        }
                    });

                }
            }

        }]);

services.service("httpService", ['$http', 'TranslateService', 'BackLogin', function($http, TranslateService, BackLogin) {
            return {
                getDatas: function(url, obj1, succCallBack, errorCallBack) {
                    return $http({
                        method: "GET",
                        url: url,
                        params: obj1 || {}
                    }).success(function(data) {
                        succCallBack && succCallBack(data);
                    }).error(function(data) {
                        errorCallBack && errorCallBack(data);
                    })
                },
                postDatas: function(url, obj1, succCallBack, errorCallBack) {
                    return $http({
                        method: "POST",
                        url: url,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        transformRequest: function(obj) {
                            var str = [];
                            for (var p in obj) {
                                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                            }
                            return str.join("&");
                        },
                        data: obj1 || {}
                    }).success(function(data) {
                        succCallBack && succCallBack(data);
                    }).error(function(data) {
                        errorCallBack && errorCallBack(data);
                    })
                }

            }
        }]);

services.factory('myLoading', ["$rootScope", "BackLogin", function($rootScope, BackLogin) {
            var count = 0;
            return {
                request: function(config) {
                    $rootScope.loading = true;
                    return config;
                },
                response: function(response) {
                    $rootScope.loading = false;
                    return response;
                },
                responseError: function(rejection) {
                    console.log(rejection);
                    if (!rejection.data.status) {
                        count++;
                        $rootScope.loading = false;
                        if (count > 1) return;
                        console.log($("#backLoginEle"));
                        if ($("#backLoginEle").length) return; //只弹出专门的退出登录弹窗
                        BackLogin.locationLogin(rejection.data);
                    }
                    return rejection;
                }
            };

        }]);

services.service("EventBus", function() {
            var eventMap = {};
            return {
                on: function(eventType, handler) {
                    if (!eventMap[eventType]) {
                        eventMap[eventType] = [];
                    }
                    eventMap[eventType].push(handler);
                },
                off: function() {
                    for (var i = 0; i < eventMap[eventType].length; i++) {
                        if (eventMap[eventType][i] === handler) {
                            eventMap[eventType].splice(i, 1);
                            break;
                        }
                    }
                },
                fire: function(event) {
                    var eventType = event.type;
                    if (eventMap && eventMap[eventType]) {
                        for (var i = 0; i < eventMap[eventType].length; i++) {
                            eventMap[eventType][i](event);
                        }
                    }
                }
            }
        });

git checkout -b dev

修改文件

git add .

git commit -m 'xx'

git checkout master

git merge dev

git pull 

git push 整个流程就结束了，然后继续切换到dev分支上继续开发，继续上述的步骤

如果远程仓库没有dev分支
git checkout -b dev

git push origin dev:dev  //创建远程dev分支

修改文件

git add .

git commit -m 'xx'

//这里有两种情况,推荐使用第一种方式
第一种，现在本地切换到本地master分支，合并之后再push
git checkout master

git merge dev

git pull

git push //整个流程结束，然后切换到dev分支，pull与push一下dev分支，然后继续开发

第二种是直接再dev分支上push，然后在github or gitlab上根据提示合并代码
git pull

git push

git checkout master

git pull


如果远程仓库有dev分支
git checkout dev

修改内容

git add .

git commit -m 'xx'

合并的方式同上

import express from 'express';
import fs from 'fs';
import path from 'path';
import MovieRouter from './router/movieRouter'

const bodyParser = require('body-parser');
const multer = require('multer'); 

const upload = multer(); // for parsing multipart/form-data
const app = express();

app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

app.use('/js', express.static('./views/js'));

app.get('/', (req, res) => {
  res.sendFile(path.resolve('views/index.html'), {
    header: 'text/html'
  })
});

app.use('/movie', MovieRouter);

app.listen(9527, () => {
  console.log('启用成功');
});

import express from 'express'
import axios from 'axios'

const router = express.Router();
const apiDomain = 'http://api.douban.com/v2/movie/';

router.get('/search', async(req, res) => {
  try {
    const { keyWord } = req.query;
    const result = await axios.get(`${apiDomain}search`, {params: {q: keyWord}});
    res.json({
      code: result.status,
      result: result.data
    })
  } catch (err) {
    res.json({
      code: -100086,
      error: error
    })
  }
 })

/**
 * 榜单类接口，如Top250等
 * */ 
router.get('/:type', async (req, res) => {
  try {
    const { type } = req.params;
    console.log('type', type)
    const result = await axios.get(`${apiDomain}${type}`);
    res.json({
      code: result.status,
      result: result.data
    })
  } catch (error) {
    res.json({
      code: -100086,
      error: error
    })
  }
})

/**
 * 电影详情类接口
 * */ 

 router.get('/subject/:id', async(req, res) => {
  try {
    const { id } = req.params;
    console.log('id', id);
    const result = await axios.get(`${apiDomain}subject/${id}`);
    res.json({
      code: result.status,
      result: result.data
    })
  } catch (err) {
    res.json({
      code: -100086,
      error: error
    })
  }
 })

export default router;

import express from 'express'
import axios from 'axios'

const router = express.Router();
const apiDomain = 'http://tingapi.ting.baidu.com/v1/restserver/ting';

/**
 * 获取歌单
 * 
 * @type Number 类型 1-新歌榜,2-热歌榜,11-摇滚榜,12-爵士,16-流行,21-欧美金曲榜,22-经典老歌榜,23-情歌对唱榜,24-影视金曲榜,25-网络歌曲榜
 * @size Number 返回条数
 * @offset Number 当前页面 
 * */ 

router.get('/billList', async (req, res) => {
  try {
    const { type, size, offset } = req.query;
    console.log('type', type);
    const result = await axios.get(`${apiDomain}`, {params: {method: 'baidu.ting.billboard.billList', type, size, offset}});
    res.json({
      code: result.status,
      result: result.data
    })
  } catch (error) {
    res.json({
      code: -100086,
      error: error
    })
  }
})

/**
 * 图书搜索
 * 
 * @keyWord Sting | Number 关键字
 * */ 

router.get('/search', async(req, res) => {
  try {
    const { keyWord } = req.query;
    console.log('keyWord', keyWord);
    const result = await axios.get(`${apiDomain}`, {params: {method: 'baidu.ting.search.catalogSug', query: keyWord}});
    res.json({
      code: result.status,
      result: result.data
    })
  } catch (error) {
    res.json({
      code: -100086,
      error: error
    })
  }
 })

/**
 * 获取推荐列表
 * 
 * @song_id Number 歌曲id
 * @num     Number 返回条数
 * */ 
router.get('/recommandList', async (req, res) => {
  try {
    const { song_id, num } = req.query;
    console.log('song_id', song_id)
    const result = await axios.get(`${apiDomain}`, {params: {method: 'baidu.ting.song.getRecommandSongList', song_id, num}});
    res.json({
      code: result.status,
      result: result.data
    })
  } catch (error) {
    res.json({
      code: -100086,
      error: error
    })
  }
})

/**
 * 获取歌手信息
 * 
 * @tinguid Number 歌手id
 * */ 

 router.get('/getMusicInfo', async(req, res) => {
  try {
    const { tinguid } = req.query;
    console.log('tinguid', tinguid);
    const result = await axios.get(`${apiDomain}`, {params: {method: 'baidu.ting.artist.getInfo', tinguid}});
    res.json({
      code: result.status,
      result: result.data
    })
  } catch (error) {
    res.json({
      code: -100086,
      error: error
    })
  }
 })

/**
 * 获取歌手歌曲列表
 * */ 

 router.get('/getSongList', async(req, res) => {
  try {
    const { tinguid, limits, use_cluster, order } = req.query;
    console.log('tinguid', tinguid);
    const result = await axios.get(`${apiDomain}`, {params: {method: 'baidu.ting.artist.getSongList', tinguid, limits, order}});
    res.json({
      code: result.status,
      result: result.data
    })
  } catch (error) {
    res.json({
      code: -100086,
      error: error
    })
  }
 })

/**
 * 获取歌词
 * */ 

 router.get('/getLry', async(req, res) => {
  try {
    const { songid } = req.query;
    console.log('songid', songid);
    const result = await axios.get(`${apiDomain}`, {params: {method: 'baidu.ting.song.playAAC', songid}});
    res.json({
      code: result.status,
      result: result.data
    })
  } catch (error) {
    res.json({
      code: -100086,
      error: error
    })
  }
 })

export default router;

import express from 'express'
import axios from 'axios'

const router = express.Router();
const apiDomain = 'https://api.douban.com/v2/book/';

/**
 * 图书搜索
 * */ 

router.get('/search', async(req, res) => {
  try {
    const { keyWord, tag, start, count } = req.query;
    console.log('keyWord', keyWord);
    const result = await axios.get(`${apiDomain}search`, {params: {q: keyWord, tag, start, count}});
    console.log(result);
    res.json({
      code: result.status,
      result: result.data
    })
  } catch (error) {
    res.json({
      code: -100086,
      error: error
    })
  }
 })

/**
 * 根据id获取图书信息
 * */ 
router.get('/:id', async (req, res) => {
  try {
    const { id } = req.params;
    console.log('idid', id)
    const result = await axios.get(`${apiDomain}${id}`);
    res.json({
      code: result.status,
      result: result.data
    })
  } catch (error) {
    res.json({
      code: -100086,
      error: error
    })
  }
})

/**
 * 根据id返回丛书信息
 * */ 

 router.get('/isbn/:name', async(req, res) => {
  try {
    const { name } = req.params;
    console.log('name', name);
    const result = await axios.get(`${apiDomain}isbn/${name}`);
    res.json({
      code: result.status,
      result: result.data
    })
  } catch (error) {
    res.json({
      code: -100086,
      error: error
    })
  }
 })

export default router;

{
  "name": "douban",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "babel-node app.js"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "multer": "^1.3.1",
    "qs": "^6.5.2"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-eslint": "^7.2.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "eslint": "^3.19.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^3.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1"
  }
}

npm install --save mockjs

如loss-order.js
// 这里的fetch是封装的基于axios的ajax请求
import fetch from 'utils/fetch';
import CONFIG from '@/assets/js/config';

export function getLossOrderList (queryData) {
    const data = Object.assign({}, CONFIG.ajaxData, queryData);
    return fetch.getAjax('/loss_order/loss_order_One/lossOrderList', data);
};

1. 第一种方法，利用mockjs的Random方法来构造函数
2. 第二种方法，利用Mock.mock并加@来构造数据

第一种方式
import { paramURL } from '@/utils';
import Mock from 'mockjs';

const Random = Mock.Random;

export default {
    getLossOrderList: (config) => {
        const param = paramURL(config.url);
        let result = {};
        result.key = ['订单号', '销售平台', 'SKU', '产品品牌', '所属仓库', '订单类型', '平台订单号', '物流方式\跟踪号', '出货状态', '完成状态', '金额', '北京付款时间'];
        const value = [];
        const count = 100;
        const start = (Number(param.offset) - 1) * Number(param.limit);
        const end = Number(param.offset) * Number(param.limit);
        // 第一种造数据的方式，引入Random来进行造数据
       for (let i = 0; i < count; i++) {
            value.push({
                orderId: Random.increment(),
                orderNo: 'CO' + Random.now('day', 'yyyyMMdd') + 'LZD',
                salesPlat: Random.first(),
                sku: Random.float(0, 100000000000, 2),
                skuId: Random.increment(),
                productBrand: Random.cword('零一二三四五六七八九十', 3),
                warehouse: Random.cword('光明清溪', 2),
                warehouseId: '172',
                orderType: '普通',
                platOrderNo: Random.integer(0),
                logistics: Random.cword('零一二三四五六七八九十', 5),
                sailStatus: '未出货',
                complateStatus: '备货中',
                price: Random.float(0, 100, 4) + 'USD',
                payTime: Random.now('second')
            })
        }

        // 第二种方式直接使用Mock.mock并加@来构造数据
        for (let i = 0; i < count; i++) {
            value.push(Mock.mock({
                orderId: '@increment',
                orderNo: 'CO' + '@now("day", "yyyyMMdd")' + 'LZD',
                salesPlat: '@first',
                sku: '@float(0, 100000, 2, 4)',
                skuId: '@increment()',
                productBrand: "@cword('零一二三四五六七八九十', 3)",
                warehouse: '@cword("光明清溪", 2)',
                warehouseId: '172',
                orderType: '普通',
                platOrderNo: '@integer(0)',
                logistics: '@cword("零一二三四五六七八九十", 5)',
                sailStatus: '未出货',
                complateStatus: '备货中',
                price: '@float(0, 100, 2, 4)' + 'USD',
                payTime: '@now("second")'
            }))
        }

        result.value = value.slice(start, end);
        result.pagingData = {
            limit: +param.limit,
            offset: +param.offset,
            total: count
        }
        return result;
    }
}

import Mock from 'mockjs';
import lossOrderAPI from './loss-order';

Mock.setup({
    // 指定被拦截的 Ajax 请求的响应时间，单位是毫秒
    timeout: '350-600'
});

// 亏损订单接口
Mock.mock(/\/loss_order\/loss_order_One\/lossOrderList/, 'get', lossOrderAPI.getLossOrderList);
export default Mock;

npm install --save tinymce

<template>
    <div class="tinymce-container editor-container">
        <textarea class='tinymce-textarea' :id="tinymceId" ></textarea>
    </div>
</template>

<script>
    // 引入tinymce及需要的plugins
    import tinymce from 'tinymce/tinymce';
    import 'tinymce/themes/modern/theme';
    import 'tinymce/plugins/advlist';
    import 'tinymce/plugins/autolink';
    import 'tinymce/plugins/lists';
    import 'tinymce/plugins/link';
    import 'tinymce/plugins/image';
    import 'tinymce/plugins/charmap';
    import 'tinymce/plugins/print';
    import 'tinymce/plugins/preview';
    import 'tinymce/plugins/anchor';
    import 'tinymce/plugins/textcolor';
    import 'tinymce/plugins/searchreplace';
    import 'tinymce/plugins/visualblocks';
    import 'tinymce/plugins/code';
    import 'tinymce/plugins/fullscreen';
    import 'tinymce/plugins/insertdatetime';
    import 'tinymce/plugins/media';
    import 'tinymce/plugins/table';
    import 'tinymce/plugins/contextmenu';
    import 'tinymce/plugins/paste';
    import 'tinymce/plugins/help';
    // file-loader的作用是更改资源引入路径的loader，如打包后index.html内的图片引入路径是相对于index.html的相对路径而不是原图片的路径，url-loader是将图片进行编码，减少http请求，将图片生成一个dataURl；注意url-loader有一个参数limit，当图片的大小小于limit的时候使用url-loader进行处理转换成dataURL，当大于limit时使用file-loader进行处理，name表示输出的文件名规则，如果不加path参数，则会以hash文件名输出如（0dcbbaa7013869e351f.png），加上[path]表示输出文件的相对路径与当前文件相对路径相同，加上[name].[ext]则表示输出文件的名字和扩展名与当前相同，context，file-loader处理文件的上下文环境
    // require.context方法的作用就是通过正则匹配来引入相应的文件模块，require.context(directory, useSubdirectories, regExp)有三个参数，第一个directory要检索的目录，第二个useSubdirectories是否检索子目录，第三个regExp匹配文件的正则表达式
    require.context('!file-loader?name=[path][name].[ext]&context=node_modules/tinymce!tinymce/skins', true, /.*/);
    require.context('!file-loader?name=[path][name].[ext]&context=node_modules/tinymce!tinymce/langs', true, /.*/);
    export default {
        name: 'tinymce',
        props: {
            tinymceId: {
                type: String,
                default: 'tinymce' + +new Date()
            },
            value: {
                type: String,
                default: ''
            },
            // 文本编辑器工具栏
            toolbar: {
                type: Array,
                default () {
                    return [
                        'newdocument | undo redo | searchreplace print preview code cut copy paste | alignleft aligncenter alignright alignjustify numlist bullist indent outdent subscript superscript removeformat | fullscreen',
                        'h1 p charmap | fontselect fontsizeselect styleselect | forecolor backcolor bold italic underline strikethrough blockquote | image media table tabledelete emoticons anchor link unlink | formats insertdatetime insertfile help'
                    ];
                }
            },
            // 菜单栏
            menubar: {
                type: String,
                default: ''
            },
            height: {
                type: Number,
                default: 400
            },
            // 插件栏，方便我们去调用一个内置的功能，如打印等
            plugins: {
                type: Array,
                default () {
                    return ['advlist autolink lists link image charmap print preview anchor textcolor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table contextmenu paste code help'];
                }
            }
        },
        data () {
            return {
                hasChange: false,
                hasInit: false
            };
        },
        watch: {
            value (val) {
                if (!this.hasChange && this.hasInit) {
                    this.$nextTick(() => {
                        // 设置编辑器的值
                        window.tinymce.get(this.tinymceId).setContent(val);
                    });
                }
            }
        },
        mounted () {
            const _this = this;
            // tinymce.documentBaseURL = ''
            tinymce.init({
                selector: `#${this.tinymceId}`,
                height: this.height,
                language: 'zh_CN',
                mobile: { // 在移动端显示时的配置
                    theme: 'mobile',
                    plugins: [ 'autosave', 'lists', 'autolink' ],
                    toolbar: [ 'undo', 'bold', 'italic', 'styleselect' ]
                },
                skin: 'lightblue',
                font_formats: '微软雅黑=微软雅黑;宋体=宋体;新宋体=新宋体;黑体=黑体;仿宋=仿宋;楷体=楷体;隶书=隶书;幼圆=幼圆;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats',
                fontsize_formats: '8px 10px 12px 14px 16px 18px 20px 22px 24px 26px 28px 32px 36px',
                resize: 'true false', // 水平垂直方向上进行拉伸
                preview_styles: 'font-size color',
                body_class: 'panel-body',
                branding: false, // 禁用tinymce插件的商标
                color_picker_callback: function (callbacks, value) { // 允许提供自己的颜色选择器
                    callbacks('#FF00FF');
                },
                object_resizing: false,
                toolbar: this.toolbar,
                menubar: this.menubar,
                plugins: this.plugins, // 加载插件，默认是不加载任何插件
                end_container_on_empty_block: true,
                powerpaste_word_import: 'clean',
                code_dialog_height: 450,
                code_dialog_width: 1000,
                advlist_bullet_styles: 'square',
                advlist_number_styles: 'default',
                block_formats: 'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;',
                imagetools_cors_hosts: ['wpimg.wallstcn.com', 'wallstreetcn.com'],
                imagetools_toolbar: 'watermark',
                default_link_target: '_blank',
                link_title: false,
                // 实例化完成之后的钩子函数
                init_instance_callback: editor => {
                    if (_this.value) {
                        // 设置默认值
                        editor.setContent(_this.value);
                    }
                    _this.hasInit = true;
                    // 监听事件，动态赋值
                    editor.on('NodeChange Change KeyUp', () => {
                        this.hasChange = true;
                        this.$emit('input', editor.getContent({ format: 'raw' }));
                    });
                },
                // setup允许在编辑器实例化之前进行自定义配置
                setup (editor) {
                    editor.addButton('h1', {
                        title: 'h1', // tooltip text seen on mouseover
                        text: 'h1',
                        type: 'splitbutton',
                        onclick () {
                            editor.execCommand('mceToggleFormat', false, 'h1');
                        },
                        onPostRender () {
                            const btn = this;
                            editor.on('init', () => {
                                editor.formatter.formatChanged('h1', state => {
                                    btn.active(state);
                                });
                            });
                        },
                        menu: [
                            {
                                text: 'h2',
                                onclick () {
                                    editor.execCommand('mceToggleFormat', false, 'h2');
                                }
                            },
                            {
                                text: 'h3',
                                onclick () {
                                    editor.execCommand('mceToggleFormat', false, 'h3');
                                }
                            },
                            {
                                text: 'h4',
                                onclick () {
                                    editor.execCommand('mceToggleFormat', false, 'h4');
                                }
                            },
                            {
                                text: 'h5',
                                onclick () {
                                    editor.execCommand('mceToggleFormat', false, 'h5');
                                }
                            },
                            {
                                text: 'h6',
                                onclick () {
                                    editor.execCommand('mceToggleFormat', false, 'h6');
                                }
                            }
                        ]
                    });
                    editor.addButton('F', {
                        title: 'F', // tooltip text seen on mouseover
                        text: 'F',
                        type: 'listbox',
                        onselect: function (e) {
                            editor.insertContent(this.value());
                        },
                        values: [
                            { text: 'H1', value: 'h1' },
                            { text: 'H2', value: 'h1' },
                            { text: 'H3', value: 'h1' },
                            { text: 'H4', value: 'h1' },
                            { text: 'H5', value: 'h1' },
                            { text: 'H6', value: 'h1' }
                        ],
                        onclick () {
                            editor.execCommand('mceToggleFormat', false, this.value());
                        },
                        onPostRender () {
                            const btn = this;
                            editor.on('init', () => {
                                editor.formatter.formatChanged('F', state => {
                                    btn.active(state);
                                });
                            });
                        }
                    });
                    editor.addButton('h2', {
                        title: '小标题', // tooltip text seen on mouseover
                        text: '小标题',
                        onclick () {
                            editor.execCommand('mceToggleFormat', false, 'h2');
                        },
                        onPostRender () {
                            const btn = this;
                            editor.on('init', () => {
                                editor.formatter.formatChanged('h2', state => {
                                    btn.active(state);
                                });
                            });
                        }
                    });
                    editor.addButton('p', {
                        title: '正文',
                        text: '正文',
                        onclick () {
                            editor.execCommand('mceToggleFormat', false, 'p');
                        },
                        onPostRender () {
                            const btn = this;
                            editor.on('init', () => {
                                editor.formatter.formatChanged('p', state => {
                                    btn.active(state);
                                });
                            });
                        }
                    });
                }
            });
        },
        destroyed () {
            tinymce.get(this.tinymceId).destroy();
        }
    };
</script>

<style lang="less" scoped>
    .tinymce-container {
        position: relative
    }
    .tinymce-textarea {
        visibility: hidden;
        z-index: -1;
    }
</style>

<tinymce v-model="myContent1" tinymce-id="tinymce1" ></tinymce>
import Tinymce from '@/components/tinymce';

html,body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
.app {
	display: flex;
	height: 100%;
	flex-direction: column;
}
.header {
	flex: 0 0 50px;
	background: red;
}
.main {
	flex: 1;
	background-color: blue;
	overflow: auto;
}
.content {
	height: 100vh;
}

<div class="app">
	<div class="header">header</div>
	<div class="main">
		<div class="content">
			content
		</div>
	</div>
</div>

单张图片的背景大小可以使用以下三种方法中的一种来规定：

使用关键词 contain
使用关键词 cover
设定宽度和高度值
当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值:

如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为auto。
如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。
每个值可以是<length>, 是 <percentage>, 或者 auto.

<template>
    <div class="ui-channel-manage" ref="channel">
        <p class="ui-channel-manage__title" ref="title">
            频道管理
        </p>
        <div class="ui-channel-manage__content" >
            <ul class="clearFix" ref="list">
                <li v-for="item in channelList" :key="item.key" @touchstart="handlerTouchStart($event, item.key)" :class="{'ui-active': currentIndex === item.key}">
                    <span>{{item.title}}</span>
                    <strong @click="closeTag(item.key)">x</strong>
                </li>
            </ul>
        </div>
        <div class="ui-channel-manage__back" ref="back">
            <p v-show="isEditor">
                编辑
            </p>
            <div v-show="!isEditor">
                <span>取消</span>
                <span>确定</span>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    export default {
        name: 'channelManage',
        data () {
            return {
                isEditor: false,
                disX: null,
                disY: null,
                disBlank: null,
                channelRect: null,
                currentTarget: null,
                currentIndex: null,
                startIndex: null,
                cursorDown: false,
                coordinateLi: [],
                initChannelList: [
                    {key: 0, title: 'SKU库存管理'},
                    {key: 1, title: '待处理订单'},
                    {key: 2, title: '亏损订单'},
                    {key: 3, title: '待处理包裹'},
                    {key: 4, title: '促销管理'},
                    {key: 5, title: '客服异常订单'},
                    {key: 6, title: '订单异常管理'},
                    {key: 7, title: '图片管理'},
                    {key: 8, title: '订单规则条件管理'}]
            };
        },
        computed: {
            ...mapGetters([
                'showSideBar'
            ]),
            channelList () {
                return this.initChannelList;
            }
        },
        watch: {
            showSideBar (val) {
                if (val) {
                    this.getAllCoordinateLi();
                }
            }
        },
        methods: {
            closeTag (index) {
                this.initChannelList.splice(index, 1);
                this.initChannelList.forEach(item => {
                    if (item.key > index) {
                        item.key -= 1;
                    }
                });
            },
            getAllCoordinateLi () {
                const lis = this.$refs.list.children;
                Array.from(lis).forEach((item, index) => {
                    const rect = item.getBoundingClientRect();
                    this.coordinateLi.push({
                        top: rect.top,
                        left: rect.left,
                        bottom: rect.bottom,
                        right: rect.right,
                        index: index
                    });
                });
            },
            judgePosition () {
                const rect = this.currentTarget.getBoundingClientRect();
                const left = rect.left;
                const bottom = rect.bottom;
                console.log(this.coordinateLi);
                this.coordinateLi.forEach(item => {
                    console.log(left, item.left, left > item.left, bottom, item.top, bottom > item.top);
                    if (left > item.left && bottom > item.top) {
                        console.log(this.$refs.list.children, item.index);
                        this.currentIndex = item.index;
                    }
                });
            },
            handlerTouchStart (e, index) {
                e.stopImmediatePropagation();
                this.cursorDown = true;
                const rect = e.target.getBoundingClientRect();
                this.disX = e.targetTouches[0].pageX - rect.left;
                this.disY = e.targetTouches[0].pageY - rect.top;
                let target = null;
                if (e.target.nodeName === 'SPAN' || e.target.nodeName === 'STRONG') {
                    target = e.target.parentNode;
                }
                const dom = target || e.target;
                this.currentTarget = dom.cloneNode(true);
                this.currentTarget.style.position = 'absolute';
                this.currentTarget.style.zIndex = '99';
                this.currentTarget.style.right = '1000px';
                this.$refs.list.appendChild(this.currentTarget);
                this.startIndex = index;
                this.channelRect = this.$refs.channel.getBoundingClientRect();
                // { passive: false }
                document.addEventListener('touchmove', this.handlerTouchMove, { passive: false });
                document.addEventListener('touchend', this.handlerTouchEnd);
                document.onselectstart = () => false;
            },
            handlerTouchMove (e) {
                if (!this.cursorDown) return;
                e.preventDefault();
                let left = e.targetTouches[0].pageX - this.channelRect.left - this.disX;
                let top = e.targetTouches[0].pageY - this.disY;
                this.currentTarget.style.left = left + 'px';
                this.currentTarget.style.top = top + 'px';
                this.judgePosition();
            },
            handlerTouchEnd (e) {
                if (!this.cursorDown) return;
                document.removeEventListener('touchmove', this.handlerTouchMove, { passive: false });
                this.cursorDown = false;
                document.onselectstart = null;
                this.disX = null;
                this.disY = null;
                this.$refs.list.removeChild(this.currentTarget);

                const currentItem = this.initChannelList[this.currentIndex];
                console.log(this.initChannelList, this.currentIndex, this.startIndex);
                this.initChannelList[this.currentIndex] = this.initChannelList[this.startIndex];
                this.initChannelList[this.startIndex] = currentItem;
                this.initChannelList[this.currentIndex].key = this.currentIndex;
                this.initChannelList[this.startIndex].key = this.startIndex;
                console.log(this.initChannelList);
                this.getAllCoordinateLi();
                this.currentTarget = null;
                this.currentIndex = null;
                this.startIndex = null;
            }
        },
        beforeDestroy () {
            document.removeEventListener('touchend', this.handlerTouchEnd);
        }
    };
</script>

<style lang="less" scoped>
    @import (reference) '../assets/less/index.less';
    .ui-channel-manage {
        display: flex;
        flex-direction: column;
        height: 100%;
        &__title {
            line-height: 92px;
            flex: 0 0 92px;
            font-size: 40px; /*px*/
            color: @color-info1;
            background-color: @color-white;
            z-index: 2;
            padding-left: 35px; 
            text-align: left;
            font-weight: bold;
        }
        &__content {
            flex: 1;
            text-align: left;
            padding-left: 35px;
            display: flex;
            flex-flow: wrap;
            justify-content: flex-start;
            flex-direction: column;
            ul > {
                flex: 0 0 auto;
                >li {
                    position: relative;
                    float: left;
                    width: 252px;
                    height: 70px;
                    line-height: 70px;
                    text-align: center;
                    background-color: #f7f7f7;
                    border-radius: 10px;
                    margin-bottom: 25px;
                    >span {
                        font-size: 26px; /*px*/
                        line-height: 26px;
                        color: @color-info1;
                    }
                    >strong {
                        position: absolute;
                        right: 13px;
                        top: 8px;
                        font-weight: normal;
                        font-size: 16px; /*px*/
                        line-height: 1;
                    }
                }
                
                >li:nth-child(odd) {
                    margin-right: 35px;
                }

                .ui-active {
                    background-color: @color-primary;
                    transform: scale(1.1);
                    >span {
                        color: #fff;
                    }
                }
            }
        }
        &__back {
            flex: 0 0 90px;
            line-height: 90px;
            font-size: 32px; /*px*/
            color: @color-primary;
            background-color: @color-white;
            z-index: 2;
            font-weight: bold;
            display: flex;
            flex-direction: column;
            >div {
                width: 100%;
                flex: 0 0 90px;
                display: flex;
                align-items: center;
                >span {
                    flex: 0 0 50%;
                    background-color: @color-white;
                    color: @color-info1;
                }
                >span:last-child {
                    background-color: @color-primary;
                    color: @color-white;
                }
            }
        }
    }

    
</style>

//由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。
var name = 'window'

var person1 = {
  name: 'person1',
  show1: function () {
    console.log(this.name)
  },
  show5: show5,
  show2: () => console.log(this.name),
  show3: function () {
    return function () {
      console.log(this.name)
    }
  },
  show4: function () {
    return () => console.log(this.name)
  }
}
var person2 = { name: 'person2' }

function show5(){
	console.log(this.name);
}
//show1这种定义函数方式与show5这种方式是一样的，所以show1的作用域在飞严格模式下是指向window的
person1.show1()//person1
person1.show1.call(person2)//person2

person1.show2()//window
person1.show2.call(person2)//window call放无法改变箭头函数内的this指向

person1.show3()()//window
person1.show3().call(person2)//person2
person1.show3.call(person2)()//window
	
person1.show4()()//window->person1因为是person1调show4方法，所以箭头函数外部函数作用域中的this指向person1，所以箭头函数里面的this，也指向箭头函数person1
person1.show4().call(person2)//window ->person1，call	方法无法改变箭头函数内的this指向
person1.show4.call(person2)()//person2

/**
 * Question 2
 */
//头函数的this，因为没有自身的this，所以this只能根据作用域链往上层查找，直到找到一个绑定了this的函数作用域（即最靠近箭头函数的普通函数作用域，或者全局环境），并指向调用该普通函数的对象
var name = 'window'

function Person (name) {
  this.name = name;
  this.show1 = function () {
    console.log(this.name)
  }
  this.show2 = () => console.log(this.name)
  this.show3 = function () {
    return function () {
      console.log(this.name)
    }
  }
  this.show4 = function () {
    return () => console.log(this.name)
  }
}

var personA = new Person('personA')
var personB = new Person('personB')

personA.show1()//personA
personA.show1.call(personB)//personB

personA.show2()//personA
personA.show2.call(personB)//personA

personA.show3()()//window
personA.show3().call(personB)//personB
personA.show3.call(personB)()//window

personA.show4()()//personA
personA.show4().call(personB)//personA
personA.show4.call(personB)()//personB

const erudaDebug = {
    hasInit: false,
    initDruda: (config = {}) => {
        if (!erudaDebug.hasInit) {
            require.ensure([], require => {
                eruda = require('./eruda')
                eruda.init(config)
                eruda.show()
                erudaDebug.hasInit = true
            })
        } else {
            erudaDebug.show()
        }
    },
    show: () => {
        eruda && eruda.show()
    },
    hide: () => {
        eruda && eruda.hide()
    }
}

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/eruda.min.js"></script>
<script>
	eruda.init()
</script>

str.replace(regexp|substr, newSubStr|function) 我们只看第一个参数是正则表达式的场景

const str = 'abc12345#$*%';
const reg1 = /([^\d]*)(\d*)([^\w]*)/;

const replaceFn1 = (match, p1, p2, p3, offset, string) => {
    return `${p1}-${p2}-${p3}`
}

const newStr1 = str.replace(reg1, "$1-$2-$3") // abc-12345-#$*%
const newStr2 = str.replace(reg1, replaceFn1) // abc-12345-#$*%

var reg3 = /(\w+)\s(\w+)/;
var str1 = "John Smith";
var newstr5 = str1.replace(reg3, "$2, $1"); // Smith, John

const reg4 = /https:\/\/baidu.com.cn\/(?!api\/index\.php)(.*)/

const str2 = 'https://baidu.com.cn/page/customer_management/customer_management.shtml?fromApp=5003&token=cdkqqf1407307954'
const str3 = 'https://baidu.com.cn/api/index.php?r=common/my-applicationto-project/get-applicationto-project&token=cdkqqf1407307954'

console.log('replace', str2.replace(reg4, 'http://127.0.0.1:8006/$1'))

const reg5 = /https:\/\/baidu.com.cn\/(?!(api|Broker|broker)\/.*)(.*)/

const str4 = 'https://baidu.com.cn/api/broker/broker/get-broker-info?token=eurkya1565078719'
const str5 = 'https://baidu.com.cn/front_static/index?style=red&token=eurkya1565078719'
const str6 = 'https://baidu.com.cn/api/index.php?r=broker/index/get-building-list&token=eurkya1565078719&pageIndex=1'
const str7 = 'https://baidu.com.cn/Broker/UserCenter/index?token=eurkya1565078719&style=red'
const fn1 = function (match, p1, p2, offset, string) {
    return `http://127.0.0.1:9001/${p2}`
}

console.log('replace', str4.replace(reg5, 'http://127.0.0.1:9001/$2'))
console.log('replace', str5.replace(reg5, 'http://127.0.0.1:9001/$2'))
console.log('replace', str6.replace(reg5, 'http://127.0.0.1:9001/$2'))
console.log('replace', str7.replace(reg5, 'http://127.0.0.1:9001/$2'))
console.log('replace', str5.replace(reg5, fn1))

yarn add husky --dev | npm install husky --save-dev

// 第一种方式直接写在package.json内
{
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint",
      "...": "..."
    }
  }
}

// 第二种方式直接在根目录下建立.huskyrc, .huskyrc.json or .huskyrc.js等文件，如果使用这种方式husky的版本需要大于1.0.0

// .huskyrc
{
  "hooks": {
    "pre-commit": "yarn lint"
  }
}

yarn add lint-staged --dev | npm install lint-staged --save-dev

// 第一种方式直接写在package.json内
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "linters": { // linters 被匹配的项及匹配之后需要执行的命令
      "*.{js,vue}": [ // 允许按命令执行多项命令
        "eslint --fix", // 也可以直接时script内的命令，如yarn lint，这里需要注意的时当执行script内的命令时，检查的就是script命令内的所有文件了
        "git add"
      ],
     "*.css": "stylelint",
     "*.scss": "stylelint --syntax=scss"
    },
    "ignore": []
  },

// 第二种方式可以在根目录下建立lintstagedrc or lint-staged.config.js 文件
{
  "linters": {
      "*.{js,vue}": [
        "eslint --fix",
        "git add"
      ]
    },
    "ignore": []
}

// 第一种方式直接安装prettier插件
yarn add prettier --dev | npm install prettier --save-dev

在根目录下建立.prettierrc配置文件
{
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true,
  "parser": "flow", // 默认格式化js的方式
  "printWidth": 100,
}

在package.json内配合husky、lint-staged使用
"husky": {
        "hooks": {
            "pre-commit": "lint-staged",
            "post-commit": "git update-index --again"
        }
    },
    "lint-staged": {
        "linters": {
            "*.js": ["prettier --parser flow --write", "eslint --fix", "git add"], // 格式化js文件
            "*.vue": ["prettier --parser vue --write", "eslint --fix", "git add"], // 格式化vue文件
            "*.json": ["prettier --parser json --write", "git add"] // 格式化json文件
        },
        "ignore": ["dist/**/*.js"] // 忽略掉dist目录下的文件
    },

还可以使用单独的命令
"pt": "prettier --debug-check {src,test}/**/*.js",
"pt:vue": "prettier --parser vue --debug-check {src,test}/**/*.vue",
"pt:fix": "prettier --write {src,test}/**/*.js",
"pt:fixvue": "prettier --parser vue --write {src,test}/**/*.vue"

注意这里的parser有好几种，我在配置的时候，好像不能根据文件自动识别，然后进行格式化，如parser方式为flow时，无法格式化vue文件，所以vue文件需要用parser引擎指定为vue

// 第二种方式则是使用eslint-plugin-prettier 具体的配置方式参考prettier提供的文档

project
    package.json
    node_modules/
    packages/
         component1
               .git
               src
               package.json
         component1
               .git
               src
               package.json

// 使用try catch来捕捉eslint返回的信息，而不是直接使用返回值
try {
	execSync(`${PRETTIER_PATH} --parser ${filetype.includes('js') ? 'flow' : 'vue'} --write ${files[i]}`)
        execSync(`${ESLINT_PATH} ${files[i]}`, {cwd})
  } catch (error) {
	PASS = false
	console.log('error', error.stdout.toString())
  }

// 不是直接使用返回值，这样会直接报comman failed
const result = execSync(`${ESLINT_PATH} ${files[i]}`, {cwd})

#!/usr/bin/env node

const execSync = require('child_process').execSync
const path = require('path')

const ESLINT_PATH = path.normalize("./node_modules/.bin/eslint")
const PRETTIER_PATH = path.normalize("./node_modules/.bin/prettier")

console.log('检查是否安装eslint')
try {
	execSync(ESLINT_PATH)
}catch(e) {
	console.log('未安装eslint', e.stdout.toString(), e.stderr.toString())
	process.exit(1)
}

const STAGE_FILES_JS_COMMAND="git diff --cached --name-only --diff-filter=ACM -- '*.js'"
const STAGE_FILES_VUE_COMMAND="git diff --cached --name-only --diff-filter=ACM -- '*.vue'"

const STAGE_FILES_JS = execSync(STAGE_FILES_JS_COMMAND).toString().trim().split('\n')
const STAGE_FILES_VUE = execSync(STAGE_FILES_VUE_COMMAND).toString().trim().split('\n')

console.log('STAGE_FILES_JS', STAGE_FILES_JS, STAGE_FILES_VUE)
let promises = null
const cwd = process.cwd() || process.env.PWD;

function checkFile (files, filetype) {
	if (files.length) {
	
		let PASS = true
	
		for (let i = 0; i < files.length; i++) {
			try {
				execSync(`${PRETTIER_PATH} --parser ${filetype.includes('js') ? 'flow' : 'vue'} --write ${files[i]}`)
				execSync(`${ESLINT_PATH} ${files[i]}`, {cwd})
			} catch (error) {
				PASS = false
				console.log('error', error.stdout.toString())
			}
		}
	
		if (!PASS) {
			console.log(`eslint ${filetype}未通过`)
			process.exit(1)
		} else {
			console.log(`eslint ${filetype}通过`)
		}
	
	} else {
		console.log(`暂存区没有需要检查的${filetype}文件`)
	}
}

checkFile(STAGE_FILES_JS, 'js')
checkFile(STAGE_FILES_VUE, 'vue')

process.exit(0)

yarn createHooks => "createHooks": "node createHooks.js create"

console.log('create hooks', process.argv)
const fs = require('fs')

const type = process.argv[2]

const packagesList = ['./packages/test/', './packages/git-hooks/']

const templateUrl = './hooks/pre-commit'

function createHooks() {
    console.log('createHooks')
    for (let i = 0; i < packagesList.length; i += 1) {
        if (!fs.existsSync(`${packagesList[i]}.git/`)) {
            break
        }
        if (!fs.existsSync(`${packagesList[i]}.git/hooks/`)) {
            break
        }
        if (!fs.existsSync(`${packagesList[i]}.git/hooks/pre-commit`)) {
            const preCommit = fs.readFileSync(templateUrl)

            fs.writeFileSync(`${packagesList[i]}.git/hooks/pre-commit`, preCommit, {
                encoding: 'utf8',
                mode: 0o777,
            })
        }
    }
}

function deleteHooks() {

}

function deleteAllHooks() {

}

console.log('type', type)

switch (type) {
case 'create':
    createHooks()
    break
case 'delet':
    deleteHooks()
    break
case 'deletAll':
    deleteAllHooks()
    break
default:
    createHooks()
}

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

// 初始化data操作
function initData (vm: Component) {
  let data = vm.$options.data
  // 如果data是函数则调用getData进行获取
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    )
  }
  // proxy data on instance
  // 获取包含key的数组
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
     // 判断data内的key是否与methods内的方法名是否有重名
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    // 判断data内的key是否与props内的属性名是否有重名
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) {
     // 对data进行一次代理，便于我们能够直接通过this.a 来访问this._data.a
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  // 对data内的数据进行observe
  observe(data, true /* asRootData */)
}

// 当传入的data是一个函数时，返回一个data对象
export function getData (data: Function, vm: Component): any {
  try {
    return data.call(vm, vm)
  } catch (e) {
    handleError(e, vm, `data()`)
    return {}
  }
}

// 对data进行代理操作
export function proxy (target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

// 尝试创建Observe实例，如果没有则创建，如果有则返回现有的Observe实例
export function observe (value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob: Observer | void
  // 判断是否已经有了Observe实例
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (
    observerState.shouldConvert &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    // 直接new 一个Observe实例
    ob = new Observer(value)
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}

// Observer 构造函数
export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that has this object as root $data

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    // 将 Observer 实例添加到传入value数组的__ob__属性上，如传入的value是data，那么就在data对象上添加__ob__属性
    def(value, '__ob__', this)
    // 如果是数组，调用observeArray方法
    if (Array.isArray(value)) {
      // 判断是否支持__propto__属性，如果支持调用protoAugment方法否则调用copyAugment方法
      const augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
      this.observeArray(value)
    } else {
      // 是对象则调用walk方法
      this.walk(value)
    }
  }
  
  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      // 对每个属性调用defineReactive方法进行getter与setter设置
      defineReactive(obj, keys[i], obj[keys[i]])
    }
  }

  /**
   * Observe a list of Array items.
   */
  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      // 对数组中的每项成员继续调用observe方法，直至结束
      observe(items[i])
    }
  }
 }

// 如果有__proto__属性则，直接将传入数组实例的原型上的7个方法改成自定义的7个数组方法
function protoAugment (target, src: Object, keys: any) {
  /* eslint-disable no-proto */
  target.__proto__ = src
  /* eslint-enable no-proto */
}

// 如果不支持__proto__属性则覆盖数组实例的原型上的7个方法
function copyAugment (target: Object, src: Object, keys: Array<string>) {
  for (let i = 0, l = keys.length; i < l; i++) {
    const key = keys[i]
    def(target, key, src[key])
  }
}

// 定义对象属性的getter与setter
export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  // new 一个Dep实例，用来收集依赖，一个容器，用于存放订阅者(watcher)即发布消息
  const dep = new Dep()
  
 // 获取传入对象对应key的属性描述，如果该property.configurable === false则retrurn调
  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  // 获取之前定义的getter与setter
  const getter = property && property.get
  const setter = property && property.set
  // 对属性值进行observe，如果是对象or数组则重复改步骤，如果是简单类型则不用，如data: {msg: {a: 1, b: 2}}，则方便对msg: {a: 1, b: 2}继续进行observe
  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // 区分普通调用还是watcher内的get调用
      if (Dep.target) {
        // 订阅消息
        dep.depend()
        // 如果有子项，同理继续订阅消息
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      // set之前先获取一次值 
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      // 比较新值与旧值
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      // 如果有setter函数则执行，否则直接把新值赋给val
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      // 对新值重新observe
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}

// 用于存放订阅者与发布消息
export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = []
  }
  // 新增订阅列表，订阅Watcher
  addSub (sub: Watcher) {
    this.subs.push(sub)
  }

  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }
  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }
  // 发布消息
  notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      // 调用每个watcher的update方法
      subs[i].update()
    }
  }
}

// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
Dep.target = null
const targetStack = []

// 设置Dep的target属性，区分watcher内调用的getter与普通调用的getter
export function pushTarget (_target: Watcher) {
  if (Dep.target) targetStack.push(Dep.target)
  Dep.target = _target
}

export function popTarget () {
  Dep.target = targetStack.pop()
}

// 观察者
export default class Watcher {
	  vm: Component;
	  expression: string;
	  cb: Function;
	  id: number;
	  deep: boolean;
	  user: boolean;
	  lazy: boolean;
	  sync: boolean;
	  dirty: boolean;
	  active: boolean;
	  deps: Array<Dep>;
	  newDeps: Array<Dep>;
	  depIds: SimpleSet;
	  newDepIds: SimpleSet;
	  getter: Function;
	  value: any;
	
	  constructor (
	    vm: Component,
	    expOrFn: string | Function,
	    cb: Function,
	    options?: ?Object,
	    isRenderWatcher?: boolean
	  ) {
	    this.vm = vm
	    if (isRenderWatcher) {
	      vm._watcher = this
	    }
	    vm._watchers.push(this)
	    // options
	    if (options) {
	      this.deep = !!options.deep
	      this.user = !!options.user
	      this.lazy = !!options.lazy
	      this.sync = !!options.sync
	    } else {
	      this.deep = this.user = this.lazy = this.sync = false
	    }
	    this.cb = cb
	    this.id = ++uid // uid for batching
	    this.active = true
	    this.dirty = this.lazy // for lazy watchers
	    this.deps = []
	    this.newDeps = []
	    this.depIds = new Set()
	    this.newDepIds = new Set()
	    this.expression = process.env.NODE_ENV !== 'production'
	      ? expOrFn.toString()
	      : ''
	    // parse expression for getter
	    if (typeof expOrFn === 'function') {
	      this.getter = expOrFn
	    } else {
	      this.getter = parsePath(expOrFn)
	      if (!this.getter) {
	        this.getter = function () {}
	        process.env.NODE_ENV !== 'production' && warn(
	          `Failed watching path: "${expOrFn}" ` +
	          'Watcher only accepts simple dot-delimited paths. ' +
	          'For full control, use a function instead.',
	          vm
	        )
	      }
	    }
            // 调用get方法来收集依赖
	    this.value = this.lazy
	      ? undefined
	      : this.get()
	  }
	
	  /**
	   * Evaluate the getter, and re-collect dependencies.
	   */
	  get () {
            // 区分是watcher内调用的getter方法还是普通的getter方法调用
	    pushTarget(this)
	    let value
	    const vm = this.vm
	    try {
              // 调用对象属性的getter方法  这里不怎么懂的是，为什么所有的用于视图渲染的数据都能够被调用一次
	      value = this.getter.call(vm, vm)
	    } catch (e) {
	      if (this.user) {
	        handleError(e, vm, `getter for watcher "${this.expression}"`)
	      } else {
	        throw e
	      }
	    } finally {
	      // "touch" every property so they are all tracked as
	      // dependencies for deep watching
	      if (this.deep) {
	        traverse(value)
	      }
	      popTarget()
	      this.cleanupDeps()
	    }
	    return value
	  }
	
	  /**
	   * Add a dependency to this directive.
	   */
	  addDep (dep: Dep) {
	    const id = dep.id
	    if (!this.newDepIds.has(id)) {
	      this.newDepIds.add(id)
	      this.newDeps.push(dep)
	      if (!this.depIds.has(id)) {
	        dep.addSub(this)
	      }
	    }
	  }
	
	  /**
	   * Clean up for dependency collection.
	   */
	  cleanupDeps () {
	    let i = this.deps.length
	    while (i--) {
	      const dep = this.deps[i]
	      if (!this.newDepIds.has(dep.id)) {
	        dep.removeSub(this)
	      }
	    }
	    let tmp = this.depIds
	    this.depIds = this.newDepIds
	    this.newDepIds = tmp
	    this.newDepIds.clear()
	    tmp = this.deps
	    this.deps = this.newDeps
	    this.newDeps = tmp
	    this.newDeps.length = 0
	  }
	
	  /**
	   * Subscriber interface.
	   * Will be called when a dependency changes.
	   */
          // 依赖发生变化时触发
	  update () {
	    /* istanbul ignore else */
	    if (this.lazy) {
	      this.dirty = true
	    } else if (this.sync) {
              // 同步执行
	      this.run()
	    } else {
	      queueWatcher(this)
	    }
	  }
	
	  /**
	   * Scheduler job interface.
	   * Will be called by the scheduler.
	   */
	  run () {
	    if (this.active) {
              // 调用watcher的get方法用于收集新的依赖于重新渲染视图
	      const value = this.get()
	      if (
	        value !== this.value ||
	        // Deep watchers and watchers on Object/Arrays should fire even
	        // when the value is the same, because the value may
	        // have mutated.
	        isObject(value) ||
	        this.deep
	      ) {
	        // set new value
	        const oldValue = this.value
	        this.value = value
	        if (this.user) {
	          try {
                    // 更新视图
	            this.cb.call(this.vm, value, oldValue)
	          } catch (e) {
	            handleError(e, this.vm, `callback for watcher "${this.expression}"`)
	          }
	        } else {
	          this.cb.call(this.vm, value, oldValue)
	        }
	      }
	    }
	  }

// 重写数组实例上的7中方法，便于数据响应
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function (method) {
  // cache original method
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    // 如果有新的元素插入则调用observeArray
    if (inserted) ob.observeArray(inserted)
    // notify change
    // 发布消息
    ob.dep.notify()
    return result
  })
})

// 挂载组件
export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode
    if (process.env.NODE_ENV !== 'production') {
      /* istanbul ignore if */
      if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
        vm.$options.el || el) {
        warn(
          'You are using the runtime-only build of Vue where the template ' +
          'compiler is not available. Either pre-compile the templates into ' +
          'render functions, or use the compiler-included build.',
          vm
        )
      } else {
        warn(
          'Failed to mount component: template or render function not defined.',
          vm
        )
      }
    }
  }
  callHook(vm, 'beforeMount')

  let updateComponent
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`

      mark(startTag)
      const vnode = vm._render()
      mark(endTag)
      measure(`vue ${name} render`, startTag, endTag)

      mark(startTag)
      vm._update(vnode, hydrating)
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag)
    }
  } else {
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  // 组件data/props等数据初始化之后调用Watcher收集依赖
  new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */)
  hydrating = false

  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

<template>
     <div>
          <slot name="header"></slot>
          <slot name="body" :scope="list"></slot>
          <slot></slot>
     </div>
</template>

<child>
     <div slot="header">这是头部</div>
     <div slot="body" slot-scope="scope">{{scope.text}}</div>
     <div>这是尾部</div>
</child>

   基本用法如下所示
   <input type="text" v-model="txt"/> => <input :value="txt" @input="txt = $event.target.value" />
   组件之间的用法
   子组件child-input
   <input type="text" v-model="txt"/> => <input :value="txt" @input="txt = $event.target.value" />
    
   <input-child v-model="content"></input-child> => 
   <input-child :value="content" @input="content = arguments[0]></input-child>

字符串:class="className"
对象:class="{ active: isActive, 'text-danger': hasError }"
数组:class = "[activeClass, errorClass]"

能检测到变化的方式
第一种成功添加的方式，Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新，splice，sort，reverse及添加与删除首尾的四个方法
this.arrsucc.push('999')

第二种方式覆盖原先的数组，非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
this.arrsucc = this.arrsucc.concat(['1000'])
this.arrsucc = [...this.arrsucc, '9999']

第三种方式
this.$set(this.arrsucc, 0, 'rose')
this.$set(this.arrsucc, 1, 'jack')


不能检测到变化的方式
// 直接通过index索引来添加
this.arrerr[1] = 88

// 直接改变数组长度
this.arrerr.length = 0

第一种是在data里面定义了的属性；
data() {
  return {
      obj: {name : 'jack'}
  }
}

第二种通过set方法来实现
this.$set(this.someObject,'b',2)；

第三种通过覆盖整个对象来实现
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) 
this.someObject = {...this.someObject, { a: 1, b: 2 }

<comp :foo.sync="bar"></comp>
拓展为<comp :foo="bar" @update:foo="val => bar = val"></comp>
子组件内需要显示的emit该事件this.$emit('update:foo', newValue)

var mixin = {
  created: function () {
    console.log('混合对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

1.在webpack.base.conf.js内的pugins参数内配置
plugins: [
        // loader-options-plugin 和其他插件不同，它用于将 webpack 1 迁移至 webpack 2,webpack 2 推荐的使用方式是直接传递 options 给 loader/插件
        new webpack.LoaderOptionsPlugin({
            vue: {
                postcss: function() {
                    return [px2rem({ remUnit: 75, exclude: /node_modules/ })];
                }
            }
        })
    ],

2.是在vue-loader-conf.js内进行配置
postcss: [require('postcss-px2rem-exclude')({ 'remUnit': 75, exclude: /node_modules/ })]

3.在postcssrc.js文件内添加
module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        // to edit target browsers: use "browserslist" field in package.json
        "autoprefixer": {},
        'postcss-px2rem-exclude': {
            remUnit: 75,
            exclude: /node_modules/
        }
    }
}

注意的时1.2两种方式只针对vue文件，而3方式是针对所有使用了postcss-loader处理的文件

直接写px，编译后会直接转化成rem ---- 除开下面两种情况，其他长度用这个
在px后面添加/*no*/，不会转化px，会原样输出。 --- 一般border需用这个
在px后面添加/*px*/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个

在dev-server的proxyTable配置项那里进行配置，使用dev-server能够解决跨域问题的原因是，dev-server起了一个node服务器，而同源策略只限于浏览器，使用我们通过请求node服务器的接口，通过node服务器去反向代理帮我们去请求真实的接口，最终拿到数据
proxyTable: {
    '/api': { // 接口前缀
        target: 'https://xxxx.com.cn/',  // 后端接口地址
        changeOrigin: true, // 是否转接
        cookieDomainRewrite: { // 是否可以重写cookie
            "*": ""
        },
        pathRewrite: {
            '^/api': '/api' // 是否重写接口，即get('/api/basic/getlist') =>  get('/api/basic/getlist') 不变
            '/*': ''   // 接口地址不变
             '^/api': '/'   // 即get('/api/basic/getlist') =>  get('/basic/getlist') 变了
        }
    },
    '/index.php': {
        target: 'http://xxxx.cn/',
        changeOrigin: true,
        secure: false,
    }
},

// get请求，http是axios.create创建的一个实例
http.get('/index.php?r=yykf/b2c/project/get-project-list', {params})

http.get('/api/user/messages', { params })

// post请求，需要注意的是，我们直接传对象时，php后台可能因为接收不到参数报504 or 500错误，使用我们需要对参数进行stringify一下，相当于把请求头由application/json变成了表单的请求方式
http.post('/index.php?r=yykf/b2c/appointment/save', querystring.stringify(data));

function request () {
      return new Promise((resolve) => {
        const xhr = new XMLHttpRequest();

        const params1 = "token=acc12356&url=post-form";

        const fileEle = document.getElementById('file');
        const params2 = new FormData();
        params2.append('token', 'acc12356');
        params2.append('url', 'post-form');
        params2.append('file', fileEle.files[0]);

        const params3 = JSON.stringify({token: 'acc12356', url: 'post-form'})

        xhr.open('POST', '/post-json', true);
        
        /*
          当设置请求头为'application/x-www-form-urlencoded'时，
            1. 当参数为params1，key value对的形式，也是表单默认的参数发送方式，后端能够正常拿到值
            2. 当参数为params2，form-data的形式，后端能够正常拿到值，但是content-type不会变成multipart/form-data;
            3. 当参数为params3，对象的形式，如果不对对象进行处理，则后端收到的是{ 'object Object': '' }，如果对对象先进行JSON.stringify则后端接收到的参数是把整个对象做为了一个key的对象{ '{"token":"acc12356","url":"post-form"}': '' }
          所以如果content-type为'application/x-www-form-urlencoded'，则我们最终传入send放到的参数会被转换成字符串，form-data除外，如果字符串是key value值对的形式则后端可以正常拿到，如果不是则会把整个字符串作为key，所以如果是表单的形式来提交，需要对参数转换成key value对
        **/ 

        /*
          当设置请求头为'application/json'时，
            1. 当参数为params1，key value对的形式，也是表单默认的参数发送方式，直接报错
            2. 当参数为params2，form-data的形式，直接报错
            3. 当参数为params3，对象的形式，如果不对对象进行处理，则后端收到的是{ 'object Object': '' }，如果对对象先进行JSON.stringify则后端接收到的参数是正常的对象{ token: 'acc12356', url: 'post-form' }
          所以如果content-type为'application/json'，则我们最终传入send放到的参数会被转换成字符串，form-data除外，如果字符串是json字符串的形式则后端可以正常拿到，如果不是则会直接报错
        **/ 
        xhr.setRequestHeader('content-type', 'application/json; charset=utf-8');

        xhr.onload = function(e) { 
          if(this.status == 200||this.status == 304){
            resolve(this.responseText);
          }
        };
        
        // 如果没有设置content-type，如传入的是一个字符串则content-type会被设为text/plain;charset=UTF-8
        // 如果没有设置content-type，如传入的是一个form-data则content-type会被设为multipart/form-data; boundary=----WebKitFormBoundarygbyZU9wiB2Uc300W
        // 如果没有设置content-type，如传入的是一个对象（会被转换为[object object]），如果传入的是一个JSON字符串则会被转换为JSON对象，但是content-type会被设置为text/plain;charset=UTF-8，但是后端拿不到参数
        xhr.send(params3);
      })
    }

1. jquery post content-type: 'application/x-www-form-urlencoded'

 const postFormJq = function (data) {
      return new Promise((resolve) => {
        // 默认表单请求, 这里data不需要JSON.stringify的原因与postJsonJq的是一样的
        $.post('/post-form', data, (res) => {
          resolve(res);
        });
      })
    }


2. jquery post content-type: 'application/json'

const postJsonJq = function (data) {
      return new Promise((resolve) => {
        // 单个传参数的形式，不支持修改content-type，需要传对象的形式才支持
        // $.post('/post-json', data, (res) => {
        //   resolve(res);
        // });

        $.post({
          url: '/post-json',
          data: JSON.stringify(data), // jquery直接传对象会报错的原因，是jquery内部有一段代码处理，如传入的data不是字符串，则会被转换为key value字符串对，而application/json;是不接受这种参数的，所以报错
          contentType: 'application/json; charset=utf-8',
          success: (res) => {
            resolve(res);
          }
        })
      })
    }

3. jquery get query内取参数

const getListJq = function (params) {
      return new Promise((resolve) => {
        $.get('/get-list', params, (data) => {
          resolve(data);
        });
      })
    }

4. jquery get params内取参数

const getListParamsJq = function (params) {
      return new Promise((resolve) => {
        $.get('/get-list-params/1234563/akcnal',{}, (data) => {
          resolve(data);
        });
      })
    }

1. axios post application/x-www-form-urlencoded

const postForm = function (data) {
      // 因为axios默认的content-type：application/json，所以如果我们需要使用application/x-www-form-urlencoded表单的方式来发送数据给后端的话，有以下几种方式
      // 方法一使用URLSearchParams来编码参数,当axios判断参数是,注意这种方式，通过req.body无法获取
      // const params = new URLSearchParams();
      // for (let prop in data) {
      //   params.append(prop, data[prop]);
      // }
      // console.log('params', params);
      // return axios.post('/post-form', params);

      // 第二种方法使用qs模块的stringify方法对参数进行处理
      // console.log(Qs.stringify(data));
      // return axios.post('/post-form', Qs.stringify(data));

      // 第三种方式，设置content-type,不加Qs.stringfy处理后端拿到的数据是这样的{ '{"token":"acc12356","url":"post-form"}': '' }，加了Qs.stringfy处理{ token: 'acc12356', url: 'post-form' }；使用我们在使用的时候，只需要对参数做处理了，就不需要主动去添加content-type头了

      // axios post方法内只对传入的data数据进行了JSON.stringify,所以当我们直接传入data进去的时候，会被转换成json字符串对象，而这个时候content-type如果是application/json则后端能够正常获取到参数，如果为application/x-www-form-urlencoded则后端不能正常获取到参数；这也是为什么如果是表单提交，需要对data处理转换成key value对
      return axios.post('/post-form', Qs.stringfy(data), {
        headers: { 'content-type': 'application/x-www-form-urlencoded' }
      });
    }

2. axios post 'application/json' 

const postJson = function (data) {
      return axios.post('/post-json', data);
   }

3. axios post multipart/form-data; boundary=[xxx]
这里需要注意的是axios内当检测到传入的参数是form-data时会删除默认的content-type: application/json，这也我们在浏览器内会看到content-type: multipart/form-data; boundary=[xxx];而jquery是没有做这一步处理的

const postFormData = function (data) {
      return axios.post('/post-form-data', data);
    }

4. axios get query内取参数

const getList = function (params) {
      return axios.get('/get-list', {params});
    }

5. axios get params内取参数
  
    const getListParams = function (params) {
      return axios.get('/get-list-params/1234563/akcnal',);
    }

const fs = require('fs');
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const multer = require('multer'); 

const upload = multer(); // for parsing multipart/form-data
const app = express();

app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded



app.use('/static', express.static('../front/static'));

app.get('/', (req, res) => {
  res.sendFile(path.resolve('../front/index.html'), {
    header: 'text/html'
  })
});

app.get('/get-list', (req, res) => {
  console.log(req.query);
  res.json({ url: 'post-form', code: 200, ...req.query })
})

app.get('/get-list-params/:id/:token', (req, res) => {
  console.log(req.params);
  res.json({ url: 'post-form', code: 200, ...req.params })
})

app.post('/post-form',upload.array(), (req, res) => {
  console.log(req.body);
  res.json({ url: 'post-form', code: 200 })
})

app.post('/post-form-data', upload.array(), (req, res) => {
  console.log(req, req.body);
  fs.rename(req.file.path, "upload/" + req.file.originalname, function(err) {
      if (err) {
          throw err;
      }
      console.log('上传成功!');
  })

  res.json({ url: 'post-form-data', code: 200 })
})

app.post('/post-json', (req, res) => {
  console.log(req.body);
  res.json({ url: 'post-json', code: 200 })
})

app.listen(8088, () => {
  console.log('启动成功');
});

<div>
    <button id="btn1">get请求</button>
    <button id="btn2">post请求application/x-www-form-urlencoded</button>
    <button id="btn3">post请求multipart/form-data</button>
    <button id="btn4">post请求application/application/json</button>
    <div>
      <input type="file" name="file" id="file">
    </div>
    <div>
      <button class="btn">get请求</button>
      <button class="btn">post请求application/x-www-form-urlencoded</button>
      <button class="btn">post请求multipart/form-data</button>
      <button class="btn">post请求application/application/json</button>  
      <button class="btn">post请求xhr</button> 
    </div>
  </div>
  <script src="/static/js/axios.js"></script>
  <script src="/static/js/qs.js"></script>
  <script src="/static/js/jquery.js"></script>
  <script>
    
    const buttons = document.getElementsByTagName('button');

    buttons[0].onclick = function () {
      getList({token: 'acc12356', url: 'get-list'}).then((res) => {
        console.log('buttons[0]', res);
      })
      getListParams({token: 'acc12356', url: 'get-list-params'}).then((res) => {
        console.log('buttons[0]', res);
      })
    }

    buttons[1].onclick = function () {
      postForm({token: 'acc12356', url: 'post-form'}).then((res) => {
        console.log('buttons[1]', res);
      })
    }

    buttons[2].onclick = function () {
      const fileEle = document.getElementById('file');
      console.log(fileEle, fileEle.files);
      const form = new FormData();
      form.append('file', 'file');
      form.append('file', fileEle.files[0]);
      form.append('token', 'acc12356');
      form.append('url', 'post-form-data');
      postFormData(form).then((res) => {
        console.log('buttons[2]', res);
      })
    }

    buttons[3].onclick = function () {
      postJson({token: 'acc12356', url: 'post-json'}).then((res) => {
        console.log('buttons[3]', res);
      })
    }

    const btns = document.getElementsByClassName('btn');

    btns[0].onclick = function () {
      getListJq({token: 'acc12356', url: 'get-list'}).then((res) => {
        console.log('btns[0]', res);
      })
      getListParamsJq({token: 'acc12356', url: 'get-list-params'}).then((res) => {
        console.log('btns[0]', res);
      })
    }

    btns[1].onclick = function () {
      postFormJq({token: 'acc12356', url: 'post-form'}).then((res) => {
        console.log('btns[1]', res);
      })
    }

    btns[2].onclick = function () {
      const fileEle = document.getElementById('file');
      console.log(fileEle, fileEle.files);
      const form = new FormData();
      form.append('file', 'file');
      form.append('file', fileEle.files[0]);
      form.append('token', 'acc12356');
      form.append('url', 'post-form-data');
      postFormDataJq(form).then((res) => {
        console.log('btns[2]', res);
      })
    }

    btns[3].onclick = function () {
      postJsonJq({token: 'acc12356', url: 'post-json'}).then((res) => {
        console.log('btns[3]', res);
      })
    }

    btns[4].onclick = function () {
      request().then((res) => {
        console.log('btns[4]', res);
      })
    }
  </script>

<div class="box"></div>

var box = document.getElementsByClassName("box")[0];
var WAIT_TIME = 500;

//第一种方式  就是当move事件停止之后500ms触发
var debounce1 = function (func, time){
	var timeout;
	return function (){
		var _this = this,
			args = arguments;
		clearTimeout(timeout);
		timeout = setTimeout(function (){
			func.apply(_this, args);
		},time);
	}
}

var getUserAction = function (){
	console.log(this);
	console.log(arguments);
}

//			box.onmousemove = debounce1(getUserAction, WAIT_TIME);

//第二种方式、当move事件开始的时候就触发，然后等到move事件停止后在执行一次
var debounce2 = function (func, time, immediate){
	var timeout;
	return function (){
		var _this = this,
			args = arguments;
		if(timeout) clearTimeout(timeout);
	
		if(immediate){
			var callNow = !timeout;
			timeout = setTimeout(function (){
				timeout = null;
				func.apply(_this, args); //move停止之后执行
			},time);
			if(callNow) func.apply(_this, args); //第一次执行
		}else {
			timeout = setTimeout(function (){
				func.apply(_this, args);
			},time);
		}
		
	}
}

box.onmousemove = debounce2(getUserAction, WAIT_TIME, true);

var x;
if (!x) { //为false
}

x + 2 // NaN

var a = null;

if(!a) {
}

a + 2 // 2

'1.1' + '1.1' = '1.1.1.1';
+'1.1' + 2 = 3.1;
+'12a' => NaN

var unusualPropertyNames = {
  "": "An empty string",
  "!": "Bang!"
}
console.log(unusualPropertyNames."");   // 语法错误: Unexpected string
console.log(unusualPropertyNames[""]);  // An empty string
console.log(unusualPropertyNames.!);    // 语法错误: Unexpected token !
console.log(unusualPropertyNames["!"]); // Bang!

// 使用 \符号来进行换行书写，最终的字符串还是单行，实际上斜线和换行都不会出现在字符串的值中
var str = "this string \
is broken \
across multiple\
lines."
console.log(str);   // this string is broken across multiplelines.

// 使用换行符\n + \来书写多行字符串
var poem = 
"Roses are red,\n\
Violets are blue.\n\
Sugar is sweet,\n\
and so is foo."
console.log(poem); 
Roses are red,
Violets are blue.
Sugar is sweet,
and so is foo.

\n | 换行符
\t | Tab (制表符)
\v | 垂直制表符
\' | 单引号
\" | 双引号
\\ | 反斜杠字符（\）

each : function(obj, iterator, context) {
    var index = 0;
    try {
   	  // 判断是否有传入的数据类型是否有forEach，有则执行
      if (obj.forEach) {
        obj.forEach(iterator, context);
      } else if (obj.length) {
      	// 没有forEach，然后判断是否是数组，是数组则使用for循环，然后调用回调函数，把参数传入
        for (var i=0; i<obj.length; i++) iterator.call(context, obj[i], i);
      } else if (obj.each) {
      	// 是否有each方法
        obj.each(function(value) { iterator.call(context, value, index++); });
      } else {
      	// 如果以上条件都不满足就使用for in 遍历，是对对象的一个扩展
        var i = 0;
        for (var key in obj) {
          var value = obj[key], pair = [key, value];
          pair.key = key;
          pair.value = value;
          iterator.call(context, pair, i++);
        }
      }
    } catch(e) {
      if (e != '__break__') throw e;
    }
    // 最后返回传入的数据
    return obj;
  },

map : function(obj, iterator, context) {
  	// 如果支持map方法则使用原生的map方法
    if (obj && obj.map) return obj.map(iterator, context);
    // 否则使用each方法
    var results = [];
    _.each(obj, function(value, index) {
      results.push(iterator.call(context, value, index));
    });
    // 返回iterator处理过后的回调
    return results;
  }

inject : function(obj, memo, iterator, context) {
    _.each(obj, function(value, index) {
      memo = iterator.call(context, memo, value, index);
    });
    return memo;
  }

detect : function(obj, iterator, context) {
    var result;
    _.each(obj, function(value, index) {
      if (iterator.call(context, value, index)) {
        result = value;
        throw '__break__';
      }
    });
    return result;
  }

select : function(obj, iterator, context) {
  	// 判断是否支持filter方法
    if (obj.filter) return obj.filter(iterator, context);
    var results = [];
    _.each(obj, function(value, index) {
      if (iterator.call(context, value, index)) results.push(value);
    });
    return results;
  }

reject : function(obj, iterator, context) {
    var results = [];
    _.each(obj, function(value, index) {
      if (!iterator.call(context, value, index)) results.push(value);
    });
    return results;
  }

all : function(obj, iterator, context) {
    iterator = iterator || function(v){ return v; };
    if (obj.every) return obj.every(iterator, context);
    var result = true;
    _.each(obj, function(value, index) {
    	// 出现false就停止遍历
      result = result && !!iterator.call(context, value, index);
      if (!result) throw '__break__';
    });
    return result;
  }

any : function(obj, iterator, context) {
    iterator = iterator || function(v) { return v; };
    if (obj.some) return obj.some(iterator, context);
    var result = false;
    _.each(obj, function(value, index) {
      if (result = !!iterator.call(context, value, index)) throw '__break__';
    });
    return result;
  }

include : function(obj, target) {
    // 如果是数组，则用indexOf判断
    if (_.isArray(obj)) return _.indexOf(obj, target) != -1;
    var found = false;
    // 如果是对象
    _.each(obj, function(pair) {
      if (pair.value === target) {
        found = true;
        throw '__break__';
      }
    });
    return found;
  }

invoke : function(obj, method) {
    var args = _.toArray(arguments).slice(2);
    return _.map(obj, function(value) {
      return (method ? value[method] : value).apply(value, args);
    });
  }

pluck : function(obj, key) {
    var results = [];
    _.each(obj, function(value){ results.push(value[key]); });
    return results;
  }

max : function(obj, iterator, context) {
  	// 如果没有传入回调函数，且传入的集合为数组。则直接使用Math的max方法
    if (!iterator && _.isArray(obj)) return Math.max.apply(Math, obj);
    var result;
    _.each(obj, function(value, index) {
      // 用一个对象对报错上一个值，当当前值大于上一个值的时候，重新赋值一次，最后输出result.value最大值
      var computed = iterator ? iterator.call(context, value, index) : value;
      if (result == null || computed >= result.computed) result = {value : value, computed : computed};
    });
    return result.value;
  }

toArray : function(iterable) {
    if (!iterable) return [];
    if (_.isArray(iterable)) return iterable;
    // 否则调用map方法返回一个数组
    return _.map(iterable, function(val){ return val; });
  }

size : function(obj) {
    return _.toArray(obj).length;
  }

first : function(array) {
    return array[0];
  }

last : function(array) {
    return array[array.length - 1];
  }

compact : function(array) {
    return _.select(array, function(value){ return !!value; });
  }

flatten : function(array) {
    return _.inject(array, [], function(memo, value) {
      // 如果是数组则继续调用flatten，调用完之后与上一次的结果concat，最终返回扁平化之后的数组
      if (_.isArray(value)) {
      	return memo.concat(_.flatten(value));
      }
      memo.push(value);
      return memo;
    });
  }

without : function(array) {
  	// 将传入的参数转换为数组
    var values = array.slice.call(arguments, 0);
    // 对该数组调用select方法
    return _.select(array, function(value){ 
    	// 判断第一个参数数组内的值，是否在传入参数values内，如果在则返回false，如果不在返回true，从而将一个数组内需要剔除的值剔除掉
    	return !_.include(values, value); 
    });
  }

uniq : function(array, isSorted) {
    return _.inject(array, [], function(memo, el, i) {
      // 第一个元素 or _.include(memo, el)不包含在memo内的元素则memo.push(el)
      if (0 == i || (isSorted ? _.last(memo) != el : !_.include(memo, el))) memo.push(el);
      return memo;
    });
  }

intersect : function(array) {
  	// 获取第一个参数之外的其它参数并转换为数组
    var rest = _.toArray(arguments).slice(1);
    // 调用select方法,先对第一个参数的数组去重，select的第二个函数为回调函数，及回调内的值为true则复核选择条件，最终返回一个包含符合条件的数组
    return _.select(_.uniq(array), function(item) {
      // 调用all方法，判断后面的每项参数内是否包含第一个参数内的元素，如果都包含返回true，否则返回false
      return _.all(rest, function(other) { 
        return _.indexOf(other, item) >= 0;
      });
    });
  }

zip : function() {
    var args = _.toArray(arguments);
    var length = _.max(_.pluck(args, 'length'));
    var results = new Array(length);
    for (var i=0; i<length; i++) results[i] = _.pluck(args, String(i));
    return results;
  }

indexOf : function(array, item) {
    if (array.indexOf) return array.indexOf(item);
    var length = array.length;
    for (i=0; i<length; i++) if (array[i] === item) return i;
    return -1;
  }

bind : function(func, context) {
  	// 如果传入的执行上下文为空则直接返回
    if (!context) return func;
    var args = _.toArray(arguments).slice(2);
    return function() {
      // 合并_.bind()时传入的参数与调用_.bind()()时传入的参数进行合并
      var a = args.concat(_.toArray(arguments));
      // 调用apply方法，传入参数
      return func.apply(context, a);
    };
  }

bindAll : function() {
    var args = _.toArray(arguments);
    // 第一个参数为上下文
    var context = args.pop();
    _.each(args, function(methodName) {
      context[methodName] = _.bind(context[methodName], context);
    });
  }

delay : function(func, wait) {
    var args = _.toArray(arguments).slice(2);
    return window.setTimeout(function(){ return func.apply(func, args); }, wait);
  }

defer : function(func) {
    return _.delay.apply(_, [func, 1].concat(_.toArray(arguments).slice(1)));
  }

wrap : function(func, wrapper) {
    return function() {
      var args = [func].concat(_.toArray(arguments));
      return wrapper.apply(wrapper, args);
    };
  },

keys : function(obj) {
    return _.pluck(obj, 'key');
  }

values : function(obj) {
    return _.pluck(obj, 'value');
  }

extend : function(destination, source) {
    for (var property in source) destination[property] = source[property];
    return destination;
  }

clone : function(obj) {
    return _.extend({}, obj);
  }

isEqual : function(a, b) {
    // Check object identity.
    if (a === b) return true;
    // Different types?
    // 如果不是一个类型则直接返回false
    var atype = typeof(a), btype = typeof(b);
    if (atype != btype) return false;
    // Basic equality test (watch out for coercions).
    if (a == b) return true;
    // One of them implements an isEqual()?
    if (a.isEqual) return a.isEqual(b);
    // If a is not an object by this point, we can't handle it.
    if (atype !== 'object') return false;
    // Nothing else worked, deep compare the contents.
    var aKeys = _.keys(a), bKeys = _.keys(b);
    // Different object sizes?
    if (aKeys.length != bKeys.length) return false;
    // Recursive comparison of contents.
    for (var key in a) if (!_.isEqual(a[key], b[key])) return false;
    return true;
  }

isElement : function(obj) {
    return !!(obj && obj.nodeType == 1);
  }

isArray : function(obj) {
    return Object.prototype.toString.call(obj) == '[object Array]';
  }

isFunction : function(obj) {
    return typeof obj == 'function';
  }

isUndefined : function(obj) {
    return typeof obj == 'undefined';
  }

uniqueId : function(prefix) {
    var id = this._idCounter = (this._idCounter || 0) + 1;
    return prefix ? prefix + id : id;
  }

template : function(str, data) {
    var fn = new Function('obj', 
      'var p=[],print=function(){p.push.apply(p,arguments);};' +
      'with(obj){p.push(\'' +
      str
        .replace(/[\r\t\n]/g, " ") 
        .split("<%").join("\t") 
        .replace(/((^|%>)[^\t]*)'/g, "$1\r") 
        .replace(/\t=(.*?)%>/g, "',$1,'") 
        .split("\t").join("');") 
        .split("%>").join("p.push('") 
        .split("\r").join("\\'") 
    + "');}return p.join('');");
    return data ? fn(data) : fn;  
  }

var slice                 = ArrayProto.slice,
      unshift               = ArrayProto.unshift,
      toString              = ObjProto.toString,
      hasOwnProperty        = ObjProto.hasOwnProperty,
      propertyIsEnumerable  = ObjProto.propertyIsEnumerable;

var
    nativeForEach      = ArrayProto.forEach,
    nativeMap          = ArrayProto.map,
    nativeReduce       = ArrayProto.reduce,
    nativeReduceRight  = ArrayProto.reduceRight,
    nativeFilter       = ArrayProto.filter,
    nativeEvery        = ArrayProto.every,
    nativeSome         = ArrayProto.some,
    nativeIndexOf      = ArrayProto.indexOf,
    nativeLastIndexOf  = ArrayProto.lastIndexOf,
    nativeIsArray      = Array.isArray,
    nativeKeys         = Object.keys;

0.1.0
each : function(obj, iterator, context) {
    var index = 0;
    try {
   	  // 判断是否有传入的数据类型是否有forEach，有则执行
      if (obj.forEach) {
        obj.forEach(iterator, context);
      } else if (obj.length) {
      	// 没有forEach，然后判断是否是数组，是数组则使用for循环，然后调用回调函数，把参数传入
        for (var i=0; i<obj.length; i++) iterator.call(context, obj[i], i);
      } else if (obj.each) {
      	// 是否有each方法
        obj.each(function(value) { iterator.call(context, value, index++); });
      } else {
      	// 如果以上条件都不满足就使用for in 遍历，是对对象的一个扩展
        var i = 0;
        for (var key in obj) {
          var value = obj[key], pair = [key, value];
          pair.key = key;
          pair.value = value;
          iterator.call(context, pair, i++);
        }
      }
    } catch(e) {
      if (e != '__break__') throw e;
    }
    // 最后返回传入的数据
    return obj;
  }

1.0.0
var each = _.forEach = function(obj, iterator, context) {
    try {
      if (nativeForEach && obj.forEach === nativeForEach) {
        obj.forEach(iterator, context);
      } else if (_.isNumber(obj.length)) {
        for (var i = 0, l = obj.length; i < l; i++) iterator.call(context, obj[i], i, obj);
      } else {
        for (var key in obj) {
          if (hasOwnProperty.call(obj, key)) iterator.call(context, obj[key], key, obj);
        }
      }
    } catch(e) {
      if (e != breaker) throw e;
    }
    return obj;
  };

0.1.0
inject : function(obj, memo, iterator, context) {
    _.each(obj, function(value, index) {
      memo = iterator.call(context, memo, value, index);
    });
    return memo;
  }

1.0.0
reduce = function(obj, memo, iterator, context) {
    if (nativeReduce && obj.reduce === nativeReduce) return obj.reduce(_.bind(iterator, context), memo);
    each(obj, function(value, index, list) {
      memo = iterator.call(context, memo, value, index, list);
    });
    return memo;
  }

reduceRight = function(obj, memo, iterator, context) {
    if (nativeReduceRight && obj.reduceRight === nativeReduceRight) return obj.reduceRight(_.bind(iterator, context), memo);
    // clone一个数组的原因是，不影响到原数组
    var reversed = _.clone(_.toArray(obj)).reverse();
    return _.reduce(reversed, memo, iterator, context);
  }

0.1.0
select : function(obj, iterator, context) {
  	// 判断是否支持filter方法
    if (obj.filter) return obj.filter(iterator, context);
    var results = [];
    _.each(obj, function(value, index) {
      if (iterator.call(context, value, index)) results.push(value);
    });
    return results;
  }

1.0.0
filter = function(obj, iterator, context) {
    if (nativeFilter && obj.filter === nativeFilter) return obj.filter(iterator, context);
    var results = [];
    each(obj, function(value, index, list) {
      // 因为是直接靠返回来进行判断所以可以直接写成与操作符，代码更简洁
      iterator.call(context, value, index, list) && results.push(value);
    });
    return results;
  }

0.1.0
all : function(obj, iterator, context) {
    iterator = iterator || function(v){ return v; };
    if (obj.every) return obj.every(iterator, context);
    var result = true;
    _.each(obj, function(value, index) {
    	// 出现false就停止遍历
      result = result && !!iterator.call(context, value, index);
      if (!result) throw '__break__';
    });
    return result;
  }

1.0.0
every = function(obj, iterator, context) {
    // 抽成了一个单独的函数，便于公用
    iterator = iterator || _.identity;
    if (nativeEvery && obj.every === nativeEvery) return obj.every(iterator, context);
    var result = true;
    each(obj, function(value, index, list) {
      // 优化写法，先判断后赋值，让代码更简洁，抽出了breakLoop方法
      if (!(result = result && iterator.call(context, value, index, list))) _.breakLoop();
    });
    return result;
  }

0.1.0
any : function(obj, iterator, context) {
    iterator = iterator || function(v) { return v; };
    if (obj.some) return obj.some(iterator, context);
    var result = false;
    _.each(obj, function(value, index) {
      if (result = !!iterator.call(context, value, index)) throw '__break__';
    });
    return result;
  }

1.0.0
// 优化方式与every方法一致
some = function(obj, iterator, context) {
    iterator = iterator || _.identity;
    if (nativeSome && obj.some === nativeSome) return obj.some(iterator, context);
    var result = false;
    each(obj, function(value, index, list) {
      if (result = iterator.call(context, value, index, list)) _.breakLoop();
    });
    return result;
  }

0.1.0
include : function(obj, target) {
  	// 如果是数组，则用indexOf判断
    if (_.isArray(obj)) return _.indexOf(obj, target) != -1;
    var found = false;
    // 如果是对象
    _.each(obj, function(pair) {
      if (pair.value === target) {
        found = true;
        throw '__break__';
      }
    });
    return found;
  }

1.0.0
include = function(obj, target) {
    if (nativeIndexOf && obj.indexOf === nativeIndexOf) return obj.indexOf(target) != -1;
    var found = false;
    each(obj, function(value) {
      // 把赋值操作移到了判断语句之前
      if (found = value === target) _.breakLoop();
    });
    return found;
  }

0.1.0
pluck : function(obj, key) {
    var results = [];
    _.each(obj, function(value){ results.push(value[key]); });
    return results;
  }

1.0.0
pluck = function(obj, key) {
    return _.map(obj, function(value){ return value[key]; });
  }

0.1.0
max : function(obj, iterator, context) {
  	// 如果没有传入回调函数，且传入的集合为数组。则直接使用Math的max方法
    if (!iterator && _.isArray(obj)) return Math.max.apply(Math, obj);
    var result;
    _.each(obj, function(value, index) {
      // 用一个对象对报错上一个值，当当前值大于上一个值的时候，重新赋值一次，最后输出result.value最大值
      var computed = iterator ? iterator.call(context, value, index) : value;
      if (result == null || computed >= result.computed) result = {value : value, computed : computed};
    });
    return result.value;
  }

1.0.0
max = function(obj, iterator, context) {
    if (!iterator && _.isArray(obj)) return Math.max.apply(Math, obj);
    // 给了result一个比较的初始值，最小值，省调了result == null的判断，让代码更健壮，更合理
    var result = {computed : -Infinity};
    each(obj, function(value, index, list) {
      var computed = iterator ? iterator.call(context, value, index, list) : value;
      优化了if语句的写法
      computed >= result.computed && (result = {value : value, computed : computed});
    });
    return result.value;
  }

0.1.0
toArray : function(iterable) {
    if (!iterable) return [];
    if (_.isArray(iterable)) return iterable;
    // 否则调用map方法返回一个数组
    return _.map(iterable, function(val){ return val; });
  }

1.0.0
toArray = function(iterable) {
    if (!iterable)                return [];
    // 曾加了对自身具有toArray方法的支持判断
    if (iterable.toArray)         return iterable.toArray();
    if (_.isArray(iterable))      return iterable;
    // 增加了对arguments参数类型的转换方式
    if (_.isArguments(iterable))  return slice.call(iterable);
    // 改变了对象转换为数组的方式，因为values的实现就是return _.map(obj, _.identity)
    return _.values(iterable);
  }

0.1.0
first : function(array) {
    return array[0];
  }

1.0.0
first = function(array, n, guard) {
    return n && !guard ? slice.call(array, 0, n) : array[0];
  }

rest = function(array, index, guard) {
    // 如果index有值or guard为true则取index，反之取1
    return slice.call(array, _.isUndefined(index) || guard ? 1 : index);
  }

lastIndexOf = function(array, item) {
    if (nativeLastIndexOf && array.lastIndexOf === nativeLastIndexOf) return array.lastIndexOf(item);
    var i = array.length;
    while (i--) if (array[i] === item) return i;
    return -1;
  }

range = function(start, stop, step) {
    var a     = _.toArray(arguments);
    // 判断参数的个数
    var solo  = a.length <= 1;
    // 如果只有一个参数，start取0，反之取传入的第一个参数，
    // 如果只有一个参数，stop取0，反之取传入的第二个参数
    // step取第三个参数，如果第三个参数为空则默认给1
    var start = solo ? 0 : a[0], stop = solo ? a[0] : a[1], step = a[2] || 1;
    // 获取遍历的次数
    var len   = Math.ceil((stop - start) / step);
    if (len <= 0) return [];
    var range = new Array(len);
    for (var i = start, idx = 0; true; i += step) {
      // 当i - stop or  stop - i的值大于0时，停止变量，返回数组，大于0则停止遍历的原因是当step>0时，i=start，此时start - stop是要<0的，所以当>=0时表示i的值已经到stop or大于stop了；当step<0时，stop是要小于start的，所以stop - i 还是<0，后面同理
      if ((step > 0 ? i - stop : stop - i) >= 0) return range;
      range[idx++] = i;
    }
  }

0.1.0
bind : function(func, context) {
  	// 如果传入的执行上下文为空则直接返回
    if (!context) return func;
    var args = _.toArray(arguments).slice(2);
    return function() {
      // 合并_.bind()时传入的参数与调用_.bind()()时传入的参数进行合并
      var a = args.concat(_.toArray(arguments));
      // 调用apply方法，传入参数
      return func.apply(context, a);
    };
  }

1.0.0
bind = function(func, obj) {
    var args = _.rest(arguments, 2);
    return function() {
      return func.apply(obj || {}, args.concat(_.toArray(arguments)));
    };
  }

0.1.0
bindAll : function() {
    var args = _.toArray(arguments);
    // 第一个参数为上下文
    var context = args.pop();
    _.each(args, function(methodName) {
      context[methodName] = _.bind(context[methodName], context);
    });
  }

1.0.0
bindAll = function(obj) {
    // 获取除第一个参数之外的其它参数
    var funcs = _.rest(arguments);
    // 如果funcs为0，那么获取传入对象内方法集合，兼容参数的写法
    if (funcs.length == 0) funcs = _.functions(obj);
    each(funcs, function(f) { obj[f] = _.bind(obj[f], obj); });
    return obj;
  }

delay = function(func, wait) {
    var args = _.rest(arguments, 2);
    return setTimeout(function(){ return func.apply(func, args); }, wait);
  }

defer = function(func) {
    return _.delay.apply(_, [func, 1].concat(_.rest(arguments)));
  }

compose = function() {
    var funcs = _.toArray(arguments);
    return function() {
      // 获取_.compose()()调用时的参数
      var args = _.toArray(arguments);
      for (var i=funcs.length-1; i >= 0; i--) {
        // 从后往前调用函数，处理args
        args = [funcs[i].apply(this, args)];
      }
      // 返回args，所以这个函数主要目的是按函数依次处理_.compose()()传入的参数，并返回最终的处理结果
      return args[0];
    };
  }

0.1.0
keys : function(obj) {
    return _.pluck(obj, 'key');
  }

keys = nativeKeys || function(obj) {
    if (_.isArray(obj)) return _.range(0, obj.length);
    var keys = [];
    for (var key in obj) if (hasOwnProperty.call(obj, key)) keys.push(key);
    return keys;
  }

0.1.0
values : function(obj) {
    return _.pluck(obj, 'value');
  }

values = function(obj) {
    return _.map(obj, _.identity);
  };

functions = function(obj) {
    // 按key对应的value来进行过滤，然后调用sort来进行排序
    return _.filter(_.keys(obj), function(key){ return _.isFunction(obj[key]); }).sort();
  }

0.1.0
extend : function(destination, source) {
    for (var property in source) destination[property] = source[property];
    return destination;
  }

1.0.0
extend = function(obj) {
    // 获取除第一个参数之外的其它参数，即允许同时扩展多个对象
    each(_.rest(arguments), function(source) {
      for (var prop in source) obj[prop] = source[prop];
    });
    return obj;
  }

0.1.0
clone : function(obj) {
    return _.extend({}, obj);
  }

1.0.0
// 支持克隆数组
clone = function(obj) {
    if (_.isArray(obj)) return obj.slice(0);
    return _.extend({}, obj);
  }

0.1.0
isEqual : function(a, b) {
    // Check object identity.
    if (a === b) return true;
    // Different types?
    // 如果不是一个类型则直接返回false
    var atype = typeof(a), btype = typeof(b);
    if (atype != btype) return false;
    // Basic equality test (watch out for coercions).
    if (a == b) return true;
    // One of them implements an isEqual()?
    if (a.isEqual) return a.isEqual(b);
    // If a is not an object by this point, we can't handle it.
    if (atype !== 'object') return false;
    // Nothing else worked, deep compare the contents.
    var aKeys = _.keys(a), bKeys = _.keys(b);
    // Different object sizes?
    if (aKeys.length != bKeys.length) return false;
    // Recursive comparison of contents.
    for (var key in a) if (!_.isEqual(a[key], b[key])) return false;
    return true;
  }

1.0.0
isEqual = function(a, b) {
    // Check object identity.
    if (a === b) return true;
    // Different types?
    var atype = typeof(a), btype = typeof(b);
    if (atype != btype) return false;
    // Basic equality test (watch out for coercions).
    if (a == b) return true;
    // One is falsy and the other truthy.
    if ((!a && b) || (a && !b)) return false;
    // One of them implements an isEqual()?
    if (a.isEqual) return a.isEqual(b);
    // Check dates' integer values.
    if (_.isDate(a) && _.isDate(b)) return a.getTime() === b.getTime();
    // Both are NaN?
    if (_.isNaN(a) && _.isNaN(b)) return true;
    // Compare regular expressions.
    if (_.isRegExp(a) && _.isRegExp(b))
      return a.source     === b.source &&
             a.global     === b.global &&
             a.ignoreCase === b.ignoreCase &&
             a.multiline  === b.multiline;
    // If a is not an object by this point, we can't handle it.
    if (atype !== 'object') return false;
    // Check for different array lengths before comparing contents.
    if (a.length && (a.length !== b.length)) return false;
    // Nothing else worked, deep compare the contents.
    var aKeys = _.keys(a), bKeys = _.keys(b);
    // Different object sizes?
    if (aKeys.length != bKeys.length) return false;
    // Recursive comparison of contents.
    for (var key in a) if (!_.isEqual(a[key], b[key])) return false;
    return true;
  }

isEmpty = function(obj) {
    if (_.isArray(obj)) return obj.length === 0;
    for (var key in obj) if (hasOwnProperty.call(obj, key)) return false;
    return true;
  }

isArray = nativeIsArray || function(obj) {
    return !!(obj && obj.concat && obj.unshift);
  }

isArguments = function(obj) {
    // 具有length属性，排除数组，排除字符串，排除函数、排除自定义对象上的length属性
    return obj && _.isNumber(obj.length) && !obj.concat && !obj.substr && !obj.apply && !propertyIsEnumerable.call(obj, 'length');
  }

0.1.0
isFunction : function(obj) {
    return typeof obj == 'function';
  }

1.0.0
isFunction = function(obj) {
    return !!(obj && obj.constructor && obj.call && obj.apply);
  }

isString = function(obj) {
    return !!(obj === '' || (obj && obj.charCodeAt && obj.substr));
  }

isNumber = function(obj) {
    return (obj === +obj) || (toString.call(obj) === '[object Number]');
  }

isBoolean = function(obj) {
    return obj === true || obj === false;
  }

isDate = function(obj) {
    return !!(obj && obj.getTimezoneOffset && obj.setUTCFullYear);
  }

isRegExp = function(obj) {
    return !!(obj && obj.test && obj.exec && (obj.ignoreCase || obj.ignoreCase === false));
  }

isNaN = function(obj) {
    return _.isNumber(obj) && isNaN(obj);
  }

isNull = function(obj) {
    return obj === null;
  }

noConflict = function() {
    root._ = previousUnderscore;
    return this;
  }

identity = function(value) {
    return value;
  }

times = function (n, iterator, context) {
    for (var i = 0; i < n; i++) iterator.call(context, i);
  }

breakLoop = function() {
    throw breaker;
  }

each(_.functions(obj), function(name){
      addToWrapper(name, _[name] = obj[name]);
    });
  }

0.1.0
uniqueId : function(prefix) {
    var id = this._idCounter = (this._idCounter || 0) + 1;
    return prefix ? prefix + id : id;
  }

1.0.0
var idCounter = 0;
uniqueId = function(prefix) {
    var id = idCounter++;
    return prefix ? prefix + id : id;
  }

0.1.0
template : function(str, data) {
    var fn = new Function('obj', 
      'var p=[],print=function(){p.push.apply(p,arguments);};' +
      'with(obj){p.push(\'' +
      str
        .replace(/[\r\t\n]/g, " ") 
        .split("<%").join("\t") 
        .replace(/((^|%>)[^\t]*)'/g, "$1\r") 
        .replace(/\t=(.*?)%>/g, "',$1,'") 
        .split("\t").join("');") 
        .split("%>").join("p.push('") 
        .split("\r").join("\\'") 
    + "');}return p.join('');");
    return data ? fn(data) : fn;  
  }

1.0.0
templateSettings = {
    start       : '<%',
    end         : '%>',
    interpolate : /<%=(.+?)%>/g
  }
template = function(str, data) {
    var c  = _.templateSettings;
    var endMatch = new RegExp("'(?=[^"+c.end.substr(0, 1)+"]*"+escapeRegExp(c.end)+")","g");
    var fn = new Function('obj',
      'var p=[],print=function(){p.push.apply(p,arguments);};' +
      'with(obj){p.push(\'' +
      str.replace(/[\r\t\n]/g, " ")
         .replace(endMatch,"\t")
         .split("'").join("\\'")
         .split("\t").join("'")
         .replace(c.interpolate, "',$1,'")
         .split(c.start).join("');")
         .split(c.end).join("p.push('")
         + "');}return p.join('');");
    return data ? fn(data) : fn;
  }

  _.each     = _.forEach;
  _.foldl    = _.inject       = _.reduce;
  _.foldr    = _.reduceRight;
  _.select   = _.filter;
  _.all      = _.every;
  _.any      = _.some;
  _.head     = _.first;
  _.tail     = _.rest;
  _.methods  = _.functions;

var wrapper = function(obj) { this._wrapped = obj; };

var result = function(obj, chain) {
    return chain ? _(obj).chain() : obj;
  }

var addToWrapper = function(name, func) {
    wrapper.prototype[name] = function() {
      var args = _.toArray(arguments);
      // 将this._wrapped压入arguments内
      unshift.call(args, this._wrapped);
      //调用_[name].apply(_，args)
      return result(func.apply(_, args), this._chain);
    };
  }

// 将pop、push等原型上的方法扩展到wrapper的原型上来，注意这些方法只扩展到了wrapper的原型
each(['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift'], function(name) {
    var method = ArrayProto[name];
    wrapper.prototype[name] = function() {
      method.apply(this._wrapped, arguments);
      return result(this._wrapped, this._chain);
    };
  })

each(['concat', 'join', 'slice'], function(name) {
    var method = ArrayProto[name];
    wrapper.prototype[name] = function() {
      return result(method.apply(this._wrapped, arguments), this._chain);
    };
  })

wrapper.prototype.chain = function() {
    this._chain = true;
    return this;
  }

wrapper.prototype.value = function() {
    return this._wrapped;
  }

console.log(parseInt(10.23));
console.log(~~10.23);
console.log(10.23 >> 0);
console.log(10.23 | 0);

// 第一种方法
var maxArr = function (arr){
	return Math.max.apply(null, arr);
}

var minArr = function (arr){
	return Math.min.apply(null, arr);
}

// 第二种方法
arr.sort(function(a,b){return a - b;});//小到大
console.log(arr[arr.length - 1])//最大值
console.log(arr[0])//最小值

var getRandomColor = function (){
	return '#'+Math.random().toString(16).substr(2,6);
}

var deepCopy = function (obj){
        //注意函数不能使用该方法进行深拷贝，因为stringify方法无法对函数进行转换
	return JSON.parse(JSON.stringify(obj));
}

var util = (function (){
	var classtype;
	
	var init = function (){
		classtype = {};
		"Boolean Number String Function Array Date RegExp Object Error".split(" ").forEach(function (item, index){
				classtype["[object " + item + "]"] = item.toLowerCase();
		});
	}
	 return {
	 		checkType: function (obj){
	 			 if(!classtype){
	 			 		 init();
	 			 }
	 			 
	 			 if(obj == null){
				 		return obj + "";
				 }
	 			 
	 			 return typeof obj === "object" || typeof obj === "function" ? classtype[Object.prototype.toString.call(obj)] || "object" : typeof obj;
		 		}
		 }
})();

// 去两边空格
function trim(str) {
	return str.replace(/(^\s+)|(\s+$)/g, "");
}

// 去所有空格
function removeAllSpace(str) {
	return str.replace(/\s+/g, "");
}

常规方法是遍历整个对象，然后对对象的某个key对应的value进行更改，现在使用JSON.stringify方法，先将对象转化成字符串，然后了利用正则来进行转化
var a = {
    name: 'jack',
    isRequired: true
}

JSON.parse(JSON.stringify(a).replace(/true/g, 1));

当对象内需要替换的属性值相同的较多时，而只需要替换某一个key对应的value，则上面的方法就不适用了

var b = {
    name: 'jack',
    isRequired: true,
    isShow: true
}
var str = JSON.stringify(b, (key, value) => {
  if ( key === 'isRequired') {
     return value ? 1 : 0;
  }
  return value;
})

JSON.parse(str);

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

一般在使用日历插件的时候，需要设置最大日期与最小日期
最小日期一般很好获取，要么是个定值要么是当前值
const START_END_TIME = 7;
获取YYYY-MM-DD的日期格式
utilFormatDate(date) {
    const year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let fixMonth = month >= 10 ? month : '0' + month;
    let fixDay = day >= 10 ? day : '0' + day;
    let newDate = `${year}-${fixMonth}-${fixDay}`;
    return newDate;
},

getStartAndEndDate() {
    const date = new Date();
    const startDate = this.utilFormatDate(date);
    // 设置相隔START_END_TIME天数，如7获取7天后的月日，-1获取昨天的月日等等
    date.setDate(date.getDate() + START_END_TIME)
    const endDate = this.utilFormatDate(date);
    console.log(startDate, endDate);
    return {
        startDate,
        endDate
    }
}

const {startDate， endDate} = this.getStartAndEndDate();

document.cookie = 'name=qiu; max-age=9999; path=/; domain=domain; secure';
document.cookie = 'name=aaa; path=/; domain=domain; secure';

通过jsonp跨域
var script = document.createElement('script');
script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回调执行函数
function onBack(res) {
    alert(JSON.stringify(res));
}

document.domain + iframe跨域
此方案仅限主域相同，子域不同的跨域应用场景

1.）父窗口：(http://www.domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>
2.）子窗口：(http://child.domain.com/b.html)

document.domain = 'domain.com';
// 获取父窗口中变量
alert('get js data from parent ---> ' + window.parent.user);

var xhr = null;
    xhr = new XMLHttpRequest()
    // 2. 连接服务器
    xhr.open('get', url, true)
    // 3. 发送请求
    xhr.send(null);
    // 4. 接受请求
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                success(xhr.responseText);
            } else { // fail
                fail && fail(xhr.status);
            }
        }
    }

var oLis = document.getElmentsByTagName('li');

// 使用for循环遍历
for (var i = 0; i < oLis.length; i++) {}

// 将合集转换成数组,然后在遍历
var arrOlis = Array.prototype.slice.call(oLis);
var arrOlis = Array.from(oLis);
var arrOlis = [...oLis];

function hasClass (dom, className) {
     var reg = new RegExp('(^|\\s)' + className+ '(\\s|$)');
     return reg .test(dom.className);
}

function addClass (dom, clsName) {
    if (!hasClass(dom, clsName)) {
        let classStr = dom.getAttribute('class');
        dom.className = classStr.trim() + ' ' + clsName;
    }
};

function removeClass (dom, clsName) {
    if (hasClass(dom, clsName)) {
        let classStr = dom.getAttribute('class');
        let newClassStr = classStr.replace(clsName, '');
        dom.className = newClassStr;
    }
}

function toggleClass (dom, clsName) {
    if (hasClass(dom, clsName)) {
        removeClass(dom, clsName);
    } else {
        addClass(dom, clsName);
    }
};

try {
   throw '__break__';
} catch (e) {
   这里的e就是throw后面的内容
}

var numObj = 12345.6789;
numObj.toFixed();         // 返回 "12346"：进行四舍五入，不包括小数部分
numObj.toFixed(1);        // 返回 "12345.7"：进行四舍五入
numObj.toFixed(6);        // 返回 "12345.678900"：用0填充
(1.23e+20).toFixed(2);    // 返回 "123000000000000000000.00"

input[type='file'] {
    position: absolute;
    z-index: 999;
    height: 34px;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    font-size: 100px;
    cursor: pointer;
}

js获取iframe元素的window对象 window.iframes["name名字"]  兼容chrome,ff，ie9+   
document.getElementById("iframeid").contentWindow  or this.contentWindow

 jquery获取iframe元素的window对象  
$("iframe")[0].contentWindow

js获取iframe的document对象   window.iframes["name名字"].document   or document.getElementById("iframeid").contentWindow.document  or  this.contentWindow.document

jquery获取iframe的document对象  $("iframe")[0].contentWindow.document  or $(this.contentWindow.document)

js获取获取iframe的元素   
window.iframes["name名字"].document.getElementById("test")

jquery获取获取iframe的元素   $($("iframe")[0].document).find("#test")  or $(this.contentWindow.document).find(".ui-label-content-body")

js iframe获取父页面的window对象
window.parent  or parent

jquery获取iframe元素的window对象  
$(window.parent) or $(parent)

js获取iframe的document对象   
window.parent.document

jquery获取iframe的document对象  
$(window.parent.document) or $(parent.document)
 
 js获取获取iframe的元素   
window.parent.document.getElementById("test") or parent.document.getElementById("test")

 jquery获取获取iframe的元素   $("#test", parent.document)  or $(window.parent.document).find("#test"); or $(parent.document).find("#test");

// code种类code11、code39、code93、code128、ean8、ean13、std25、int25、msi、datamatrix
$("#bcTarget").barcode("156130510575933", "code128",{
 barWidth: 2,        //单条条码宽度（即最小条码宽度）
 barHeight: 50,     //单体条码高度
 addQuietZone: false,  //是否添加空白区（内边距）
 moduleSize: 5,
 showHRI: true, //是否显示底部条码描述
 marginHRI: 5, //底部条码的margin-top
 bgColor: "#FFF", //设置条码的背景颜色(包括底部的描述在内)
 color: "#000",//设置条码的字体颜色(包括底部的描述在内)
 fontSize: 10, 
 output: "css",  //渲染方式 css/bmp/svg/canvas
 posX: 10, //没什么用
 posY: 20 //没什么用
});

$canvas = $("<canvas></canvas>");
$canvas.JsBarcode("PD170622000001", { //注意这个插件只支持img，canvas,svg这三种标签生成条形码
        format: "CODE128", //选择条码生成的类型，这里选code128表示一般商用
        lineColor: "#000", //条形码颜色
        width: 2, // 条码间距
        height: 40, // 条码高度
        text: "PD170622000001",
        fontSize: 14, 
        displayValue: true, //是否显示条码下面的值
        font: "Arail",
        textAlign: "left",
        textPosition: "bottom",
        textMargin: 2,
//      background: #ccc,
        margin: 0,
        fontOptions: "bold",
        valid: function (){ //生成之后的回调
        	console.log(111111);
        }
    });
$canvas.appendTo($("#box"));

1. 提供命名空间及模块化开发
var WMS = {
    util: {
        util_random: function (){
            return Math.random();
        }
    },
    Tool: {
        tool1_getEle: function (id){
            return document.getElementById(id)
        }
    },
    Ajax: {
        get: function (){

        },
        post: function (){

        }
    }
}

2. 提供私有变量及方法（主要是利用自执行函数来完成）
//还可以用来设置静态变量
var Conf = (function (){
    var conf = {
        MAX_NUM: 500,
        MIN_NUM: 1,
        length: 10
    }

    var getConfValue = function (attr){
        return conf[attr] ? conf[attr] : null;
    }

    return {
        get: getConfValue
    }
})();

//取值
var minNnm = Conf.get("MIN_NUM");

// 惰性单例
var lazySingle = (
      var _instance = null;
      
      var fn = function () {
          var name = null;
          return {
              getName: function () {
                   return name;
              },
              setName: function (name) {
                   name = name;
              }
         }
     }

     return function () {
           if (!_instance) {
               _instance = fn();
           }
           return _instance
     }

)(); 

lazySingle().setName('jack');
lazySingle().getName();

var Basketball = function () {   
}

Basketball.prototype = {
      getName: function () {
            return this.name;
      },
      setName: function (name) {
            this.name = name;
      }
}

var Football = function () {   
}

Football.prototype = {
      getName: function () {
            return this.name;
      },
      setName: function (name) {
            this.name = name;
      }
}

var Tennis = function () {   
}

Tennis.prototype = {
      getName: function () {
            return this.name;
      },
      setName: function (name) {
            this.name = name;
      }
}
// 工厂类
var Factory = function (name) {
      switch (name) {
          case 'NBA':
              return new Basketball();
          case 'wordcup':
              return new Football();
          case 'FrenchOpen':
              return new Tennis();
      }
} 

var footnall = Factory('wordcup');
footnall.getName();

var Observer = (function (){
    var _message = {};
    return {
        regist: function (type,fn){ //注册方法
            if(typeof _message[type] === 'undefined'){ //如果没有改类型，则在容器内添加一个数组
                _message[type] = [fn];
            }else {
                _message[type].push(fn); //如果已经注册了该消息类型，那么把回调推送到消息队列中
            }
        },
        fire: function (type,args){//发布方法
            if(!_message[type])return;
            var events = {
                type: type,
                args: args || {},
            };
            for(var i=0; i<_message[type].length; i++){
                _message[type][i].call(this,events);
            }

        },
        remove: function (type,fn){//删除方法
            if(_message[type] instanceof Array){
                var i = _message[type].length - 1;
                for(;i>=0;i--){
                    _message[type][i] === fn && _message[type].splice(i,1)
                }
            }
        }
    }
})();

//注意一定要先订阅，才能在发布的时候收到消息，因为只有先注册，把注册的回调push到容器中，那么在发布的时候才能利用call方法来调已经注册在容器中的方法，并且把内容传入到回调函数中
Observer.regist("test",function (e){
    console.log(e.args);
});

Observer.fire("test",{age: 18, name: "jack"});

// 举个例子
//消息的展示
(function (){
    var addMsgItem = function (e){
        var text = e.args.text,
        msg = document.getElementById("msg"),
        li = document.createElement("li"),
        span = document.createElement("span");

        span.innerHTML = "X";
        li.innerHTML = text;
        span.onclick = function (){
            msg.removeChild(li);
            Observer.fire("removeCommentMsg",{
                num: -1
            });
        }

        li.appendChild(span);
        msg.appendChild(li);
    }

    Observer.regist("addCommentMsg",addMsgItem);
})();

//头部消息数量的变化
(function (){
    var numEle = document.getElementById("msgNum");
    numEle.innerHTML = document.getElementById("msg").children.length;
    var changeNum = function (e){
        var num = e.args.num;
            console.log(parseInt(numEle.innerHTML));
            numEle.innerHTML = parseInt(numEle.innerHTML) + num;
    }

    Observer.regist("addCommentMsg",changeNum);
    Observer.regist("removeCommentMsg",changeNum);
})();

//发布评论
(function (){
    var btn = document.getElementById("btn"),
        textarea = document.getElementById("text");
    btn.onclick = function (){
        if(!textarea.value)return;
        Observer.fire("addCommentMsg",{
            num: 1,
            text: textarea.value
        })
        textarea.value = "";
    }
})();

var addEvent = function (ele,type,fn){
    if(ele.addEventListener){
        ele.addEventListener(type,fn,false);
    }else if(ele.attachEvent){
        ele.attachEvent("on"+type,fn);
    }else {
        ele["on"+type] = fn;
    }
}

//单例模式加外观模式定义一个小型方法库
var util = {
    addEvent: function (ele,type,fn){
        if(ele.addEventListener){
            ele.addEventListener(type,fn,false);
        }else if(ele.attachEvent){
            ele.attachEvent("on"+type,fn);
        }else {
            ele["on"+type] = fn;
        }
    },
    getEvent: function (e){
        return e || window.event;
    },
    getTarget: function (e){
        var e = this.getEvent(e);
        return e.target || e.srcElement;
    },
    preventDefault: function (e){
        var e = this.getEvent(e);
        if(e.preventDefault) {
            e.preventDefault();
        }else {
            e.returnValue = false;
        }
    },
    stopPropogation: function (e){
        var e = this.getEvent(e);
        if(e.stopPropagation){
            e.stopPropagation();
        }else {
            e.cancelBubble = true;
        }
    }

}
var oBtn = document.getElementById("btn");
var test = function (e){
    var e = util.getEvent(e),
        target = util.getTarget(e);

    util.preventDefault(e);
    util.stopPropogation(e);
    console.log("test");
}
util.addEvent(oBtn,"click",test);

var decorator = function (id,fn){
    var oBtn = document.getElementById(id);
    if(typeof oBtn.onclick === "function"){
        var oldFn = oBtn.onclick;//获取之前绑定在click事件上的回调函数
        oBtn.onclick = function (){
            oldFn();
            fn();
        }
    }else {
        oBtn.onclick = fn;
    }
}

var showResult2 = (function (){
    var myStatus = {
        status0: function (){
            console.log("statu0");
        },
        status2: function (){
            console.log("statu2");
        },
        status3: function (){
            console.log("statu3");
        },
        status4: function (){
            console.log("statu4");
        },
        status5: function (){
            console.log("statu5");
        },
    }

    var show = function (result){
        myStatus["status" + result] && myStatus["status" + result]();
    }
    return {
        show: show
    }
})();

showResult2.show(3);

基础设置
document.cookie = 'type=js'; ===  document.cookie =  'type=js;domain=localhost(当前域名);path=/;expires= 1969-12-31T23:59:59.000Z;';

设置带失效时间的cookie
document.cookie = 'type=js; max-age=60*60;'
document.cookie = 'type=js; expires="Sun, 10 Jun 2018 09:02:01 GMT"'

设置domain与path的cookie
document.cookie = 'type=js; max-age=60*60;domain=www.baidu.com; path=/' 需要注意不能在自己网页的js中设置cookie的domain为其它域名的domain

设置安全协议连接才允许访问的cookie
document.cookie = 'type=js; max-age=60*60; domain=www.baidu.com; path=/; secure' 

// 删除当前页面也就是path下的所有cookie的方法
function deletCookies(path = '/') {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i];
        const eqPos = cookie.indexOf('=');
        const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=" + path;
    }
}

function deletCookies(path = '/') {
    const cookies = document.cookie.split(";");
    cookies.forEach(function(c) { 
        document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=" + path); 
    });
}

// 删除所有目录下的cookie,需要注意的是这个方法需要在最子的目录页面上执行

function deletAllCookies() {
    const paths = ['/', '/page', 'basic'];
    
    for (let i = 0; i < paths.length; i++) {
        deletCookies(paths[i]);
    }
}

axios.defaults.withCredentials = true;

var fn1 = function (arr){
	var arr1 = [];
	for(var i=0; i<arr.length; i++){
		if(arr1.indexOf(arr[i]) === -1){
			arr1.push(arr[i]);
		}
	}
	return arr1
}

var fn3 = function (arr){ 
	var arrObj = {},
		arr2 = [];
	for(var j=0; j<arr.length; j++){
                //区分1与'1'
		var typeEle = typeof arr[j] + arr[j];
		if(!arrObj[typeEle]){
			arrObj[typeEle] = 1;
			arr2.push(arr[j]);
		}
	}
	return arr2
}

var fn4 = function (arr){
	var ret = [];
	arr.forEach(function (item,index,ar){
		if(ar.indexOf(item) === index){
			ret.push(item);
		}
	})
	return ret;
}

var fn6 = function (arr){ // 当数组内有字母时，去重不准确
	var ret = [];
	arr = arr.sort(function (x,y){
		return x-y
	})
	var end = arr[0];
	ret.push(end);
	for(var i=1; i<arr.length; i++){
		if(arr[i] !== end){
			ret.push(arr[i]);
			end = arr[i];
		}
	}
	return ret;
}

var fn12 = function (arr){
	return arr.filter(function (item, index, array){
		return index === array.indexOf(item);
	})
}

var fn7 = function (arr){
	  var max = 1,
		typeEle, 
		ret = [],
		retObj = {},
		maxItem = []; 
		
	for(var i=0; i<arr.length; i++){
		typeEle = typeof arr[i] + arr[i];
		if(!retObj[typeEle]){
			ret.push(arr[i]);
			retObj[typeEle] = 1;
		}else {
			retObj[typeEle]++;
		}
		
		if(retObj[typeEle] === max){
			maxItem.push(arr[i]);
		}else if (retObj[typeEle] > max){
			maxItem.length = 0;
			max = retObj[typeEle];
			maxItem.push(arr[i]);
		}
	}
	
	return {
		maxItem: maxItem, //重复项最多的项
		ret: ret, //去重后的数组
		max: max, //重复的最大次数
		retObj: retObj //无重复项的对象
	}
}

var fn8 = function (arr){
	arr.sort(function (x,y){
//		return x-y //小到大
		return y-x //大到小
	});
	return arr;
}

var fn9 = function (arr){
	var temp;
	for(var i=0; i<arr.length-1; i++){
		for(var j=0; j<arr.length-1-i; j++){
			if(arr[j]>arr[j+1]){//从小到大
				temp = arr[j];
				arr[j] = arr[j+1];
				arr[j+1] = temp;
			}
		}
	}
	return arr;
}

var fn10 = function (arr){
	var max,
		k;
	for(var i=0; i<arr.length-1; i++){
		max = arr[i];
		k = i;
		for(var j=i+1; j<arr.length; j++){
			if(arr[j]>max){
				max = arr[j];
				k = j;
			}
		}
		arr[k] = arr[i];
		arr[i] = max;
	}
	return arr;
}

第一种是作为可执行程序，需要注意的是，一定要写成 ./test.sh，而不是 test.sh，运行其它二进制的程序也一样，直接写 test.sh，linux 系统会去 PATH 里寻找有没有叫 test.sh 的，而只有 /bin, /sbin, /usr/bin，/usr/sbin 等在 PATH 里，你的当前目录通常不在 PATH 里，所以写成 test.sh 是会找不到命令的，要用 ./test.sh 告诉系统说，就在当前目录找

chmod +x ./test.sh  #使脚本具有执行权限
./test.sh  #执行脚本

第二种是作为解释器参数
/bin/sh test.sh
/bin/php test.php

name="jack" 
echo $name
echo ${name}

name="rose"
readonly name

name="rose"
unset name
echo $name // 为空

获取字符串的长度${#name}
截取字符串${#name:1:3}

定义数组：数组名=(值1 值2 ... 值n)
读取数组：${数组名[下标]}，使用 @ 符号可以获取数组中的所有元素
获取数组的长度：length=${#array_name[@]} or length=${#array_name[*]}

arr=(1 3 5 7)
echo ${arr[1]} ${#arr[@]}

echo $1 $2 $3 $# $* $?

a=10
b=5
echo `expr $a + $b`
if [ $a == $b ]
then
   echo "a 等于 b"
fi
if [ $a != $b ]
then
   echo "a 不等于 b"
fi

if [ $a -eq $b ]
then
   echo "$a -eq $b : a 等于 b"
else
   echo "$a -eq $b: a 不等于 b"
fi

str="i am fine"
str1="i am fine"

if [ -z "$str" ]
then
    echo '为0'
else
    echo '不为0'
fi 

if [ "$str1" ]
then
    echo '不为空'
else
    echo '为空'
fi 

file="./test.sh"
file1="./src"

if [ -x $file ]
then
   echo "文件可执行"
else
   echo "文件不可执行"
fi

if [ -s $file ]
then
   echo "文件不为空"
else
   echo "文件为空"
fi

if [ -d $file1 ]
then
   echo "文件是目录"
else
   echo "文件不是目录"
fi

if [ -e $file ]
then
   echo "文件存在"
else
   echo "文件不存在"
fi

a=5
b=10
// 二者等价
if [ $a -eq $b ]
then
   echo "$a -eq $b : a 等于 b"
else
   echo "$a -eq $b: a 不等于 b"
fi

if test $a -eq $b 
then
   echo "$a -eq $b : a 等于 b"
else
   echo "$a -eq $b: a 不等于 b"
fi

// 二者等价
if [ -e $file ]
then
   echo "文件存在"
else
   echo "文件不存在"
fi

if test -e $file
then
    echo "文件存在"
else
   echo "文件不存在"
fi

if condition
then
    command1 
    command2
    ...
    commandN 
fi

if condition1
then
    command1
elif condition2 
then 
    command2
else
    commandN
fi

for var in item1 item2 ... itemN
do
    command1
    command2
    ...
    commandN
done

while condition
do
    command
done

int=1
while(( $int<=5 ))
do
    echo $int
    let "int++"
done

for loop in 1 2 3 4 5
do
    if test $loop -gt "3"
    then 
        echo '循环break'
        break
    else
        echo "The value is: $loop"
    fi
done

for loop in 1 2 3 4 5
do
    if test $loop -eq "3"
    then 
        echo '循环continue'
        continue
    else
        echo "The value is: $loop"
    fi
done

echo '输出重定向' > redict.txt
echo '输出重定向覆盖' > redict.txt
echo '输出重定向追加' >> redict.txt

#!/bin/sh
# To enable this hook, rename this file to "pre-commit".

echo 'hello wolrd'

npm run prettier && npm run lint:fix && npm run lint

git add .

#!/bin/sh

# To enable this hook, rename this file to "pre-commit".

echo "pre-commit"

# git rev-parse --show-toplevel显示顶级目录的绝对路径

ESLINT="$(git rev-parse --show-toplevel)/node_modules/.bin/eslint"
PRETTIER="$(git rev-parse --show-toplevel)/node_modules/.bin/prettier"

STAGE_FILES_JS=$(git diff --cached --name-only --diff-filter=ACM -- '*.js')
STAGE_FILES_VUE=$(git diff --cached --name-only --diff-filter=ACM -- '*.vue')

if test ${#STAGE_FILES_JS} -gt 0
then 
	echo '开始eslint检查js'

	# 第一种检查方式
	# which eslint &> /dev/null
	# if [[ "$?" == 1 ]]; then
	# 	echo '没有安装eslint'
	# 	exit 1
	# fi

	# which prettier &> /dev/null
	# if [[ "$?" == 1 ]]; then
	# 	echo '没有安装prettier'
	# 	exit 1
	# fi

	# 第二种检查方式
	# if [[ ! -x "$ESLINT" ]]; then
 #      echo "\t\033[41mPlease install ESlint\033[0m (npm i --save --save-exact --dev eslint)"
 #      exit 1
 #    fi

 	# 跟第一种检查方式一样，只不过使用相对路径
 	which ./node_modules/.bin/eslint &> /dev/null
	if [[ "$?" == 1 ]]; then
		echo '没有安装eslint'
		exit 1
	fi 

    if [[ ! -x "$PRETTIER" ]]; then
       echo "\t\033[41mPlease install prettier\033[0m (npm i --save --save-exact --dev prettier)"
       exit 1
    fi


	PASS1=true

	for FILE1 in $STAGE_FILES_JS
	do
		# 如果是本地安装的eslint则需要使用变量，且需要使用"$ESLINT" "$FILE"而不是eslint "$FILE"
		"$PRETTIER" "$FILE1" --write --parser flow
		./node_modules/.bin/eslint "$FILE1" 
		if [[ "$?" == 1 ]]; then
		PASS1=false
	fi
  done

  if ! $PASS1; then
	echo 'eslint js未通过'
	exit 1
  else 
	echo 'eslint js通过'
  fi

else
	echo '暂存区没有需要检查的js文件'
fi

if test ${#STAGE_FILES_VUE} -gt 0
then 
	echo '开始eslint检查vue'

	PASS2=true

	for FILE2 in $STAGE_FILES_VUE
	do
		# 如果是本地安装的eslint则需要使用变量，且需要使用"$ESLINT" "$FILE"而不是eslint "$FILE"
		"$PRETTIER" "$FILE2" --write --parser vue
		# "$ESLINT" "$FILE2" 
		./node_modules/.bin/eslint "$FILE2" 
		if [[ "$?" == 1 ]]; then
		PASS2=false
	fi
  done

  if ! $PASS2; then
	echo 'eslint vue未通过'
	exit 1
  else 
	echo 'eslint vue通过'
  fi

else
	echo '暂存区没有需要检查的vue文件'
fi

exit 0

#!/bin/bash

# pre-commit

echo 'pre-commit start'

# 检查是否安装eslint，注意路径，根据自己的实际项目路径填写
eslint="../../node_modules/.bin/eslint"
prettier="../../node_modules/.bin/prettier"
echo $(git rev-parse --show-prefix)
if test -x $eslint && test -x $prettier
then
  echo "eslint及prettier存在"
elif test -x $eslint
then
  echo "prettier依赖不存在请进行安装"
  exit 1
else
  echo "eslint依赖不存在请进行安装"
  exit 1
fi

# 获取当前git仓库内暂存区文件

STATGE_FILES=$(git diff --cached --name-only --diff-filter=ACM '*.js' '*.vue')
FILE_VUE_TYPE="vue"

if test ${#STATGE_FILES} -gt 0
then 
  echo "当前暂存区内有${#STATGE_FILES}个js or vue文件"

  # 遍历暂存区文件，使用eslint检查及prettier格式化代码
  PAAS=true
  for file in $STATGE_FILES
    do
      # 通过${file##*.}来获取文件后缀，判断是否是js文件还是vue文件
      if test ${file##*.} = $FILE_VUE_TYPE
      then
        $prettier $file --parser vue --write
      else
        $prettier $file --parser flow --write
      fi

      # eslint检查
      $eslint $file --color

      # 判断eslint执行的结果如果最后执行的命令返回不是0表示eslint检查不通过
      if test $? -ne 0
      then
        PAAS=false
      fi
    done

  if ! $PAAS
  then
    echo "eslint不通过"
    exit 1
  else 
    echo "eslint通过"
  fi

else 
  echo "当前暂存区内有没js及vue文件"
fi

exit 0

//页面的加载完毕可以使用onreadystatechange事件来进行dom结构的加载，通过readyState的状态值来进行判断，dom事件加载完毕，complate加载完成
//interactive（交互）也就是正在加载的意思
var complateLoading = function (){
	if(document.readyState == "complete"){
		var oMask = document.getElementById("mask");
			oMask.style.display = "none";
	}
}

var ajaxRequest = function (){  //这是第一种方式  就是利用beforesend方法（ajax请求前）来显示loading，success，error方法完成之后再none 掉loading
	var oMask = document.getElementById("mask");
	$.ajax({
		type:"get",
		url:"http://127.0.0.1:8020/小结文档/json/nes.json",
		data: "",
		beforeSend: function (){
				oMask.style.display = "block";
		},
		success: function (data){
			console.log(data);
			oMask.style.display = "none";
		},
		error: function (data){
			console.log(data);
			oMask.style.display = "none";
		}
	});
}

var ajaxRequestAll = function (){
	$.ajax({
		type:"get",
		url:"http://127.0.0.1:8020/小结文档/json/new.json",
		data: "",
		success: function (data){
			console.log(data);
		},
		error: function (data){
			console.log(data);
		}
	});
}

$.ajaxSetup({  //第二个思路就是利用ajaxSetup来进行全局配置loading
	beforeSend: function (){ //请求之前的操作
		console.log("beforeSend");
		var oMask = document.getElementById("mask");
			oMask.style.display = "block";
	},
	complete: function (){  //不论请求成功还是失败
		console.log("complete");
		var oMask = document.getElementById("mask");
			oMask.style.display = "none";
	}
});

document.onreadystatechange = complateLoading;

实现一个LazyMan，可以按照以下方式调用:
LazyMan(“Hank”)输出:
Hi! This is Hank!

LazyMan(“Hank”).sleep(10).eat(“dinner”)输出
Hi! This is Hank!
//等待10秒..
Wake up after 10
Eat dinner~

LazyMan(“Hank”).eat(“dinner”).eat(“supper”)输出
Hi This is Hank!
Eat dinner~
Eat supper~

LazyMan(“Hank”).sleepFirst(5).eat(“supper”)输出
//等待5秒
Wake up after 5
Hi This is Hank!
Eat supper

var LazyMan = function (opt) {
	return new Wrap(opt);
}

var Wrap = function (opt) {
	this.task = [];
	this.opt = opt;
	var _this = this;
	
	var fn = (function (opt) {
		return function () {
			console.log('Hi! This is' + opt + '!');
			_this.next();
		}
	})(opt);
	
	this.task.push(fn);
	setTimeout(function () {
		_this.next();
	}, 0);
}

Wrap.prototype = {
	next: function () {
		var fn = this.task.shift();
		fn && fn.apply(this, arguments);
	},
	eat: function (name) {
		var _this = this;
		var fn = (function (name) {
			return function () {
				console.log('Eat ' + name);
				_this.next();
			}
		})(name);
		this.task.push(fn);
		return this;
	},
	sleep: function (time) {
		var _this = this;
		var fn = (function () {
			return function () {
				setTimeout(function () {
					console.log('Wake up after ' + time);
					_this.next();
				}, time);
			}
		})(time);
		
		this.task.push(fn);
		return this;
	},
	sleepFirst: function (time) {
		var _this = this;
		
		var fn = (function () {
			return function () {
				setTimeout(function () {
					console.log('Wake up after ' + time);
					_this.next();
				}, time);
			}
		})(time);
		
		this.task.unshift(fn);
		
		return this;
	}
}

LazyMan('Hank');
LazyMan('Hank').sleep(1000).eat('dinner');
LazyMan('Hank').eat('dinner').eat('supper');
LazyMan('Hank').sleepFirst(2000).eat('supper');