js模塊化規範—CMD規範

時間 2019-11-12

原文原文鏈接

CMD規範說明javascript

專門用於瀏覽器端, 模塊的加載是異步的，模塊使用時纔會加載執行，github地址html

CMD基本語法java

定義暴露模塊git

//定義有依賴的模塊
define(function(require, exports, module){
    //引入依賴模塊(同步)
    var module2 = require('./module2')
    //引入依賴模塊(異步)
      require.async('./module3', function (m3) {
        
      })
    //暴露模塊
    exports.xxx = value
})

引入使用模塊github

define(function (require) {
    var m1 = require('./module1')
    var m4 = require('./module4')
    m1.show()
    m4.show()
})

CMD規範的實現（瀏覽器端）瀏覽器

CMD規範須要用到sea.js，下載sea.js, 並引入，將sea.js導入項目: js/libs/sea.js異步

建立項目結構async



|-js
  |-libs
    |-sea.js
  |-modules
    |-module1.js
    |-module2.js
    |-module3.js
    |-module4.js
    |-main.js
|-index.html

定義sea.js的模塊代碼：module1.js函數

define(function (require, exports, module) {
  //內部變量數據
  var data = 'atguigu.com'
  //內部函數
  function show() {
    console.log('module1 show() ' + data)
  }

  //向外暴露
  exports.show = show
})

定義sea.js的模塊代碼：module2.jsui

define(function (require, exports, module) {
  module.exports = {
    msg: 'I Will Back'
  }
})

定義sea.js的模塊代碼：module3.js

define(function (require, exports, module) {
  const API_KEY = 'abc123'
  exports.API_KEY = API_KEY
})

定義sea.js的模塊代碼：module4.js

define(function (require, exports, module) {
  //引入依賴模塊(同步)
  var module2 = require('./module2')

  function show() {
    console.log('module4 show() ' + module2.msg)
  }

  exports.show = show
  //引入依賴模塊(異步)，最後執行，由於是異步的，主線的先執行完纔會執行這
  require.async('./module3', function (m3) {
    console.log('異步引入依賴模塊3  ' + m3.API_KEY)
  })
})

main.js : 主(入口)模塊

define(function (require) {
  var m1 = require('./module1')
  var m4 = require('./module4')
  m1.show()
  m4.show()
})

如何使用模塊

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/libs/sea.js"></script>
<script type="text/javascript">
  seajs.use('./js/modules/main')
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。