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 相关文章推荐
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
小程序登录/注册页面设计的实现代码
May 24 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输出XML到页面的3种方法详解
2013/06/06 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
对python中UDP,socket的使用详解
2019/08/22 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
python 下载文件的几种方法汇总
2021/01/06 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
工作简历自我评价
2015/03/11 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
话题作文之成长
2019/12/09 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP