require.js使用教程

require.js使用教程

  1. 下载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中配置

posted @ 2019-02-25 23:40  glacial_water  阅读(883)  评论(0编辑  收藏  举报
Document