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>

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