JavaScript 模块化开发小白讲解

2020-03-09 0 By admin

一、直接全局开发

前端工程师在开发过程中,如果直接将自己使用的对象、方法或者变量写在全局环境中;就会存在数据使用混乱的隐患。
比如:两个同事的使用了相同的名称创建了对象(方法|变量);因为都在全局环境中;运行过程中,无法确定是哪个对象执行。

var flag = true
if (flag) { console.log('flag is true')}
else { console.log('flag is false')}

二、函数作用域封装

解决上面数据混乱的情况,可以约定每个开发工程师,都将自己的代码写在一个函数中。因为函数中的对象(方法|变量),都被限制在函数作用域中,就不会出现数据混乱的情况。

问题:因为代码都封装在函数中,所以开发工程师在使用到相同功能的方法时,都需要在各自的函数作用域中写代码使用。相同功能的代码,需要写好多遍,这样就不必要的增加了代码量。

(function () {
	const flag = true
	if (flag) {
		console.log('小明做开发');
	}
})()

三、模块化开发

基础的模块化开发:在匿名函数内部,定义一个对象;给对象添加各种需要暴露到外面的属性和方法。最后将这个对象返回(return),并在外面使用变量接受。

module.export 方法,将需要其他位置使用的对象,输出出去。在需要使用到此模块的地方,使用 import 方法进入到自己的代码中。

const moduleA = (function () {
	const obj = {}
	const flag = true
	if (flag) {
		console.log('flag is true');
	}
	function sum(a, b) {
		return a + b
	}
	obj.flag = flag
	obj.sum = sum
	return obj
})()

module.exports = {
	flag: true,
	sum(a, b) {
	}
}

四、常见的模块化规范

前端模块化开发已经有了很多既有的规范,以及对应的实现方案。

4.1、常见的模块化规范:

CommonJS、AMD、CMD,也有ES6的Modules

4.2、CommonJS 模块化规范

CommonJS 导出和导入

module.exports = {
flag: true,
test(a,b){ return a+b},
demo(a,b) {return a*b}
}
let {test,demo,flag} = require('moduleA')

4.3、ES6 的export 和 import 指令

export let name = 'why'
let age = 18
let height = 1.88
export {age,height}

export function test(content){ console.log(content)}
export class Person {
run() { console.log('hello world!')}
}

export default 将模块中的某个功能导出,而且让导入者可以自定义实例化的命名。

//info.js 文件
export default function(){
console.log('helloWorld!')}
//main.js 文件
import myFunc from './info.js'
myFunc()