angularJS1笔记-(20)-模块化加载机制seajs
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的更多相关文章
- RequireJS与SeaJS模块化加载示例
web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理, ...
- SeaJS 模块化加载框架使用
SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS,CMD,AMD等规范后文会提到,这里主要先了解如何在代码中使用. 如果你有使用过nodejs ,那么理解起来就容易多了. 我们通 ...
- Dojo初探之1:AMD规范,编写符合AMD规范(异步模块加载机制)的模块化JS(其中dojo采用1.11.2版本)
一.AMD规范探索 1.AMD规范(即异步模块加载机制) 我们在接触js的时候,一般都是通过各种function来定义一些方法,让它们帮我们做一些事情,一个js可以包含很多个js,而这些functio ...
- seajs模块化加载框架使用
seajs是模块化加载框架.seajs.org已经打不开了,seajs的github.seajs速查文档 <!--如果完成下面4步,则seajs掌握了80%js模块化1.引入seajs的库 :& ...
- 该如何理解AMD ,CMD,CommonJS规范--javascript模块化加载学习总结
是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道requi ...
- 转: javascript模块加载框架seajs详解
javascript模块加载框架seajs详解 SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加 ...
- javascript模块加载框架seajs详解
SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加载).SeaJS可以和jQuery完美集成,使用 ...
- js模块化加载器实现
背景 自es6以前,JavaScript是天生模块化缺失的,即缺少类似后端语言的class, 作用域也只以函数作为区分.这与早期js的语言定位有关, 作为一个只需要在网页中嵌入几十上百行代码来实现一些 ...
- 【 js 模块加载 】深入学习模块化加载(node.js 模块源码)
一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范. 1.AMD(Asy ...
随机推荐
- JavaWeb总结(七)
Web状态管理 - HTTP协议使用的是无状态的连接 - 对容器而言,每一个请求都来自于一个新的客户 解决方案-表单隐藏字段 <input type=”hidden” name=”session ...
- mfc 异常机制
异常 抛出异常 捕获异常 一.异常 迄今为止,我们处理程序中的错误一般都是用if语句测试某个表达式,然后处理错误的特定义代码. C++异常机制使用了三个新的关键字 (SEH(结构化异常处理)) try ...
- mfc 引用
一.引用的概念 引用(reference)是另一标识符的别名,可以说是C++的一种新的变量类型,是对C的重要扩充.当建立引用时,程序用另一个变量或对象(目标)的名字初始化它(即它代表了标识符的左值), ...
- mfc 控制台程序
自动生成的C++控制台程序 认识预编译头 认识_tmain 一 .自动生成的控制台程序 二 .认识预编译头 StdAfx 所谓的预编译头就是把一个工程中的某一部分代码,预先编译好放在一个文 ...
- 《C++ Primer》读书笔记(二)-变量和基本类型
bool类型与其他类型转换时,0为false,1为true 浮点数赋值给整数的时候,进行近似处理,结果仅保留浮点数小数点之前的部分 整数赋值给浮点数的时候,小数部分记为0,如果该整数超过了浮点类型的容 ...
- 01- web应用与https协议
1. import socket server = socket.socket() server.bind(("127.0.0.1", 8800)) server.listen(5 ...
- kruskal重构树
kruskal重构树 kruskal重构树,顾名思义,是在kruskal的时候顺便搞出来的一棵重构树,具体地说是一个堆. 先说说这个东西是怎么搞出来的吧:默认事先把边按边权从小到大排序,在kruska ...
- 洛咕 P4199 万径人踪灭
给了两条限制,但是第二条想想是没用的,直接manacher就可以减掉多余的部分了,所以要求满足第一条的方案 也不难,可以想到枚举每个中心点,计算两边有多少对距离中心相等的位置值也相等,假设有\(t\) ...
- HTML中内联元素与块状元素介绍
常用的块级元素: address , center , div , dl ,, form , h1 , h2 , h3 , h4 , h5 , h6 , menu , ol , p , table , ...
- 巧用 Python 找工作(资料在文末)
前言 近年来 Python 之火大家都有感而知,那亲们知道北京的 Python 开发岗位.运维开发岗位招聘地域都是如何分布的吗?薪水如何?是否有前景等等,这些数据呢直接通过招聘信息来了解到企业用人是最 ...