前端预编译流程

  前言

 我是歌谣 最好的种树是十年前 其次是现在 今天继续给大家带来的是预编译基础的讲解

 环境配置

npm init -y
yarn add vite -D

 修改page.json配置端口

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite --port 3002"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^4.4.9"
  }
}

 案例1

var a=1
b=1
console.log(window.a)
window={
    a:1,
    b:2
}

运行结果

 案例2

function test(){
    var a=b=1
}
test()
console.log(window.a)
console.log(window.b)

 运行结果

 案例3

function test(a){
    console.log(a)
    var a=1
    console.log(a)
    function a(){




    }
    console.log(a)
    var b=function(){}
    console.log(b)
    function d(){




    }
}
//AO
//AO={
//   a:undefined->2->function a(){}->1
//   b:undefined->function b(){}
//   d:function d(){}
//}
//
test(2)

 运行结果

 案例4

function test(a,b){
    console.log(a)
    c=0
    var c;
    a=5;
    b=6;
    console.log(b)
    function b(){}
    function d(){}
    console.log(b)
}
test(1)
// AO{
//    a:undefined-->a-->5
//    b:undefined-->function b(){}-->6
//    c:undefined-->0
//    d:function d(){}
//}

运行结果

 案例5

var a=1;
function a(){
    console.log(2)
}
console.log(a)
// GO{
//  a:undefined-->function a(){}--->1
//
//}

 运行结果

案例6

console.log(a,b)
function a(){}
var b=function(){}
// GO{
//  a:undefined---->function a(){}
//  b:a:undefined
//}

 运行结果

案例7

function test(){
    var a=b=1;
    console.log(b)
}
test()
//GO={
//  b:1
//}
//AO{
//  a:undefined--->1
//}

 运行结果

 案例8

var b = 3
console.log(a)
function a(a) {
    console.log(a)
    var a = 2;
    console.log(a)
    function a() {
    }
    var b = 5;
    console.log(b)
}
a(1)




//AO{
//   a:undefined--->1---->function a()--->2
//   b:undefined--->5
//
//}
//GO{
//   b:undefined--->3
//   a:function a(){}
//}

 运行结果

案例9

a=1
function test(){
    console.log(a)
    a=2
    console.log(a)
    var a=3
    console.log(a)
}
test()
var a;
//GO{
//  a:undefined--->1
// test:function test(){}
//}
//AO{
//  a:undefined--->2--->3
//
//}

 运行结果

 案例10

function test(){
    console.log(b)
    if(a){
        var b=2
    }
    c=3;
    console.log(c)
}
var a;
test()
a=1
console.log(a)
// AO{
//   
//    b:undefined-->2
//    
//}
//GO{
//   a:undefined-->1
//   test:function test(){}
//   c:3
//}

 运行结果

 案例11

function test(){
    return a;
    a=1;
    function a(){




    }
    var a=2
}
console.log(test())
// AO{
//    a:undefined---->function a(){}
//
//}
//

 运行结果

 案例12

console.log(test())
function test(){
    a=1
    function a(){




    }
    var a=2
    return a
}




//AO{
//  a:undefined--->function a(){}-->1--->2
//
//
//}
//

 运行结果

 案例13

a=1
function test(e){
    function e(){}
    arguments[0]=2
    console.log(e)
    if(a){
        var b=3
    }
    var c;
    a=4;
    var a;
    console.log(b)
    f=5
    console.log(c)
    console.log(a)
}
var a;
test(1)
console.log(a)
console.log(f)
//GO{
//  a:undefined-->1
//   test:function test(){}
//   f:5
//}
//AO{
//   e:undefined---->1---->function e(){}--->2
//   b:undefined
//   c:undefined
//   a:undefined---->4
//}

 运行结果