本文主要是介绍模块化开发一 seajs，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
http://www.jianshu.com/p/04d8c277ae07
模块化开发
随着团队开发的复杂化，我们依赖的代码库会越来越多；安装
npm install spm -g
spm install seajs 可以安装：
安装bower
npm install -g bower
安装seajs
brwer install seajs
github:
http://github.com/seajs/seajs
也可以下载成一个js文件引入
<script src="../lib/sea.js"></script>
<script>
console.log(seajs.version)
</script>
知识
-
前端这些模块管理的实现是基于AMD规范(异步、管理、加载规范)，在最终实现的时候尊重commndjs规范（nodejs就是这个），定义模块时有两种，第一个是只传一个参数就是commndjs规范，传递多个参数的时候，写法尊重moduletransport规范；
-
通常define只允许我们定义一个模块，当定义多个模块的时候，后面的会覆盖掉前面的；
seajs文件路径是以sea.js作为出发点的 , 如果是'./'则以自身文件夹为出发点
使用
建立一个de.js文件
seajs.use('de')在控制面板networks里能看到de.js被加载进来了
define
当传递一个参数的时候，参数就是一个模块,参数可以是任意类型； 在de.js中：
console.log('hello')
index.html:
seajs.use('de',function(main){
})
控制台输出：hello 字符串
define传递：
de.js输入define('hello')
index.html:
seajs.use('de',function(main){
console.log(main)
})
控制台输出：hello 字符串
de.js输入
define({color:'red',say:function(){return 'hello'}
})控制台输出一个对象
- 如果不写在define里就是一个undefined
我们还可以传递函数，这是一种最复杂的方式，工作中基本是这种方法：
这个函数自带三个参数：
require:引用其它模块的工厂方法
exports:返回的接口对象
module:模块的module属性集define(function(require,exports,module){return {color:'yellow'}
})- 当传递多个参数时，两个或者三个
如果传递两个参数的时候，第一个参数表示该模块依赖的模块数组集合，最后一个参数是function；
如果传递三个参数的时候，第一个表示模块的名称，第二个表示该模块依赖的模块集合，第三个参数就是个function；
define('main',[],function(require,exports,module){return {color:'yellow'}
})模块的依赖
- 包就是前段说的模块
- 当传递模块名称的时候，模块的名称就是该名称，当不传递模块的名称的时候，该模块的名称就是该文件的名称，通常我们将模块的名称与文件的名称保持一致
我们再新建一个header.js文件：
define(function(){return {color:'orange'}
})在main.js中引用：
define(function(require,exports,module){var header = require('./header/header');console.log(header)return {color:'yellow'}
})index.html的代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script src="js/sea.js"></script><script>seajs.use('main',function(main){console.log(main)})</script>
</body>
</html>控制台输出两个对象；
use
seajs.use(['header/header','header/skin/skin'],function(header,skin){console.log(header,skin)
})第一个参数可以是一个字符串，也可以是一个模块数组，有多少个，在回调函数的参数就有多少个；
我们可以使用header：
define(function(require,exports,module){var header = require('./header/header');document.body.style.background = header.color;return {color:'yellow'}
})- require规范：
- require不能简写；
- require不能被重新定义；
- 不能赋值 var req = requie;是不可以的
- 不能定义函数 function require 是不可以的
- 不能在子函数中的参数中使用require
- 不能在子函数的作用域内重定义（重复上面三条）
- require的参数只能是完整的字符串，拼接也不行require('abc' + 'cde')是不可以的；
- require的参数值如何定义：
参数值表示的是文件的路径，相对于sea.js,当然也可以./从自身目录出发
项目目录：
- index.html
- js文件夹
- sea.js
- main.js
- header文件夹
- header.js
- skin文件夹
- skin.jsskin.js：
define(function(){return 'haha'
})在main.js中引用：
define(function(require,exports,module){var header = require('./header/header');var skin = require('header/skin/skin')console.log(skin)document.body.style.background = header.color;return {color:'yellow'}
}) 控制台输出：haha
require:
- 可以看到是以sea.js为路径起始点，也就是根目录；
- 加载js文件，后缀名不写；
define:
require,exports,module不能更改
前面说到定义一个模块的时候最好名字和文件名一样，默认不写模块名；
如果我们写了不一样的名字会怎么样呢？
header.js中：
define('haha',[],function(){return {color:'orange'}
})可以看到模块的名字为haha,依赖为空数组，文件名是header.js
main.js:
define(['header/header'],function(require,exports,module){var a = require('haha');var skin = require('header/skin/skin')console.log(a,111)return {color:'yellow'}
}) 可以看到控制台可以输出结果;
所以
- define的数组参数为依赖的模块路径
- require为引入的模块名字
- 如果两者相同，就可以直接var header = require('header/header'),不要后缀名.js
exports
- export是保留字，所以使用exports;
- 表示模块的接口，
第一种：直接对exports添加属性，如exports.color = 'red';
第二种：通过module来定义，module.exports.color = 'yellow';
第三种：通过module来定义，module.exports = {color: 'orange'};
第四种：通过return来定义，return {color:'green'};
我们在一个模块中定义接口的时候，只能使用一种，不能混用，后面的会覆盖前面的；
我们不可以直接对exports赋值新对象
main.js
define(function(require,exports,module){var a = require('header/header')console.log(a)
})header.js
define(function(require,exports,module){exports.color = 'red'
})注意：使用exports接口的header模块,require,exports,module三个参数必须写上；
第二种方式header.js：
define(function(require,exports,module){module.exports.color = 'red'
})第三种方式header.js：
define(function(require,exports,module){module.exports={color:'blue'}
})第四种方式header.js：
define(function(require,exports,module){return {color:'white'}
})module
我们console.log(module)；
有四个属性：
- id 模块名 默认为路径一致 如果id不与uri一样则要分开引用
- uri 路径
- dependencies 依赖的模块 放在数组里
deps 依赖的模块 放在对象里 - exports是我们返回的接口；
小案例
- 项目根目录
- index.html
- js文件夹
- main.js
- sea.js
- lib文件夹
- dom.js
- event.js
- string.js
index.html:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><button id="btn">猜一猜</button><div id="out"></div><script src="js/sea.js"></script><script>seajs.use('main',function(){})</script>
</body>
</html>main.js:
define(function(require,exports,module){var Evt = require('lib/event');var Dom = require('lib/dom');var Str = require('lib/string')var msg = 'i don\'t know'Evt.on('btn','click',function(){Dom.html('out',Str.upper(msg))})
})dom.js
define(function(){var Dom = {g: function(id){return document.getElementById(id);},html:function(id,html){if(html){this.g(id).innerHTML = html;}else{return this.g(id).innerHTML;}}}return Dom;
})event.js
define(function(require,exports,module){var Dom = require('lib/dom')var Evt={on: function(id,type,fn){Dom.g(id)["on"+type] = fn;}}return Evt;
})string.js
define(function(){var Str = {upper:function(str){return str.toUpperCase();}}return Str;
})require.async异步调用，跟use方法很像，我们在页面初始化使用use异步加载模块，在模块内部想实现模块的异步加载，就要用require.async方法；
案例一：
header.js:
define(function(require,exports,module){return {color:'white'}
})main.js:
define(function(require,exports,module){var header = require('header/header')return {color: header.color}
})index.html:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>html,body{height:100%;}</style>
</head>
<body><script src="js/sea.js"></script><script>seajs.use('main',function(main){console.log(main)})</script>
</body>
</html>就可以得到header的color为white;
如果采用require.async(第一个参数为字符串也可以是数组，第二个参数是回调函数)，和use很像；
define(function(require,exports,module){// var header = require('header/header')var header = require.async('header/header',function(header){console.log(111,header)})return {color:header.color}
})- 再来看下面的代码：
var loadSkin = false;if(loadSkin){var skin = require('header/skin/shin')}else{var header = require('header/header')} 其实两个文件都会加载请求回来，但是skin打印是undefined
如果换成异步加载：
var loadSkin = false;if(loadSkin){var skin = require.async('header/skin/shin')}else{var header = require.async('header/header')}可以看到不会执行的代码文件不会加载；
seajs.config({})
写在index.html seajs.use上面
seajs.config接收一个对象参数，用来配置一些选项参数的，接收一个对象，里面的属性值，就是我们配置的选项；
1. alias
alias:{util:'lib/unitl-2.0'
}这个可以解决一个问题：lib里面版本库文件，如果在main.js,header.js等等一大堆文件中引用：
var util = require('lib/util-2.0'); 如果一天这个文件升级到了2.1，那么就要去打开这些引用了它的文件去修改，就会造成麻烦，所以alias就是解决这个问题的；
在alias中把这个文件定义为util，在mainjs,headerjs等文件中要使用它，只需要
define(function(require,exports,module){var util = require('util');console.log(util)})这样如果文件版本升级，只需要更改alias里面的路径即可；
2. paths
paths:{m:'module/header'
}如果我们要引用module/header下面的header.js
var header = require('module/header/header');如果按照上面定义好了的路径，以后引用这个文件夹下的文件只需要：
var header = require('m/header')3. vars
vars:{hd:'header'
}如何使用：
// var a = require('module/header/skin/skin')var a = require('module/{hd}/skin/skin')如果：
vars:{hd:'header/skin'
}则
var a = require('module/{hd}/skin')通过{}来匹配
4. map
map:[['.js','.min.js']
] 映射，把所有的js文件做匹配处理；
如果有文件打包后，文件名可能不同，可以通过这个来处理；
这篇关于模块化开发一 seajs的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
