$scope.modal.grade = $scope.modal.grades[2];//高一在数组的位置角标为2

var gulp = require('gulp');
var connect = require('gulp-connect');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
//以上是项目需要引入的插件

var buildConfig = {
    IS_RELEASE_BUILD: true,
    styleDir: 'web/css',//导出的css目录
    htmlDir: 'web/**/*.html',//监控的HTML文件
    watchSass: 'web/**/*.scss'//监控的sass文件  **表示所有
};

gulp.task('server', function() {
    connect.server({
        livereload: true  //实时刷新
    });
});

gulp.task('start', ['server', 'watch-sass', 'watch-html']);
gulp.task('default', ['server', 'watch-sass', 'watch-html']);

gulp.task('watch-sass', ['sass'], function(donw) {
    gulp.watch(buildConfig.watchSass, ['sass']);
    console.log("====== watching hec sass files... =====");
});

gulp.task('sass', function(done) {
    gulp.src("web/exam.scss")
        .pipe(sass())
        .pipe(gulp.dest(buildConfig.styleDir))
        .pipe(minifyCss({
            keepSpecialComments: 0
        }))
        .pipe(rename({
            extname: '.min.css'
        }))
        .pipe(gulp.dest(buildConfig.styleDir))
        .on('end', done);
});

gulp.task('watch-html', function() {
    gulp.watch(buildConfig.htmlDir, ['html']);
});

gulp.task('html', function() {
    gulp.src(buildConfig.htmlDir)
        .pipe(connect.reload());
});

if (!HTMLElement.prototype.addTapEvent) {
    HTMLElement.prototype.addTapEvent = function(callback) {
        var tapStartTime = 0,
            tapEndTime = 0,
            tapTime = 500, //tap等待时间，在此事件下松开可触发方法
            tapStartClientX = 0,
            tapStartClientY = 0,
            tapEndClientX = 0,
            tapEndClientY = 0,
            tapScollHeight = 15, //水平或垂直方向移动超过15px测判定为取消（根据chrome浏览器默认的判断取消点击的移动量)
            cancleClick = false;
        this.addEventListener('touchstart', function() {
            tapStartTime = event.timeStamp;
            var touch = event.changedTouches[0];
            tapStartClientX = touch.clientX;
            tapStartClientY = touch.clientY;
            cancleClick = false;
        })
        this.addEventListener('touchmove', function() {
            var touch = event.changedTouches[0];
            tapEndClientX = touch.clientX;
            tapEndClientY = touch.clientY;
            if ((Math.abs(tapEndClientX - tapStartClientX) > tapScollHeight) || (Math.abs(tapEndClientY - tapStartClientY) > tapScollHeight)) {
                cancleClick = true;
            }
        })
        this.addEventListener('touchend', function() {
            tapEndTime = event.timeStamp;
            if (!cancleClick && (tapEndTime - tapStartTime) <= tapTime) {
                callback();
            }
        })
    }
}

HTMLElement.addTapEvent(function(){
	//do something...
})
如：
document.querySelect('#test').addTapEvent(function(){
	alert('this is a tap event');
})

mounted() {
  // 基于准备好的dom，初始化echarts实例
  this.myChart = echarts.init(document.querySelector('.multipleColumn .main'))
  this.myChart.setOption(this.options) //this.options为echarts的配置，详情可去我的gitHub查看
}

this.$nextTick(() => {
  this._init()
})

//100返30
function return30(price) {
    //dosomething
}
//100返50
function return50(price) {
    //dosomething
}
//9折
function percent90(price) {
    //dosomething
}
...

function priceStrategy(algorithm,price) {
    switch (algorithm) {
        case 'return30':
            //dosomething
            break;
        case 'return50':
            //dosomething
            break;
        case 'percent90':
            //dosomething
            break;
    }
}
//调用方式
priceStrategy('return30',999);

//价格策略对象
var priceStrategy = function() {
    var strategy {
        return30: function(price) {
            //do something
        },
        return50: function(price) {
            //do something
        },
        percent90: function(price) {
            //do something
        },
        percent50: function(price) {
            //do something
        }
    }
    //算法调用接口
    return function(algorithm, price) {
        //如果算法存在，则调用算法，否则返回false
        return strategy[algorithm] && strategy[algorithm](price);
    }
}();

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { State } from "vuex-class";

@Component
export default class Shops extends Vue {
  @State shops: StoreState.shop[];
  @State searchVal: string;

  get shopList(): StoreState.shop[] {
    const shops = this.shops;
    const searchVal = this.searchVal;
    return shops.filter(
      (el: StoreState.shop) => el.shopName.indexOf(searchVal) > -1
    );
  }
}
</script>

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
},
{
    test: /\.ts$/,
    loader: 'ts-loader',
    options: {
      appendTsSuffixTo: [/\.vue$/],
    }
}

extensions: ['.js', '.vue', '.json', '.ts']

{
  "include": [
    "src/*",
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    // types option has been previously configured
    "types": [
      // add node as an option
      "node"
    ],
    // typeRoots option has been previously configured
    "typeRoots": [
      // add path to @types
      "node_modules/@types"
    ],
    // 以严格模式解析
    "strict": true,
    // 在.tsx文件里支持JSX
    "jsx": "preserve",
    // 使用的JSX工厂函数
    "jsxFactory": "h",
    // 允许从没有设置默认导出的模块中默认导入
    "allowSyntheticDefaultImports": true,
    // 启用装饰器
    "experimentalDecorators": true,
    "strictFunctionTypes": false,
    // 允许编译javascript文件
    "allowJs": true,
    // 采用的模块系统
    "module": "esnext",
    // 编译输出目标 ES 版本
    "target": "es5",
    // 如何处理模块
    "moduleResolution": "node",
    // 在表达式和声明上有隐含的any类型时报错
    "noImplicitAny": true,
    "lib": [
      "dom",
      "es5",
      "es6",
      "es7",
      "es2015.promise"
    ],
    "sourceMap": true,
    "pretty": true
  }
}

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

import Vue from "vue";
import Component from "vue-class-component";

@Component
export default class App extends Vue {
  name:string = 'Simon Zhang'

  // computed
  get MyName():string {
    return `My name is ${this.name}`
  }

  // methods
  sayHello():void {
    alert(`Hello ${this.name}`)
  }

  mounted() {
    this.sayHello();
  }
}

export default {
  data () {
    return {
      name: 'Simon Zhang'
    }
  },

  mounted () {
    this.sayHello()
  },

  computed: {
    MyName() {
      return `My name is ${this.name}`
    }
  },

  methods: {
    sayHello() {
      alert(`Hello ${this.name}`)
    },
  }
}

import Vue from "vue";
import Component from "vue-class-component";
import { State, Action, Getter } from "vuex-class";

@Component
export default class App extends Vue {
  name:string = 'Simon Zhang'
  @State login: boolean;
  @Action initAjax: () => void;
  @Getter load: boolean;

  get isLogin(): boolean {
    return this.login;
  }

  mounted() {
    this.initAjax();
  }
}

export default {
  data() {
    return {
      name: 'Simon Zhang'
    }
  },

  mounted() {
    this.initAjax()
  },

  computed: {
    login() {
      return this.$store.state.login
    },
    load() {
      return this.$store.getters.load
    }
  },

  methods: {
    initAjax() {
      this.$store.dispatch('initAjax')
    }
  }
}

declare module 'vue-awesome-swiper' {
  export const swiper: any
  export const swiperSlide: any
}

declare module 'vue-lazyload'

export default class modules extends Vue {
  @State login: boolean; // 对应this.$store.state.login
  @State headline: StoreState.headline[]; // 对应this.$store.state.headline

  private swiperOption: Object = {
    autoplay: true,
    loop: true,
    direction: "vertical"
  };

  logoClick(): void {
    alert("点我干嘛");
  }
}

axios.get(url).then((res)=>{
  this.data = res.data
})

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

router.push('test')

export default {
  method:{
  	click(){
  	  Vue.$emit('add',{}) //第二个参数可作为传递数据传送到监听端口，不需要则传空对象
  	}
  }
}

export default {
  created(){
   Vue.$on('add',this.add)
  },
  method:{
  	add(){
  	  this.count++
  	}
  }
}

function foo(){
	console.log(this.a)
}

var a = 3;

var obj = {
	a: 2,
	foo: foo
};

obj.foo(); // 输出2,因为是obj调用的foo，所以foo的this指向了obj，而obj.a = 2

function foo() {
    console.log( this.a )
}

var obj2 = { 
    a: 42,
    foo: foo
}

var obj1 = {
    a: 2,
    obj2: obj2
}

obj1.obj2.foo(); // 42

function foo() {
    console.log( this.a )
}

var obj1 = {
    a: 2,
    foo: foo
}

var bar = obj1.foo; // 函数别名！

var a = "oops, global"; // a是全局对象的属性

bar(); // "oops, global"

function foo() {
    console.log( this.a )
}

function doFoo( fn ){
    // fn 其实引用的是 foo
    fn(); // <-- 调用位置！
}

var obj = {
    a: 2,
    foo: foo
}

var a = "oops, global"; // a是全局对象的属性

doFoo( obj.foo ); // "oops, global"

function foo( something ) {
    console.log( this.a, something)
    return this.a + something
}

var obj = {
    a: 2
}

var bar = function() {
    return foo.apply( obj, arguments)
}

var b = bar(3); // 2 3
console.log(b); // 5

function foo( something ) {
    console.log( this.a, something)
    return this.a + something
}

var obj = {
    a: 2
}

var bar = foo.bind(obj)

var b = bar(3); // 2 3
console.log(b); // 5

function foo(a){
    this.a = a
}

var bar = new foo(2);
console.log(bar.a); // 2

function foo(a){
    console.log(this.a)
}

var obj1 = {
    a: 2,
    foo: foo
}

var obj2 = {
    a: 3,
    foo: foo
}

obj1.foo(); // 2
obj2.foo(); // 3

obj1.foo.call(obj2); // 3
obj2.foo.call(obj1); // 2

function foo(a){
    this.a = something
}

var obj1 = {
    foo: foo
}

var obj2 = {}

obj1.foo(2); 
console.log(obj1.a); // 2

obj1.foo.call(obj2,3);
console.log(obj2.a); // 3

var bar = new obj1.foo(4)
console.log(obj1.a); // 2
console.log(bar.a); // 4

function foo(something){
    this.a = something
}

var obj1 = {}

var bar = foo.bind(obj1);
bar(2);
console.log(obj1.a); // 2

var baz = new bar(3);
console.log(obj1.a); // 2
console.log(baz.a); // 3

function foo(p1,p2){
    this.val = p1 + p2;
}

// 之所以使用null是因为在本例中我们并不关心硬绑定的this是什么
// 反正使用new时this会被修改
var bar = foo.bind(null,'p1');

var baz = new bar('p2');

baz.val; // p1p2
}

function foo() {
	// 返回一个箭头函数
	return (a) => {
		// this继承自foo()
		console.log(this.a)
	};
}

var obj1 = {
	a: 2
};

var obj2 = {
	a: 3
};

var bar = foo.call(obj1);
bar.call(obj2); // 2, 不是3！

created() {
  addEventListener('touchmove', this.touchmove, false)
},
beforeDestroy() {
  removeEventListener('touchmove', this.touchmove, false)
}

Vue.use(VueLazyload, {
  error: require('./assets/img/defaultpic_small.png'),
  filter: {
    webp (listener: any, options: any) {
      if (!options.supportWebp) return
      // listener.src += '.webp'
    }
  }
});

import Router from 'vue-router'
import store from './store'

store.dispatch('initAjax')

{
  path: '/order',
  component: () => import('./views/order.vue')
}

<template>
  <div>
    <HellowWorld v-if="showHello" />
  </div>
</template>
<script>
export default {
  components: { HellowWorld: () => import('../components/HelloWorld.vue') },
  data() {
    return {
      showHello: false
    }
  },
  methods: {
    initAsync() {
      addEventListener('scroll', (e) => {
        if (scrollY > 100) {
          this.showHello = true
        }
      })
    }
  }
}
</script>

// 以定位插件为例
const latitude = getUrlParam('latitude')
const longitude = getUrlParam('longitude')
// 如果没有经纬度参数，则使用定位插件来获取经纬度
if (!latitude || !longitude) {
  // 首次加载定位插件
  // webpack4写法，若使用webpack3及以下，则await import('locationPlugin')即可
  if (!this.WhereAmI) this.WhereAmI = (await import('locationPlugin')).default
  // do sth...
}

var json = {
    item1: {
        buckets: [
            {
                key: 'item1_1',
                item2: {
                    buckets: [
                        {
                            key: 'item2_1',
                            item3: {
                                buckets: [
                                    {
                                        key: 'item3_1',
                                        name: 'name'
                                    }, {
                                        key: 'item3_2',
                                        name: ''
                                    }
                                ]
                            }
                        }, {
                            key: 'item2_2',
                            item3: {
                                buckets: [
                                    {
                                        key: 'item3_1',
                                        name: 'name'
                                    }
                                ]
                            }
                        }, {
                            key: 'item2_3',
                            item3: {
                                buckets: [
                                    {
                                        key: 'item3_1',
                                        name: 'name'
                                    }
                                ]
                            }
                        }
                    ]
                }
            }, {
                key: 'item1_2',
                item2: {
                    buckets: [
                        {
                            key: 'item2_1',
                            item3: {
                                buckets: [
                                    {
                                        key: 'item3_1',
                                        name: 'name'
                                    }
                                ]
                            }
                        }, {
                            key: 'item2_2',
                            item3: {
                                buckets: [
                                    {
                                        key: 'item3_1',
                                        name: 'name'
                                    }
                                ]
                            }
                        }
                    ]
                }
            }
        ]
    }
}
var filedArr = ['item1', 'item2', 'item3', 'name']
var arr = []
function recursion(obj, tempObj, index) {
    var key = filedArr[index];
    for (var i = 0; i < obj[key].buckets.length; i++) {
        tempObj[key] = obj[key].buckets[i].key
        if (index == filedArr.length - 2) {
            var temp = JSON.stringify(tempObj)
            arr.push(JSON.parse(temp))
        } else {
            recursion(obj[key].buckets[i], tempObj, index + 1)
        }
    }
}
recursion(json, {}, 0);
console.log(arr);

//在构造器中修饰对象实例
function MyObject(){
	this.yyy = ...;
}

//新的对象创建方法
newObj = Object.create(prototypeObj,PropertyDescriptors);

var aPrototypeObject = {name1:"value1"};
var aNewInstance = Object.create(aPrototypeObject,{
	name2:{value:'value2'},
	name3:{get:function(){ return 'value3' }}
})

Object.forIn = function(obj){
	var Result = [];
	for(var n in obj) Result.push(n);
	return Result;
}

var obj1 = {n1:100};
var obj2 = Object.create(obj1,{n2 : {value :200,enumerable:true}});

//显示'n1' , 'n2'
//  - 其中n1继承自obj1
alert(Object.forIn(obj2));

//显示'n2'
alert(Object.keys(obj2));

// (续上例)

//定义属性名n3,其enumerable性质默认为false
Object.defineProperty(obj2,'n3',{value:300})

//仍然显示'n1','n2'
// - 新定义的n3不可见
alert(Object.forIn(obj2));

//显示'n2'
alert(Object.keys(obj2));

//显示n2,n3
alert(Object.getOwnPropertyNames(obj2));

var pOld,pNew;
var obj = { data : 'oldValue'}

//显示'value,writable,enumerable,configuable'
pOld = Object.getOwnPropertyDescriptor(obj,'data');
alert(Object.keys(pOld));

//步骤一：通过一个闭包来保存旧的obj.data的值
Object.defineProperty(obj,'data',function(oldValue){
	return {
		get:function(){ return oldValue},
		configurable:false
	}
}(obj.data))

//显示'get,set,enumerable,configurable'
pNew = Object.getOwnPropertyDescriptor(obj,'data');
alert(pNew);

//步骤二：测试使用重定义的getter来取obj.data的值
// - 显示 'oldValue'
alert(obj.data);

//步骤三：（测试）尝试再次声明data属性
// - 由于在步骤一中已经设置configurable为false，因此导致异常(can't redefine)。
Object.defineProperty(obj,'data',{value:100});

var obj1 = {n1 : 100};
var obj2 = Object.create(obj1);

//显示为空
// - 重置n1的enumerable性质为false，因此在obj1中是不可见的
Object.defineProperty(obj1,'n1',{enumerable:false})
alert(Object.keys(obj1));

//显示为空
// - n1不是obj2的自有属性
alert(Object.getOwnPropertyNames(obj2));

//显示n1
// - 由于n1赋值导致新的属性描述符，因此n1成为了自有的属性
obj2.n1 = 'newValue';
alert(Object.getOwnPropertyNames(obj2));

//显示n1,表明n1是可见的
// - 由于新的属性描述符的enumerable重置为true，因此在obj2中它是可见的
alert(Object.keys(obj2));

var obj1 = {n1 : 100};
var obj2 = Object.create(obj1);

//对于原型对象obj1,修改其属性n1的性质，使其不可列举、修改、且不能重设性质
Object.defineProperty(obj1,'n1',{writable:false,enumerable:false,configurable:false});

//显示为空,obj1.n1是不可列举的
alert(Object.keys(obj1));

//由于不可重设性质，因此对obj1.n1的下述调用将导致异常
//Object.defineProperty(obj1,'n1',{configurable:true});

//(续上例)

//重新定义obj2.n1
Object.defineProperty(obj2,'n1',{value:obj2.n1,writable:true,enumerable:true,configurable:true});

//显示newValue'
// - 结论:可以通过重定义属性，使该属性从"只读"变成"可读写"（以及其他性质的变化）
obj2.n1 = 'newValue';
alert(obj2.n1);

//列举obj2的自有性质，结果显示：n1
// - 现在n1是自有的属性了
alert(Object.getOwnpropertyNames(obj2));

//尝试删除该属性
// - 显示100，即它在原型中的值
delete obj2.n1;
alert(obj2.n1);

function MyObject() {
    function foo() {}
    this.method = foo;
}
obj1 = new MyObject();
obj2 = new MyObject();

//显示false，表明产生了两个对象
console.log(obj1.method === obj2.method);

var obj = new Object();
for (var i = 0; i < 5; i++) {
    obj['method' + i] = function() {
        console.log(i);
    }
}
console.log(obj.method2 === obj.method3);

var obj = new Object();
var events = {
  m1:'clicked',
  m2:'changed'
}
for(e in events){
  obj[e] = function () {
    console.log(events[e]);
  }
}
//显示false，表明是不同的函数实例
console.log(obj.m1 === obj.m2);

//方法m1()和m2()都都出相同值
//其原因，在于两个方法都访问全局闭包中的同一个upvalue值。
obj.m1();
obj.m2();

var obj = new Object();
var events = {
    m1: 'clicked',
    m2: 'changed'
}
for (e in events) {
    obj[e] = function(aValue) { //闭包lv1
        return function() { //闭包lv2
            console.log(events[aValue]);
        }
    }(e)
}

/*或者使用如下代码，在闭包内通过局部变量保存数据。
for (e in events) {
    obj[e] = function() { //闭包lv1
        var aValue = e;
        return function() { //闭包lv2
            console.log(events[aValue]);
        }
    }()
}*/

//下面将输出不同的值
obj.m1();
obj.m2();

var obj = new Object();
var events = {
    m1: 'clicked',
    m2: 'changed'
}
for (e in events) {
    (obj[e] = function(aValue) {
        //arguments.callee指向匿名函数自身
        console.log(events[arguments.callee.aValue]);
    }).aValue = e;
}
//下面将输出不同的值
obj.m1();
obj.m2();

history.pushState({
     "page": "productList"
 }, "首页", "");

window.onpopState = function(){
	var json = window.history.state;//获取当前所在的state
    if (json && json.page == "home") { //page即是pushState时设置的参数
        if (searchParams.sourceUrl && !selected) {
            history.go(-1);
        } else {
            document.querySelector('.product-page').removeCls('show');
            document.querySelector(".visit-hospital-page").classList.remove("show");
        }
    }}

history.go(-1);//返回一个页面
history.go(-2);//返回两个页面
以此类推