LOGOSan

主模块API

编辑本文

组件初始化

defineComponent

描述: defineComponent({Object}propertiesAndMethods)

解释

方法 。定义组件的快捷方法。详细请参考组件定义文档。

用法

1
2
3
4
5
6
7
8
9
var MyApp = san.defineComponent({
template: '<ul><li s-for="item in list">{{item}}</li></ul>',
initData: function () {
return {
list: ['san', 'er', 'esui', 'etpl', 'esl']
};
}
});

Component

类型: Function

解释

属性 。组件类,定义组件时可以从此继承。通常通过 san.defineComponent 定义组件,不使用此方法。详细请参考组件定义文档。

用法

1
2
3
4
5
6
7
8
9
10
import {Component} from 'san';
class HelloComponent extends Component {
static template = '<p>Hello {{name}}!</p>';
initData() {
return {name: 'San'}
}
}

inherits

描述: inherits({Function}SubClass, {Function}SuperClass)

解释

方法 。一个通用的实现继承的方法,定义组件时可以使用此方法从 san.Component 继承。通常在 ES5 下通过 san.defineComponent 定义组件,在 ESNext 下使用 extends 定义组件。

绝大多数情况不推荐使用此方法。详细请参考组件定义文档。

服务端渲染

compileToRenderer

描述: {function(Object):string} compileToRenderer({Function}ComponentClass)

解释

方法 。将组件类编译成 renderer 方法。详细请参考服务端渲染文档。

用法

1
2
3
4
5
6
7
8
9
10
11
var MyApp = san.defineComponent({
template: '<ul><li s-for="item in list">{{item}}</li></ul>',
initData: function () {
return {
list: ['san', 'er', 'esui', 'etpl', 'esl']
};
}
});
var render = san.compileToRenderer(MyApp);

compileToSource

描述: {string} compileToRenderer({Function}ComponentClass)

解释

方法 。将组件类编译成 renderer 方法的源文件。详细请参考服务端渲染文档。

用法

1
2
3
4
5
6
7
8
9
10
11
12
var MyApp = san.defineComponent({
template: '<ul><li s-for="item in list">{{item}}</li></ul>',
initData: function () {
return {
list: ['san', 'er', 'esui', 'etpl', 'esl']
};
}
});
var renderSource = san.compileToSource(MyApp);
fs.writeFileSync('your-module.js', 'exports = module.exports = ' + renderSource, 'UTF-8');

模板编译

ExprType

类型: Object

解释

属性 。表达式类型枚举,有助于帮你理解和使用 San 的模板编译结果。详细请参考ANode文档。

parseExpr

描述: {Object} parseExpr({string}source)

解释

方法 。将源字符串解析成表达式对象。详细请参考ANode文档。

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
var expr = san.parseExpr('!user.isLogin');
/*
expr = {
type: ExprType.UNARY,
expr: {
type: ExprType.ACCESSOR,
paths: [
{type: ExprType.STRING, value: 'user'},
{type: ExprType.STRING, value: 'isLogin'}
]
}
}
*/

parseTemplate

描述: {ANode} parseTemplate({string}source)

解释

方法 。将源字符串解析成 ANode 对象。如果你想使用 San 的模板形式,但是自己开发视图渲染机制,可以使用该方法解析模板。详细请参考ANode文档。

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var aNode = san.parseTemplate('<p>Hello {{name}}!</p>');
/*
aNode = {
"directives": [],
"props": [],
"events": [],
"childs": [
{
"isText": true,
"text": "Hello {{name}}!",
"textExpr": {
"type": ExprType.TEXT,
"segs": [
{
"type": ExprType.STRING,
"value": "Hello "
},
{
"type": ExprType.INTERP,
"expr": {
"type": ExprType.ACCESSOR,
"paths": [
{
"type": ExprType.STRING,
"value": "name"
}
]
},
"filters": []
}
]
}
}
],
"tagName": "p"
}
*/

其他

debug

类型: boolean

解释

属性 。是否开启调试功能。当同时满足以下两个条件时,可以在 chrome 中使用 devtool 进行调试。

LifeCycle

类型: Function

解释

属性 。生命周期类。如果你想自己开发管理组件的渲染和交互更新过程,LifeCycle 可能对你有所帮助。

LifeCycle 定义了以下生命周期,并且生命周期之间包含互斥关系,描述如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
compiled: {
value: 1
},
inited: {
value: 2
},
created: {
value: 3
},
attached: {
value: 4,
mutex: 'detached'
},
detached: {
value: 5,
mutex: 'attached'
},
disposed: {
value: 6,
mutex: '*'
}
}

通过 LifeCycle 的 set 方法,可以指定生命周期; 通过 LifeCycle 的 is 方法,可以判断是否处于生命周期。

用法

1
2
3
4
5
6
7
var lifeCycle = new san.LifeCycle();
lifeCycle.set('attached');
lifeCycle.is('attached'); // true
lifeCycle.set('detached');
lifeCycle.is('attached'); // false

version

类型: string

解释

属性 。当前的 San 版本号。

RESOURCES

教程

教程是入门的捷径,请从这里开始了解San。

指南

我们正在编写指南手册,以指导各种应用场景下怎么使用San。

示例

这里展示了一些简单例子,以及在实际项目如何使用San。

组件 API

当你想不起来组件的接口时,请查阅这里。

FACILITIES

Router

支持hash和html5模式的router,单页或同构的Web应用通常需要它。

Store

应用状态管理套件,其理念是类似flux的单向流。

Update

Immutable的对象更新库,和san-store配合进行应用状态数据更新。

MaterialUI组件库

基于material-design设计规范的组件库