# SJS module

You can write SJS in a separate `.sjs` file, or use the `<sjs>` tag in a `.ttml` file to reference a `.sjs` file or write SJS directly. Each SJS file or code inlined by an SJS tag is an independent module.

## How to use

### Method 1: Define the SJS module in the .sjs file

```javascript
// 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,
};
```

### Method 2: Reference or define the SJS module in the .ttml file

- Reference the `.sjs` file module in method 1 above in the `.ttml` file.

```xml
<sjs module="utils" src="../utils/index.sjs" />
<view>hello {{ utils. formatTime(myTime) }}</view>
```

- Define SJS modules using SJS tags in `.ttml` files.
For more information on SJS tags, see [SJS tags](https://open.feishu.cn/document/uYjL24iN/uEjMuEjMuEjM/sjs/sjs-module#082a876a-1) below.

```xml

<sjs module="utils">
   function formatTime(dateStr) {
// code omitted
   }
   function formatNumber(n) {
// code omitted
   }
   module.exports = { formatTime: formatTime }
</sjs>
```

## module and require instructions

SJS file modules or SJS tagged inline modules are self-contained.

- The scope of each module is isolated, and the variables and functions defined in the module are invisible to other modules.
- If a module needs to expose variables or functions to the outside world, it needs to export objects through the `module.exports` property.
- If a module wants to refer to an object exported by another module, it needs to be imported through the `require` function.

### module object

Every module has a built-in `module` object that can export variables or functions by defining the `module.exports` property. The sample code is as follows:

```javascript
function tool() {
   // a tool function
}

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

### require function

To refer to other SJS file modules in an SJS module, you can use the `require` function. Note when using:

- The path of `require` must be a relative path, and it can only be an SJS file, and JavaScript cannot be referenced.
- When a module is referenced at a time, a singleton object will be generated using the `module` of the module, and then point to the singleton object on multiple pages, multiple places, and multiple references.
- Dynamic `require` is not supported, eg: `var foo = "../some_path/" + bar; require(foo)`.

The sample code is as follows:

```javascript
// 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 tags

The `<sjs>` tag can be used to reference `.sjs` file modules, or to write inline SJS modules. This tag has two attributes `module` and `src`.

### module attribute

The `module` attribute is used to define the module name, and its naming must conform to the following rules:

- The first character must be: letter (a-zA-Z), underscore (_)
- Characters other than the first letter can be: letters (a-zA-Z), underscore (_), numbers (0-9)

If there are repeated `module` attribute names in the same TTML file, the latter will override the former, and for different TTML files, repeated `module` attribute names can be used.

### src attribute

When you need to import a SJS file module, you can set the `src` attribute, and `src` must be a relative path.

### Instructions

- `<sjs>` modules are only accessible within the TTML file that defines the module. When using `<include>` or `<import>`, the `<sjs>` module will not be imported into the corresponding TTML file.
- In a `<template>` tag, only the corresponding `<sjs>` module in the TTML file that defines the `<template>` can be used.