SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。

jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs体验</title>
<script src="../../node_modules/seajs/dist/sea.js"></script>
<script>
//在seajs中模块的引用必须要用完整的相对路径或者是从根目录开始写完整
seajs.use('./calculator.js',function (calculator) {
console.log(calculator.add(1,3));
console.log(calculator.subtract(4,8));
})
</script>
</head>
<body> </body>
</html>

  js:

//自定义一个模块 遵循seajs规范
define(function (require, exports, module) {
//此处是模块的私有空间
function add(a,b) {
return parseFloat(a) + parseFloat(b);
}
function subtract(a,b) {
return parseFloat(a)-parseFloat(b);
}
//暴露模块的公共成员
exports.add = add;
exports.subtract = subtract;
});

 这里通过use方法的方式引入模块,我们还可以通过require的方式引入模块,一般是js和js之间的调用,这种比较常用。

convertor.js:

define(function (require,exports,module) {
//公开一些转换逻辑
exports.convertToNumber = function (input) {
return parseFloat(input);
}
})

  calculator.js:

define(function (require, exports, module) {
var convertor = require('./convertor.js');//此处是同步加载方式 如果用异步需要写成 require.async('',function(){})这个是没有返回值的加载完成后会执行回调函数
//此处是模块的私有空间
function add(a,b) {
return convertor.convertToNumber(a) + convertor.convertToNumber(b);
}
function subtract(a,b) {
return convertor.convertToNumber(a)-convertor.convertToNumber(b);
}
//暴露模块的公共成员
exports.add = add;
exports.subtract = subtract;
});

  这里有个问题,如果exports.xxx = xxx;这样的方式暴露公共成员的话其实是都挂载在module下的,如果换成module.exports = XXX;那么就会只暴露出这一个成员变量出去.最终到处的以他为准。此外还可以使用return的方式暴露成员,return的优先级别最高。一般来说我们不用return,而是在exports.xxx和module.exports=xxx中做选择。

angularJS1笔记-(20)-模块化加载机制seajs的更多相关文章

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

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

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

    SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS,CMD,AMD等规范后文会提到,这里主要先了解如何在代码中使用. 如果你有使用过nodejs ,那么理解起来就容易多了. 我们通 ...

  3. Dojo初探之1:AMD规范,编写符合AMD规范(异步模块加载机制)的模块化JS(其中dojo采用1.11.2版本)

    一.AMD规范探索 1.AMD规范(即异步模块加载机制) 我们在接触js的时候,一般都是通过各种function来定义一些方法,让它们帮我们做一些事情,一个js可以包含很多个js,而这些functio ...

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

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

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

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

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

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

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

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

  8. js模块化加载器实现

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

  9. 【 js 模块加载 】深入学习模块化加载(node.js 模块源码)

    一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范.  1.AMD(Asy ...

随机推荐

  1. Linux—文件命令之touch命令

    下面总结一下对于文件的操作命令: satat命令:用于显示文件的详细信息,包括文件.设备.gid.各种时间等. 命令格式:stat filename touch 的两个功能: 1.新建文件,如需建立特 ...

  2. Scala的类继承

    Scala的类继承 extend Scala扩展类的方式和java一样使用extends关键字 class Employee extends Person { } 与java一样,可以在定义的子类重写 ...

  3. WPF DataGrid 样式分享

    原文:WPF DataGrid 样式分享 隔行换色,鼠标单击,悬浮样式都有 先看效果: 代码: <DataGrid AutoGenerateColumns="False" N ...

  4. 关于DFS与BFS

    DFS(深度优先搜索)   为无向图 DFS的过程类似于树的先序遍历. 请看图: DFS此图的过程为: 1.首先任意找一个未被便利过的顶点,例如从V1开始,由于率先访问了它,所以需要标记V1即已经访问 ...

  5. 4 jdngo vue-rotue

    . 执行linux命令 与mac命令   git base 3 初始化操作  页面加载完成,发起请求  window.onload

  6. linux中mycat的配置,分片,以及主从复制

    1.1    安装环境 1.jdk:要求jdk必须是1.7及以上版本 2.Mysql:推荐mysql是5.5以上版本 1.2  安装步骤 Mycat有windows.linux多种版本.本教程为lin ...

  7. [SDOI2018]战略游戏 圆方树,树链剖分

    [SDOI2018]战略游戏 这题是道路相遇(题解)的升级版,询问的两个点变成了\(S\)个点. LG传送门 还是先建出圆方树,考虑对于询问的\(S\)个点,答案就是圆方树上能包含这些点的最小连通块中 ...

  8. 使用web api开发微信公众号,调用图灵机器人接口(二)

    此文将分两篇讲解,主要分为以下几步 签名校验; 首次提交验证申请; 接收消息; 被动响应消息(返回XML); 映射图灵消息及微信消息; 此篇为第二篇. 被动响应消息(返回XML) 上一篇中,我们已经可 ...

  9. 【转】阿里云Linux系统被攻击的处理过程

    4-22日 19:48分,在等女儿跳舞下课的时候,在“多看”进入大刘等人的<毁灭之城:地球碎块>,读到了“诅咒 3.0”病毒出现的时候,阿里云发来短信“尊敬的用户,您的云服务器x.x.x. ...

  10. Mkdir方法

    新建目录或文件夹. 语法 MkDir 路径 所需的_路径_参数是一个字符串表达式,标识的目录或文件夹创建. _路径_可以包含驱动器. 如果未指定驱动器, MkDir当前的驱动器上创建新目录或文件夹. ...