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


Posted in Javascript onMay 12, 2016

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

examples/
 |-- sea-modules   存放 seajs、jquery 等文件,这也是模块的部署目录
 |-- static      存放各个项目的 js、css 文件
 |   |-- hello
 |   |-- lucky
 |   `-- todo
 `-- app       存放 html 等文件
    |-- hello.html
    |-- lucky.html
    `-- todo.html

引入seajs主文件

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

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)

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

文件的加载顺序

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

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

在页面中加载模块

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

// 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,遵循统一的写法:

// 所有模块都通过 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,一切都很自然。

Javascript 相关文章推荐
jquery.validate使用攻略 第一部
Jul 01 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 #Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 #Javascript
深入浅析JavaScript中with语句的理解
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 #Javascript
You might like
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
vue小白入门教程
2018/04/02 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Python遍历numpy数组的实例
2018/04/04 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python argparser的具体使用
2019/11/10 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
Java和Javasciprt的区别
2012/09/02 面试题
市场营销专业个人自荐信格式
2013/09/21 职场文书
医护人员英文求职信范文
2013/11/26 职场文书
服装设计专业自荐书范文
2013/12/30 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python