这是我参与「第四届青训营 」笔记创作活动的第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>