http://cyj.me/why-seajs/zh/
http://seajs.org/docs/#quick-start

1.一個(gè)demo

Paste_Image.png

html文件中

<script src="../sea-modules/seajs/seajs/2.2.0/sea.js"></script>
<script>

  // Set configuration
  seajs.config({
    base: "../sea-modules/",
    alias: {
      "jquery": "jquery/jquery/1.10.1/jquery.js"
    }
  });

  // For development
  if (location.href.indexOf("?dev") > 0) {
    seajs.use("../static/hello/src/main");
  }
  // For production
  else {
    seajs.use("examples/hello/1.0.0/main");
  }
</script>

入口文件main

define(function(require) {

  var Spinning = require('./spinning');

  var s = new Spinning('#container');
  s.render();

});

模塊代碼

define(function(require, exports, module) {

  var $ = require('jquery');

  function Spinning(container) {
    this.container = $(container);
    this.icons = this.container.children();
    this.spinnings = [];
  }

  module.exports = Spinning;

  Spinning.prototype.render = function() {
    this._init();
    this.container.css('background', 'none');
    this.icons.show();
    this._spin();
  }

  Spinning.prototype._init = function() {
    var spinnings = this.spinnings;

    $(this.icons).each(function(n) {
      var startDeg = random(360);
      var node = $(this);
      var timer;

      node.css({
        top: random(40),
        left: n * 50 + random(10),
        zIndex: 1000
      }).hover(
          function() {
            node.fadeTo(250, 1)
                .css('zIndex', 1001)
                .css('transform', 'rotate(0deg)');

          },
          function() {
            node.fadeTo(250, .6).css('zIndex', 1000);
            timer && clearTimeout(timer);
            timer = setTimeout(spin, Math.ceil(random(10000)));
          }
      );

      function spin() {
        node.css('transform', 'rotate(' + startDeg + 'deg)');
      }

      spinnings[n] = spin;
    })

    return this;
  }

  Spinning.prototype._spin = function() {

    $(this.spinnings).each(function(i, fn) {
      setTimeout(fn, Math.ceil(random(3000)));
    });

    return this;
  }

  function random(x) { return Math.random() * x };

});

2.知識(shí)點(diǎn)

define define(id?, deps?, factory)

define
 也可以接受兩個(gè)以上參數(shù)。字符串 id
 表示模塊標(biāo)識(shí)，數(shù)組 deps
 是模塊依賴。比如：
define('hello', ['jquery'], function(require, exports, module) { // 模塊代碼});

require.async require.async(id, callback?)

require.async方法用來在模塊內(nèi)部異步加載模塊，并在加載完成后執(zhí)行指定回調(diào)。callback
 參數(shù)可選。
    define(function(require, exports, module) { // 異步加載一個(gè)模塊，在加載完成時(shí)，執(zhí)行回調(diào) 
    require.async('./b', function(b) { b.doSomething(); }); // 異步加載多個(gè)模塊，在加載完成時(shí)，執(zhí)行回調(diào) 
    require.async(['./c', './d'], function(c, d) { 
          c.doSomething(); 
          d.doSomething();
    });
});

// // 并發(fā)加載模塊 a 和模塊 b，并在都加載完成時(shí)，執(zhí)行指定回調(diào)
seajs.use(['./a', './b'], function(a, b) { a.init(); b.init();});
callback參數(shù)可選，省略時(shí)，表示無需回調(diào)。

seajs.config({

  // 別名配置
  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'
  },

  // 變量配置
  vars: {
    'locale': 'zh-cn'
  },

  // 映射配置
  map: [
    ['http://example.com/js/app/', 'http://localhost/js/app/']
  ],

  // 預(yù)加載項(xiàng)
  preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ? '' : 'json'
  ],

  // 調(diào)試模式
  debug: true,

  // Sea.js 的基礎(chǔ)路徑
  base: 'http://example.com/path/to/base/',

  // 文件編碼
  charset: 'utf-8'
});

Paste_Image.png