ES6(Module模块化笔记）

在ES6之前，社区规定了一套模块规范

1. Commonjs  主要服务器nodejs       require('http')
2. AMD    requirejs 
3. CMD    seajs

 

模块化    (ps注意:需要放到服务器环境)

如何定义模块

export  东西     ----------------------export const name='唐微'

如何使用

import          ---------------------------import {a} from './1.js

 

import特点

 1、import  可以是相对路径也可以是绝对路径   
 2、import 模块只会导入一次  无论你引入多少次
 3、import './modeles/1.js'     如果这么引入相当于引入文件没有其他作用    比方引入jq   import 'http://code.jquery.com/jquery-migrate-1.2.1.min.js

 

使用方法

1、单个导出

//demo.js------------------------------------------------------------------
console.log('模块1')
export const name='唐微';
export const age='18';
export function showName(){
    console.log('今年我18岁')
}



//demo.html-----------------------------------------------------------------

 <!-- 使用模块的时候     type="module"  -->
<script type="module">

   //1、引入整个文件
   import './demo.js';

   //2、引入jq   单纯引入文件资源  没有其他的作用   
   import 'https://code.jquery.com/jquery-3.3.1.min.js'
   setTimeout(()=>{
        $('body').css({
            'background':'red'
        })
    },3000)


    //3、name的命名是  1.js里const声明的变量
    import {name,age} from './demo.js'
    console.log(name,age)
 </script>

2、多个导出

//2.js------------------------------------------------------------------
// 定义模块   一次导出多个
console.log('模块2')
const name='唐微';
const age='18';
function showName(){
    console.log('今年我18岁')
}

export {
    name,
    age,
    showName
}



//2.html----------------------------------------------------------------
<script type="module">

 //1、直接引入
 // import {name,age} from './2.js';
 // console.log(name,age)


  //2、别名方法引入
  import {name as a,age as b} from './2.js';
  console.log(a,b)
    
</script>

3、别名导出   整个引入

//3.js--------------------------------------------------------------

//别名使用
console.log('模块3-----别名使用')
const name='唐微';
const age='18';
function showName(){
    console.log('今年我18岁')
}

export {
    name as a,
    age as b,
    showName as c
}


//3.html-------------------------------------------------------------
<script type="module">
    //1、别名方法
    // import {a,b} from './3.js';
    // console.log(a,b)
    
    //2、直接导入整个
    import * as moduleAll from './3.js'
    console.log(moduleAll.a,moduleAll.b)

</script>

4、export default 导出

//4.js-------------------------------------------------------------
//defalut方法导出
export default  '哈哈';

export const b=1;
export const c=2;


//4.html-----------------------------------------------------------

<script type="module">
    // import  a from './4.js'
    // console.log(a)

    import  a,{b,c} from './4.js'
    console.log(a,b,c)

</script>

5、import有提升效果,会自动提升到顶部,首先执行

console.log(a+b)
import { a,b } from './1.js'

 

6.导出去的模块内容,如果里面有定时器更改了外面也会更改,不像common规范

//1.js-----------------------------------
var num1=1;
setTimeout(()=>{
    num1=12;    
},2000)

export{
   num1
}


//1.html
<script type="module">

    import { num1 } from './1.js'
    console.log(num1)    //1

    setTimeout(() => {
        console.log(num1)   //12
    }, 3000)


</script>

 

测试小demo

//1.js--------------------------------------------------------------
const a=11;
const b=22;
const sum=function(){
    console.log('sum')
}
const show=function(){
    console.log('show')
}


export{
    a,
    b,
    sum,
    show
}

class Person{
    constructor(name,age){
        this.name=name;
        this.age=age
    }
    showName(){
        return this.name
    }
}

export default {
    Person
}


//1.html--------------------------------------
<script type="module">
    import mod, {
        show,
        sum,
        a,
        b
    } from './1.js'

    let p1=new mod.Person('老唐');
    console.log(p1.showName());
    show();
    sum();
    console.log(a,b)
</script>