javascript模塊化工具之SeaJs和RequireJs

時間 2019-11-29

標籤 javascript 模塊化工具 seajs requirejs 欄目 JavaScript 简体版

原文原文鏈接

JavaScript模塊化工具

sea.Js的使用

注意：再結合第三方包使用時，須要作相關的配置javascript

引入seaJs包（可使用命令下載 npm install --save sea.JS）html

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
      //引包
    <script src="js/sea.js"></script>
  </head>
  <body>

  </body>
  </html>

使用define函數定義模塊java

//這裏的三個參數必須傳
  define(function(require,exports,module){
      //使用require引入其餘模塊
      require('./a')
  });

使用mpdule.exports對外暴露街口對象npm

module.exports={
      name:'張三',
      test:function(){
          console.log('測試')
      }
  }

啓動入口模塊數組

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
      //引包
      <script src="js/sea.js"></script>
      <script>
          //啓動入口模塊 這裏的main.js可簡寫main
          seajs.use('./js/main')
      </script>
  </head>
  <body>

  </body>
  </html>

require.js的使用

引入require.js（可使用命令下載 npm install --save require.JS）模塊化

<!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Document</title>
          //這裏的data-main 就是啓動入口模塊
        <script data-main='js/main' src='js/require.js'></script>
      </head>
      <body>

      </body>
      </html>

使用requirejs函數定義主模塊函數

//參數1爲依賴的其餘模塊，若是沒有依賴，寫[]便可
  //回調函數中的參數跟數組是一一對應的關係
  requirejs(['./a'],function (aName) {
      console.log(aName)
  })

使用define定義有依賴的其餘次模塊工具
```
define(['./b']function(){
      return 'good'
  })
```
使用define定義沒有依賴的其餘次模塊requirejs
```
define(function(){
      return 'good'
  })
```