CommonJS,AMD,ES6模块

    xiaoxiao2022-07-07  195

    我们之前写的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'
    最新回复(0)