1. 下载require.js, 并引入
* 官网: http://www.requirejs.cn/
* github : https://github.com/requirejs/requirejs
* 将require.js导入项目: js/libs/require.js
定义一个无依赖的模块 dataService.js
定义一个无依赖的模块 dataService.js /* 定义没有依赖的模块 */ define(function () { let msg = 'baidu.com' function getMsg() { return msg.toUpperCase() } return {getMsg} })
定义一个有依赖的模块 alerter.js
/* 定义有依赖的模块 */ define(['dataService', 'jquery'], function (dataService, $) { let name = 'Tom2' function showMsg() { $('body').css('background', 'gray') alert(dataService.getMsg() + ', ' + name) } return {showMsg} })
定义主模块入口 main.js
(function () { //配置 require.config({ //基本路径 baseUrl: 'js/', //映射: 模块标识名: 路径 paths: { //自定义模块 'alerter': 'modules/alerter', 'dataService': 'modules/dataService', //库模块 'jquery': 'libs/jquery-1.10.1', 'angular': 'libs/angular' }, //配置不兼容AMD的模块 shim: { angular: { exports: 'angular' } } }) //引入模块使用 require(['alerter', 'angular'], function (alerter, angular) { alerter.showMsg() console.log(angular); }) })()
最后在页面中引入 index.html
<!DOCTYPE html> <html> <head> <title>Modular Demo 2</title> </head> <body> <script type="text/javascript" src="js/libs/require.js" data-main="js/main.js"></script> </body> </html>
