模块化

CommonJS

a.js

复制代码
let name = "小明";
let age = 20;
let flag = true;

function sum(num1, num2) {
    return num1+num2;
}

module.exports = {name,age,flag,sum}
复制代码

 

b.js

 

let {name,age,flag,sum} = require('./a.js')

if(flag){
    console.log(sum(10,20))
}

 

index.html

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="a.js" type="module"></script>
<script src="b.js" type="module"></script>
</body>
</html>
复制代码

 

 

ES6模块化

a.js

复制代码
let name = "小明";
let age = 20;
let flag = true;

function sum(num1, num2) {
    return num1+num2;
}

export  {name,age,flag,sum}
//等同于export let flag = true;


复制代码


 


b.js




?
1
2
3
4
5
import {name,age,flag,sum} from './a.js'
 
if(flag){
    console.log(sum(10,20))
}




　　


index.html


复制代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="a.js" type="module"></script>
<script src="b.js" type="module"></script>
</body>
</html>


复制代码




 


 


 


导出函数或者类




 


 


 


export default






 


 


举例


a.js


复制代码


let name = "小明";
let age = 20;
let flag = true;

function sum(num1, num2) {
    return num1+num2;
}

export default {name,age,flag,sum}


复制代码


b.js




import data from './a.js'

if(data.flag){
    console.log(data.sum(10,20));
}

console.log(data.name);




 






            

            
posted @ 
 
iTao0128 
阅读(31) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    



    

        
    

        

            
                
                
            
        

    



    相关博文：

    

            

                · 
                声明对象简写
            

            

                · 
                Vuex模块式开发
            

            

                · 
                二十四、模块化（ export和import ）
            

            

                · 
                ES6导入导出import | export | export default-使用案例
            

            

                · 
                14-前端模块化
            

    





    

    阅读排行：
    

 ·          震惊！C++程序真的从main开始吗？99%的程序员都答错了
        

 ·          【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
        

 ·          单元测试从入门到精通
        

 ·          上周热点回顾（3.3-3.9）
        

 ·          winform 绘制太阳，地球，月球 运作规律
        



    
    



	

	

	
	

	

	

	





    

    
    








  

  
点击右上角即可分享

  微信分享提示

   
    
AI IDE Trae