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. SSAS建模遇到的问题集锦

    1:维度和度量的数据类型一定要一致 2:度量值的类型不能为字符型,因为执行SUM等操作时会报错 3:当度量值中存在着维度表中不存在的Key时,处理的时候设置维度键错误为忽略,如下图所示 4:SSAS多 ...

  2. ASP.NET 4.5 和 Visual Studio 2012 中的新功能

    原文地址:http://www.asp.net/aspnet/overview/aspnet-and-visual-studio-2012/whats-new#_Toc318097372

  3. crontab使用方法和示例

    crond是linux中的一个定时任务常驻程序,它会在每分钟检查一次作业列表,从而达到在指定时间自动运行指定的作业,这个程序对于系统运维来讲必不可少. 通常我们使用crontab程序来设定和管理作业的 ...

  4. MVC的JsonResult用法

    在Asp.net Mvc 2中由于对数据的保护,默认情况下request为post,所以在前端请求的时候则需要以post方式request action方法: public JsonResult Ge ...

  5. Photoshop CS6 for Mac简体中文正式 完美破解版 支持Retina屏

    Photoshop CS6 MAC 中文版破解版 支持Retina屏 目前世界上“最好的化妆品”是一款叫做PhotoShop的产品,它可以帮你去除所有你不满意的地方.上周末,这款最好的化妆品推出了第十 ...

  6. struts2：上传多个文件时实现带进度条、进度详细信息的示范

    上一篇文章讲了上传单个文件与上传多个文件(属性驱动)的例子.本例是上传多个文件(属性驱动),并且显示进度条.进度详细信息的示范. 在文件上传选择界面,允许用户增加.删除选择的文件,且只能上传指定类型的 ...

  7. [原]OpenGL基础教程（五）缓冲区数据更新方式

    1.glBufferSubData 适用于相同数据类型 void SetPositionY(float y){    vector<Vector3<float>>::itera ...

  8. 『Golang』跨平台TUI（基于文字的用户界面）库Terbox-Go文档翻译

    原文 package termbox import "github.com/nsf/termbox-go" termbox-go 是一个用于创建跨平台TUI(基于文本的用户界面)的 ...

  9. DataContractSerializer序列化与反序列化遇到的奇怪问题

    private static void Serialize1(string filename, object obj)         {             var stream = new F ...

  10. LInux : du命令

    Linux du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间的查看,还是和df命令有一些区别的. 1．命令格式: du [选项][文件] 2．命令功能 ...