La documentation simple de Seajs fournit une expérience de développement modulaire simple et ultime_Seajs

Les documents non officiels sont compilés à partir du texte et des exemples de nos propres documents officiels pour une référence rapide.

Pourquoi utiliser Sea.js ?

Sea.js poursuit une manière simple et naturelle d'écrire et d'organiser le code et possède les fonctionnalités principales suivantes :

Spécification de définition de module simple et conviviale : Sea.js suit la spécification CMD et peut écrire du code de module comme Node.js.
Organisation naturelle et intuitive du code : chargement automatique des dépendances et configuration concise et claire nous permettent de profiter davantage du codage.
Sea.js fournit également des plug-ins couramment utilisés, qui sont très utiles pour le développement, le débogage et l'optimisation des performances, et disposent d'interfaces extensibles riches.

Compatibilité

Sea.js dispose de cas de tests complets et est compatible avec tous les principaux navigateurs :

Chrome 3+ 
Firefox 2+ 
Safari 3.2+
Opéra 10+ 
IE 5.5+ 

Sea.js peut fonctionner du côté mobile, y compris les applications en mode hybride. En théorie, Sea.js peut fonctionner sur n'importe quel moteur de navigateur.

seajs.configObject

alias Objet

Configuration de l'alias, après configuration, vous pouvez utiliser require dans le module pour appeler require('jquery');

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

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

chemins Objet

Définissez le chemin pour faciliter les appels entre répertoires. En définissant le chemin de manière flexible, vous pouvez spécifier un répertoire sans affecter la base.

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 Objet

Configuration variable. Dans certains scénarios, le chemin du module ne peut être déterminé qu'au moment de l'exécution. Dans ce cas, vous pouvez utiliser des variables vars pour le configurer.

vars configure la valeur de la variable dans l'identifiant du module, et {key} est utilisé pour représenter la variable dans l'identifiant du module.

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

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

carte Tableau

Cette configuration peut mapper et modifier le chemin du module, et peut être utilisée pour la conversion de chemin, le débogage en ligne, etc.

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

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

préchargement Tableau

À l'aide de l'élément de configuration de préchargement, vous pouvez charger et initialiser le module spécifié à l'avance avant de charger le module ordinaire.

Les chaînes vides en préchargement seront ignorées.

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

Remarque : La configuration en préchargement doit attendre son utilisation avant de se charger. Par exemple :

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

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

La configuration de préchargement ne peut pas être placée dans les fichiers du module :

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

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

débogagebooléen

Lorsque la valeur est vraie, le chargeur ne supprimera pas les balises de script insérées dynamiquement. Les plug-ins peuvent également décider de la sortie du journal et d'autres informations en fonction de la configuration de débogage.

baseChaîne

Lorsque Sea.js analyse l'identifiant de niveau supérieur, il sera analysé par rapport au chemin de base.

Remarque : Généralement, veuillez ne pas configurer le chemin de base. Il est souvent plus simple et plus cohérent de placer sea.js dans le chemin approprié.
charsetString | Fonction

Lors de l'obtention du fichier du module, l'attribut charset de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a La valeur par défaut est utf-8

charset peut aussi être une fonction :

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

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

seajs.useFonction
Utilisé pour charger un ou plusieurs modules dans la page. seajs.use(id, rappel ?)

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

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

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

Remarque : seajs.use n'a rien à voir avec l'événement DOM ready. Si vous souhaitez vous assurer que certaines opérations sont exécutées une fois le DOM prêt, vous devez utiliser une bibliothèque de classes telle que jquery pour vous en assurer. Par exemple

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

Remarque : Le premier paramètre de la méthode use doit être présent, mais il peut être nul ou une variable

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

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

seajs.cacheOjbect
Grâce à seajs.cache, vous pouvez vérifier toutes les informations sur les modules dans le système de modules actuel.

Par exemple, ouvrez seajs.org, puis saisissez seajs.cache dans le panneau de console des outils de développement WebKit, vous pouvez voir :

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

Ce sont les modules utilisés sur la page d'accueil du document. Développez un élément pour voir les informations spécifiques du module. Pour la signification, veuillez vous référer à : Spécification de la définition du module CMD dans la section module.

seajs.resloveFonction
Semblable à require.resolve, le mécanisme interne du système de modules sera utilisé pour effectuer une analyse de chemin sur les paramètres de chaîne entrants.

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