Module模块化 & Commonjs模块化


    Document

    同步加载js,如放在头部中会先于DOM加载,js会无法获取DOM节点;
    

    async: 异步加载js,js一旦加载完,会立即执行js;如DOM非常多,js非常少,会导致js找不到DOM节点;
    

    defer: 异步加载js,会等到DOM全部加载完才会执行js;等于将<script>写在<body>最后方式;
    




    同步加载js,放在尾部等待所有DOM加载完毕;
    


    
hello
异步加载js,DOM全部加载完后才执行;

demo2.js

import show from './demo'

const say = function (){
    show('hello');
}

export default say;
  • 模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块;这样方便代码的重用,从而提升开发效率,方便后期维护

  • ES6模块化定义:
    1.每个JS文件都是一个独立的模块
    2.导入模块成员import
    3.暴露模块成员export

  • node中默认支持commonjs模块化(require方式);对于es6模块化(import方式)支持并不好,所以需要通过babel第三方插件在node中使用ES6的模块化, 并且需要node版本14.15.1以上


默认导出 和 按需导出; as取别名;
import m, {s1 as sss1, say} from './m1'     

m.show();                                   // 'c'
console.log(sss1)                           // 'a'
say();                                      // 'hello'

m1.js

let a = 1;
let b = 2;
let c = 3;

let show = ()=>{
    console.log('c')
}

//默认导出 只能一个文件中使用一次
export default {
    a,b,show
}

export let s1 = 'a';
export let s2 = 'b';
export function say() {
    console.log('hello');
}

直接导入
import './m1'

m1.js

for(var i = 0; i < 3; i++){
    console.log(i);
}

Common.js模块化

  • 模块作用域:防止全局变量污染,和函数作用域类似。在自定义模块(js文件)中定义的变量、方法成员,只能在当前模块内被访问。这种模块级别的访问限制叫做模块作用域

  • 模块作用域优点:防止全局变量污染;比如在javascript中使用

你可能感兴趣的:(Module模块化 & Commonjs模块化)