js 模块

1.直接定义变量

let pwd = 'name'

通过script标签引入

多文件会产生冲突

2.定义自调用函数

(function(){
    console.log('111')
})()

没有命名冲突，但无法服用

3.有返回值得自调用函数

var module = (function(){
    return {
        name:'zhang',
        age:18
    }
})()

使用module.name来调用

4.解析有返回值得自调用函数

function(){
    return {
        name:'zhang',
        age:18
    }
}

上面是一个淡出你的函数，一个参数为void，返回值为一个对象的函数。此时如果用module去接受，接受到的就是一个函数，调用也只能采用module()的方式，无法获取函数里面的值。然后采用自调用函数的方式

(function(){
    return {
        name:'zhang',
        age:18
    }
})()

调用该函数，得到返回值，为一个对象，此时用module接受，则module是一个对象，就可以获取里面的值了。但是要注意只能获取return中的值

5.CommonJs导入导出

module.experts

let age = 18

module.exports = {
    age,
    name: 'zhang'
}

require

let {age,name }= require('./index2.js')
let obj = require('./index2.js')

6.ES6模块

一般引入js文件，不是按照模块化引入的，会产生命名冲突。需要在script中添加type=module属性。

导出一个，导入导出的名字要一样

export let king = 18

import {king} from './components/exp1'

导出对象，导入导出的名字要一样

let king = 18;
let name = 'lll'
export let sb = 18

export {
    king,
    name
}


import {king,name,sb} from './components/exp1'

导出默认，可以自定义名字

export default {
    king:18,
    name : 'ooo'
}

import king1 from './components/exp1'