前端模块化开发---AMD

模块化开发

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS(nodejs:导出模块export/引入模块require)(只有运行时才能得到这个对象) 和 AMD 两种。前者用于服务器，后者用于浏览器
es6模块化的缺点:pc端存在兼容问题,需要在服务器环境使用

前端模块化规范

1. AMD 异步模块定义 (require.js)
2. CMD 通用模块定义 (sea.js) //废弃不用
3. common.js
   • require
   • module.exports
4. ES6模块化
   • import
   • export

AMD(require.js)

1. npm i requirejs -S
2. 在index.html文件内引入require.js

   <script data-main="scripts/main" src="scripts/require.js"></script>
   // data-main 是入口文件 (main.js)
   // src是require.js路径
   

3. 配置入口文件

//文件配置 (路径等)
require.config({
    paths:{
        jquery: \'jquery/dist/jquery.min'
    },
    shim:{
        md5:['jquery']  //md5依赖jquery(填写依赖关系)
    }
})

// 执行
require(['jquery'],function($){

}) 

4. 自定义模块

defined(['jquery'],function(){
    return{
        sayHi:function(){
            console.log('hi')
        }
    }
})