sea.js模块加载工具
seajs的使用
seajs是一个jS模块加载器,由淘宝前端架构师玉伯开发,它可以解决命名空间污染,文件依赖的问题.可以在一个js文件中引入另外一个js.require('a.js')
1.安装
seajs是一个jS模块加载器,由淘宝前端架构师玉伯开发,它可以解决命名空间污染,文件依赖的问题.可以在一个js文件中引入另外一个js.require('a.js')
npm install --save seajs
2.API
2.1 require
在一个模块中引入其它模块
var addSub = require('./addSub');
2.2 seajs.use()
加载模块,启动模块系统。
- 加载一个模块 seajs.use('id')
- 加载一个模块,在加载完成时,执行回调 seajs.use('id', callback)
- 加载多个模块,加载完成时,执行回调 seajs.use(['id1','id2',…],callback)
- 注意:
- 在调用 seajs.use 之前,需要先引入 sea.js 文件
- seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行,需要使用 jquery 等类库来保证
+ seajs.use 理论上只用于加载启动,不应该出现在 define 中的模块代码里
2.3 module
module 是一个对象,上面存储了与当前模块相关联的一些属性和方法。
- module.id
模块的唯一标识,可以通过 define 方法的第一个参数来指定,默认为该模块文件的绝对路径 - module.uri
模块的绝对路径 - module.dependencies
dependencies 是一个数组,表示当前模块的依赖 - module.exports
当前模块对外提供的接口对象
相当于每个模块内部最终都执行了这么一句话:return module.exports
模块与模块之间的通信接口
module.exports={
add:function(x,y){
return parseFloat(x)+parseFloat(y);
},
sub:function(x,y){
return parseFloat(x)-parseFloat(y);
}
}
2.4 exports
每个文件模块中默认的对外接口对象是module.exports,另外seajs还提供了一个接口对象exports
注意:exports是module.exports接口对象的一个引用,也就是说修改了exports就相当于修改了module.exports
将模块中定义的数据接口暴露出去(变量,方法),供其它模块使用.
但是如果要向外暴露一个单独的变量,函数等成员,那就必须通过给module.exports赋值才可以
2.5 define(factory)
define 是一个全局函数,用来定义模块。
define 接受 factory 参数,factory 可以是一个函数,也可以是一个对象或字符串。
factory 为对象、字符串时,表示模块的接口就是该对象、字符串。
factory 是一个对象时
define({})
factory 是一个字符串时
define('hello')
- factory 是一个函数时
define(function(require,exports,module){
//...js代码...
});
3.使用步骤
- 模块系统:
- 1.定义模块成员
- 2.设定交互规则
- 3.1 引包
- 3.2 使用define定义一个模块,所有代码写到define回调函数中
- 3.3 使用module.exports作为模块与模块之间的通信接口对象
- 3.4 使用require函数加载模块,执行模块中的代码得到模块中的module.exports接口对象
- 3.5 使用seajs.use方法,启动模块系统.
4.小案例
4.1html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="inputX">
<select name="" id="selMethed">
<option value="0">+</option>
<option value="1">-</option>
</select>
<input type="text" id="inputY">
<button id="btn">=</button>
<input type="text" id="outPut">
<!--1.引入seajs包-->
<script src="lib/sea.js"></script>
<script>
/*2.设置主入口文件*/
seajs.use('./js/main')
</script>
</body>
</html>
4.2main.js文件 主模块入口文件
define(function(require,exports,module){
/*引入addSub模块*/
var addSub = require('./addSub');
var inputX = document.querySelector('#inputX');
var inputY = document.querySelector('#inputY');
var selMethed = document.querySelector('#selMethed');
var outPut = document.querySelector('#outPut');
var addSubClick = document.querySelector('#btn');
var selMethedValue = selMethed.value;
var outPutValue='';//存储计算的结果
addSubClick.onclick=function(){
var xValue = inputX.value;
var yValue = inputY.value;
console.log(xValue);
/*使用addSub中暴露的方法*/
switch(selMethedValue){
case '0':
outPutValue = addSub.add(xValue,yValue);
break;
case '1':
outPutValue = addSub.sub(xValue,yValue);
}
console.log(outPutValue);
//把结果放在输出的input的中
outPut.value=outPutValue;
}
});
4.3addSub.js被引用的模块文件
define(function(require,exports,module){
module.exports={
add:function(x,y){
return parseFloat(x)+parseFloat(y);
},
sub:function(x,y){
return parseFloat(x)-parseFloat(y);
}
}
});
sea.js模块加载工具的更多相关文章
- 第三课:sea.js模块加载原理
模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...
- js模块化/js模块加载器/js模块打包器
之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...
- js模块加载之AMD和CMD
当我写这篇文章的时候,sea.js已经逐渐退出历史的舞台,详细链接.不过任何新事物的出现都是对旧事物的取其精华,去其糟粕,所以了解一下以前模块的加载也是一件好事. js模块化的原因自不比多说,看看HU ...
- nodejs js模块加载
本文地址:http://www.cnblogs.com/jasonxuli/p/4381747.html nodejs的非核心模块(core module)加载主要使用的就是module.js. 项目 ...
- 实现简单的 JS 模块加载器
实现简单的 JS 模块加载器 1. 背景介绍 按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块 ...
- js模块加载框架 sea.js学习笔记
seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...
- 关于前端JS模块加载器实现的一些细节
最近工作需要,实现一个特定环境的模块加载方案,实现过程中有一些技术细节不解,便参考 了一些项目的api设计约定与实现,记录下来备忘. 本文不探讨为什么实现模块化,以及模块化相关的规范,直接考虑一些技术 ...
- 【 js 模块加载 】深入学习模块化加载(node.js 模块源码)
一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范. 1.AMD(Asy ...
- webpack前端模块加载工具
最近在看许多React的资料,发现了大部分的项目都是用webpack行模块化管理的工具.这次也是借着写了一个React-Todos的小应用,对webPack最基本实用的功能体验了一番,顺带做个小记录. ...
随机推荐
- CF322F
CF322F 拉格朗日插值 #include<iostream> #include<cstdio> #include<algorithm> #include< ...
- USACO Milk Routing /// 优先队列广搜
题目大意: 在n个点 m条边的无向图中 需要运送X单位牛奶 每条边有隐患L和容量C 则这条边上花费时间为 L+X/C 求从点1到点n的最小花费 优先队列维护 L+X/C 最小 广搜到点n #inclu ...
- Python之小测试:用正则表达式写一个小爬虫用于保存贴吧里的所有图片
很简单的两步: 1.获取网页源代码 2.利用正则表达式提取出图片地址 3.下载 #!/usr/bin/python #coding=utf8 import re # 正则表达式 import urll ...
- servlet配置url-pattern的匹配规则
<servlet> <servlet-name>hello</servlet-name> <servlet-class>com.qf.servlet.H ...
- Apache Solr远程命令执行
简介 Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过Http G ...
- HTTP、HTTP1.0、HTTP1.1、HTTP2.0、HTTPS
一.HTTP HTTP(超文本传输协议,HyperText Transfer Protocol)是应用层的协议,目前在互联网中应用广泛. 它被设计用于Web浏览器和Web服务器之间的通信,但它也可 ...
- 解决.Net MVC 中出现 非介入式客户端验证规则中的验证类型名称必须唯一。下列验证类型出现重复: required 的bug
最近在开动科技创新作品的开发,出现了一个让人很烦恼的错误,每次从浏览页跳转到编辑页时就会出现一下错误 非介入式客户端验证规则中的验证类型名称必须唯一.下列验证类型出现重复: required 上一下出 ...
- teb教程5
跟随全局规划器 简介:本部分是关于如何配置局部规划器严格跟随全局规划,也包括调节在时优和路径跟随上的权衡. 1.先看一下via-points当前的优化行为:启动下面节点 roslaunch teb_l ...
- linux - sftp, scp, rz, sz(文件传输命令)
1. sftp Secure Ftp 是一个基于SSH安全协议的文件传输管理工具.由于它是基于SSH的,会在传输过程中对用户的密码.数据等敏感信息进行加密,因此可以有效的防止用户信息在传输的过程中被窃 ...
- 让Nginx路径中的子目录匹配文件夹的另一种写法
其实相当于对路径做一种通配符,根据路径名访问相应的文件夹.直接看高潮部分如下.. location /static { root /var/www/usmt; index index.html boa ...