使用Vue2.0自定义一个v-model

2020-10-13

Vue2.0

组件代码

<template>
    <div class="custom-input">
        <input :value="value" @input="$_handleChange" />
    </div>
</template>
<script>
export default {
    props: {
        value: {
        type: String,
        default: ''
        }
    },
    methods: {
        $_handleChange(e) {
        this.$emit('input', e.target.value)
        }
    }
}
</script>

在代码中使用组件

<template>
    <custom-input v-model="value"></custom-input>
</template>
<script>
    export default {
        data() {
            return {
                value: ''
            }
        }
    }
</script>

在Vue2.0中我们通过为组件设置名为value属性同时触发名为input的事件来实现的v-model，当然也可以通过model来修改属性名和事件名

使用Vue3.0自定义一个v-model示例

组件代码

<template>
  <div class="custom-input">
    <input :value="value" @input="_handleChangeValue" />
  </div>
</template>
<script>
export default {
    props: {
        value: {
        type: String,
        default: ""
        }
    },
    name: "CustomInput",
    setup(props, { emit }) {
        function _handleChangeValue(e) {
            // vue3.0 是通过emit事件名为 update:modelValue来更新v-model的
            emit("update:value", e.target.value);
        }
        return {
            _handleChangeValue
        };
    }
};
</script>

在代码中使用组件

<template>
  <!--在使用v-model需要指定modelValue-->
  <custom-input v-model:value="state.inputValue"></custom-input>
</template>
<script>
import { reactive } from "vue";
import CustomInput from "../components/custom-input";
export default {
    name: "Home",
    components: {
        CustomInput
    },
    setup() {
        const state = reactive({
            inputValue: ""
        });
        return {
            state
        };
    }
};
</script>

到了Vue3.0中，因为一个组件支持多个v-model，所以v-model的实现方式有了新的改变。首先我们不需要使用固定的属性名和事件名了，在上例中因为是input输入框，属性名我们依然使用的是value，但是也可以是其他任何的比如name,data,val等等，而在值发生变化后对外暴露的事件名变成了update:value，即update:属性名。而在调用组件的地方也就使用了v-model:属性名来区分不同的v-model。

展开全文 >>

拖拽的那些事儿

2020-08-06

<template>
    <div
        class="contain"
        :id="`drag`+index"
        :ref="`drag`+index"
        draggable="true"
        @dragstart="handleDragstart"
        @drag="handleDrag"
        @drop="handleOndrop"
        @dragover="allowDrop"
    >
        <slot></slot>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    // 唯一标识，必传
    props: {
        index: {
            type: Number,
            required: true,
        },
    },
    methods: {
        swapElements(a, b) {
            // 交换两个dom元素
            if (a === b) {
                return;
            }
            // 记录父元素
            const bParent = b.parentNode;
            const aParent = a.parentNode;
            // 记录下一个同级元素
            const aNext = a.nextElementSibling;
            const bNext = b.nextElementSibling;
            // 如果参照物是邻近元素则直接调整位置
            if (aNext === b) {
                bParent.insertBefore(b, a);
                return;
            }
            if (bNext === a) {
                aParent.insertBefore(a, b);
                return;
            }
            if (a.contains(b)) {
                aParent.insertBefore(b, a);
                bParent.insertBefore(a, bNext);
                // return aParent.insertBefore(b, a), bParent.insertBefore(a, bn);
                return;
            }
            bParent.insertBefore(a, b);
            aParent.insertBefore(b, aNext);
        },
        handleDragstart(ev) {
            ev.dataTransfer.setData('dragDom', ev.target.id);
        },
        handleDrag() {
            // eslint-disable-next-line no-console
            console.log('drag-在元素开始时反复触发');
        },
        handleDragend() {
            // eslint-disable-next-line no-console
            console.log('dragend-在拖动操作完成时触发');
        },
        allowDrop(ev) {
            ev.preventDefault();
        },
        handleOndrop(event) {
            const data = event.dataTransfer.getData('dragDom');
            console.log(document.getElementById(data), event.target, '这两个dom');
            this.swapElements(document.getElementById(data), event.currentTarget);
            console.log(event.target, 'dragend-放下时时触发');
        },
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        dragInit() {},
    },
    components: {},
    mounted() {
        this.dragInit();
    },
};
</script>
<style>
.contain {
  cursor: pointer;
}
</style>

调用

<template>
    <div class="box">
        <dragAndDrop
            class="contain"
            v-for="(item, index) in arr"
            :key="index"
            :index="index"
        >
            {{index}}
        </dragAndDrop>
    </div>
</template>
<script>
import dragAndDrop from './components/drag';
export default {
    data() {
        return {
            arr: [],
        };
    },
    methods: {
    },
    components: {
        dragAndDrop,
    },
    mounted() {
        this.arr = new Array(9).fill(null);
        // this.dragInit();
    },
};
</script>
<style>
.box {
  display: flex;
  flex-wrap: wrap;
}
.contain {
  width: 200px;
  height: 200px;
  background: purple;
  margin: 20px;
  font-size: 40px;
}
</style>

参考：
可实现demo: https://juejin.im/post/6844903824784621581

前置知识：
https://juejin.im/post/6844903513491767303#heading-6

sortablejs中文配置：
http://www.sortablejs.com/options.html

sortablejs demo:
https://sortablejs.github.io/Sortable/#swap

展开全文 >>

Vue之render源码解析

2020-06-03

前言

render函数可以作为一道分割线，render函数的左边可以称之为编译期，将Vue的模板转换为渲染函数。render函数的右边是Vue的运行时，主要是基于渲染函数生成Virtual DOM树，Diff和Patch。

render渲染函数将结合数据生成Virtual DOM
有了虚拟的DOM树后，再交给Patch函数，负责把这些虚拟DOM真正施加到真实的DOM上。在这个过程中，Vue有自身的响应式系统来侦测在渲染过程中所依赖到的数据来源。在渲染过程中，侦测到数据来源之后就可以精确感知数据源的变动。
根据需要重新进行渲染。当重新进行渲染之后，会生成一个新的树，将新的树与旧的树进行diff对比，就可以最终落实到真实DOM上的改动。

一个简单的实例：

render-example

vue的渲染机制可以总结如下：

render-process

render前置操作

为何要用with(this){}包裹？
何时将render函数的字符串转成函数？

1. 为何要用with(this){}包裹

with通常被当做重复引用同一个对象中的多个属性的快捷方式，可以不需要重复引用对象本身。引自《你不知道的JavaScript》上2.2.2节with

2. 何时将render函数的字符串转成函数(vue2.6.11)

经过parse生成AST和optimize对AST树的优化，会生成render函数的字符串。在createCompilerCreator（在src\compiler\create-compiler.js）中，调用createCompileToFunctionFn将字符串转成函数。

// src\compiler\index.js
import { parse } from './parser/index'
import { optimize } from './optimizer'
import { generate } from './codegen/index'
import { createCompilerCreator } from './create-compiler'

// `createCompilerCreator` allows creating compilers that use alternative
// parser/optimizer/codegen, e.g the SSR optimizing compiler.
// Here we just export a default compiler using the default parts.
// createCompilerCreator做了render的前置操作
export const createCompiler = createCompilerCreator(function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  const ast = parse(template.trim(), options)
  if (options.optimize !== false) {
    optimize(ast, options)
  }
  const code = generate(ast, options)
  return {
    ast,
    render: code.render, // 此时还是render函数的字符串
    staticRenderFns: code.staticRenderFns
  }
})

// src\compiler\create-compiler.js
import { extend } from 'shared/util'
import { detectErrors } from './error-detector'
import { createCompileToFunctionFn } from './to-function'

export function createCompilerCreator (baseCompile: Function): Function {
  return function createCompiler (baseOptions: CompilerOptions) {
    function compile (
      template: string,
      options?: CompilerOptions
    ): CompiledResult {
      const finalOptions = Object.create(baseOptions)
      const errors = []
      const tips = []
      finalOptions.warn = (msg, tip) => {
        (tip ? tips : errors).push(msg)
      }

      if (options) {
        // merge custom modules
        if (options.modules) {
          finalOptions.modules =
            (baseOptions.modules || []).concat(options.modules)
        }
        // merge custom directives
        if (options.directives) {
          finalOptions.directives = extend(
            Object.create(baseOptions.directives || null),
            options.directives
          )
        }
        // copy other options
        for (const key in options) {
          if (key !== 'modules' && key !== 'directives') {
            finalOptions[key] = options[key]
          }
        }
      }

      const compiled = baseCompile(template, finalOptions)
      if (process.env.NODE_ENV !== 'production') {
        errors.push.apply(errors, detectErrors(compiled.ast))
      }
      compiled.errors = errors
      compiled.tips = tips
      return compiled
    }

    return {
      compile,
      compileToFunctions: createCompileToFunctionFn(compile)
    }
  }
}

createCompileToFunctionFn（在src\compiler\to-function.js）中，会优先读缓存信息，若没有才会执行编译方法，同时将render字符串通过createFunction调用New Function()的方法，创造render函数，然后缓存信息。

/* @flow */

import { noop, extend } from 'shared/util'
import { warn as baseWarn, tip } from 'core/util/debug'
import { generateCodeFrame } from './codeframe'

type CompiledFunctionResult = {
  render: Function;
  staticRenderFns: Array<Function>;
};

function createFunction (code, errors) {
  try {
    return new Function(code)
  } catch (err) {
    errors.push({ err, code })
    return noop
  }
}

export function createCompileToFunctionFn (compile: Function): Function {
  const cache = Object.create(null)

  return function compileToFunctions (
    template: string,
    options?: CompilerOptions,
    vm?: Component
  ): CompiledFunctionResult {
    options = extend({}, options)
    const warn = options.warn || baseWarn
    delete options.warn

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production') {
      // detect possible CSP restriction
      try {
        new Function('return 1')
      } catch (e) {
        if (e.toString().match(/unsafe-eval|CSP/)) {
          warn(
            'It seems you are using the standalone build of Vue.js in an ' +
            'environment with Content Security Policy that prohibits unsafe-eval. ' +
            'The template compiler cannot work in this environment. Consider ' +
            'relaxing the policy to allow unsafe-eval or pre-compiling your ' +
            'templates into render functions.'
          )
        }
      }
    }

    // check cache
    const key = options.delimiters
      ? String(options.delimiters) + template
      : template
    if (cache[key]) {
      return cache[key]
    }

    // compile
    const compiled = compile(template, options)

    // check compilation errors/tips
    if (process.env.NODE_ENV !== 'production') {
      if (compiled.errors && compiled.errors.length) {
        if (options.outputSourceRange) {
          compiled.errors.forEach(e => {
            warn(
              `Error compiling template:\n\n${e.msg}\n\n` +
              generateCodeFrame(template, e.start, e.end),
              vm
            )
          })
        } else {
          warn(
            `Error compiling template:\n\n${template}\n\n` +
            compiled.errors.map(e => `- ${e}`).join('\n') + '\n',
            vm
          )
        }
      }
      if (compiled.tips && compiled.tips.length) {
        if (options.outputSourceRange) {
          compiled.tips.forEach(e => tip(e.msg, vm))
        } else {
          compiled.tips.forEach(msg => tip(msg, vm))
        }
      }
    }

    // turn code into functions
    const res = {}
    const fnGenErrors = []
    res.render = createFunction(compiled.render, fnGenErrors)
    res.staticRenderFns = compiled.staticRenderFns.map(code => {
      return createFunction(code, fnGenErrors)
    })

    // check function generation errors.
    // this should only happen if there is a bug in the compiler itself.
    // mostly for codegen development use
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production') {
      if ((!compiled.errors || !compiled.errors.length) && fnGenErrors.length) {
        warn(
          `Failed to generate render function:\n\n` +
          fnGenErrors.map(({ err, code }) => `${err.toString()} in\n\n${code}\n`).join('\n'),
          vm
        )
      }
    }

    return (cache[key] = res)
  }
}

参考：

https://juejin.im/post/5d09c587e51d454f71439ce2

展开全文 >>

Vue之vuex在ts中的应用

2020-05-21

之前在使用 Vuex 的时候，主要是依赖 state、getters、mutations 以及 actions，并且可以将它们模块化

state 状态

import { Module, VuexModule } from 'vuex-module-decorators'

@Module
export default class Vehicle extends VuexModule {
    wheels = 2
}
// 来替代之前的
export default {
    state: {
        wheels: 2
    }
}

Getter 与 class-style 中的 computed 类似，也是借助 getters 来实现的

import { Module, VuexModule } from 'vuex-module-decorators'

@Module
export default class Vehicle extends VuexModule {
    wheels = 2
    get axles() {
        return this.wheels / 2
    }
}
// 来代替之前的
export default {
    state: {
        wheels: 2
    },
    getters: {
        axles: (state) => state.wheels / 2
    }
}

Mutation 用来修改 state，与 Vuex in js 一样，只能用来实现同步操作

import { Module, VuexModule, Mutation } from 'vuex-module-decorators'

@Module
export default class Vehicle extends VuexModule {
    wheels = 2

    @Mutation
    puncture(n: number) {
        this.wheels = this.wheels - n
    }
}
// 来替代之前的
export default {
    state: {
        wheels: 2
    },
    mutations: {
        puncture: (state, payload) => {
            state.wheels = state.wheels - payload
        }
    }
}

actions 用来实现异步操作

// import { Module, VuexModule, Mutation } from 'vuex-module-decorators'

// @Module
// export default class Vehicle extends VuexModule {
//     wheels = 2

//     @Mutation
//     addWheel(payload: number) {
//         this.wheels = this.wheels + payload
//     }    
// }
const request = require('request')
export default {
    state: {
        wheels: 2
    },
    mutations: {
        addWheel: (state, payload) => {
            state.wheels = state.wheels + payload
        }
    },
    actions: {
        fetchNewWheels: async (context, payload) => {
            const wheels = await request.get(payload)
            context.commit('addWheel', wheels)
        }
    }
}

// 来替代之前的

const request = require('request')
export default {
    state: {
        wheels: 2
    },
    mutations: {
        addWheel: (state, payload) => {
            state.wheels = state.wheels + payload
        }
    },
    actions: {
        fetchNewWheels: async (context, payload) => {
            const wheels = await request.get(payload)
            context.commit('addWheel', wheels)
        }
    }
}

以上，我们简单实现了一个 Vuex 的 module，那么如何使用呢？将上述代码梳理一下，并配置到 Vuex 中，具体

import { Module, VuexModule } from 'vuex-module-decorators'

@Module({ name: 'Vehicle',  namespaced: true, stateFactory: true })
export default class Vehicle extends VuexModule {
    public wheels = 2;
    get axles() {
        return this.wheels / 2;
    }
    @Mutation
    public puncture(n: number): void {
        this.wheels = this.wheels - n;
    }
}

请注意 Module 的配置，我们需要将需要 namespaced: true，并且为该空间命名，并且引入到项目中

import Vue from 'vue'
import Vuex from 'vuex'
import Vehicle from './Vehicle'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        Vehicle,
    },
})

之后就是使用 vuex-class，来获取该命名空间下的状态以及方法

import { Component, Vue } from 'vue-property-decorator';
import {
    Getter,
    Mutation,
    namespace,
} from 'vuex-class';

const Vehicle = namespace('Vehicle');

@Component
export default class HelloWorld extends Vue {
	// 引入 Vechicle 下的 Getters
    @Vehicle.Getter('axles') public axles: number | undefined;
    // 引入 Vechicle 下的 puncture
    @Vehicle.Mutation('puncture')
    public mutationPuncture!: (n: number) => void;

    private message: string = 'world';

    public render() {
        const { message, axles, mutationPuncture }: HelloWorld = this;

        return (
            <div onClick={ () => mutationPuncture(1) }>
                <h5 ref='quickEntry'>Hello {message} { axles }</h5>
            </div>
        );
    }
}

利用 namespace 可以很方便的获取到 Vuex 的 Vehicle 模块，再配合 Getter、Mutation 就可以完成引入

总体来说整个体验的过程很像之前写 Mobx & React in Typescript 的感觉，很相像。在实际项目中使用的话，会有 ts 带来的一些便利，但是也感觉总有些牵强，其他后续 3.0，看看能否与 ts 产生奇妙的化学反应吧。

展开全文 >>

Vue之vue-property-decorator

2020-05-19

使用

1、安装npm install –save vue-property-decorator

@Component (from vue-class-component)
@Prop
@Model
@Watch
@Emit
@Inject
@Provide
Mixins (the helper function named mixins defined at vue-class-component)

2、@Component

import { componentA,componentB } from '@/components';

export default {
    components: {
        componentA,
        componentB,
    },
    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.focus()
            }
        }
    }
}

ts写法

import { Component, Vue } from 'vue-property-decorator';
import { componentA,componentB } from '@/components';

@Component({
    components: {
        componentA,
        componentB,
    },
    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.focus()
            }
        }
    }
})
export default class YourComponent extends Vue{
   
}

3、@Prop 父子组件之间值的传递

export default {
    props: {
        propA: String, // propA: Number
        propB: [String, Number],
        propC: 
            type: Array,
            default: () => {
                return ['a','b']
            },
            required: true,
            validator: (value) => {
                return [
                    'a',
                    'b'
                ].indexOf(value) !== -1
            }
        }
    }
}

ts写法


import { Component, Vue, Prop} from vue-property-decorator;

@Component
export default class YourComponent extends Vue {
    @Prop(String)
    propA: string;
    
    @Prop([String, Number])
    propB: string|number;
    
    @Prop({
        type: String, // type: [String , Number]
        default: 'default value', // 一般为String或Number
        //如果是对象或数组的话。默认值从一个工厂函数中返回
        // defatult: () => {
        //     return ['a','b']
        // }
        required: true,
        validator: (value) => {
            return [
            'InProcess',
            'Settled'
            ].indexOf(value) !== -1
        }
    })
    propC: string;    
}

4、@Model (组件之间，checkbox)

父组件中使用 v-model=”checked” 子组件

1	<input type="checkbox" :checked="checked" @change="change">

js写法（2.2.0+ 新增）

export default {
    model: {
        prop: 'checked',
        event: 'change'
    },
    props: {
        checked: {
            type: Boolean
        }
    },
    methods: {
        change(e) {
            this.$emit('change', e.target.checked)
        }
    }
}

ts写法

import { Vue, Component, Model, Emit } from 'vue-property-decorator';

@Component
export default class YourComponent extends Vue{

    @Model('change', {
        type: Boolean
    })
    checked!:boolean;
    
    @Emit('change')
    change(e: MouseEvent) {

    }
    
}

5、@Watch

export default {
    watch: {
        'person': {
            handler: 'onPersonChanged',
            immediate: true,
            deep: true
        }
    },
    methods: {
        onPersonChanged(val, oldVal) { }
    }
}

ts写法

import { Vue, Component, Watch } from 'vue-property-decorator';

@Component
export default class YourComponent extends Vue{
    @Watch('person', { immediate: true, deep: true })
    onPersonChanged(val: Person, oldVal: Person) { }
}

6、@Emit

由@Emit $emit 定义的函数发出它们的返回值，后跟它们的原始参数。如果返回值是promise，则在发出之前将其解析。

如果事件的名称未通过事件参数提供，则使用函数名称。在这种情况下，camelCase名称将转换为kebab-case。

js写法

export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
        addToCount(n) {
            this.count += n
            this.$emit('add-to-count', n)
        },
        resetCount() {
            this.count = 0
            this.$emit('reset')
        },
        returnValue() {
            this.$emit('return-value', 10)
        },
        promise() {
            const promise = new Promise(resolve => {
                setTimeout(() => {
                    resolve(20)
                }, 0)
            })

            promise.then(value => {
                this.$emit('promise', value)
            })
        }
    }
}

import { Vue, Component, Emit } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
    count = 0

    @Emit()
    addToCount(n: number) {
        this.count += n
    }

    @Emit('reset')
    resetCount() {
        this.count = 0
    }

    @Emit()
    returnValue() {
        return 10
    }

    @Emit()
    promise() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(20)
            }, 0)
        })
    }
}

参考：
https://juejin.im/post/5c173a84f265da610e7ffe44

展开全文 >>

Vue源码解析值sfc

2020-04-08

前言

在vue项目中，.vue 文件称为 SFC(Single File Components)，在vue的源码中，有一个sfc模块专门负责.vue单文件组件的解析

vue 会先对 .vue 文件进行解析，分成 template、script、styles、customBlocks 四个部分，称为 descriptor。之后，再对这四个部分分别进行编译最终得到可以在浏览器中执行的 .js 文件。

SFCDescriptor，是表示 .vue 各个代码块的对象，为以下数据格式：

// an object format describing a single-file component.
declare type SFCDescriptor = {
    template: ?SFCBlock;
    script: ?SFCBlock;
    styles: Array<SFCBlock>;
    customBlocks: Array<SFCBlock>;
};

vue 提供了一个 compiler.parseComponent(file, [options])方法，来将 .vue 文件解析成一个 SFCDescriptor。

1. 文件入口

解析 sfc 文件的源码入口在 src/sfc/parser.js 中，编译后的产出在 /packages/vue-template-compiler 和 /packages/vue-server-renderer 下的 build.js 中。

build.js 文件中直接 export 出了parseComponent方法。

2. parseComponent方法

/**
 * Parse a single-file component (*.vue) file into an SFC Descriptor Object.
 */
export function parseComponent (
    content: string,
    options?: Object = {}
): SFCDescriptor {
    const sfc: SFCDescriptor = {
        template: null,
        script: null,
        styles: [],
        customBlocks: []
    }
    let depth = 0
    let currentBlock: ?SFCBlock = null

    function start (
        tag: string,
        attrs: Array<Attribute>,
        unary: boolean,
        start: number,
        end: number
    ) {
        // ...
    }

    function checkAttrs (block: SFCBlock, attrs: Array<Attribute>) {
        for (let i = 0; i < attrs.length; i++) {
            const attr = attrs[i]
            if (attr.name === 'lang') {
                block.lang = attr.value
            }
            if (attr.name === 'scoped') {
                block.scoped = true
            }
            if (attr.name === 'module') {
                block.module = attr.value || true
            }
            if (attr.name === 'src') {
                block.src = attr.value
            }
        }
    }

    function end (tag: string, start: number, end: number) {
        // ...
    }

    function padContent (block: SFCBlock, pad: true | "line" | "space") {
        if (pad === 'space') {
            return content.slice(0, block.start).replace(replaceRE, ' ')
        } else {
            const offset = content.slice(0, block.start).split(splitRE).length
            const padChar = block.type === 'script' && !block.lang
                ? '//\n'
                : '\n'
            return Array(offset).join(padChar)
        }
    }

    parseHTML(content, {
        start,
        end
    })

    return sfc
}

以上代码中，parseComponent方法中主要定义了start和end两个函数，之后调用了parseHTML方法来对 .vue 文件内容践行编译。start和end两个函数作为参数传给了parseHTML

3. parseHTML方法

parseHTML是一个html-parser，分解分析 .vue 的关键,parseHTML的代码细节较多，遍历解析查找文件中的各个标签，解析到每个起始标签时，调用 option 中的 start 方法进行处理；解析到每个结束标签时，调用 option 中的 end 方法进行处理。（即parseComponent中定义的 start 和 end）

由于我们这里只是想要找到第一层标签，也就是 template、script这些。因此可以在parseComponent中维护一个 depth 变量，在start中将depth++，在end中depth–。那么，每个depth === 1的标签就是我们需要获取的信息，包含 template、script、style 以及一些自定义标签。


export function parseHTML (html, options) {
    const stack = []
    const expectHTML = options.expectHTML
    const isUnaryTag = options.isUnaryTag || no
    const canBeLeftOpenTag = options.canBeLeftOpenTag || no
    let index = 0
    let last, lastTag
    while (html) {
        last = html
        if (!lastTag || !isPlainTextElement(lastTag)) {
            // 这里分离了template
        } else {
            // 这里分离了style/script
        }

    // 略

    // 前进n个字符
    function advance (n) {
        // 略
    }

    // 解析 openTag 比如 <template>
    function parseStartTag () {
        // 略
    }

    // 处理 openTag
    function handleStartTag (match) {
        // 略
        if (options.start) {
            options.start(tagName, attrs, unary, match.start, match.end)
        }
    }

    // 处理 closeTag
    function parseEndTag (tagName, start, end) {
        // 略
        if (options.start) {
        options.start(tagName, [], false, start, end)
        }
        if (options.end) {
        options.end(tagName, start, end)
        }
    }
}

1）一个 while 循环
在 while 循环中，存在两个大的分支，一个用来分析 template ，一个是用来分析 script 和 style。

2）函数 advance
向前跳过文本

3）函数 parseStartTag
判断当前的 node 是不是 openTag

4）函数 handleStartTag
处理 openTag, 这里就用到了之前提到的 start() 函数

5）函数 parseEndTag
判断当前的 node 是不是 closeTag，同时这里也用到了 end() 函数

通过以上各个函数的组合，在while循环中就将 sfc 分割成了三个不同的部分

4. start

function start (
    tag: string,
    attrs: Array<Attribute>,
    unary: boolean,
    start: number,
    end: number
) {
    if (depth === 0) {
        currentBlock = {
            type: tag,
            content: '',
            start: end,
            attrs: attrs.reduce((cumulated, { name, value }) => {
                cumulated[name] = value || true
                return cumulated
            }, {})
        }
        if (isSpecialTag(tag)) {
            checkAttrs(currentBlock, attrs)
            if (tag === 'style') {
                sfc.styles.push(currentBlock)
            } else {
                sfc[tag] = currentBlock
            }
        } else { // custom blocks
            sfc.customBlocks.push(currentBlock)
        }
    }
    if (!unary) {
        depth++
    }
}

1）记录下 currentBlock。每个 currentBlock 包含以下内容

declare type SFCBlock = {
    type: string;
    content: string;
    start?: number;
    end?: number;
    lang?: string;
    src?: string;
    scoped?: boolean;
    module?: string | boolean;
};

2）根据 tag 名称，将 currentBlock 对象保存在在返回结果对象中。

返回结果对象定义为 sfc，如果tag不是 script,style,template 中的任一个，就放在 sfc.customBlocks 中。如果是style，就放在 sfc.styles 中。script 和 template 则直接放在 sfc.script 和 sfc.template 下。

5. end

每当遇到一个结束标签时，执行end函数。

function end (tag: string, start: number, end: number) {
    if (depth === 1 && currentBlock) {
        currentBlock.end = start
        let text = deindent(content.slice(currentBlock.start, currentBlock.end))
        // pad content so that linters and pre-processors can output correct
        // line numbers in errors and warnings
        if (currentBlock.type !== 'template' && options.pad) {
            text = padContent(currentBlock, options.pad) + text
        }
        currentBlock.content = text
        currentBlock = null
    }
    depth--
}

如果当前是第一层标签(depth === 1)，并且 currentBlock 变量存在，那么取出这部分text，放在 currentBlock.content 中。

在将 .vue 整个遍历一遍后，得到的 sfc 对象即为我们需要的 SFCDescriptor。

6. 生成 .js

compiler.parseComponent(file, [options])得到的只是一个组件的 SFCDescriptor，最终编译成.js 文件是交给 vue-loader 等库来做的。

https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/index.js

展开全文 >>

click/tap/touch事件的表现和区别

2020-04-06

click

click是手指触碰屏幕和离开屏幕的偏移量很小情况下并在短时间内执行而发生的事件，用于移动端会有200到300毫秒的延时

要模拟click事件，touchstart、touchmove、touchend必须结合使用，通过touchstart、touchend纪录时间、手指移动的偏移量，符合click标准则触发click事件。而现有的解决方案FastClick就是这么做的。

1
2
3

$(function(){
    newFastClick(document.body);
})

移动端的click300ms延迟现象：移动端的click事件300ms延迟是因为浏览器为了判断当前事件是否双击（double click）而在触发touchend事件后等待用户约300ms（双击事件可以缩放视图内容），若用户没有再次点击则默认触发click事件。

用户点击触发事件的过程：touchstart －> touchmove(没有移动则不触发) －> touchend －>(300ms后) click

事件对象及兼容

事件对象：e = e || window.event;
事件冒泡： e.stopPropagation() || e.cancelBubble = true
事件源：e.target || e.srcElement
阻止默认事件：e.preventDefault() || e.returnValue = false;
鼠标位置：
if(e.pageX) {
    xPos = evt.pageX;
    yPos = evt.pageY;
} else {
    // ie6到8不兼容
    xPos = e.clientX +（document.documentElement.scrollLeft || document.body.scrollLeft;
    yPos = e.clientY +（document.documentElement.scrollTop || document.body.scrollTop;
}

touch 类事件

属于原生移动端事件

touchstart: 当手指触摸到屏幕会触发；
touchmove: 当手指在屏幕上移动时，会触发；
touchend: 当手指离开屏幕时，会触发；
touchcancel: 是在拖动中断时候触发。

Touch对象代表一个触点，可以通过event.touches[0]获取，每个触点包含位置，大小，形状，压力大小，和目标 element属性。

事件对象及兼容

touches：表示当前跟踪的触摸操作的touch对象的数组。
targetTouches：特定于事件目标的Touch对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个touch事件包含下面的属性：

clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触摸的DOM节点目标。

关于touch的滑动事件

ele.addEventListener('touchstart', start, false);
ele.addEventListener('touchmove', move, false);
ele.addEventListener('touchend', end, false);
function start(e){
    this.startX = e.touches[0].pageX
    this.startY = e.touches[0].pageY;
}
function move(e){
    this.moveEndX = e.changedTouches[0].pageX;
    this.moveEndY = e.changedTouches[0].pageY;
    this.X = this.moveEndX - this.startX;
    this.Y = this.moveEndY - this.startY;
    if (Math.abs(this.X) > Math.abs(this.Y)&&Math.abs(this.X)>30&& this.X > 0) {
        //向右滑
        console.log('right');
    }else if (Math.abs(this.X) > Math.abs(this.Y)&&Math.abs(this.X)>30&& this.X < 0) {
        //向左滑
        console.log('left');
    }
}
function end(e){
    ele.removeEventListener('touchmove', start, false);
    ele.removeEventListener('touchend', move, false);
}

tap

属于第三方事件，需要引入第三方库，比如zepto.js

常用的方法有tap，singleTap, doubleTap, longTap分别代表点击、单次点击、双次点击、长按。

tap封装了touchstart、touchmove、touchend三个事件的处理（touchstart之后如果有产生touchmove则取消此次tap事件的产生）click则只是单纯的绑定了浏览器的click事件。

1
2
3

bug: tap点透事件。(点击会触发非当前层的点击事件，这就是点透)
原因: tap事件是通过监听绑定document上的touch事件来模拟的，并且tap事件是冒泡到document上才触发的。
解决: 为元素绑定touchend事件，并在内部加上e.preventDefault();

参考：

https://zhuanlan.zhihu.com/p/26351643

展开全文 >>

Vue源码分析之global-api

2020-04-05

Vue源码目录设计

Vue.js 的源码都在 src 目录下，其目录结构如下

src
├── compiler        # 编译相关
├── core            # 核心代码
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

more >>

展开全文 >>

Cookie, LocalStorage 与 SessionStorage

2020-04-05

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

展开全文 >>

React中组件通信的几种方式

2020-04-02

前言

在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：

父组件向子组件通信
子组件向父组件通信
非嵌套组件间通信
跨级组件之间通信

more >>

展开全文 >>