Seajs의 간단한 문서는 간단하고 궁극적인 모듈식 개발 경험을 제공합니다_Seajs

비공식 문서는 빠른 참조를 위해 당사의 공식 문서의 텍스트와 예를 편집한 것입니다.

Sea.js를 사용하는 이유는 무엇인가요?

Sea.js는 코드를 작성하고 구성하는 간단하고 자연스러운 방식을 추구하며 다음과 같은 핵심 기능을 가지고 있습니다.

간단하고 친숙한 모듈 정의 사양: Sea.js는 CMD 사양을 따르며 Node.js와 같은 모듈 코드를 작성할 수 있습니다.
자연스럽고 직관적인 코드 구성: 종속성 자동 로딩과 간결하고 명확한 구성을 통해 코딩을 더욱 즐길 수 있습니다.
Sea.js는 또한 개발, 디버깅 및 성능 최적화에 매우 유용하고 확장 가능한 풍부한 인터페이스를 갖춘 일반적으로 사용되는 플러그인을 제공합니다.

호환성

Sea.js는 완전한 테스트 사례를 보유하고 있으며 모든 주요 브라우저와 호환됩니다.

Chrome 3 이상 
Firefox 2 이상 
사파리 3.2+
오페라 10+ 
IE 5.5+ 

Sea.js는 하이브리드 모드 앱을 포함하여 모바일 측에서 실행될 수 있습니다. 이론적으로 Sea.js는 모든 브라우저 엔진에서 실행될 수 있습니다.

seajs.configObject

별칭 객체

별칭 구성, 구성 후 모듈에서 require를 사용하여 require('jquery')를 호출할 수 있습니다.

seajs.config({
  alias: { 'jquery': 'jquery/jquery/1.10.1/jquery' }
});

define(function(require, exports, module) {
  //引用jQuery模块
  var $ = require('jquery');
});

경로 객체

디렉터리 간 통화가 용이하도록 경로를 설정하세요. 경로를 유연하게 설정하면 베이스에 영향을 주지 않고 디렉터리를 지정할 수 있습니다.

seajs.config({
  //设置路径
  paths: {
    'gallery': 'https://a.alipayobjects.com/gallery'
  },

  // 设置别名，方便调用
  alias: {
    'underscore': 'gallery/underscore'
  }
});

define(function(require, exports, module) {
  var _ = require('underscore');
   //=> 加载的是 https://a.alipayobjects.com/gallery/underscore.js
});

변수 객체

변수 구성. 일부 시나리오에서는 모듈 경로가 런타임에만 결정될 수 있습니다. 이 경우 vars 변수를 사용하여 구성할 수 있습니다.

vars는 모듈 식별자에 변수 값을 구성하고, {key}는 모듈 식별자에 변수를 나타내는 데 사용됩니다.

seajs.config({
  // 变量配置
  vars: {
    'locale': 'zh-cn'
  }
});

define(function(require, exports, module) {
 var lang = require('./i18n/{locale}.js');
   //=> 加载的是 path/to/i18n/zh-cn.js
});

맵 배열

이 구성은 모듈 경로를 매핑하고 수정할 수 있으며 경로 변환, 온라인 디버깅 등에 사용할 수 있습니다.

seajs.config({
  map: [
    [ '.js', '-debug.js' ]
  ]
});

define(function(require, exports, module) {
  var a = require('./a');
  //=> 加载的是 path/to/a-debug.js
});

사전 로드 어레이

프리로드 구성 항목을 이용하면 일반 모듈을 로딩하기 전 지정된 모듈을 미리 로딩 및 초기화할 수 있습니다.

미리 로드 시 빈 문자열은 무시됩니다.

// 在老浏览器中，提前加载好 ES5 和 json 模块
seajs.config({
  preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ? '' : 'json'
  ]
});

참고: 사전 로드 구성은 로드하기 전에 사용할 때까지 기다려야 합니다. 예:

seajs.config({
  preload: 'a'
});

// 在加载 b 之前，会确保模块 a 已经加载并执行好
seajs.use('./b');

사전 로드 구성은 모듈 파일에 배치할 수 없습니다.

seajs.config({
  preload: 'a'
});

define(function(require, exports) {
  // 此处执行时，不能保证模块 a 已经加载并执行好
});

디버그 부울

값이 true이면 로더는 동적으로 삽입된 스크립트 태그를 제거하지 않습니다. 플러그인은 디버그 구성을 기반으로 로그 및 기타 정보의 출력을 결정할 수도 있습니다.

기본문자열

Sea.js가 최상위 식별자를 구문 분석할 때 기본 경로를 기준으로 구문 분석됩니다.

참고: 일반적으로 기본 경로를 구성하지 마십시오. sea.js를 적절한 경로에 배치하는 것이 더 간단하고 일관성이 있는 경우가 많습니다.
charsetString 함수

모듈 파일을 가져올 때 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 charset 속성. 기본값은 utf-8

문자셋은 함수일 수도 있습니다:

seajs.config({
  charset: function(url) {
    // xxx 目录下的文件用 gbk 编码加载
    if (url.indexOf('http://example.com/js/xxx') === 0) {
     return 'gbk';
    }

    // 其他文件用 utf-8 编码
    return 'utf-8';
  }
});

seajs.use 기능
페이지에 하나 이상의 모듈을 로드하는 데 사용됩니다. seajs.use(id, 콜백?)

// 加载一个模块
seajs.use('./a');

// 加载一个模块，在加载完成时，执行回调
seajs.use('./a', function(a) {
 a.doSomething();
});

// 加载多个模块，在加载完成时，执行回调
seajs.use(['./a', './b'], function(a, b) {
 a.doSomething();
 b.doSomething();
});

참고: seajs.use는 DOM 준비 이벤트와 아무 관련이 없습니다. DOM이 준비된 후 특정 작업이 실행되도록 하려면 jquery와 같은 클래스 라이브러리를 사용하여 이를 보장해야 합니다. 예를 들어

seajs.use(['jquery', './main'], function($, main) {
  $(document).ready(function() {
    main.init();
  });
});

참고: use 메소드의 첫 번째 매개변수가 있어야 하지만 null이거나 변수일 수 있습니다.

var bootstrap = ['bootstrap.css', 'bootstrap-responsive.css', 'bootstrap.js'];

seajs.use(bootstrap, function() {
  //do something
});

seajs.cache 객체
seajs.cache를 통해 현재 모듈 시스템의 모든 모듈 정보를 확인할 수 있습니다.

예를 들어 seajs.org를 열고 WebKit 개발자 도구의 콘솔 패널에 seajs.cache를 입력하면 다음을 볼 수 있습니다.

Object
 > http://seajs.org/docs/assets/main.js: x
 > https://a.alipayobjects.com/jquery/jquery/1.10.1/jquery.js: x
 > __proto__: Object
            

문서 홈 페이지에 사용되는 모듈입니다. 항목을 펼쳐 해당 모듈의 구체적인 정보를 확인하세요. 해당 의미는 모듈 섹션의 CMD 모듈 정의 사양을 참조하세요.

seajs.reslove 기능
require.resolve와 유사하게 모듈 시스템의 내부 메커니즘은 수신 문자열 매개변수에 대한 경로 분석을 수행하는 데 사용됩니다.

seajs.resolve('jquery');
// => http://path/to/jquery.js

seajs.resolve('./a', 'http://example.com/to/b.js');
// => http://example.com/to/a.js

seajs.resolve 方法不光可以用来调试路径解析是否正确，还可以用在插件开发环境中。

seajs.data Object
通过 seajs.data，可以查看 seajs 所有配置以及一些内部变量的值，可用于插件开发。当加载遇到问题时，也可用于调试。

常见问题
关于模块标识

Seajs模块标识主要以小驼峰字符串、.或..

// 在 http://example.com/js/a.js 的 factory 中：
require.resolve('./b');
 // => http://example.com/js/b.js

// 在 http://example.com/js/a.js 的 factory 中：
require.resolve('../c');
 // => http://example.com/c.js

分为 相对 与 顶级 标识。以.或..开头，则为相对标识 。以小驼峰字符串开关，则为顶级标识。

// 假设 base 路径是：http://example.com/assets/

// 在模块代码里：
require.resolve('gallery/jquery/1.9.1/jquery');
 // => http://example.com/assets/gallery/jquery/1.9.1/jquery.js

关于路径

Seajs除了相对与顶级标识之外，还可以使用普通路径来加载模块。

就到当前页面的脚本分析（可以右键查看源码）

//sea.js的路径，即 base 路径，相对于当前页面
<script src="http://yslove.net/actjs/assets/sea-modules/seajs/2.1.1/sj.js"></script>

<script type="text/javascript">
//配置Seajs
seajs.config({
  alias: {
    //顶级标识，基于 base 路径
    'actjs': 'actjs/core/0.0.7/core.js',
      // => http://
    'position': 'actjs/util/0.0.2/position.js'
  }
});

seajs.config({
  alias: {
    //普通路径，相对于当前页面
    'affix': '../../actjs/assets/widget/src/widget-affix.js',

    //相对标识，相对于当前页面
    'init': './src/init.js'
  }
});
</script>

开始的时候会觉得Seajs的路径有点不习惯，由其是Base路径。切记Base路径就是sea.js的那个文件的上级路径，然后所有顶级标识，相对标识都是相对于这个Base来调整。