CSS 的声明性行为赋值： prototype 和 aspect 属性

在 Sciter 的意义上，行为是 DOM 元素的控制器。基于 JS 的行为可以是

• 扩展 Element 类（类控制器）的类，或者

• 处理元素的各种 UI 方面的自由函数。

 类控制器

类控制器允许定义新类型的交互式 UI 元素。

考虑在 CSS 中声明自定义 <user-card> 元素：

user-card {
 display: block;
 flow:vertical;
 prototype: UserCard url(users-ui.js); /* <<<< */
}

 和

 [HTML全

<user-card id="current-user" />

Sciter 在解析和创建 DOM 时，将加载users-ui.js文件并为其创建 UserCard（或您选择的任何其他名称）类的实例。

该类应扩展内置的 Element 类，并定义所需的方法、事件处理程序等：

users-ui.js

class UserCard extends Element {

 componentDidMount() { 
 // called with 'this' set to the DOM element 
 // being subclassed on DOM construction
 // Use this.content(), this.append(), etc. to define DOM of the element
 } 

 componentWillUnmount() { 
 // called when the element gets "declassed" - 
 // removed from the DOM or get subclassed by other class.
 } 
 // ... other specific methods and handlers here
}

据说这样的定义 <user-card> 将表现为特定 UserCard 类的 DOM 元素，因此行为术语。

有关更多信息，请参见 DOM 组件一章;

prototype CSS 属性

prototype: class-name [url(file.js)];

 哪里：

• class-name - JS 定义类的名称;

• url（file.js） - 定义类的 JS 模块文件的 url;

Aspect功能控制器

原型的唯一问题是 – 在任何给定的时刻，特定的 DOM 元素可以有一个且只有一个脚本类控制器。JavaScript 不支持多重继承。

想象一下，我们在脚本中可能有多个函数，旨在配置一些 DOM 元素来提供某些特定功能。换句话说，每个这样的函数都应该向它所调用的元素添加自己的方面（部分功能）。

这就是 Sciter 中方面机制的原因。

让我们考虑一下 OnClickAspect 实现：

ui-helpers.js

function OnClickAspect() {
 // adds onClick handler defined by "click" element attribute in html
 this.on("click", () => { 
 let attrClick = element.attributes["click"]; 
 eval(attrClick); // evaluate the expression
 });
}

 和

ui-helpers.css

*[onclick] {
 aspect : OnClickAspect url(ui-helpers.js);
}

上面的这两部分执行以下操作：“对于定义了 onclick 属性的任何元素，添加评估 onclick 属性内容的 click 事件处理程序”。

aspect CSS 属性

 aspect: function-name[( ...parameters... )] [ url(file.js) ];

 哪里：

• function-name - JS 定义函数的名称;

• url（file.js） - 定义函数的 JS 文件的 url;

信息

aspect CSS 属性具有不寻常的继承：应用于元素的所有规则都为该元素调用了其 aspect 函数。

 所以这两条规则：

[onclick] { aspect : OnClickAspect url(ui-helpers.js); }
[onchange] { aspect : OnChangeAspect url(ui-helpers.js); }

将导致为元素调用 OnClickAspect 和 OnChangeAspect。

参数化方面定义

CSS 可以将其他参数传递给 aspect 函数调用：

chart { 
 aspect: Donut(fill: #f00 #0f0 #00f, thickness:0.2 ) url(micro-charts.js); 
}

此类参数将作为带有键的对象传递：

const params = {
 fill: [ Color.RGB(255,0,0), Color.RGB(0,255,0), Color.RGB(0,0,255) ],
 thickness: 0.2
};
Donut(params); // in fact as MicroChart.Donut.call(domElement,params);