Die einfache Dokumentation von Seajs bietet ein einfaches und ultimatives modulares Entwicklungserlebnis_Seajs

Inoffizielle Dokumente werden aus dem Text und Beispielen unserer eigenen offiziellen Dokumente zum schnellen Nachschlagen zusammengestellt.

Warum Sea.js verwenden?

Sea.js verfolgt eine einfache und natürliche Art, Code zu schreiben und zu organisieren und verfügt über die folgenden Kernfunktionen:

Einfache und benutzerfreundliche Moduldefinitionsspezifikation: Sea.js folgt der CMD-Spezifikation und kann Modulcode wie Node.js schreiben.
Natürliche und intuitive Code-Organisation: Das automatische Laden von Abhängigkeiten und die prägnante und klare Konfiguration ermöglichen uns mehr Freude am Programmieren.
Sea.js bietet außerdem häufig verwendete Plug-Ins, die für die Entwicklung, das Debuggen und die Leistungsoptimierung sehr hilfreich sind und über umfangreiche erweiterbare Schnittstellen verfügen.

Kompatibilität

Sea.js verfügt über vollständige Testfälle und ist mit allen gängigen Browsern kompatibel:

Chrome 3+ 
Firefox 2+ 
Safari 3.2+
Opera 10+ 
IE 5.5+ 

Sea.js kann auf der mobilen Seite ausgeführt werden, einschließlich Apps im Hybridmodus. Theoretisch kann Sea.js auf jeder Browser-Engine ausgeführt werden.

seajs.configObject

Alias Objekt

Alias-Konfiguration. Nach der Konfiguration können Sie require im Modul verwenden, um require('jquery'); aufzurufen.

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

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

Pfade Objekt

Legen Sie den Pfad fest, um verzeichnisübergreifende Anrufe zu erleichtern. Durch die flexible Festlegung des Pfades können Sie ein Verzeichnis angeben, ohne dass dies Auswirkungen auf die Basis hat.

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
});

varsObjekt

Variable Konfiguration. In einigen Szenarien kann der Modulpfad nur zur Laufzeit ermittelt werden. In diesem Fall können Sie ihn mithilfe von Vars-Variablen konfigurieren.

vars konfiguriert den Variablenwert im Modulbezeichner und {key} wird verwendet, um die Variable im Modulbezeichner darzustellen.

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

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

KarteArray

Diese Konfiguration kann den Modulpfad zuordnen und ändern und kann für die Pfadkonvertierung, Online-Debugging usw. verwendet werden.

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

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

VorladenArray

Mit dem Preload-Konfigurationselement können Sie das angegebene Modul im Voraus laden und initialisieren, bevor Sie das normale Modul laden.

Leere Zeichenfolgen im Preload werden ignoriert.

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

Hinweis: Die Konfiguration im Preload muss vor dem Laden auf die Verwendung warten. Zum Beispiel:

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

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

Preload-Konfiguration kann nicht in Moduldateien platziert werden:

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

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

DebugBoolean

Wenn der Wert wahr ist, entfernt der Loader keine dynamisch eingefügten Skript-Tags. Plug-Ins können auch über die Ausgabe von Protokollen und anderen Informationen basierend auf der Debug-Konfiguration entscheiden.

BasisString

Wenn Sea.js die Kennung der obersten Ebene analysiert, wird sie relativ zum Basispfad analysiert.

Hinweis: Bitte konfigurieren Sie den Basispfad im Allgemeinen nicht. Oft ist es einfacher und konsistenter, sea.js im entsprechenden Pfad zu platzieren.
charsetString |. Funktion

Beim Abrufen der Moduldatei wird das Zeichensatzattribut des 3f1c4e4b6b16bbbd69b2ee476dc4f83a Der Standardwert ist utf-8

charset kann auch eine Funktion sein:

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 Funktion
Wird verwendet, um ein oder mehrere Module auf der Seite zu laden. seajs.use(id, Rückruf?)

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

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

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

Hinweis: seajs.use hat nichts mit dem DOM-ready-Ereignis zu tun. Wenn Sie sicherstellen möchten, dass bestimmte Vorgänge ausgeführt werden, nachdem das DOM bereit ist, müssen Sie eine Klassenbibliothek wie jquery verwenden, um dies sicherzustellen. Zum Beispiel

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

Hinweis: Der erste Parameter der use-Methode muss vorhanden sein, kann aber null oder eine Variable sein

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

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

seajs.cacheOjbect
Über seajs.cache können Sie alle Modulinformationen im aktuellen Modulsystem überprüfen.

Öffnen Sie beispielsweise seajs.org und geben Sie dann seajs.cache in das Konsolenfenster der WebKit Developer Tools ein. Sie sehen Folgendes:

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

Dies sind die Module, die auf der Startseite des Dokuments verwendet werden. Erweitern Sie ein Element, um die spezifischen Informationen des Moduls anzuzeigen: CMD-Moduldefinitionsspezifikation im Modulabschnitt.

seajs.resloveFunktion
Ähnlich wie bei require.resolve wird der interne Mechanismus des Modulsystems verwendet, um eine Pfadanalyse für die eingehenden String-Parameter durchzuführen.

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来调整。