首页 > 代码库 > 模块化开发（二）--- seaJs入门学习
模块化开发（二）--- seaJs入门学习
SeaJS是一个基于CMD模块定义规范实现一个模块系统加载器
[CMD规范](https://github.com/cmdjs/specification/blob/master/draft/module.md)9、seaJs启动函数的回调函数
官网：http://seajs.org/docs/
github：https://github.com/seajs/seajs
如何选择一个技术产品栈：
- 看作者是否是大牛
- 看社区是否活跃
- 看是否经常更新
SeaJS的作者已经不更新该项目了，但是国内很多公司还是在使用SeaJS作为前端模块化解决方案，
学习SeaJS有助于我们学习 Node.js 中的模块系统，因为他们所使用的规范基本一致。
学习完SeaJS之后可以自学 RequireJS[RequireJS官方网站](http://requirejs.org/)，思想基本一样。无非是API的区别。
### 体验官方demo
[官方示例demo](http://seajs.org/docs/#quick-start)
###seaJs使用步骤：
1. 下载 sea.js 库
2. 在页面中引入 sea.js
3. define - 定义模块
4. module.exports - 暴露接口
5. require - 加载模块
6. seajs.use - 从入口模块启动模块系统
seaJs.use(‘./././‘,function(a){
console.log(a);//其中a就是exports而不是module.exports
}
10、define()的用法：
define(object)
define(string)
define(function(require,exports,medule){
//所有的自己的js 代码都写在回调函数中
})
例子1：
define(function (require ,exports , module ){ //最好在每一次定义模块的时候，尽量都使用匿名函数，并传入三个参数的方式；不要重命名require函数；
module.exports = { //通过这种形式将对象暴漏到模块之外，供其他文件使用，可以直接使用exports = ...
add : require ( ‘ ./././ ‘ ) , //require的参数值必须是字符串，该字符串就是表示模块的一个模块标识
mod : require ( ‘ ./././ ‘ ) // 访问的时候使用 mod() 直接调用
}
})
例子2：
define ( function ( require , exports , module ) {
exports.add = reuire ( ‘ ./././‘ ) ; // 访问的时候需要通过 exports.add()方式进行调用
exports.mod =require ( ‘./././‘ );
})
11、require(‘./././‘)加载文件模块
最好吧所有的require都写在define 函数中js 代码的最上面
[require 书写约定](https://github.com/seajs/seajs/issues/259)
12、seaJs在页面中的使用：
首先加载sea.js 文件
然后再启动模块：<script> </script>标签中加载入口模块 seajs.use(‘./a‘)
启动模块系统----开机
seaJs.use方法是异步加载模块文件
13、模块标识：其实就是模块的路径，可以不包含文件的后缀名，因为加载的都是js文件
相对标识：以 ./ 或者 ../ 开始的都是相对标识，相对于当前出现的位置所属的文件
顶级标识：不以 ./ 或者 ../ 或者 / 开始的标识是顶级标识，顶级标识相对模块系统的基础路径来解析，模块系统的基础路径在不指定的情况下，
默认顶级目录是第三方插件 sea.js 所在的目录，可以通过 seajs.config() 方法来指定顶级标识的基础路径
顶级标识配置：seajs.config({
base : ‘ ./ ‘ ; //指定当前目录为顶级目录
})
模块标识永远相对于require出现的文件路径。
14、require.async( ‘./文件‘ )实现异步按条件加载
if(true){require(‘./a‘)}else{require(‘./b‘)}这时候a和b文件都会被加载下来
require是所有加载成功之后才解析和执行
require.async可以按照条件进行加载，代码执行到具体位置的时候才会加载和执行
if(true){
require.async(‘./b‘ , function (foo){
console.log(foo) ; // foo就是在./b 文件中表露出来的内容
})
}else {
require.async(‘./a‘ , function () { } )
}
15、exports 和 module
module.exports就是模块对外导出 的接口对象，相当于执行了 return module.exports
exports就是module.exports的一个别名而已。
module.exports就是当前模块与外部文件的接口对象。
首先需要明白：
var foo2 = {}
var foo3 =foo2
foo3.name = ‘name‘ // 这是修改了foo3 ，它的引用也被修改
console.log(foo2)
console.log(foo3)
foo3 = ‘hello‘ // 这是对foo3重新赋值后，就丢失了原来foo2的引用
console.log(foo2)
console.log(foo3)
然后：
var foo ={
obj : {}
}
function changeFoo(obj,foo){
console.log(obj===foo.obj) //true
obj.name = ‘jack‘
obj = ‘hello‘
console.log(obj===foo.obj) //false
return foo.obj
}
console.log(changeFoo(foo.obj,foo)) // {name : jack}
最后：
obj 就相当于 exports，foo 就相当于 module。综上所述可知，不能给exports重新赋值，这样就切断了exports与module.exports之间的联系，必须通过 点 的形式修改exports的值。
16、浏览器中的JS不能做什么？
不能操作数据库、不能操作文件、浏览器的JS只能通过AJAX发送请求而不能接受请求（后面的Socket网络编程就可以进行双向通信了）
JS可以脱离浏览器单独运行（这时候就没有BOM和DOM）， JS仅仅是语言而已（以前所学的JS仅仅是ECMAScript）
模块化开发（二）--- seaJs入门学习
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。