快速上手seajs——简单易用Seajs

声明：本文为原创文章，如需转载，请注明来源并保留原文连接前端小尚，谢谢！

背景

---

一个网站必然会涉及不少功能，tab选项卡、slide轮播图、pop弹出层、美化alert、paging分页等等等等，若是是企业网站那整合成一个js文件就够了，即插件库。
可是对于一个大的网站平台来讲须要的功能可能会有不少，并且随着平台的发展，功能会愈来愈多。到最后会发展成怎样的状况呢？

这是钱庄网原先的插件库，已经接近20个插件了。想象一下，你在作一个简单的活动单页里面用到了tab选项卡，因而你把插件库引用了进来，这个时候你有想过你只是须要一个功能可是却把整个插件库引进来了，多大的浪费啊。该怎么解决这种问题呢?
咱们但愿一个页面按需引入，这个页面须要什么功能就引入什么功能。如今主流的工具备两种，amd规范的RequireJS、cmd规范的Seajs。

什么是Seajs

---

1. Seajs是一个加载器 http://kb.cnblogs.com/page/211942/
2. 遵循 CMD 规范模块化开发，依赖的自动加载、配置的简洁清晰。
3. 兼容性
   • Chrome 3+
   • Firefox 2+
   • Safari 3.2+
   • Opera 10+
   • IE 5.5+

基本应用

---

导入Seajs库

1. 去官网下载最新的seajs文件，http://seajs.org/docs/#downloads
2. 在页尾引入seajs：
   <script src="/site/script/sea.js"></script>

3. 而后在它下面写模块的配置和入口。

   // seajs 的简单配置
   seajs.config({
     base: "../sea-modules/",
     alias: {
       "jquery": "jquery/jquery/1.10.1/jquery.js"
     }
   });
   
   // 加载入口模块
   seajs.use("../static/hello/src/main");

配置和入口

这里解释下配置和入口的意思。

配置

一般在配置上修改seajs的路径和别名。

seajs的路径是相对于前面引入的seajs文件的。假如是这样的目录结构：

examples/
  |-- index.html
  |
  `--about
  |     |-- news.html
  |
  `-- script
        |-- seajs.js
        |-- jquery.js
        `-- main.js

咱们平时若是咱们在index.html上引用main.js路径应该是这样写的script/main.js，从news.html引用main.js就要这样写，../script/main.js。
而在seajs是相对于seajs文件的，一概直接使用main.js就OK了，是否是很方便呢？

既然这么方便那在什么状况须要配置呢？通常状况是用不到的。可是假如你的路径特别深 或者要作路径映射的时候它的做用就来了。下面介绍下经常使用的几个配置。

seajs.config({
    // Sea.js 的基础路径（修改这个就不是路径就不是相对于seajs文件了）
    base: 'http://example.com/path/to/base/',
    // 别名配置（用变量表示文件，解决路径层级过深和实现路径映射）
    alias: {
        'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
        'json': 'gallery/json/1.0.2/json',
        'jquery': 'jquery/jquery/1.10.1/jquery'
    },
    // 路径配置（用变量表示路径，解决路径层级过深的问题）
    paths: {
        'gallery': 'https://a.alipayobjects.com/gallery'
    }
});

查看更多

入口

入口即加载，须要加载什么文件（模块加载器）就在这里引入。sea.js 在下载完成后，会自动加载入口模块。

seajs.use("abc/main");  //导入seajs.js同级的abc文件夹下的main.js模块的（后缀名可略去不写）

seajs.use()还有另一种用法。
有时候咱们写一个简单的单页并不想为它单独写一个js文件，选择在直接把js代码写在页面上，seajs经过seajs.use()实现了这个。接收两个参数第一个是文件依赖(单个用字符串数组均可以，多个需用数组表示)，第二个是回调函数。

加载单个依赖

//加载模块 main，并在加载完成时，执行指定回调
seajs.use('./main', function(main) {
  main.init();
});

加载多个依赖

//并发加载模块 a 和模块 b，并在都加载完成时，执行指定回调
seajs.use(['./a', './b'], function(a, b) {
  a.init();
  b.init();
});

这里回掉函数中的a和b参数是与前面的模块暴露出来的接口一一对应的。有时候也许只须要使用b的接口，可是也要把a参数写上。什么是暴露接口下面会解释。

经过seajs.use()只能在第一个参数中引入模块，不能在回调函数中使用require()载入模块。 ——141023补充

模块开发

这里才是重点，其实也很简单就是一个书写规范（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。

小结

---

其实Seajs的基本使用就这么简单，平常使用足够了，以前看官网的5分钟教程楞是没看懂，等会的时候回头想一想真的是5分钟学会啊,悟性过低- -||

注意事项

---

1. 模块内的函数依赖必须交代清楚，防止模块在函数依赖加载前先加载出来。并且还加强了模块的独立性。
2. 引入seajs的时候最好给<script>标签加个id，能够快速访问到这个标签（我是在模块合并时用到它的）
3. 还有前面提到的使用seajs.use()在.html页面上写js时若是有多个模块依赖，须要使用暴露出来的接口就要让参数与它一一对应。