sea.js简单使用教程

sea.js简单使用教程

1. 下载sea.js, 并引入

   • 官网: http://seajs.org/

   • github : https://github.com/seajs/seajs

   • 将sea.js导入项目: js/libs/sea.js

2. 创建项目结构

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

3. 定义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()
     })

4. 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>

sea.js简单使用教程

原文地址：https://www.cnblogs.com/chenyanlong/p/10434687.html