seajs加载模板引擎实现前端模板化开发

最新推荐文章于 2021-06-15 18:53:44 发布

转载最新推荐文章于 2021-06-15 18:53:44 发布 · 6.7k 阅读

243 篇文章

订阅专栏

本文介绍如何使用Sea.js加载HTML模板、Handlebars模板及JSON数据，并提供了具体配置与代码示例。

文本插件

在 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 的路径：

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

然后在模块代码中，就可以直接获取编译后的 handlebars 模块函数了：

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

除了加载模板等文本文件，使用文本插件还可以加载 JSON 数据：

a.json

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

define(function(require) {

  // 加载 json 数据
  var data = require('./a.json');
  console.log(data.name);

});

除了 .json 后缀，还可以使用 json! 前缀来指明 JSON 文件。