createElement('div', 
  {id: 'container', class: 'warp'}, 
  [
    createTextVnode('模拟实现'),
    createElement('p', {style: {color: red}}, [createTextVnode('虚拟DOM')])
  ]
)

/**
 * element.js
 */
 
 // 创建元素节点虚拟DOM
 createElement(tag, props, children) {
    let key
    if (props.key) {    // 如果节点存在key属性，则抽离出来，放入虚拟DOM对象中
        key = props.key
        delete props.key
    }
    return new Element(tag, props, key, children)
 }
 
 // 用于创建文本虚拟DOM
 createTextVnode(str) {
    // 文本节点没有标签， 属性， 子节点
    return new Element(undefined, undefined, undefined, undefined, str)
 }
 
 // 用于描述虚拟DOM的类
 class Element {
    constructor(tag, props, key, children, text) {
        this.tag = tag            // 节点名称
        this.props = props          // 节点的属性集
        this.key = key              // 节点key
        this.children = children    // 节点下的子节点
        ths.text = text             // 文本节点的文本内容
    }
 }

   let vNode = createElement('div', 
      {id: 'container', class: 'warp'}, 
      [
        createTextVnode('模拟实现'),
        createElement('p', {style: {color: red}}, [createTextVnode('虚拟DOM')])
      ]
   )
   
   console.log('vNode', vNode)

/**
 * render.js
 */
 
 function render(vNode, container) {
    let ele = createElementDom(vNode)
    container.appendChild(ele)
 }
 
 // 使用vNode创建真实DOM，并返回这个DOM
 function createElementDom(vNode) {
    let { tag, props, key, children, text } = vNode
    if (tag) {
        vNode.domElement = document.createElement(tag)
        updateProps(vNode)
        children.forEach(child => {
            render(child, vNode.domElement)
        })
    } else {
        vNode.domElement = document.createTextNode(text)
    }
    return vNode.domElement
 }
 
 // 更新DOM属性
 function updateProps(vNode) {
    let { props, domElement } = vNode
    for (let key in props) {
        setDomAttribute(domElement, key, props[key])
    }
 }
 
 // 设置DOM属性
 setDomAttribute(element, key, value) {
    switch(key) {
        case 'style':
            for (let style in value) {
                element.style[style] = value
            }
            break;
        default:
            element.setAttribute(key, value)
    }
 }

<!-- index.html -->
<div id="app"></div>

<!-- index.js -->
let vNode = createElement('div', 
  {id: 'container', class: 'warp'}, 
  [
    createTextVnode('模拟实现'),
    createElement('p', {style: {color: 'red'}, class: 'content'}, [createTextVnode('虚拟DOM')])
  ]
)
console.log('vNode', vNode)
render(vNode, app)

// Boolean转换换为number
Number(true)      // 1
Number(false)     // 0

// Null和Undefined转换为number
Number(null)      // 0
Number(undefined) // NaN

// String转换为number
string转number的情况要相对复杂一些，总体规则如下：
1. 只包含数字(包含正负号和浮点数)的字符串，转出为十进制的数值
2. 对于包含其他字符(比如：英文)的字符串，则转换为NaN
3. 空字符串，制表符，空格，换行符统一转换为0
Number('000000.25')    // 0.25
Number('0002523') // 2523
Number('-25')     // -25
Number('25+25')   // NaN
Number('12a')     // NaN
Number('\n')      // 0

// 对象转number
先调用对象的toString()方法，然后调用字符串转数字的规则

  Boolean('')           // 空字符串
  Boolean(0)            // 数字0
  Boolean(null)         // null
  Boolean(undefined)    // undefined
  Boolean(NaN)          // NaN
  Boolean(false)        // 布尔值false

  Boolean({})                   // true
  Boolean([])                   // true
  Boolean(new Boolean(false))   // true

    null
    undefined
    0
    ''
    NaN

    '' + true             // 'true'
    '' + false            // 'false'
    '' + 1                // '1'
    '' + []               // ''
    '' + {}               // '[object Object]'
    '' + function () {}   // 'function () {}'
    '' + undefined        // 'undefined'
    '' + null             // 'null'

    '6' - '3'         // 3
    '6' - 3           // 3
    '6' * '3'         // 18
    '6' / '3'         // 2
    '6' % '3'         // 0
    true - 1          // 0
    false - 1         // -1
    6 * []            // 0
    false / '5'       // 0
    null + 6          // 6
    undefined + 6     // NaN

  +'abc'              // NaN
  +'11'               // 11
  -'55'               // -55
  -null               // -0
  -undefined          // NaN

    !{}             // false
    !''             // true
    !false          // true
    !NaN            // true
    !undefined      // true
    !'test'         // false
    !1              // false

let symbol = Symbol()
console.log(typeof symbol) // Symbol  

typeof 1                // number
typeof 'str'            // string
typeof true             // boolean
typeof Symbol()         // symbol
typeof undefined        // undefined
typeof null             // object
typeof [1,2]            // object
typeof {name: 'smile'}  // object
typeof function (){}    // function

object instanceof constructor
// object 是待检测类型的对象
// constructor 是定义类的构造函数

function Foo(){}
Foo.prototype = new Bar()
let foo = new Foo()

console.log(foo instanceof Foo) // true
console.log(foo instanceof Bar) // true

console.log(Object.prototype.toString.call(1))                  // [object Number]
console.log(Object.prototype.toString.call('str'))              // [object String]
console.log(Object.prototype.toString.call(true))               // [object Boolean]
console.log(Object.prototype.toString.call(undefined))          // [object Undefined]
console.log(Object.prototype.toString.call(null))               // [object Null]
console.log(Object.prototype.toString.call(Symbol()))           // [object Symbol]
console.log(Object.prototype.toString.call({name: 'smile'}))    // [object Object]
console.log(Object.prototype.toString.call([1,2]))              // [object Array]
console.log(Object.prototype.toString.call(function (){}))      // [object Function]

let type = Object.prototype.toString.call(obj).slice(8, -1)

/**
 * obj 需要检测的数据
 */
function checkType (obj) {
    return typeof obj !== 'object' ? typeof obj : Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
}

npm install webpack webpack-cli -D

module.exports = {
    entry: './src/main.js'
}

const path = require('path') // nodeJs内置的path模块
module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'main.[hash].js', // 输出文件的文件名
        path: path.resolve(__dirname, 'dist')
        // path属性用于指定输出的文件路径，它必须接收绝对路径
        // path.resolve()方法用于将相对路径转换成绝对路径
    }
}

module.exports = {
    mode: 'development'
}

<!-- package.json -->
"scripts": {
    "build": "webpack --mode=production",
    "dev": "webpack-dev-server --mode=development"
}

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', ''css-loader]
            }
        ]
    }
}

<!-- webpack.config.js -->
const path = require('path')
module.exports = {
    entry: './main.js',
    output: {
        filename: 'index.js',
        path: path.resolve(_dirname, 'dist')
    }
}

npm install html-webpack-plugin -D

<!-- webpack.config.js -->
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 省略其他代码
    plugins: [
        template: './index.html',   // 指定模板文件路径
        filename: 'index.html',   // 指定打包后输出的模板文件名
        minify: {   // 指定模板压缩的规则
            removeAttributeQuotes: true,     // 删除属性的双引号
            collapseWhitespace: true,   // 折叠空行
        },
        hash: true, // 添加hash戳，hash可以避免缓存问题
    ]
}

npm install webpack-dev-server -D

module.exports = {
    devServer: {
        port: '8080',   // 开发服务端口
        host: 'localhost',
        progress: true, // 配置打包进度条
        contentBase: './dist',   // 指定静态服务的启动文件夹
    }
}

<!-- package.json -->
"scripts": {
    "dev": "webpack-dev-server --mode=development"
}

npm install style-loader css-loader -D

<!-- webpack.config.js -->
module.exports = {
    // 省略其他代码
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

npm install less less-loader node-sass sass-loader -D

<!-- webpack.config.js -->
module.exports = {
    // 省略其他代码
    module: {
        rules: [
            {
                test: /\.less/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.scss/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {}
                    }
                ]
            }
        ]
    }
}

npm install autoprefixer postcss-loader -D

<!-- webpack.config.js -->
module.exports = {
    // 省略其他代码
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','postcss-loader' 'css-loader']
            }
        ]
    }
}

 <!-- postcss.config.js -->
const autoprefixer = require('autoprefixer')
module.exports = {
    plugins: [autoprefixer]
}

npm install mini-css-extract-plugin -D

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    // 省略其他代码
     plugin: [
        new MiniCssExtractPlugin({
            filename: 'css/index.css'
        })
    ]
}

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    // 省略其他代码
     plugin: [
        new MiniCssExtractPlugin({
            filename: 'index.css'  // 抽离后的css文件名
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    }
}

npm install babel-loader @babel/core @babel/preset-env -D

module.exports = {
    // 省略其他代码
    rules: [
        {
            test: '/\.js$/', 
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env'
                    ]
                }
            },
            include: path.resolve(__dirname, 'src'),  // 希望应用的文件夹
            exclude: /node_modules/ // 需要排除的文件夹
        }}
    ]
}

module.exports = {
    // 省略其他代码
    optimization: [
    
    ]
}

npm install optimize-css-assets-webpack-plugin -D

const OptimizeCss = require('optimize-css-assets-webpack-plugin')
module.exports = {
    // 省略其他代码
    optimization: [
        new OptimizeCss()
    ]
}

npm install uglifyjs-webpack-plugin -D

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    // 省略其他代码
    optimization: [
        new UglifyJsPlugin({
            parallel: true
        })
    ]
}

npm install url-loader -D

module.exports = {
    // 省略其他代码
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10240,   // 单位为字节
                            outputPath: 'img/'
                        }
                    }
                ]
            }
        ]
    }
}

npm install jquery
module.exports = {
    // 省略其他代码
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery"
        })
    ]
}

npm install clean-webpack-plugin -D

const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    // 省略其他代码
    plugins: [
        new CleanWebpackPlugin()
    ]
}

http://localhost:8888/#/home

window.addEventListener("hashchange", function(){}, false)

class vueRouter {
    constructor(){
    }
}
vueRouter.install = function(Vue) {
    
}

<!-- router.js -->
class vueRouter {
    constructor(){
    }
}
vueRouter.install = function(Vue) {
    Vue.mixin({
        data(){
            return {
                name: '阿白smile'
            }
        }
    })
}

<!-- home.vue -->
// 省略代码
<script>
    export default {
        created(){
            console.log(name)   // '阿白smile'
        }
    }
</script>

<!-- index.js -->
import vueRouter from './router'
import App from 'app.vue'
Vue.use(vueRouter)

const router = new vueRouter({
    routes: []
})

new Vue({
    router,
    render: h => h(App)
})

<!-- router.js -->
class vueRouter {
    constructor(){}
}
vueRouter.install = function(Vue) {
    Vue.mixin({
        beforeCreate(){
            // $options.router存在则表示是根组件
            if (this.$options && this.$options.router) {
                this._root = this
                this._router = this.$options.router
                Vue.util.defineReactive(this, 'current', this._router.history)
            } else {
                // 不是根组件则从父组件中获取
                this._root = this.$parent._root
            }
            
            // 使用$router代理对this._root._router的访问
            Object.defineProperty(this, '$router', {
                get() {
                    return this._root._router
                }
             })
        }
    })
}

class HistoryRoute {
    constructor() {
        this.current = null
    }
}
class vueRouter {
    // options 为初始化时的参数
    constructor(options) {
        this.mode = options.mode || 'hash'
        this.routes = options.routes || []
        this.history = new HistoryRoute
        this.init()
    }
    init() {
        if (this.mode === 'hash') {
            // 初始化一个#
            location.hash ? '' : location.hash = '/'
            // 页面加载完成获取当前路由
            window.addEventListener('load', () => {
                this.history.current = location.hash.slice(1)
            })
            window.addEventListener('hashchange', () => {
                this.history.current = location.hash.slice(1)
            })
        } else {
            window.addEventListener('load', () => {
                this.history.current = location.pathname
            })
            window.addEventListener('popstate', () => {
                this.history.current = location.pathname
            })
        }
    }
}
export default vueRouter

Vue.component('router-view', {
    render(h) {
          
    }
})

class vueRouter {
    constructor(options) {
        // 省略其他代码
        this.routes = options.routes || []
        this.routeMap = this.createMap(this.routes)
    }
    // 省略其他代码
    createMap(routes) {
        return routes.reduce((memo, current) => {
            memo[current.path] = current.component
            return memo
        }, {})
    }
}

vueRouter.install = function(_Vue) {
    // 省略其他代码
    Vue.component('router-view', {
        render(h) {
            let current = this._self._root._router.history.current  // 当前路由
            let routerMap = this._self._root._router.routeMap
            return h(routerMap[current])
        }
    })
}  

class vueRouter {
    constructor(options) {}
    push(url) {
        if (this.mode === 'hash') {
            location.hash = url
        } else {
            pushState(url)
        }
    }
  replace(url) {
      if (this.mode === 'hash') {
          location.hash = url
      } else {
          pushState(url, true)
      }
  }
}

function pushState(url, replace) {
    const history = window.history
    if (replace) {
        history.replaceState({key: history.state.key}, '', url)
    } else {
        history.pushState({key: Date.now()}, '', url)
    }
}

Vue.component('router-link', {
    render(h) {
          
    }
})

to: 目标路由地址
tag: 渲染的标签
replace: 使用replace方式进行路由跳转，不留下history记录

Vue.component('router-link', {
    props: {
        to: {
            type: [Object, String],
            required: true
        },
        tag: {
            type: String,
            default: 'a'
        },
        replace: Boolean
    },
    render(h) {
          let data = {}
          if (this.tag === 'a') {
              data.attrs = {href: this.to}
          } else {
              data.on = {click: () => {
                  if (this.replace) {
                      this._self._root._router.replace(this.to)
                  } else {
                      this._self._root._router.push(this.to)
                  }
              }}
          }
          return h(this.tag, data, this.$slots.default)
    }
})

var a = 0;
let b = 1;
const c = 2;

var i; // 仅声明变量，不赋值
var sum = 5; // 声明变量的同时进行赋值
var j = 0, message = "hello"; // 同时声明多个变量并赋值
console.log(i) // undefined 变量赋值之前，他的值为undefined

var k;
console.lo(k); // undefined
k = 1;
console.log(k); // 1    

var num = 10;
console.log(num); // 10
var num = 20;
console.log(num); // 20

upgrade = 2;
var upgrade;
console.log(upgrade); // 2

var upgrade;
upgrade = 2;
console.log(upgrade);

{
   let text1 = '1',
   var text2 = '2'
}
console.log(text2) // '2'
console.log(text1) //  ReferenceError: text1 is not defined.

console.log(text4) // undefined
console.log(text3) // ReferenceError

let text3 = '3'
var text4 = '4'

var text5 = '5';
if(1){
  console.log(text5) // ReferenceError
  let text5;
}

function () {
    let text6 = 6;
    var text6 = 6;
}

'use strict'
const test = 12345;
test = 2135; // 报错

const test1 = 12345;
test1 = 54321;
console.log(test1); // 12345

const foo = {};
foo.num = 123;
console.log(foo.num) // 123
foo = {} // 报错

/**
 * obj 需要操作的目标对象
 * key 需要操作的属性名称
 * descriptor 将被定义或修改的属性描述符
 */
Object.defineProperty(obj, key, descriptor)

/**
 * 观察者
 */
class Observer {
    constructor (data) {
        this.data = data
    }
}

defineReactive(obj, key, value) {
    Object.defineProperty(obj, key, {
        configurable: true, // 属性可以修改和删除
        enumerable: true, // 属性可以通过for...in和Object.keys()遍历
        get() {
            // 获取属性时触发
            return value
        },
        set(newVal) {
            // 设置属性时触发
            if (newVal != value) { // 如果新的值和旧的值一致，则没有设置的必要
                value = new Val
            }
        }
    })
}   

observer(data) {
    if (data && type data === 'object') {
        for (let key in data) {
            this.defineReactive(data, key, data[key])
        }
    }
}

defineReactive(obj, key, value) {
    this.observer(value) // 如果value为object，则会遍历该对象的所有属性
    Object.defineProperty(obj, key, {
        configurable: true, // 属性可以修改和删除
        enumerable: true, // 属性可以通过for...in和Object.keys()遍历
        get() {
            // 获取属性时触发
            return value
        },
        set: (newVal) => { // 方法内部使用了this，保证指向正确
            // 设置属性时触发
            if (newVal != value) { // 如果新的值和旧的值一致，则没有设置的必要
                this.observer(value)    // 如果newVal为object，则遍历改对象下的所有属性
                value = new Val
            }
        }
    })
}

class Vue {
    constructor(options) {
        this.$el = options.el
        this.$data = options.data
        // 实现响应化
        new Observer(this.$data)
        console.log('新增前' this.$data) // 查看响应化之后的数据
        this.$data.test = 'test'
        console.log('新增后', this.$data) // 查看新增属性之后的数据
    }
}
new Vue({
    data: {
        user: {
        name: '阿白Smile',
            age: 24,
            sex: `<p>性别：男</p>`
        },
        location: '北京'
    }
})

class Observer {
    // 接收Vue实例作为参数，并Vue实例中的$data进行Proxy改造
    constructor (data, vm) {
        vm.$data = this.observer(data)
    }

    observer(data) {
        if (data && typeof data === 'object') {
            for (let key in data) {
                data[key] = this.observer(data[key])
            }
            return this.defineReactive(data)
        } else {
            return data
        }
    }

    defineReactive(obj) {
        return new Proxy(obj, {
            get(target, key) {
                return target[key]
            },
            set: (target, key, value) => {
               if (target[key] != value) {
                  console.log('set', key) // 设置属性时打印属性名
                  target[key] = this.observer(value)  // 如果设置的属性是对象，则对其加上Proxy拦截
                  return true
               }
            }
        })
    }
}

class Vue {
    constructor(options) {
        this.$el = options.el
        this.$data = options.data
        // 实现响应化
        new Observer(this.$data, this)
        this.$data.test = 'test'    // 新增一个属性
    }
}
new Vue({
    data: {
        user: {
        name: '阿白Smile',
            age: 24,
            sex: `<p>性别：男</p>`
        },
        location: '北京'
    }
})

<!-- html -->
<div id="app">
    <p>姓名</p>
    <input type="text" v-model="user.name">
    <p>年龄：{{user.age}}</p>
    <p>位置：{{location}}</p>
    <div v-html="user.sex"></div>
</div>

<!-- js -->
new Vue({
    el: '#app',
    data: {
        user: {
            name: '阿白Smile',
            age: 24,
            sex: `<p>性别：男</p>`
        },
        location: '北京'
    }
})

class Vue {
    constructor(options) {
        this.$el = options.el
        this.$data = options.data
    }
}

class Compiler {
    constructor(vm) {}
}

class Vue {
    constructor(options) {
        this.$el = options.el
        this.$data = options.data
        // 判断是否传递挂载元素
        if (this.$el) {
            new Compiler(this)
        }
    }
}

class Compiler {
    constructor(vm) {
        this.el = this.isElement(vm.$el) ? vm.$el : document.querySelector(vm.$el)
        this.vm = vm
    }
    
    // 判断节点是否是元素节点
    isElement(node) {
        return node.nodeType === 1
    }
}

class Compiler {
    constructor(vm) {
        this.el = this.isElement(vm.$el) ? vm.$el : document.querySelector(vm.$el)
        this.vm = vm
        
        let fragment = this.nodeToFragment(this.el)
    }
    
    // 判断节点是否是元素节点
    
    // 创建文档碎片
    nodeToFragment(node) {
        let fragment = document.createDocumentFragment()
        let firstChild
        
        while(firstChild = node.firstChild) {
            // appedChild具有移植性，使用appendChild将DOM移入到fragment之后，挂载节点下这个DOM将会被移除
            fragment.appendChild(firstChild)
        }
    }   
}

class Compiler {
    constructor(vm) {
        this.el = this.isElement(vm.$el) ? vm.$el : document.querySelector(vm.$el)
        this.vm = vm
        
        let fragment = this.nodeToFragment(this.el)
        // 用数据进行模板编译
	    this.compile(fragment)
    }
    
    // 判断节点是否是元素节点
    // 创建文档碎片
    // 模板编译
    compile(node) {
        let childNodes = [...node.childNodes]
        childNodes.forEach(child => {
            if (this.isElement(child)) {
                this.compileElement(child)
                // 进一下向下遍历编译
                this.compile(child)
            } else {
                this.compileText(child)
            }
        })
    }
    // 元素节点编译
    compileElement(node) {
    
    }
    // 文本节点编译
    compileText(node) {
    
    }
} 

// 元素节点编译
compileElement(node) {
    let attributs = [...node.attributes]
    attributs.forEach(attr => {
        let {name:attrName, value:attrVal} = attr
        // 利用“v-”过滤指令
        if (attrName.startsWith('v-')) {
            
        }
    })
}
// 文本节点编译
compileText(node) {
    let content = textContent
    // 利用正则过滤小胡子语法
    if (/\{\{(.+?)\}\}/.test(content)) {
    
    }
}

v-model

// 指令集
const directiveUtil = {
    // v-model处理方法
    model(node, expr, vm) {},
    // v-html处理方法
    html(node, expr, vm) {},
    // 小胡子语法处理方法
    text(node, expr, vm) {}
}

// 元素节点编译
compileElement(node) {
    let attributs = [...node.attributes]
    attributs.forEach(attr => {
        let {name:attrName, value:attrVal} = attr
        // 利用“v-”过滤指令
        if (attrName.startsWith('v-')) {
            // 解析指令
            let [,directive] = attrName.split('-')
            // 执行指令方法
            directiveUtil[directive](node, attrVal, this.vm)
        }
    })
}
// 文本节点编译
compileText(node) {
    let content = textContent
    // 利用正则过滤小胡子语法
    if (/\{\{(.+?)\}\}/.test(content)) {
        directiveUtil['text'](node, content, this.vm)
    }
}

directiveUtil.getVal(expr, vm) {
    let exprs = expr.spilt('.')
    return exprs.reduce((current, item) => {
        return current[item]
    },vm.$data)
}

// v-model处理方法
model(node, expr, vm) {
    let val = this.getVal(expr, vm)
    node.value = val
},
// v-html处理方法
html(node, expr, vm) {
    let val = this.getVal(expr, vm)
    node.innerHTML = val
},
// 小胡子语法处理方法
text(node, expr, vm) {
    let content = expr.replace(/\{\{(.+?)\}\}/g, (...args) => {
		return this.getVal(args[1], vm)
	})
	node.textContent = content
}

class Compiler {
    constructor(vm) {
        this.el = this.isElement(vm.$el) ? vm.$el : document.querySelector(vm.$el)
        this.vm = vm
        
        let fragment = this.nodeToFragment(this.el)
        // 用数据进行模板编译
	    this.compile(fragment)
	    // 将fragment塞回到挂载节点中
	    this.el.appendChild(fragment)
    }
}

class Dep {
    constructor() {
        // 存放watcher
        this.subs = []
    }
    // 新增watcher
    addSub(watcher) {
        this.subs.push(watcher)
    }
    // 通知所有的watcher更新
    notify() {
        this.subs.forEach(watcher => {
            watcher.update()
        })
    }
}

class Watcher {
    constructor(vm, expr, cb) {
        this.vm = vm
        this.expr = expr
        this.cb = cb
        // 获取一个旧的值
        this.oldVal = this.getOldValue()
        
    }
    // 获取旧的值
    getOldValue() {
        // 将当前的watcher实例作为Dep.target属性的值
        Dep.target = this
        let oldValue = directiveUtil.getVal(this.expr, this.vm)
        Dep.target = null
        return oldValue
    }
    // 通知视图更新
    update() {
        let newVal = directiveUtil.getVal(this.expr, this.vm)
        if (newVal != this.oldVal) {
            this.cb(newVal)
        }
    }
}

directiveUtil = {
    // 获取属性的value值，eg：data.key
    getVal(expr, vm) {
        let exprs = expr.split('.')
        // console.log('exprs', exprs, vm.$data)
        return exprs.reduce((current, item) => {
            return current[item]
        }, vm.$data)
    },
    // 获取内容，eg：{{a}}{{b}}{{c}}
    getContent(expr, vm) {
        return expr.replace(/\{\{(.+?)\}\}/g, (...args) => {
            return this.getVal(args[1], vm)
        })
    },
    // 设置属性的value值
    setVal(expr, vm, value) {
        let exprs = expr.split('.')
        exprs.reduce((current, item, index, arr) => {
            if (index == arr.length - 1) {
                current[item] = value
            }
            return current[item]
        }, vm.$data)
    },
    // v-model指令的处理方法
    model(node, expr, vm) {
        let fn = this.uploadVlue.uploadModel
        new Watcher(vm, expr, (newVal) => {
            fn(node, newVal)
        })
        // 绑定事件
        addEventListener('change', (e) => {
            this.setVal(expr, vm, e.target.value)
        }, false)
        fn(node, this.getVal(expr,vm))
    },
    // v-html指令的处理方法
    html(node, expr, vm) {
        let fn = this.uploadVlue.uploadHtml
        new Watcher(vm, expr, (newVal) => {
            fn(node, newVal)
        })
        fn(node, this.getVal(expr,vm))
    },
    // 小胡子语法的处理方法
    text(node, expr, vm) {
        let fn = this.uploadVlue.uploadText
        let content = expr.replace(/\{\{(.+?)\}\}/g, (...args) => {
            new Watcher(vm, args[1], () => {
                fn(node, this.getContent(expr, vm))
            })
            return this.getVal(args[1], vm)
        })
        fn(node, content)
    }
}

defineReactive(obj, key, value) {
    let dep = new Dep()
    Object.defineProperty(obj, key, {
        configurable: true, // 属性可以修改和删除
        enumerable: true, // 属性可以通过for...in和Object.keys()遍历
        get() {
            // 获取属性时触发
            Dep.target && dep.addSub(Dep.target)
            return value
        },
        set(newVal) {
            // 设置属性时触发
            if (newVal != value) { // 如果新的值和旧的值一致，则没有设置的必要
                value = new Val
                dep.notify()
            }
        }
    })
}  

<!-- vuex.js -->
let Vue     // 后面的代码中还会使用到这个Vue，所以放在了函数之外
const install = function(_Vue) {
    Vue = _Vue
    Vue.mixin({
        beforeCreate() {
            let options = this.$options
            if (options.store) {
              this.$store = options.store
            } else {
              this.$store = options.parent && options.parent.$store
            }
        }
    })
}
// 导出方法
export default { install }

<!-- store.js -->
// 引入vuex并以插件的形式安装
import Vuex from './vuex.js'
Vue.use(Vuex)

<!-- main.js -->
import store from './store'

new Vue({
    store,
    render: h => h(App)
})

<!-- vuex.js -->
let Vue
const install = function(_Vue){/********/}
class Store {
    constructor(options) {
        
    }
}
// 导出
export default { install, Store }

 <!-- store.js -->
// 引入vuex并以插件的形式安装
import Vuex from './vuex.js'
Vue.use(Vuex)
export default new Vuex.Store({})

class Store {
    constructor(options) {
        this._s = new Vue({
            data () {
                return {
                    state: options.state
                }
            }
        })
    }
    
    // Store类的getter
    get state() {
        return this._s.state
    }
}

class Store {
    constructor(options) {
        let mutations = options.mutations
        this.mutations = {}
        mutations && this.setMutations(mutations) 
    }
    // 设置mutations
    setMutations = (mutations) => {
        Object.keys(mutations).forEach(name => {
            this.mutations[name] = (payload) => {
                return mutations(this.state, payload)
            }
        })
    }
    commit = (mutationName, payload) => {
        return this.mutations[mutationName] = payload
    }
}

class Store {
    constructor(options) {
        let actions = options.actions
        this.actions = {}
        actions && this.setActions(mutations) 
    }
    // 设置actions
    setActions = (actions) => {
        Object.keys(actions).forEach(actionName => {
            this.actions[actionName] = (payload) => {
                actions[actionName](this, payload)
            }
        })
    }
    dispatch = (actionName, payload) => {
        this.actions[actionName](payload)
    }
}

num = 10
console.log(num) // 10
var num

foo() // 'foo'
function foo(){
    console.log('foo')
}

var num
function foo() {
    console.log('foo')
}

num = 10
console.log(num)
foo()

  function fun(i) {
      var a = 'hello'
      var b = function privateB() {
  
      }
      function c() {
  
      }
  }
  fun(1)
  
  // 当调用函数fun的时候，将创建一个执行对象，执行对象的内容如下：
  funExecutionContext = {
    // 创建作用域链
    scopeChain: {},
    
    // 创建变量对象
    variableObject: {
        // 创建arguments对象并初始化
        arguments: {
            0: 1,
            length: 1
        },
        i: 1,
        
        // 扫描执行上下文中的函数声明
        c: pointer to function c(),
        
        // 扫描上下文中的变量声明
        a: undefined, 
        b: undefined
    },
    
    // 计算this
    this: {}
  }

    console.log(NaN - 1)        // NaN
    console.log(1 - false)      // 1
    console.log(NaN * 1)        // NaN
    console.log(1 * false)      // 0
    console.log(NaN / 1)        // NaN
    console.log(1 / false)      // Infinity
    console.log(NaN % 1)        // NaN
    console.log(1 % false)      // NaN

    console.log(1 + 1)                  // 2
    console.log(1 + '1')                // 11
    console.log('1' + '2')              // 12
    console.log(1 + [0])                // 10
    console.log(1 + {})                 // 1[object Object]
    console.log('1' + null)             // 1null
    console.log('1' + undefined)        // 1undefined

let test = 1
// 前置型递增
++test
// 后置型递增
test++
// 前置型递减
--test
// 后置型递减
test--

let num1 = 5
let num2 = num1++
console.log(num2)       // 5    num2得到的是num1执行递增操作前的值
console.log(num1)       // 6    第二条语句返回值之后开始执行递增操作，所以num1的值为6

let test = 1
let test1 = 1.1
let test2 = '1.2'
let test3 = false
let test4 = 'test'
let test5 = {}

console.log(+test)          // 1
console.log(+test1)         // 1.1
console.log(+test2)         // 1.2
console.log(+test3)         // 1
console.log(+test4)         // NaN
console.log(+test5)         // NaN

var num
console.log(num)        // undefined
num = 10                // 使用赋值操作符，将10赋值给变量num
console.log(num)

    a += b
    // 等价于
    a = a + b

a op= b
// op代表一个运算符
// 上面的语句等价于
a = a op b
// 注意：这里的a不能包含具有副作用的表达式

console.log('1' == 1)       // true 发生了数据类型转换
console.log('1' === 1)      // false 数据类型不同

let variable = boolean_expression ? true_value : false_value

let max = (num1 > num2) ? num1 : num2
// 等同于
let max = null
if (num1 > num2) {
    max = num1
} else {
    max = num2
}

<!-- webpack.config.js -->
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: {
      main: './main.js',
      miniApp: './miniApp.js'  
    },
    output: {
        filename: [name].[hsah].js,
        path: path.resolve(__dirname, 'dist')
    },
    plugin: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'main.html',
            chunks: ['main']
        }),
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'miniApp.html',
            chunks: ['miniApp']
        })
    ]
    // 省略其他代码 
}

npm install copy-webpack-plugin -D

<!-- webpack.config.js -->
const path = require('path')
const copyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
    plugin: [
        new copyWebpackPlugin([
            {
                from: path.resolve(__dirname, './public'),
                to: './dist'
            }
        ])
    ]
}

<!-- webpack.config.js -->
module.exports = {
    // 省略其他代码 
    devtool: 'cheap-module-eval-source-map'
}

<!-- server.js -->
const express = require('express')
const app = express()

app.get('/api/user', (req, res) => {
    res.json({name: '阿白Smile'})
})
app.listen(3000)

<!-- client.js -->
const xhr = new XMLHtttpRequest()

xhr.open('GET', '/api/user', true)

xhr.onload = function() {
    console.log(xhr.response)
}
xhr.send()

<!-- webpack.config.js -->
module.exports = {
    devServer: {
        prot: 3000,
        host: 'localhost'
        proxy: {
            '/api': 'http://localhost:3000'
        }
    }
}

<!-- webpack.config.js -->
module.exports = {
    devServer: {
        prot: 3000,
        host: 'localhost'
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                pathRewrite: {'/api': ''}
            }
        }
    }
}

npm install webpack-dev-middleware -D

<!-- server.js -->
const express = require('express')
const webpack = require('webpack')
const middle = require('webpack-dev-middleware')
const app = express()

let config = require('./webpack.config.js')
let compiler = webpack(config)
app.use(middle(compiler))

app.get('/user', (req, res) => {
    res.json({name: '阿白Smile'})
})
app.listen(3000)

<!-- webpack.config.js -->
module.exports = {
    devServer: {
        before(app) {
            app.get('/name', (req, res) => {
                res.json('阿白Smile')
            })
        }
    }
}   

npm install mocker-api -D

<!-- mock.js -->
module.exports = {
    'GET /userInfo/:id': (req, res) => {
        const { id } = req.params;
        // 省略查询
        return res.json({
          id,
          name: '阿白smile'
        });
    }
}

<!-- webpack.config.js -->
const path = require('path')
const apiMocker = require('mocker-api');
const mockApi = path.resolve('./mock.js')
module.exports = {
    devServer: {
        before(app) {
            mockApi(app, mockApi)
        }
    }
}  

<!-- client.js -->
const xhr = new XMLHtttpRequest()

xhr.open('GET', '/userInfo/1', true)

xhr.onload = function() {
    console.log(xhr.response)
}
xhr.send()

|--src
|--|--assets
|--|--|--main.css

<!-- webpack.config.js -->
module.exports = {
    // 省略其他代码 
    resolve: {
        alias: {
            '@': './src'
        }
    }
}

import '@/assets/main.css'

|--src
|--|--components
|--|--|--navMenu.vue

<!-- webpack.config.js -->
module.exports = {
    // 省略其他代码 
    resolve: {
        modules: ['./src/components', 'node_modules']
    }
}

import navMenu from 'navMenu'

<!-- webpack.config.js -->
module.exports = {
    // 省略其他代码 
    resolve: {
        extensions: ['.js', '.vue', '.json']
    }
}

import index from './index'

npm install webpack-merge

const merge = require('webpack-merge')
let result = merge({name: '阿白smile', age: 18}, {age: 24, location: '北京'})

// 合并后的结果
// {name: '阿白smile', age: 24, location: '北京'}

<!-- webpack.dev.config.js -->
const baseWebpackConfig = require('./webpack.base.config')
const merge = require('webpack-merge')

let devWebpackConfig = merge(baseWebpackConfig, {
    mode: 'development',
    devServer: {
        // 省略其他代码
    }
})
moudle.export = devWebpackConfig

<!-- webpack.pro.config.js -->
const baseWebpackConfig = require('./webpack.base.config')
const merge = require('webpack-merge')

let proWebpackConfig = merge(baseWebpackConfig, {
    mode: 'production',
    // 省略其他代码
})
moudle.export = proWebpackConfig

<!-- package.json -->
"scripts": {
    "dev": "webpack-dev-server --config=webpack.dev.config.js"
    "build": "webpack --config=webpack.pro.config.js"
}

<!-- webpack.config.js -->
module.exports = {
    devServer: {
        hot: true   // 启用热更新
    },
    plugin: [
        new webpack.HotModuleReplacementPlugin()    // 热更新插件
    ]
}

if (module.hot) {
    module.hot.accept()
}