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

 

2、多个导出

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

export {
    name,
    age,
    showName
}



//2.html----------------------------------------------------------------

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

4、export default 导出

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

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


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

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

 

测试小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--------------------------------------