记录

组件传值、ES6学习

  • 2022-07-18
  • 作者 我爱小小蝶
  • ~23.19K 字
  1. 1. 组件
    1. 1.1. 含义
    2. 1.2. 特点
    3. 1.3. 分类
    4. 1.4. 全局组件VS局部组件
    5. 1.5. 案例
      1. 1.5.1. 全局案例
      2. 1.5.2. 局部组件
      3. 1.5.3. 全局组件独立性验证
      4. 1.5.4. 局部组件独立性验证
    6. 1.6. 组件通讯
      1. 1.6.1. 父向子
        1. 1.6.1.1. 简单参数
        2. 1.6.1.2. 复杂参数
      2. 1.6.2. 子向父
  2. 2. ES6扩展知识
    1. 2.1. let
      1. 2.1.1. 含义
      2. 2.1.2. 和var的区别
      3. 2.1.3. 案例分析
    2. 2.2. const
    3. 2.3. 模板字符串
      1. 2.3.1. 含义
      2. 2.3.2. 好处
    4. 2.4. rest参数
      1. 2.4.1. 含义
      2. 2.4.2. 语法
      3. 2.4.3. 注意点
      4. 2.4.4. 案例
    5. 2.5. 箭头函数
      1. 2.5.1. 含义
      2. 2.5.2. 王道做法
      3. 2.5.3. 箭头函数注意点
      4. 2.5.4. 案例一
      5. 2.5.5. 案例二
  3. 3. Class
    1. 3.1. 含义
    2. 3.2. constructor
      1. 3.2.1. 含义
      2. 3.2.2. 特点
    3. 3.3. 原型
      1. 3.3.1. 含义
      2. 3.3.2. 获取
    4. 3.4. 静态
      1. 3.4.1. 语法
    5. 3.5. 案例
  4. 4. 传统开发模式的主要问题
  5. 5. 模块化
    1. 5.1. 含义
    2. 5.2. 特点
  6. 6. 常见模块化规范
    1. 6.1. 前端
    2. 6.2. 后端
  7. 7. ES6模块化
    1. 7.1. 含义
    2. 7.2. 规范
    3. 7.3. import
      1. 7.3.1. 含义
      2. 7.3.2. 注意点
    4. 7.4. 案例一
    5. 7.5. 案例二
    6. 7.6. 案例三
    7. 7.7. defaultIndex.js

组件

含义

封装一段html代码,避免重复开发

特点

  • 也是一个实例,也有data、methods等等属性
  • template属性代表组件内容【html代码】
  • 不用挂载到某个标签中
  • 避免重复开发

分类

  • 全局组件

    • 语法

      1
      2
      3
      vue实例.components("组件名",{
          //全局组件内容,这里面和vue实例的差不多,单多了个template代表组件内容 data metd .
      })

  • 局部组件

    • 语法

      1
      2
      3
      4
      5
      6
      Vue.createApp({
          components:{
              组件名:组件定义,
              ...,
          }
      })

全局组件VS局部组件

  • 全局组件:到处可以使用【全局组件是在vue实例中注册】
  • 局部组件:谁注册了局部组件,谁才可以使用。

案例

全局案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.global.js"></script>
</head>
<body>

<div id="app">
     <xx></xx>
     <xx></xx>
</div>

</body>
<script>
    //创建vue的实例

    const param = {
        data() {
            return {
                age:10
            }
        },
        methods:{

        },
        watch:{

        },
        computed:{  //对属性加工

        },
    }

    //Vue.createApp 创建一个Vue实例

    //mount:确定View范围（当前Vue实例和View绑定）
    var app = Vue.createApp(param);
    
    app.component("xx",{
        data() {
            return {
                age:20
            }
        },
        template:"<div style='background-color: skyblue;height: 50px'>{{age}}</div>",
    });

    app.mount('#app');

</script>
</html>

局部组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.global.js"></script>

</head>
<body>

<div id="app">
    {{age}}
    <!--app实例的局部组件-->
    <inner-com></inner-com>
    <!--全局组件-->
    <outter-com></outter-com>
</div>
</body>

<script>
    //创建vue的实例
    const inner = {
        data() {
            return {
                 age:20
            }
        },
        template:"<div style='background-color: red'>{{age}} <outter-com></outter-com></div>"
    }
    const param = {
        data() {
            return {
                age:10
            }
        },
        components:{
            innerCom:inner
        }
    }

    var app = Vue.createApp(param);

    app.component("outter-com",{
        data() {
            return {
                age:30
            }
        },
        template:"<div style='background-color: blue'>{{age}} </div>"
    })
    app.mount('#app');
</script>
</html>

全局组件独立性验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.global.js"></script>


</head>
<body>

<div id="app">
    {{age}}
    <xx></xx>
    <xx></xx>
</div>




</body>


<script>
    //创建vue的实例

    const param = {
        data() {
            return {
                age:10
            }
        }
    }

    //Vue.createApp 创建一个Vue实例

    //mount:确定View范围（当前Vue实例和View绑定）
    var app = Vue.createApp(param);

    //全局
    app.component("xx",{
        data() {
            return {
                age:20
            }
        },
        methods:{
          add(){
              this.age = this.age+10;
          }
        },
        created() {
            console.log("全局组件创建了....");
        },
        template:"<div style='background-color:skyblue;height: 50px'>{{age}}<button v-on:click='add'>增加age</button></div>",


    });

    app.mount('#app');

</script>

</html>

局部组件独立性验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.global.js"></script>


</head>
<body>

<div id="app">
    {{age}}

    <inner></inner>
    <inner></inner>
    <xx></xx>
</div>
</body>
<script>
    //创建vue的实例


    const xx = {
        data() {
            return {
               name:"局部组件中的局部组件"
            }
        },
        template:"<div>{{name}}</div>",
    }


    const inner = {
        data() {
            return {
                age:20
            }
        },
        methods:{

            add(){
                this.age = this.age + 10;
            }
        },
        template:"<div>{{age}} <button v-on:click='add'>修改age</button>  <xx></xx> </div>",
        created() {
            console.log("局部组件被创建了..........");
        },
        components:{
            xx
        }
    }
    const param = {
        data() {
            return {
                age:10
            }
        },
        components:{
            inner,
            xx
        }
    }

    //Vue.createApp 创建一个Vue实例

    //mount:确定View范围（当前Vue实例和View绑定）
    var app = Vue.createApp(param);
    app.mount('#app');

</script>
</html>

组件通讯

通常一个单页应用会以一棵嵌套的组件树的形式来组织

1655344438474

父向子

简单参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.global.js"></script>
</head>
<body>

<div id="app">
    {{age}}

<!--
   父向子:
     步骤
        子组件中写props
        在使用子组件的时候就可以使用自定义的属性给该属性赋值
-->
    <!--  字面传递  -->
    <inner user-age="100"></inner>
    <inner :user-age="age"></inner>
</div>
</body>
<script>
    //创建vue的实例
    const inner = {
        data() {
            return {

            }
        },
        props:{  //自定义属性
            userAge:0
        },
        template:"<div>子组件的数据:{{userAge}}</div>"
    }

    const param = {
        data() {
            return {
                age:10
            }
        },
        components:{
            inner
        }
    }
    var app = Vue.createApp(param);
    app.mount('#app');
</script>
</html>

复杂参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.global.js"></script>
</head>
<body>

<div id="app">

    <inner :users="users" :num="100"></inner>

</div>
</body>
<script>
    //创建vue的实例
    const inner = {
        data() {
            return {

            }
        },
        props:{
            users:{
                type:Array,
                default:[]
            },
            num:{
                type:Number,
                default: 0
            }
        },
        template:`<div>
            我的num是:{{num}}
            <p v-for="user in users">{{user}}</p>
        </div>`,
    }

    //父
    const param = {
        data() {
            return {
                users:[
                    {"name":"zs","age":10},
                    {"name":"zs","age":10},
                    {"name":"zs","age":10},
                ],
                xx:10
            }
        },

        components:{
            inner
        }
    }
    var app = Vue.createApp(param);
    app.mount('#app');
</script>
</html>

子向父

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.global.js"></script>
</head>
<body>

<div id="app">

    <p>
        这是父的{{num}}
    </p>

   <inner :num="num" @xx="changeNum" :step="2" @minus="minus"></inner>
   <inner :num="num" @xx="changeNum" :step="10" @minus="minus"></inner>
</div>
</body>
<script>

    //子向父传递参数的语法
       //子:this.$emit("函数名",[参数])

    //创建vue的实例
    //子
    const inner = {
        data() {
            return {
            }
        },
        props:{
          num:{
              type:Number,
              default:0
          },
          step:{
            type:Number,
            default:1
          }
        },
        methods:{
            add(){
                //this.num = 110;
                this.$emit("xx",this.step); //就会调用使用子组件标签中的@xx属性对应的方法
            },
            minus(){
                this.$emit("minus"); //就会调用使用子组件标签中的@minus属性对应的方法
            }
        },
        template:`<div style="background-color: skyblue">
            {{num}}
            <a v-on:click.prevent="add" href="http://baidu.com" style="color: red">修改</a>
            <a v-on:click.prevent="minus" href="http://baidu.com" style="color: red">减法</a>
        </div>`
    }


    //父
    const param = {
        data() {
            return {
                num:10
            }
        },
        //注册
        components:{
            inner
        },
        methods:{
            changeNum(stepParam){
                this.num = this.num + stepParam;
            },
            minus(){
                this.num--;
            }
        },
        watch:{
            num(newVal,oldVal){
                if(newVal<=0){
                    this.num = 1;
                }
            }
        }
    }
    var app = Vue.createApp(param);
    app.mount('#app');
</script>

</html>

ES6扩展知识

let

含义

和var一样用来声明变量的

和var的区别

  • var的作用域只有全局和局部,let除了又全局和局部作用域还有块级作用域
  • var存在变量提升,而let没有
  • var没有暂时性死区而let存在暂时性死区

案例分析

自行分析结果是什么?以及为什么?

1
2
var userName;
console.log(userName);   //undefined,因为userName声明了但是没有给值
1
2
3
4
5
6
if (true) {
    var a = 10;
    let b = 20;
}
console.log(a); //10
console.log(b); //ReferenceError: b is not defined,因为let具有块级作用域
1
2
3
4
5
6
7
8
9
var tmp = new Date();
function fn(){
    console.log(tmp); //当前时间
    if(false){
        var tmp = 'hello world';
    }
}
 
fn();  //调用后打印undefined,因为var声明的变量会提升
1
2
console.log(foo);   //打印undefined,应为var声明的变量会提升
var foo = 2;     
1
2
console.log(bar); //Cannot access 'bar' before initialization,因为let声明的变量具有暂时性死区
let bar = 2;      
1
2
3
4
5
6
//let具有暂时性死区:
var temp = 123;
if(true){
    temp = 'abc';//Cannot access 'temp' before initialization,因为let声明的变量具有暂时性死区
    let temp;
}

const

es6中的用来声明常量的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

        console.log("xx");

        const PI = 3.14;
        PI = 3.14159;  //会报错为什么?,因为const是用来声明常量的
    </script>
</head>
<body>
</body>
</html>

模板字符串

含义

  • 使用反引号将字符串括起来
  • 里面使用${对象.属性}方式获取指定对象的属性值

好处

比传统方式字符串拼接更加方便

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

        function loaded(){
           let contentDIV = document.getElementById("content");

           let user = {
               "name":"zs",
               "age":10
           }

           //contentDIV.innerText ="名字是:"+user.name+"年龄是:"+user.age;

           //``
            contentDIV.innerText=`名字是:${user.name}年龄是:${user.age}`;
        }
    </script>
</head>
<body onload="loaded()">

   <div id="content">

   </div>
</body>
</html>

rest参数

含义

  • 和java的可变参数一样
  • 本质就是一个数组

语法

1
2
3
4
函数(...形参){
    ....
}

注意点

  • 一个函数最多只能有一个rest参数
  • rest参数只能做为最后一个参数

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

        function add(... param){   //本质就是数组
            let sum = 0;
            for(let item of param){
                sum = sum + item;
            }
            return sum;
        }

        alert(add(1,2));
        alert(add(1,2,3,4));



    </script>
</head>
<body>

   <div id="content">

   </div>

</body>
</html>

箭头函数

含义

一种简写的函数方式

王道做法

  • 将以前函数的function去掉
  • 在形式参数和函数体的中间添加=>即可

箭头函数注意点

  • this代表上下文
  • 箭头函数中不可以使用arguments对象,如果要使用可以用rest参数代替
  • 箭头不可以作为构造函数,否则会报错

案例一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
       //箭头函数
           //含义:带有=>函数

       /*
       let say = function(param){
           console.log(param);
       }
       */

       /*
       let say = (param)=>{
           console.log(param);
       }
       */

       /*  //因为只有一个参数,所以()可以省略
       let say = param=>{
           console.log(param);
       }
       */


       /* 因为只有一行函数体所以{}可以省略
       let say = param=>
           console.log(param);
       */
 

       let add=()=>{
           return 10;
       }
 
       let getObj=()=>{
           return {"name":"xx"}
       }

       //数组的遍历
       let nums = [1,2,3,4];

       //原始、in、of、forEach

       /*
       nums.forEach(function(item,index){
           console.log(item);
           console.log(index);
       });
       */

       nums.forEach((item)=>{
           console.log(item);
       });


       setTimeout(()=>{
           console.log("xx");
       },1000);


       nums = [18,2,5,9];
       nums.sort((a,b)=>{
           return b-a;
       });

       console.log(nums);
    </script>
</head>
<body>
</body>
</html>

案例二

主要讲解注意点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
   <button id="one">one</button>
   <button id="two">two</button>

</body>

<script>
    //箭头函数中的this
    //是指上下文【环境】

    console.log(this); //window

    document.getElementById("one").onclick=function(){
        console.log(this);  //<button id="one">one</button>
    }

    document.getElementById("two").onclick=()=>{
        console.log(this);  //window
    }

    //创建对象


    //为什么报错?
    /*
    let User = ()=>{
        this.name = "xx";
        this.age = 10;
    }

    let xxUser = new User();

    console.log(xxUser);

     */

    //为什么报错?
    /*
    //arguments is not defined,真的要使用使用rest参数代替
    let say = ()=>{
        console.log(arguments); //会报错
    }
    */
</script>

</html>

Class

含义

类,用来创建对象的，是对象的模板

constructor

含义

构造器\构造函数\构造方法

特点

  • 默认有一个无参构造器

  • 默认返回this

    • 可以手动return this
    • 也可以手动return 其他对象

原型

含义

  • 每一个类都有一个唯一的原型
  • 该类创建的对象共享类的原型。
  • 该类创建的对象,可以继承到原型的属性或方法

获取

  • 类名.prototype
  • 对象名.__proto__

静态

语法

  • 类名.属性=属性值;
  • 类名.属性
  • 类名.方法=方法;
  • 类名.方法

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<script>
			
			class User{
				//默认有一个无参的构造器,返回this(此时这个this就是代表当前对象)
				constructor(name,age) {
					this.name = name;
					this.age = age;
					//默认有这一行代码,可写可以不写
					//return this;
				}
				
				toString(){
					console.log("名称=",this.name,"年龄=",this.age);
				}
			}
			
			//用new关键字创建对象
			let zs=new User('zs',10);
			console.log(zs);
			zs.toString();
			
			
			//构造器可以return 其他对象
			class MyDate{
				constructor() {
				    //return this;
					return new Date();
				}
			}
			
			let myDate = new MyDate(); //相当于let myDate = new Date();
			console.log(myDate);
			
			console.log("-------------类的原型-----------");
			
			console.log("每个类都有唯一的原型"); //A
			console.log("类创建的对象,都会共享类的唯一原型"); //A
			console.log("创建的对象会继承该类的原型属性或方法");
			console.log("原型获取:","类名.prototype","对象.__proto__");
			
			class Student{
				constructor(name,sex) {
				    this.name = name;
					this.sex=sex;
				}
			}
			//给原型添加属性和方法
			Student.prototype.contry='中国';
			
			
			Student.prototype.say=function(){
				console.log(this);            //哪个对象调用该方法,此时的this就是谁
				console.log("我爱你中国");
			};
			
			//思考
			Student.prototype.cry=()=>{
				console.log(this);            //此时的this又是什么呢？？,结果是window对象,
				                              //因为箭头函数的this,就是在函数声明时候所在的环境        
			};
			
			
			
			let stu1 = new Student('zs',10);
			
			
			console.log(stu1.contry);
			//stu1.country="梅州"; //思考这样修改对stu2有没有影响??没有的,因为这样仅仅是修改stu1的
			
			stu1.say();
			
			let stu2 = new Student('ls',20);
			console.log(stu2.contry);
			stu2.say();
			
			
			console.log(Student.prototype==stu1.__proto__);
			console.log(stu2.__proto__==stu1.__proto__);
			
			
			class Car{
				
			}
			//静态属性和方法
			Car.namexx="比亚迪";
			Car.say=function(){
				console.log("中国加油");
			}
			
			let car1 = new Car();
			console.log(car1.namexx); //undefined
			
			console.log(Car.namexx);  //ok
			
			Car.say();
			
		</script>
	</head>
	<body>
		
	</body>
</html>

传统开发模式的主要问题

  • 命名冲突

    多个js文件中如果存在相同的变量名的时候,后者会覆盖前者

  • 文件依赖

    开发人员必须要很清楚js之间的依赖关系,并指定其加载顺序

  • 项目庞大之后维护、扩展、管理很麻烦

模块化

含义

把特定功能封装到一个模块中(其实就是一个单独的js文件),可以暴露需要暴露的信息。

特点

  • 模块与模块之间相互隔离
  • 模块可以引用其他模块

常见模块化规范

前端

  • AMD
  • CMD

后端

  • CommonJS

ES6模块化

含义

在ES6模块化规范诞生之前, JavaScript社区已经尝试并提出了AMD, CMD,CommonJS等模块化规范但是, 这些规范还存在一定的差异性与局限性, 并不是浏览器与服务端通用的模块化标准; 因此,ES6语法规范,在语言层面生定义了ES6模块化规范, 是浏览器与服务端通用的模块化开发规范;

规范

  • 一个js文件就是一个模块
  • 通过export暴露模块中信息
  • 通过import导入模块中的信息

import

含义

导入

注意点

  • import命令具有提升效果，会提升到整个模块的头部，首先执行
  • import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构
  • 如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次
  • 拆解导入

案例一

one.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//es6模块化
    //含义:支持浏览器和服务器端的;在语言的层面上实现的
	//两种命令
	    //export
		     //导出（暴露访问接口）
		//import
		     //导入
/*	
export let userName ="zs";
export let age =10;
export let say = function(){
	alert(userName);
};
*/
let userName ="zs";
let age =10;
let say = function(){
	alert(userName);
};

let phone=110;

export {
	userName,
	age,
	phone as userPhone,//别名
	say
}

index.js

1
2
3
4
5
6
7
8
9
10
11
//导入
console.log(myPhone);

import {userName} from './one.js';
import {age,say,userPhone as myPhone} from './one.js';
 
//alert(userName);
//alert(age);
//say();
//say();

02模块化.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="./js/index.js" type="module"></script>
	</head>
	<body>
		模块化
	</body>
</html>


案例二

a.js

1
2
3
4
5
6
7
8
9
//没有使用模块化的确定
   //名字冲突
   //顺序
 
export let userName='ls';
export let sayName=function(){
	console.log("a.js;"+userName);
}

b.js

1
2
3
4
5
6
7
8
9
//没有使用模块化的确定
   //名字冲突
   //顺序 
 
export let userName='ZS';
export let sayName=function(){
	console.log("b.js;"+userName);
}

otherIndex.js

1
2
3
4
5
6
7
8
9
10
11
12
13
//使用a.js
console.log("a.js"+aModule.userName);
aModule.sayName();


console.log("b.js"+bModule.userName);
bModule.sayName();


//*代表导入全部,但是此时必须要给一个别名
import * as aModule from './a.js';
import * as bModule from './b.js';

03模块化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="./js/otherIndex.js" type="module"></script>
	</head>
	<body>
		模块化
	</body>
</html>


案例三

myDefault.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//默认导出
let userName = 'xx';
//export default userName;

//默认导出函数
//export default function(){
	//console.log("hello");
//}

//默认导出对象
export default {
	userName:'老吴',
	say:function(){
		console.log(this.userName);
	}
}

defaultIndex.js

1
2
3
4
5
6
import  xy from "./myDefault.js"

console.log(xy);
 
 xy.say();

04模块化.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="./js/defaultIndex.js" type="module"></script>
	</head>
	<body>
		模块化
	</body>
</html>


最后编辑：2022-07-18