require.js使用教程

require.js使用教程

1. 下载require.js, 并引入
   • 官网: http://www.requirejs.cn/
   • github : https://github.com/requirejs/requirejs
   • 将require.js导入项目: js/libs/require.js
2. 创建项目结构

   |-js  |-libs    |-require.js  |-modules    |-alerter.js    |-dataService.js  |-main.js|-index.html

3. 定义require.js的模块代码
   • dataService.js

     define(function () {  let msg = ‘atguigu.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}})

4. 应用主(入口)js: main.js

   (function () {  //配置  requirejs.config({    //基本路径    baseUrl: "js/",    //模块标识名与模块路径映射    paths: {      "alerter": "modules/alerter",      "dataService": "modules/dataService",    }  })    //引入使用模块  requirejs( [‘alerter‘], function(alerter) {    alerter.showMsg()  })})()

5. 页面使用模块:<script data-main="js/main" src="js/libs/require.js"></script>

1. 使用第三方基于require.js的框架(jquery)
   • 将jquery的库文件导入到项目:
     • js/libs/jquery-1.10.1.js
   • 在main.js中配置jquery路径

     paths: {          ‘jquery‘: ‘libs/jquery-1.10.1‘      }

   • 在alerter.js中使用jquery

     define([‘dataService‘, ‘jquery‘], function (dataService, $) {    var name = ‘xfzhang‘    function showMsg() {        $(‘body‘).css({background : ‘red‘})        alert(name + ‘ ‘+dataService.getMsg())    }    return {showMsg}})

1. 使用第三方不基于require.js的框架(angular)
   • 将angular.js导入项目
   • js/libs/angular.js

• 在main.js中配置

原文地址：https://www.cnblogs.com/chenyanlong/p/10434682.html