几分钟了解js的模块化、IIFE。

我心飞翔 分类:javascript

模块化

目前规定的四种模块化规范: CommonJS、AMD、CMD、ES6 Modules import
分为下面四点:

  1. CommonJS
  2. AMD
  3. CMD
  4. ES6 Modules

一: CommonJS:

      node模块中采用的就是CommonJS模块规范,  
      暴露模块的方法: module.exports = xxx,
      引入模块的方法: require(xxx)  //三方模块为:模块名; 自定义模块为: 路径名
      特点: 加载模块是同步的: 加载完成,继续执行流程,
		
 

二: AMD:

    暴露模块的方法: define(function(){
                    return 模块
    })
    若暴露出的模块有依赖模块则: define([], function(){
                    //数组中填写依赖模块名
                    //可以在function中带参数给依赖模块取别名
                    return 模块
    })
    引入模块的方法: require([], function(模块名,[...]){

    })
    
 

三: CMD:

    CMD是专门用于浏览器端. 异步加载. CommonJS与AMD的结合
    [若需详细了解可以查看:](https://juejin.cn/post/6844903744518389768#heading-40)
	
 

四: es6 Modules

    默认暴露模块: export default () => {
            xxx
    }
    选择性暴露模块 export xxx
    举例: 
            export function foo() {
                    console.log('哈哈哈,我导出了一个方法哦!')
            }
    引入模块的方法: 
            import { foo } from '文件名{文件名可以是路径 可以是库名}'
            //可以按需引入 模块中的暴露出来的方法、值、对象
 

拓展知识

IIFE:立即执行函数

立即执行函数的几种写法:

第一种:

(function foo(){
  console.log('我是第一个立即执行函数')
})()
 

第二种:(规范推荐写法)

(function foo(){
  console.log('我是第二个立即执行函数')
}())
 

第三种:

let foo = function foo(){
	console.log('我是第三个立即执行函数')
}()
 

第四种:

true && function foo(){
	console.log('我是第四个立即执行函数')
}()
 

总结:
第一种常见、已分辨该函数为立即执行函数;第二种为规范式写法;第三种到第四种为 当函数作为表达式运行时,可以在不需要写为()()。 () js自动解析为表达式。以此,立即执行函数的函数表达式的写法有多种。

对于带参数的立即执行函数. 举例一个加法函数

(function sum(a, b){
	console.log(a + b) // 3
})(1, 2)
 

全局上下文(GO)、函数上下文知识(AO)

下面一题答案:

console.log(a)
var a = 5;
function a(){
	console.log('这里是函数知识')
}
 

答案见评论区

知识小店

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
//实现三行文字,省略号显示
 

回复

我来回复
  • 暂无回复内容