CommonJS,AMD,ES6模块

我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程,再用一种简单的方法把这些小工程连接在一起。
这有可能导致两个问题:
一方面js代码变得很臃肿,难以维护
另一方面我们常常得很注意每个script标签在html中的位置,因为它们通常有依赖关系,顺序错了可能就会出bug
在es6之前为解决上面提到的问题,我们得利用第三方提供的一些方案,主要有两种CommonJS(服务器端)和AMD(浏览器端,如require.js)。
CMD的体现是sea.js

AMD和CMD区别

  • CMD 推崇依赖就近;AMD 推崇依赖前置 CMD 是延迟执行;AMD 是提前执行
  • CMD性能好,因为只有用户需要的时候才执行;AMD用户体验好,因为没有延迟,依赖模块提前执行了
  • AMD和CMD最大的区别是对依赖模块的执行时机处理不同,注意不是加载的时机或者方式不同

首先我们回顾下require.js的写法。假设我们有两个js文件:index.js和content.js,
现在我们想要在index.js中使用content.js返回的结果,我们要怎么做呢?

1.require.js写法(amd)

	//content.js
	define('content.js', function(){
		   return 'A cat';
	})
	//然后require:
	//index.js
	require(['./content.js'], function(animal){
		onsole.log(animal);   //A cat
	})

2.CommonJS写法

	//content.js
	module.exports = 'A cat'

	//index.js
	var animal = require('./content.js')
	

3.ES6的写法

	//content.js
	export default 'A cat'
	
	//index.js
	import animal from './content'
	
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值