JavaScript的模块化开发框架Sea.js上手指南

 更新时间:2016年05月12日 15:52:30   作者:qiangck  
Sea.js的目的是追求简单的代码书写和组织方式,Sea.js并没有过多功能而是主要对前端程序的部署结构作出约束,下面我们就来看一下JavaScript的模块化开发框架Sea.js上手指南:

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

Sea.js所有源码都存放在 GitHub 上:https://github.com/seajs/examples,目录结构为:

1
2
3
4
5
6
7
8
9
10
examples/
 |-- sea-modules   存放 seajs、jquery 等文件,这也是模块的部署目录
 |-- static      存放各个项目的 js、css 文件
 |   |-- hello
 |   |-- lucky
 |   `-- todo
 `-- app       存放 html 等文件
    |-- hello.html
    |-- lucky.html
    `-- todo.html

引入seajs主文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script src="js/sea.js"></script>
<script type="text/javascript">
  // seajs配置项
  seajs.config({
    //设置基本的JS路径(引用外部文件的根目录)
    base:"./js",
    //设置别名(方便后面引用使用)
    alias:{
      "jQuery":"jquery.js"
    },
    //路径配置(跨目录调用或者目录比较深时使用)
    paths: {
      'jQuery': 'http://libs.baidu.com/jquery/2.0.0/'
    },
    //设置文件编码
    charset:"utf-8",
    //预加载文件
    preload:['jQuery']
  });
  // 引用主入口文件
  seajs.use(['main','jQuery'],function(e,$){
    //回调函数
    alert("全部加载完成");
  });
</script>

seajs主入口文件(main)

1
2
3
4
5
6
7
8
9
10
11
12
13
define(function(require, exports, module) {
  // 主入口文件引入其他文件依赖
  //var testReQ = require('index');
   var testReQ = require.async('index',function(){
      //异步加载回调
      alert("我是异步加载的index的回调函数");
   });
  // 运行index释放的接口方法
  // testReQ.testInit();
 
  // 运行index释放的接口方法(module)
  testReQ.textFun();
});

seajs依赖文件(index)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
define(function(require, exports, module) {
  // 对外释放接口
  exports.testInit = function(){
    alert("我是一个接口");
  };
  // 如果需要释放大量接口,可以使用module
  var testObj = {
    name:"qiangck",
    sex:"man",
    textFun:function(){
      alert("我是一个使用module.exports的对象方法");
    }
  }
  // module.exports接收obj对象
  module.exports = testObj;
});

文件的加载顺序

2016512154937332.png (726×233)

下面我们从 hello.html 入手,来瞧瞧使用 Sea.js 如何组织代码。

在页面中加载模块

在 hello.html 页尾,通过 script 引入 sea.js 后,有一段配置代码:

1
2
3
4
5
6
7
8
9
10
// seajs 的简单配置
seajs.config({
 base: "../sea-modules/",
 alias: {
  "jquery": "jquery/jquery/1.10.1/jquery.js"
 }
})
 
// 加载入口模块
seajs.use("../static/hello/src/main")

sea.js 在下载完成后,会自动加载入口模块。页面中的代码就这么简单。

模块代码

这个小游戏有两个模块 spinning.js 和 main.js,遵循统一的写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 所有模块都通过 define 来定义
define(function(require, exports, module) {
 
 // 通过 require 引入依赖
 var $ = require('jquery');
 var Spinning = require('./spinning');
 
 // 通过 exports 对外提供接口
 exports.doSomething = ...
 
 // 或者通过 module.exports 提供整个接口
 module.exports = ...
 
});

上面就是 Sea.js 推荐的 CMD 模块书写格式。如果你有使用过 Node.js,一切都很自然。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

相关文章

  • 微信小程序(十六)form组件详细介绍

    微信小程序(十六)form组件详细介绍

    这篇文章主要介绍了微信小程序form组件详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • 微信小程序 地图定位简单实例

    微信小程序 地图定位简单实例

    这篇文章主要介绍了微信小程序 地图定位简单实例的相关资料,并附实例代码及实现效果图,需要的朋友可以参考下
    2016-10-10
  • 一端时间轮换的广告

    一端时间轮换的广告

    一端时间轮换的广告...
    2006-06-06
  • sessionStorage多Tab标签页数据共享问题分析

    sessionStorage多Tab标签页数据共享问题分析

    这篇文章主要为大家介绍了sessionStorage多Tab标签页数据共享问题分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 微信小程序 支付后台java实现实例

    微信小程序 支付后台java实现实例

    这篇文章主要介绍了微信小程序 支付后台java实现实例的相关资料,需要的朋友可以参考下
    2017-05-05
  • js前端表单数据处理表单数据校验

    js前端表单数据处理表单数据校验

    这篇文章主要为大家介绍了js前端表单数据处理表单数据校验示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 手把手教你从0搭建前端脚手架详解

    手把手教你从0搭建前端脚手架详解

    这篇文章主要介绍了手把手教你从0搭建前端脚手架详解,脚手架就是在启动的时候询问一些简单的问题,并且通过用户回答的结果去渲染对应的模板文件,需要的朋友可以参考下
    2023-03-03
  • JavaScript Page Visibility API检测页面是否可见方法详解

    JavaScript Page Visibility API检测页面是否可见方法详解

    这篇文章主要为大家介绍了JavaScript Page Visibility API检测页面是否可见方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • JavaScript数组去重方案

    JavaScript数组去重方案

    这篇文章主要介绍了JS数组方案,先总结一下我们数组的方法:pop、push、shift、unshift、slice、splice、sort、reverse、concat、join、indexOf、lastIndexOf、map、forEach,下面文章将详细对他们做个详细介绍,需要的朋友可以参考一下
    2021-09-09
  • 微信小程序 scroll-view组件实现列表页实例代码

    微信小程序 scroll-view组件实现列表页实例代码

    这篇文章主要介绍了微信小程序 scroll-view组件实现列表页实例代码的相关资料,scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载 ,需要的朋友可以参考下
    2016-12-12

最新评论