深入理解seajs之配置指南

背景

一个网站必然会涉及很多功能，tab选项卡、slide轮播图、pop弹出层、美化alert、paging分页等等等等，如果是企业网站那整合成一个js文件就够了，即 插件库 。但是对于一个大的网站平台来说需要的功能可能会有很多，而且随着平台的发展，功能会越来越多。到最后会发展成怎样的情况呢？这是 钱庄网 原先的插件库，已经接近20个插件了。想象一下，你在做一个简单的活动单页里面用到了tab选项卡，于是你把插件库引用了进来，这个时候你有想过你只是需要一个功能但是却把整个插件库引进来了，多大的浪费啊。该怎么解决这种问题呢?我们希望一个页面按需引入，这个页面需要什么功能就引入什么功能。现在主流的工具有两种，amd规范的RequireJS、cmd规范的Seajs。

Seajs配置指南

在页尾引入seajs：

<script src="/site/script/sea.js"></script>

然后在它下面写模块的配置和入口。

// seajs 的简单配置
seajs.config({
base: "../sea-modules/",
alias: {
"jquery": "jquery/jquery/1.10.1/jquery.js"
}
});

// 加载入口模块
seajs.use("../static/hello/src/main");

3.模块开发

这里才是重点，其实也很简单就是一个书写规范（CMD）而已。

// 所有模块都通过 define 来定义
define(function(require, exports, module) {// 通过 require 引入依赖
var $ = require('jquery');
var Spinning = require('./spinning');// 通过 exports 对外提供接口
exports.doSomething = ...// 或者通过 module.exports 提供整个接口
module.exports = ...});

模块是通过define()方法包装的，然后内部痛过require()方法引入需要的依赖文件(模块)。（也可以引入.css文件哦~）模块最好是面向对象开发的，这样最后可以方便的通过

exports.doSomething

或

module.exports

把模块的接口给暴露出来。如果你是写的是jq插件的话就不需要这个功能了，因为你的接口是写在jquery的对象里的。如果你不需要提供接口的话也可以不使用这两个属性哦！事实上define方法还有另外几个参数，一般情况我们用不到。具体看 官方API 。