模块化 | 青训营笔记

63 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的第4天

这几天学习了模块化,对模块化又有了进一步的认识,下边是对模块化做的总结。

1.commonJS针对于node

js文件:

`

//npm init初始化 包名不会有汉字和大写 然后自己弄个小写包

//需要下载安装第三方模块 npm install uniq --save

//第三方包的作用是对数组进行去重并排序

//2暴露一个函数 module.exports = function(){}

module.exports = function(){

 console.log('index');
 console.log(23445)

}

3exports.xxx = value

exports.foo=function(){

console.log('foo() index')

}

1module.exports=value暴漏一个对象

module.exports={

 msg:'index',
 foo(){
 
     console.log(this.msg);
 }

} `

app.js内容

`

 module.foo()

 module1.foo()

module1.foo()

`

2.AMD和CMD的区别

*AMD推崇依赖前置,在定义模块的时候就要声明其依赖的模块

*CMD推崇就近依赖,只有在用到某个模块的时候再去require

*AMD在加载完成定义(define)好的模块就会立即执行,所有执行完成后,遇到require才会执行主逻辑。(提前加载)

*CMD在加载完成定义(define)好的模块,仅仅是下载不执行,在遇到require才会执行对应的模块。(按需加载)

mian.js

// AMD需要下载requireJs npm install requirejs --save

//然后把requirejs这个文件复制粘贴到libs这个文件夹里面,到时候还有在html里面引这个文件 `

`

3.ES6模块化

3种暴露,3种引入 `

<script type="module">
    //1.通用的引入方式
    import * as m1 from './src/js/m1.js'
    console.log(m1)
    import *as m2 from './src/js/m2.js'
    console.log(m2)
    import * as m3 from './src/js/m3.js'
    m3.default.change()

    //2.简便形式 只针对默认暴露
    import ms from './src/js/m3.js'
    console.log(ms)

    //3.结构赋值模式
    import {school,change} from './src/js/m1.js'
    console.log(school,change)
    import {school as h,what} from './src/js/m2.js'
    console.log(h)
    import {default as w} from './src/js/m3.js'
    console.log(w)
</script>

`