前端预编译流程

爱学习的前端歌谣

发布于 2023-11-06 15:17:02

2070

发布于 2023-11-06 15:17:02

文章被收录于专栏：前端小歌谣

前言

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

环境配置

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
//}

运行结果