模块化开发
在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS(nodejs:导出模块export/引入模块require)(只有运行时才能得到这个对象) 和 AMD 两种。前者用于服务器,后者用于浏览器
es6模块化的缺点:pc端存在兼容问题,需要在服务器环境使用
前端模块化规范
- AMD 异步模块定义 (require.js)
- CMD 通用模块定义 (sea.js) //废弃不用
- common.js
- require
- module.exports
- ES6模块化
- import
- export
AMD(require.js)
- npm i requirejs -S
- 在index.html文件内引入require.js
<script data-main="scripts/main" src="scripts/require.js"></script> // data-main 是入口文件 (main.js) // src是require.js路径
- 配置入口文件
//文件配置 (路径等)
require.config({
paths:{
jquery: \'jquery/dist/jquery.min'
},
shim:{
md5:['jquery'] //md5依赖jquery(填写依赖关系)
}
})
// 执行
require(['jquery'],function($){
})
- 自定义模块
defined(['jquery'],function(){
return{
sayHi:function(){
console.log('hi')
}
}
})