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'
  })
```

仅供参考，若有错误，请指明。测试