sea.js简单使用教程

最新推荐文章于 2022-03-22 15:46:24 发布

chenyanlong_v

最新推荐文章于 2022-03-22 15:46:24 发布

阅读量840

点赞数

CC 4.0 BY-SA版权

如有不足，欢迎纠正

本文链接：https://blog.youkuaiyun.com/longyanchen/article/details/92841036

本文详细介绍了Sea.js模块化加载器的使用方法，包括下载、引入、定义模块、依赖及使用模块等关键步骤，帮助开发者快速掌握Sea.js的基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

sea.js简单使用教程

下载sea.js, 并引入
- 官网: http://seajs.org/
- github : https://github.com/seajs/seajs
- 将sea.js导入项目: js/libs/sea.js

创建项目结构

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

module2.js


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

module3.js


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

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()
})

index.html:


<!--
使用seajs:
  1. 引入sea.js库
  2. 如何定义导出模块 :
    define()
   exports
   module.exports
 3. 如何依赖模块:
   require()
 4. 如何使用模块:
   seajs.use()
-->
<script type="text/javascript" src="js/libs/sea.js"></script>
<script type="text/javascript">
 seajs.use('./js/modules/main')
</script>