sea.js入门学习

本文章参考sea.js中文文档
因为我也是才接触sea.js 所以我先记录我认为重要的与理解的,后续一些内容有更好的了理解我还会补充

SeaJS 是一个适用于 Web 浏览器端的模块加载器。使用 SeaJS，可以更好地组织 JavaScript 代码。

在 SeaJS 的世界里，一个文件就是一个模块。所有模块都遵循 CMD 规范，我们可以像在 Node 环境中一样来书写模块代码
核心特性
无论是中小型站点，还是大型复杂应用，使用 SeaJS，都可以让我们的工作变得更轻松愉悦。SeaJS 具有以下核心特性：

简单一致的模块格式
依赖的自动管理
脚本的异步并行加载
丰富的插件
友好的调试

SeaJS 带来的最大好处是：提升代码的可维护性。上面的每一项特性，在使用文档中都会有详细阐述。如果一个网站的 JS 文件超过 3 个，就适合用 SeaJS 来组织和维护代码。涉及的 JS 文件越多，SeaJS 就越适合。SeaJS 追求的是更简单、自然的代码书写和组织方式。

1.模块定义

在 SeaJS 中，所有 JavaScript 文件都应该用模块的形式来书写，并且一个文件只包含一个模块。
define
使用全局函数define 来定义模块：

define(id?, dependencies?, factory);

id
当前模块的唯一标识。该参数可选。如果没有指定，默认为模块所在文件的访问路径。如果指定的话，必须是顶级或绝对标识（不能是相对标识）。

factory
模块的工厂函数。模块初始化时，会调用且仅调用一次该工厂函数。factory 可以是函数，也可以是对象、字符串等任意值，这时 module.exports 会直接设置为 factory 值。

factory 函数在调用时，会始终传入三个参数： require、exports 和 module，这三个参数在所有模块代码里可用。

define(function(require, exports, module) {

  // The module code goes here

});

require
require 函数用来访问其他模块提供的 API.

define(function(require) {
  var a = require('./a');
  a.doSomething();
});

module.exports
exports 对象由模块系统创建，这不能满足开发者的所有需求，有时候会希望 exports 是某个类的实例。这时可用 module.exports 来实现：

define(function(require, exports, module) {
  console.log(module.exports === exports); // true
  module.exports = new SomeClass();
  console.log(module.exports === exports); // false
});

注意，对 module.exports 的赋值需要同步执行，它不能放在回调函数里

2.配置选项

config
可以使用 config 方法来配置加载器。

seajs.config({
  alias: {
    'es5-safe': 'es5-safe/0.9.2/es5-safe',
    'json': 'json/1.0.1/json',
    'jquery': 'jquery/1.7.1/jquery'
  },
  preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ? '' : 'json'
  ],
  debug: true,
  map: [
    ['http://example.com/js/app/', 'http://localhost/js/app/']
  ],
  base: 'http://example.com/path/to/libs/',
  charset: 'utf-8',
  timeout: 20000
});

alias

seajs.config({
  alias: {
    'app': 'http://path/to/app',
    'jquery': 'jquery/1.7.1/jquery'
  }
});

base
SeaJS 在解析顶级标识时，会相对 base 路径来解析

3.加载方式

use
通过 use 方法，可以在页面中加载任意模块

<script src="http://example.comlibs/seajs/1.1.0/sea.js"></script>
<script>
  seajs.use('path/to/init', function(init) {
    init.somethingA(/* You can pass config as parameters here. */);
    init.somethingB(/* You can pass config as parameters here. */);
  });
</script>

callback 参数是可选的

<script src="http://example.com/libs/seajs/1.1.0/sea.js"></script>
<script>
  seajs.use('path/to/init');
</script>

上面的代码还可以通过 data-main 来简化：

<script src="http://example.com/libs/seajs/1.1.0/sea.js"
        data-main="path/to/init" ></script>

关于config 还有一些其他压缩等功能还没有太深入研究,只是作此记录方便日后复习，学习补充
下面上用上述知识写的小demo
目录结构
这里写图片描述

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <script src="page/sea/sea.js"></script>
  </head>
  <body>
  HelloWord
  </body>
<script>
  seajs.use(['Js/index'], function (p) {
      p.init();
  });
</script>
</html>

index.js

define('Js/index',function (require,exports,module) {

    var second = require('Js/second');
    index = {
        indexName : '',
        indexAddr : '',
        init : function () {
            console.info('index init....');
            this.indexName = second.name;
            this.indexAddr = second.addr;
            this.outPut();
        },
        outPut : function(){
            console.info('My Name is '+this.indexName+',My Addr is '+this.indexAddr);
        }
    };

    module.exports = index;
});

second.js

define('Js/second',function (require,exports,module) {

    second = {
        name : 'second',
        addr : ['hefei','hangzhou'],
        init :function () {
            console.info('second init.....');
        },
        dialog : function () {
          alert('second dialog!!!');
        }
    };

    module.exports = second;

});

输出如下
这里写图片描述

欢迎大家学习讨论指正

1.模块定义

2.配置选项

3.加载方式

猜你喜欢