文字外掛

在 JavaScript 中嵌入 HTML 模板很不方便，特別是當模板內容有多行時。有了 Sea.js, 一切迎刃而解。

首先，需要引入文字外掛：

<script src="path/to/sea.js"></script>
<script src="path/to/seajs-text.js"></script>

也可以通過 preload 配置來引入。

載入模板字串

引入文字外掛後，就可以在模組中直接通過 require 來載入文字檔案了：

define(function(require) {

  // 獲取文字內容
  var tpl =
 
 require('./a.tpl');
  console.log(tpl);

});

a.tpl

<div>I am {{name}}.</div>

除了 .tpl 字尾, 還可以使用 .html 字尾，或 text! 字首來指明文字檔案。

載入 Handlebars 模板並進行預編譯

對於 Handlebars 模板，在開發時我們可以讓編譯透明化。首先要配置 handlebars 的路徑：

seajs.config({
  alias: {
    handlebars: 'gallery/handlebars/1.0.2/handlebars'
  }
})

然後在模組程式碼中，就可以直接獲取編譯後的 handlebars 模組函數了：

  var compiled = require('./a.handlebars')
  var html = compiled({foo: 'bar'})

載入 JSON 資料

除了載入模板等文字檔案，使用文字外掛還可以載入 JSON 資料：

a.json

{
  "name": "Frank",
  "age": 30
}

define(function(require) {

  // 載入 json 資料
  var data = require('./a.json');
  console.log(data.name);

});

除了 .json 字尾，還可以使用 json!

注意事項

1. Sea.js 通過 XHR 來載入文字檔案。受同源策略限制，在開發完成後，推薦通過構建工具將文字檔案轉換為 JS 程式碼。這樣，上線後就可以從任意域載入。

2. Sea.js 原生支援 css 檔案的載入，直接 require('path/to/file.css') 即可。