Dokumentasi ringkas Seajs menyediakan pengalaman pembangunan modular yang ringkas dan muktamad_Seajs

Dokumen tidak rasmi disusun daripada teks dan contoh dokumen rasmi kami sendiri untuk rujukan pantas.

Mengapa menggunakan Sea.js?

Sea.js mengikuti cara penulisan dan penyusunan kod yang mudah dan semula jadi, serta mempunyai ciri teras berikut:

Spesifikasi definisi modul yang ringkas dan mesra: Sea.js mengikut spesifikasi CMD dan boleh menulis kod modul seperti Node.js.
Organisasi kod semula jadi dan intuitif: pemuatan automatik kebergantungan dan konfigurasi ringkas dan jelas membolehkan kami menikmati pengekodan lebih banyak.
Sea.js juga menyediakan pemalam yang biasa digunakan, yang sangat membantu untuk pembangunan, penyahpepijatan dan pengoptimuman prestasi, serta mempunyai antara muka yang boleh dikembangkan yang kaya.

Keserasian

Sea.js mempunyai kes ujian yang lengkap dan serasi dengan semua penyemak imbas utama:

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

Sea.js boleh dijalankan pada bahagian mudah alih, termasuk apl mod Hibrid. Secara teorinya, Sea.js boleh dijalankan pada mana-mana enjin penyemak imbas.

seajs.configObject

alias Objek

Konfigurasi alias, selepas konfigurasi, anda boleh menggunakan require dalam modul untuk memanggil require('jquery');

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

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

laluan Objek

Tetapkan laluan untuk memudahkan panggilan merentas direktori. Dengan menetapkan laluan secara fleksibel, anda boleh menentukan direktori tanpa menjejaskan pangkalan.

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

var Objek

Konfigurasi pembolehubah. Dalam sesetengah senario, laluan modul hanya boleh ditentukan pada masa jalan Dalam kes ini, anda boleh menggunakan pembolehubah vars untuk mengkonfigurasinya.

vars mengkonfigurasi nilai pembolehubah dalam pengecam modul dan {key} digunakan untuk mewakili pembolehubah dalam pengecam modul.

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

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

peta Tatasusunan

Konfigurasi ini boleh memetakan dan mengubah suai laluan modul, dan boleh digunakan untuk penukaran laluan, nyahpepijat dalam talian, dsb.

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

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

pramuat Tatasusunan

Menggunakan item konfigurasi pramuat, anda boleh memuatkan dan memulakan modul yang ditentukan terlebih dahulu sebelum memuatkan modul biasa.

Rentetan kosong dalam pramuat akan diabaikan.

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

Nota: Konfigurasi dalam pramuat perlu menunggu sehingga digunakan sebelum memuatkan. Contohnya:

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

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

Konfigurasi pramuat tidak boleh diletakkan dalam fail modul:

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

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

nyahpepijat Boolean

Apabila nilai adalah benar, pemuat tidak akan mengalih keluar teg skrip yang dimasukkan secara dinamik. Pemalam juga boleh memutuskan output log dan maklumat lain berdasarkan konfigurasi nyahpepijat.

asasString

Apabila Sea.js menghuraikan pengecam peringkat atas, ia akan dihuraikan secara relatif kepada laluan asas.

Nota: Secara umumnya, sila jangan konfigurasikan laluan asas Selalunya lebih mudah dan lebih konsisten untuk meletakkan sea.js dalam laluan yang sesuai.
charsetString |. Fungsi

Apabila mendapatkan fail modul, atribut charset bagi teg 855348821b2e8f2cc4b633bf98f064df Lalai ialah utf-8

charset juga boleh menjadi fungsi:

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 Fungsi
Digunakan untuk memuatkan satu atau lebih modul dalam halaman. seajs.use(id, panggil balik?)

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

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

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

Nota: seajs.use tiada kaitan dengan acara sedia DOM. Jika anda ingin memastikan bahawa operasi tertentu dilaksanakan selepas DOM sedia, anda perlu menggunakan perpustakaan kelas seperti jquery untuk memastikannya. Contohnya

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

Nota: Parameter pertama kaedah penggunaan mesti ada, tetapi boleh jadi nol atau pembolehubah

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

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

seajs.cache Ojbect
Melalui seajs.cache, anda boleh menyemak semua maklumat modul dalam sistem modul semasa.

Sebagai contoh, buka seajs.org, dan kemudian masukkan seajs.cache dalam panel Konsol Alat Pembangun WebKit, anda boleh melihat:

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

Ini ialah modul yang digunakan pada halaman utama dokumen. Kembangkan item untuk melihat maklumat khusus modul Untuk maksudnya, sila rujuk: Spesifikasi definisi modul CMD dalam bahagian modul.

seajs.reslove Fungsi
Sama seperti require.resolve, mekanisme dalaman sistem modul akan digunakan untuk melakukan analisis laluan pada parameter rentetan masuk.

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