sjs 模块

sjs 可以在独立的sjs文件中编写，也可以在 ttml 文件中使用 <sjs> 标签编写。每个 sjs 文件或者 sjs 标签内联的代码都是一个独立的模块。

使用方法

.sjs 文件

// utils/index.sjs

function formatTime(dateStr) {
  var date = getDate(dateStr);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var hour = date.getHours();
  var minute = date.getMinutes();
  var second = date.getSeconds();

  return (
    [year, month, day].map(formatNumber).join("/") +
    " " +
    [hour, minute, second].map(formatNumber).join(":")
  );
}

function formatNumber(n) {
  n = n.toString();
  return n[1] ? n : "0" + n;
}

module.exports = {
  formatTime: formatTime,
};

ttml 文件

在 ttml 文件中引用上面的sjs文件模块

<!-- pages/index.ttml -->
<sjs module="utils" src="../utils/index.sjs" />
<view>hello {{ utils.formatTime(myTime) }}</view>

sjs 标签

上面的 sjs 文件，也可以编写在 sjs 标签内

<!-- 内联的sjs代码 -->

<sjs module="utils">
  function formatTime(dateStr) { // 代码省略 } function formatNumber(n) { // 代码省略 }
  module.exports = { formatTime: formatTime }
</sjs>

require 和 module

sjs 文件模块或者内联模块都是独立的：

每个模块作用域是隔离的，模块内定义的变量和函数对于其它模块是不可见的
一个模块如果需要对外暴露变量或函数，需要通过 module.exports 导出对象
一个模块如果要引用另一模块导出的对象，需要通过 require 函数引入

module 对象

每个模块都有一个内置的 module 对象，可以通过定义 module.exports 属性来导出变量或函数

function tool() {
  // a tool function
}

module.exports = {
  foo: "bar",
};
module.exports.extra = {
  key: "value",
  tool: tool,
};

require 函数

在 sjs 模块中引用其他 sjs 文件模块，可以使用 require 函数。注意：

require 的路径必须是相对路径，且只能是 sjs 文件，不能引用 javascript
当一次引用一个模块后，会使用该模块的 module 生成一个单例对象，然后在多个页面、多个地方、多次引用时都指向该单例对象
不支持动态 require，比如 var foo = "../some_path/" + bar; require(foo)

示例代码：

// page/a.sjs
module.exports = function (name) {
  return "hello " + name;
};

// page/b.sjs
var my = "world";
var say = require("./a.sjs");

module.exports = function () {
  return say(my);
};

sjs 标签

<sjs>标签可以用来引用.sjs 文件模块，或者编写内联模块。它有两个属性module和src。

module 属性

module 属性用来定义模块名，其命名必须符合下面两个规则：

首字符必须是：字母（a-zA-Z），下划线（_）
剩余字符可以是：字母（a-zA-Z），下划线（_），数字（0-9）

如果在统一 ttml 文件内出现重复的 module 属性名，则后者会覆盖前者，对于不同的 ttml 文件，可以使用重复的 module 属性名

src 属性

当需要引入一个 sjs 文件模块时，可以设置 src 属性，注意 src 必须是一个相对路径。

tips

<sjs> 模块只能在定义模块的 ttml 文件中被访问到。使用 <include> 或 <import> 时，<sjs> 模块不会被引入到对应的 ttml 文件中
<template> 标签中，只能使用定义该 <template> 的 ttml 文件中定义的 <sjs> 模块

点击纠错

评价此篇文档

sjs 模块
使用方法
require 和 module
sjs 标签
tips