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

1,192 阅读2分钟

模块化

目前规定的四种模块化规范: 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是专门用于浏览器端. 异步加载. CommonJSAMD的结合
    [若需详细了解可以查看:](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('这里是函数知识')
}

答案见评论区

知识小店1

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

//在react中
1. 使用/* autoprefixer: ignore next */ 对-webkit-box-orient: vertical;进行过滤
2. 直接使用行内元素
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

知识小店2

?. //在对于后端返回的数据进行判断
const obj = {
info: {
        name: 'echo',
        age: 6
    }
}
const obj2 = {
info: null
}
console.log(obj.info?.name) //"echo"
console.log(obj2.info?.name) //undefined
console.log(obj.info.name) //Error: Cannot read property 'name' of null
>若不使用?. 判断则为: obj.info ? obj.info.name : null