JS模块化开发（一）——seaJs
模块化开发要解决的问题：
1.冲突
比如：多人协作开发时，不同js库中的函数重名问题
可以用命名空间解决：
var module={}
module.a=1;
module.b=function(){}
...
命名空间的缺点：
1)写起来较为复杂（特别是涉及到多级命名空间时）
2)只能减少冲突，不能完全消除冲突（两个开发人员恰巧用了同名的命名空间）
2.依赖
引入了多个存在依赖关系js库，后期维护不断增删js库，导致混乱，出现问题
3.SeaJs(CMD规范，在commonJS（服务端模块化规范）基础上)
解决冲突与依赖，便于维护
不同于jq库参与实际开发过程，它不涉及逻辑，相当于“后勤”。
4.SeaJs模块化开发的步骤
step1：引入seajs文件，方法同普通js文件
step2：如何形成模块——用define函数包含模块（定义模块），define有三个参数：require，exports,module.它们类似关键字，不可更改
step3:如何调用模块——exports给外部提供接口；seajs.use(url,callback)引入被调用的模块（加载模块）。回调函数会返回一个参数，也即exports
step4:多个模块如何实现相互依赖?——require(url)函数，获取指定模块的接口，也即exports，这样便可获得指定模块内的变量或函数（前提是该模块提供了变量或函数的外部接口exports）
5.实际用法举例
页面调用模块：
//index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>seajs</title>
<script src="sea.js"></script>
</head>
<body>
<script>
seajs.use("./modules/module1.js",function(ex){
ex.show();
})
</script>
</body>
</html> //module1.js
define(function(require,exports,module){
function show(){
alert("我是module1的show函数");
}
exports.show=show;
})
模块间相互依赖1（依赖的是普通js文件）：
//index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>seajs</title>
<script src="sea.js"></script>
</head>
<body>
<script>
seajs.use("./modules/module1.js",function(ex){
ex.show();
})
</script>
</body>
</html> //module1.js
define(function(require,exports,module){
require("./normal.js");
function show(){
alert(a);
}
exports.show=show;
}) //normal.js
var a=100;
模块间相互依赖2(依赖的也是seajs模块文件)：
//index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>seajs</title>
<script src="sea.js"></script>
</head>
<body>
<script>
seajs.use("./modules/module1.js",function(ex){
ex.show();
})
</script>
</body>
</html> //module1.js
define(function(require,exports,module){
var a=require("./module2.js").a; //require返回值相当于exports
function show(){
alert(a);
}
exports.show=show;
}) //module2.js
define(function(require,exports,module){
var a=100;
exports.a=a;//因为是模块，所以必须提供对外接口
})
6.seaJs配置
alias 别名配置
当模块标识很长时，可以使用 alias 来简化。
seajs.config({
alias: {
'jquery': 'jquery/jquery/1.10.1/jquery',
'app/biz': 'http://path/to/app/biz.js',
}
});
paths
当目录比较深，或需要跨目录调用模块时，可以使用 paths 来简化书写。
seajs.config({
paths: {
'gallery': 'https://a.alipayobjects.com/gallery',
'app': 'path/to/app',
}
});
与别名配置合用，可以简化路径书写
更多配置参数见seaJs配置
7.第三个参数module
module.id:模块唯一标识
module.uri：模块绝对路径
module.dependencies：该模块所依赖的模块数组
module.exports：
exports是module.exports的引用，它们是两个不同的对象，但是引用关系
我们真正调用的对象是module.exports
当要对模块的对外接口进行修改时，只能用module.exports，一般情况下用exports
8.require.async() 异步加载模块
require.async(“./module1.js”,callback) ;
//不需要等module1加载完成，下面的代码就可以执行
var a=100;
blablabla...
9.插件
1.安装spm
2.seaJs插件
10.技巧
1.通过seajs.use()一次引入多个模块：
seajs.use(["./module1.js","module2.js"],function(ex1,ex2){
ex1.show();
ex2.show();
})
2.性能
为了让 sea.js 内部能快速获取到自身路径，推荐手动加上 id 属性：
<script src="path/to/sea.js" id="seajsnode"></script>
加上 seajsnode 值，可以让 sea.js 直接获取到自身路径，而不需要通过其他机制去自动获取。这对性能和稳定性会有一定提升，推荐默认都加上。
3.线上调试
控制台：seajs.cache
JS模块化开发（一）——seaJs的更多相关文章
- JS模块化开发：使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
- JS模块化开发（三）——seaJs+grunt
1.seaJs直接构建存在的问题 由于模块之间的依赖require引用的是模块名,当多个js模块被合并成一个时,会由于找不到模块名而报错 2.seaJs+grunt开发 用到的插件:grunt-cmd ...
- Js模块化开发的理解
Js模块化开发的理解 模块化是一个语言发展的必经之路,其能够帮助开发者拆分和组织代码,随着前端技术的发展,前端编写的代码量也越来越大,就需要对代码有很好的管理,而模块化能够帮助开发者解决命名冲突.管理 ...
- JS模块化开发----require.js
前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前 ...
- Js模块化开发--seajs和gruntJs
1.Seajs库 解决开发中的冲突依赖等问题,提供代码可维护性. SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css ...
- js模块化开发——前端模块化
在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可:如今CPU.浏览器性能得到了极大的提升,很多页面逻辑迁移到了客 户端(表单验证等),随着web2.0时代的到来,Ajax技术 ...
- require.js模块化开发
模块化开发的原因: 1.引入的js过多然后在加载的过程中容易出现假死的状态,导致页面会发生白屏 2.变量名的问题 在多人协作开发的时候容易出现变量名的冲突 面向对象 3.引入优先级的问题 模块化开发分 ...
- 2.精通前端系列技术之JS模块化开发-深入学习seaJs（四）
深入学习seajs 配置信息 alias : 别名配置 paths : 路径配置 vars : 变量配置 map : 映射配置 preload : 预加载项 debug : 调试模式 base : 基 ...
- 前端模块化 | 解读JS模块化开发中的 require、import 和 export
本篇分为两个部分 第一部分:总结了ES6出现之前,在当时现有的运行环境中,实现"模块"的方式: 第二部分:总结了ES6出现后,module成为ES6标准,客户端实现模块化的解决方案 ...
随机推荐
- 个人博客作业_week3
一. 评测 1.对方背景 这个好像大家都不一样,他要考四级啊,考六级啊,出国啊,或者平时写代码看不懂错误信息(呵呵)(还有可能是为了完成某次作业而用的....), 等等,所以是会用的.一般的问题都能解 ...
- 猫咪记单词Beta版使用说明
猫咪记单词Beta版使用说明 一.项目背景 英语四级考试.六级考试.托福.雅思等英语方面的考试是现在大学生必须面对的问题.同时因为学生对手机的使用越来越频繁,而且仅仅通过书本背诵单词又比较无聊坚持的时 ...
- keras-VGG16 猫狗分类器
keras 原理: keras系列︱图像多分类训练与利用bottleneck features进行微调(三)https://blog.csdn.net/sinat_26917383/article/d ...
- <构建之法>13——17章的读后感
第13章:软件测试 问题:对于这么多种的测试方法,怎么才能最有效的选取? 第14章:质量保证 问题:很多工程师都把大多数时间花在软件质量上.一成不变是无法创新的.如何在保证质量的情况下,又得到创新呢? ...
- answer my questions from the book<构建之法>.
1)何为文档:文档时在一个项目进行的一生中所有记忆的集合.有需求分析.功能设计.在实现功能过程中也可以有一系列文档记录.测试文档等等. 2)结对工作等找队友会花费大量时间致耽误项目否:正如老师所讲,从 ...
- Practice5.1 测试与封装5.1
结对同伴: 姓名 学号 博客地址 叶子鹏 201306114420 http://www.cnblogs.com/kazehanaai/ 王佳宁 201306114434 http://www.cnb ...
- 百度AI--自然语言处理之Java开发
参数: public class APIConstants { //设置APPID/AK/SK public static final String APP_ID = "108***&quo ...
- CentOS下使用VirtualBox 安装 Windows虚拟机的简单方法
1.物理服务器安装CentOS7.5 2. 安装VNC 3. 关闭防火墙,关闭selinux,上传virtualbox的rpm包. http://download.virtualbox.org/vir ...
- 操作系统+编程语言的分类+执行python程序的两种方式+变量
1.什么是操作系统? 操作系统就是一个协调\管理\控制计算机硬件资源与软件资源的一个控制程序. 2.为何要操作系统? a.把复杂的硬件操作封装成简单的功能\接口用来给用户或者程序来使用(文件) b.把 ...
- 《mysql从入门到精通》提高
第一 游标的使用 delimiter $$ DROP PROCEDURE IF EXISTS product_in_sheet_handler; CREATE PROCEDURE product_in ...