SeaJS 是一个遵循 CMD 规范的模块化加载框架

CommonJS,CMD,AMD等规范后文会提到,这里主要先了解如何在代码中使用。

如果你有使用过nodejs ,那么理解起来就容易多了。

我们通过sea.js来加载我们定义的模块(这会儿遵循CMD规范)并使用相应的数据。

首先,当然是要下载sea.js,可以直接去http://seajs.org/docs/#downloads 直接下载代码包,解压后 在 /dist/目录下可以 找到 sea.js

CMD规范是懒加载,按需加载,也就是在require的时候相应的模块才会被加载进来。

基本用法为:

define(function(require, exports, module) {

  // The module code goes here
 // require .. });

CMD详细用法见此

举个例子:(为了简单说明,暂时先直接置于同一目录)

index.html是主界面,main.js这里充当了主模块文件(一般需要 seajs.use('.main') 的方式来加载主模块),然后主模块main又调用main1,main2小模块,理解执行过程。

index.html:

首先包含资源sea.js ,再包含主模块,这里因为要执行主模块中返回的数据,所以使用了回调函数的处理

<!DOCTYPE html>
<html>
<head>
<title>Seajs</title>
<style type="text/css">
</style>
</head>
<body> <script type="text/javascript" src="./sea.js"></script>
<script type="text/javascript">
//加载入口文件main.js,默认后缀js自动匹配
seajs.use('./main',function(main){
console.log(main.say());
});
</script>
</body>
</html>

main.js:

这里,main.js定义了一个模块main.js ,在其中又require其他模块进行处理,然后返回一个对象。

返回的时候可以直接使用return,类型会自动判断,也可以module.exports =

比如想返回 ‘w' ,可以直接 return ’w'; 或 module.exports = 'w'; index那里相应做一下修改就行。

define(function(require,exports,module){
console.log('module of main:');
var main1 = require('main1');
main1.say();
var main2 = require('main2');
main2.say(); return {
say: function(){
console.log('main--hello');
}
}; });

main1.js:

define(function(require,exports,module){
console.log('module of main1:'); module.exports = {
say: function(){
console.log('main1--hello');
}
};
});

main2.js:

define(function(require,exports,module){
console.log('module of main2:'); return {
say: function(){
console.log('main2--hello');
}
};
});

ok 浏览器访问index.html 即可看到执行结果:

SeaJS 模块化加载框架使用的更多相关文章

  1. seajs模块化加载框架使用

    seajs是模块化加载框架.seajs.org已经打不开了,seajs的github.seajs速查文档 <!--如果完成下面4步,则seajs掌握了80%js模块化1.引入seajs的库 :& ...

  2. RequireJS 模块化加载框架使用

    RequireJS 是一个遵循 AMD 规范的模块化加载框架 与上文seajs一样,这里简单介绍其相关用法 同样的,首先是下载好 require.js --> http://requirejs. ...

  3. RequireJS与SeaJS模块化加载示例

    web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理, ...

  4. 转: javascript模块加载框架seajs详解

    javascript模块加载框架seajs详解 SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加 ...

  5. javascript模块加载框架seajs详解

    SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加载).SeaJS可以和jQuery完美集成,使用 ...

  6. angularJS1笔记-(20)-模块化加载机制seajs

    SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制. 与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而 ...

  7. js模块化加载器实现

    背景 自es6以前,JavaScript是天生模块化缺失的,即缺少类似后端语言的class, 作用域也只以函数作为区分.这与早期js的语言定位有关, 作为一个只需要在网页中嵌入几十上百行代码来实现一些 ...

  8. 一起写一个Android图片加载框架

    本文会从内部原理到具体实现来详细介绍如何开发一个简洁而实用的Android图片加载缓存框架,并在内存占用与加载图片所需时间这两个方面与主流图片加载框架之一Universal Image Loader做 ...

  9. 该如何理解AMD ,CMD,CommonJS规范--javascript模块化加载学习总结

    是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道requi ...

随机推荐

  1. Scala深入浅出实战经典之 List的foldLeft、foldRight、sort操作代码实战

     Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 腾讯微云:http://url.cn/TnGbdC 3 ...

  2. 在WPF中使用字体图标

    一.源码描述    这是一款基于WPF窗体应用程序的字体图标示例源码,    该源码简单易懂使用于初学者和实战项目应用,    感兴趣的朋友们可以下载看看哦. 二.功能介绍    1.用ICO字体代替 ...

  3. Navi.Soft30.框架.WinForm.开发手册

    阅读导航 Navi.Soft30.Core类库.开发手册 http://www.cnblogs.com/xiyang1011/p/5709489.html Navi.Soft30.框架.WinForm ...

  4. Hadoop 2.7.1 源代码目录结构分析

    采用的源代码是2.7.1的,从这个网站下可以找到2.7.1的代码:https://git1-us-west.apache.org/ ,使用gitclone出来,然后git checkout到2.7.1 ...

  5. Android学习之Handler消息传递机制

    Android只允许UI线程修改Activity里的UI组件.当Android程序第一次启动时,Android会同时启动一条主线程(Main Thread),主线程主要负责处理与UI相关的事件,如用户 ...

  6. 【网络编程】——windows socket 编程

    测试demo #include <winsock2.h> #include <stdio.h> #include <string.h> #include <s ...

  7. 【Cocos2d-Js基础教学(4)cocostudio在cocos2dx-Js中的使用】

    首先我们打开官方网站www.cocos2d-x.org,下载我们安装最新的cocostudio(cocos). 简介: Cocos Studio升级为cocos.更优秀的产品.更优质的服务.游戏开发一 ...

  8. 解决Visual Studio 2010新建工程时出现『1>LINK : fatal error LNK1123: failure during conversion to COFF: file invalid or corrupt』错误

    VS2010在经历一些更新后,建立Win32 Console Project时会出"error LNK1123" 错误.   解决方案为: 第一步:将:项目|项目属性|配置属性|清 ...

  9. C#、.NET网络请求总结(WebClient和WebRequest)

    1.关于WebClient第三方的封装,支持多文件上传等 using System; using System.Collections.Generic; using System.Text; usin ...

  10. <转载> 优秀程序员必备的23条好习惯

    转自 优秀程序员必备的23条好习惯 编程是一项聪明人玩的游戏,它既是对智力的考验,也是对习惯的考验,智力的好坏取决于父母的基因,人们无从左右,但习惯的好坏却是可以不断培养.一项由美国芝加哥大学国家研究 ...