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>

---

6. 使用第三方基於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}
     })

---

7. 使用第三方不基於require.js的框架(angular)

   • 將angular.js導入項目

   • js/libs/angular.js

• 在main.js中配置