JS层代码分析
关键方法:
- initialRender
- observeComponentCreation
- ViewStackProcessor.StartGetAccessRecordingFor
- ViewStackProcessor.StopGetAccessRecording()
- loadDocument
class Index extends ViewPU {
constructor(parent, params, __localStorage, elmtId = -1) {
super(parent, __localStorage, elmtId);
this.__message = new ObservedPropertySimplePU('Hello World', this, "message");
this.setInitiallyProvidedValue(params);
}
setInitiallyProvidedValue(params) {
if (params.message !== undefined) {
this.message = params.message;
}
}
updateStateVars(params) {
}
purgeVariableDependenciesOnElmtId(rmElmtId) {
this.__message.purgeDependencyOnElmtId(rmElmtId);
}
aboutToBeDeleted() {
this.__message.aboutToBeDeleted();
SubscriberManager.Get().delete(this.id__());
this.aboutToBeDeletedInternal();
}
get message() {
return this.__message.get();
}
set message(newValue) {
this.__message.set(newValue);
}
initialRender() {
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Column.create();
Column.width('100%');
Column.height('100%');
if (!isInitialRender) {
Column.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Button.createWithLabel("更多");
Button.onClick(event => {
console.log("you click more");
});
if (!isInitialRender) {
Button.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
Button.pop();
Column.pop();
}
rerender() {
this.updateDirtyElements();
}
}
ViewStackProcessor.StartGetAccessRecordingFor(ViewStackProcessor.AllocateNewElmetIdForNextComponent());
loadDocument(new Index(undefined, {}));
ViewStackProcessor.StopGetAccessRecording();
"use strict";
class GreenButtonState {
constructor(width) {
this.width = 0;
this.width = width;
}
}
class GreenButton extends ViewPU {
constructor(parent, params, __localStorage, elmtId = -1) {
super(parent, __localStorage, elmtId);
this.__greenButtonState = new SynchedPropertyObjectTwoWayPU(params.greenButtonState, this, "greenButtonState");
this.setInitiallyProvidedValue(params);
}
setInitiallyProvidedValue(params) {
}
updateStateVars(params) {
}
purgeVariableDependenciesOnElmtId(rmElmtId) {
this.__greenButtonState.purgeDependencyOnElmtId(rmElmtId);
}
aboutToBeDeleted() {
this.__greenButtonState.aboutToBeDeleted();
SubscriberManager.Get().delete(this.id__());
this.aboutToBeDeletedInternal();
}
get greenButtonState() {
return this.__greenButtonState.get();
}
set greenButtonState(newValue) {
this.__greenButtonState.set(newValue);
}
initialRender() {
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Button.createWithLabel('Green Button');
Button.width(this.greenButtonState.width);
Button.height(40);
Button.backgroundColor('#64bb5c');
Button.fontColor('#FFFFFF,90%');
Button.onClick(() => {
if (this.greenButtonState.width < 700) {
// 更新class的属性,变化可以被观察到同步回父组件
this.greenButtonState.width += 60;
}
else {
// 更新class,变化可以被观察到同步回父组件
this.greenButtonState = new GreenButtonState(180);
}
});
if (!isInitialRender) {
Button.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
Button.pop();
}
rerender() {
this.updateDirtyElements();
}
}
class Index extends ViewPU {
constructor(parent, params, __localStorage, elmtId = -1) {
super(parent, __localStorage, elmtId);
this.__message = new ObservedPropertySimplePU('Hello World', this, "message");
this.__greenButtonState = new ObservedPropertyObjectPU(new GreenButtonState(180), this, "greenButtonState");
this.setInitiallyProvidedValue(params);
}
setInitiallyProvidedValue(params) {
if (params.message !== undefined) {
this.message = params.message;
}
if (params.greenButtonState !== undefined) {
this.greenButtonState = params.greenButtonState;
}
}
updateStateVars(params) {
}
purgeVariableDependenciesOnElmtId(rmElmtId) {
this.__message.purgeDependencyOnElmtId(rmElmtId);
this.__greenButtonState.purgeDependencyOnElmtId(rmElmtId);
}
aboutToBeDeleted() {
this.__message.aboutToBeDeleted();
this.__greenButtonState.aboutToBeDeleted();
SubscriberManager.Get().delete(this.id__());
this.aboutToBeDeletedInternal();
}
get message() {
return this.__message.get();
}
set message(newValue) {
this.__message.set(newValue);
}
get greenButtonState() {
return this.__greenButtonState.get();
}
set greenButtonState(newValue) {
this.__greenButtonState.set(newValue);
}
initialRender() {
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Column.create();
Column.width('100%');
if (!isInitialRender) {
Column.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Text.create(this.message);
Text.fontSize(50);
Text.fontWeight(FontWeight.Bold);
if (!isInitialRender) {
Text.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
Text.pop();
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
__Common__.create();
__Common__.margin(12);
if (!isInitialRender) {
__Common__.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
{
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
if (isInitialRender) {
ViewPU.create(new GreenButton(this, { greenButtonState: this.__greenButtonState }, undefined, elmtId));
}
else {
this.updateStateVarsOfChildByElmtId(elmtId, {});
}
ViewStackProcessor.StopGetAccessRecording();
});
}
__Common__.pop();
Column.pop();
}
rerender() {
this.updateDirtyElements();
}
}
ViewStackProcessor.StartGetAccessRecordingFor(ViewStackProcessor.AllocateNewElmetIdForNextComponent());
loadDocument(new Index(undefined, {}));
ViewStackProcessor.StopGetAccessRecording();
//# sourceMappingURL=Index.js.map
添加子View
ViewPU.create(new GreenButton(this, { greenButtonState: this.__greenButtonState }, undefined, elmtId));
@Provide & @Consume
"use strict";
class CompD extends ViewPU {
constructor(parent, params, __localStorage, elmtId = -1) {
super(parent, __localStorage, elmtId);
this.__reviewVotes = this.initializeConsume("reviewVotes", "reviewVotes");
this.setInitiallyProvidedValue(params);
}
setInitiallyProvidedValue(params) {
}
updateStateVars(params) {
}
purgeVariableDependenciesOnElmtId(rmElmtId) {
}
aboutToBeDeleted() {
this.__reviewVotes.aboutToBeDeleted();
SubscriberManager.Get().delete(this.id__());
this.aboutToBeDeletedInternal();
}
get reviewVotes() {
return this.__reviewVotes.get();
}
set reviewVotes(newValue) {
this.__reviewVotes.set(newValue);
}
initialRender() {
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Column.create();
Column.width('50%');
if (!isInitialRender) {
Column.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Text.create(`reviewVotes(${this.reviewVotes})`);
if (!isInitialRender) {
Text.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
Text.pop();
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Button.createWithLabel(`reviewVotes(${this.reviewVotes}), give +1`);
Button.onClick(() => this.reviewVotes += 1);
if (!isInitialRender) {
Button.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
Button.pop();
Column.pop();
}
rerender() {
this.updateDirtyElements();
}
}
class CompC extends ViewPU {
constructor(parent, params, __localStorage, elmtId = -1) {
super(parent, __localStorage, elmtId);
this.setInitiallyProvidedValue(params);
}
setInitiallyProvidedValue(params) {
}
updateStateVars(params) {
}
purgeVariableDependenciesOnElmtId(rmElmtId) {
}
aboutToBeDeleted() {
SubscriberManager.Get().delete(this.id__());
this.aboutToBeDeletedInternal();
}
initialRender() {
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Row.create({ space: 5 });
if (!isInitialRender) {
Row.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
{
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
if (isInitialRender) {
ViewPU.create(new CompD(this, {}, undefined, elmtId));
}
else {
this.updateStateVarsOfChildByElmtId(elmtId, {});
}
ViewStackProcessor.StopGetAccessRecording();
});
}
{
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
if (isInitialRender) {
ViewPU.create(new CompD(this, {}, undefined, elmtId));
}
else {
this.updateStateVarsOfChildByElmtId(elmtId, {});
}
ViewStackProcessor.StopGetAccessRecording();
});
}
Row.pop();
}
rerender() {
this.updateDirtyElements();
}
}
class CompB extends ViewPU {
constructor(parent, params, __localStorage, elmtId = -1) {
super(parent, __localStorage, elmtId);
this.setInitiallyProvidedValue(params);
}
setInitiallyProvidedValue(params) {
}
updateStateVars(params) {
}
purgeVariableDependenciesOnElmtId(rmElmtId) {
}
aboutToBeDeleted() {
SubscriberManager.Get().delete(this.id__());
this.aboutToBeDeletedInternal();
}
initialRender() {
{
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
if (isInitialRender) {
ViewPU.create(new CompC(this, {}, undefined, elmtId));
}
else {
this.updateStateVarsOfChildByElmtId(elmtId, {});
}
ViewStackProcessor.StopGetAccessRecording();
});
}
}
rerender() {
this.updateDirtyElements();
}
}
class Index extends ViewPU {
constructor(parent, params, __localStorage, elmtId = -1) {
super(parent, __localStorage, elmtId);
this.__reviewVotes = new ObservedPropertySimplePU(0, this, "reviewVotes");
this.addProvidedVar("reviewVotes", this.__reviewVotes);
this.setInitiallyProvidedValue(params);
}
setInitiallyProvidedValue(params) {
if (params.reviewVotes !== undefined) {
this.reviewVotes = params.reviewVotes;
}
}
updateStateVars(params) {
}
purgeVariableDependenciesOnElmtId(rmElmtId) {
}
aboutToBeDeleted() {
this.__reviewVotes.aboutToBeDeleted();
SubscriberManager.Get().delete(this.id__());
this.aboutToBeDeletedInternal();
}
get reviewVotes() {
return this.__reviewVotes.get();
}
set reviewVotes(newValue) {
this.__reviewVotes.set(newValue);
}
initialRender() {
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Column.create();
if (!isInitialRender) {
Column.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Button.createWithLabel(`reviewVotes(${this.reviewVotes}), give +1`);
Button.onClick(() => this.reviewVotes += 1);
if (!isInitialRender) {
Button.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
Button.pop();
{
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
if (isInitialRender) {
ViewPU.create(new CompB(this, {}, undefined, elmtId));
}
else {
this.updateStateVarsOfChildByElmtId(elmtId, {});
}
ViewStackProcessor.StopGetAccessRecording();
});
}
Column.pop();
}
rerender() {
this.updateDirtyElements();
}
}
ViewStackProcessor.StartGetAccessRecordingFor(ViewStackProcessor.AllocateNewElmetIdForNextComponent());
loadDocument(new Index(undefined, {}));
ViewStackProcessor.StopGetAccessRecording();
//# sourceMappingURL=Index.js.map
@Observed&@ObjectLink
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
// objectLinkNestedObjects.ets
let NextID = 1;
let Bag = class Bag {
constructor(size) {
this.id = NextID++;
this.size = size;
}
};
Bag = __decorate([
Observed
], Bag);
let User = class User {
constructor(bag) {
this.bag = bag;
}
};
User = __decorate([
Observed
], User);
let Book = class Book {
constructor(bookName) {
this.bookName = bookName;
}
};
Book = __decorate([
Observed
], Book);
let BookName = class BookName extends Bag {
constructor(nameSize) {
// 调用父类方法对nameSize进行处理
super(nameSize);
this.nameSize = nameSize;
}
};
BookName = __decorate([
Observed
], BookName);
class ViewA extends ViewPU {
constructor(parent, params, __localStorage, elmtId = -1) {
super(parent, __localStorage, elmtId);
this.label = 'ViewA';
this.__bag = new SynchedPropertyNesedObjectPU(params.bag, this, "bag");
this.setInitiallyProvidedValue(params);
}
setInitiallyProvidedValue(params) {
if (params.label !== undefined) {
this.label = params.label;
}
this.__bag.set(params.bag);
}
updateStateVars(params) {
this.__bag.set(params.bag);
}
purgeVariableDependenciesOnElmtId(rmElmtId) {
this.__bag.purgeDependencyOnElmtId(rmElmtId);
}
aboutToBeDeleted() {
this.__bag.aboutToBeDeleted();
SubscriberManager.Get().delete(this.id__());
this.aboutToBeDeletedInternal();
}
get bag() {
return this.__bag.get();
}
initialRender() {
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Column.create();
if (!isInitialRender) {
Column.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Text.create(`ViewC [${this.label}] this.bag.size = ${this.bag.size}`);
Text.fontColor('#ffffffff');
Text.backgroundColor('#ff3fc4c4');
Text.width(320);
Text.height(50);
Text.borderRadius(25);
Text.margin(10);
Text.textAlign(TextAlign.Center);
if (!isInitialRender) {
Text.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
Text.pop();
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Button.createWithLabel(`ViewA: this.bag.size add 1`);
Button.width(320);
Button.backgroundColor('#ff7fcf58');
Button.margin(10);
Button.onClick(() => {
this.bag.size += 1;
});
if (!isInitialRender) {
Button.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
Button.pop();
Column.pop();
}
rerender() {
this.updateDirtyElements();
}
}
class ViewC extends ViewPU {
constructor(parent, params, __localStorage, elmtId = -1) {
super(parent, __localStorage, elmtId);
this.label = 'ViewC1';
this.__bookName = new SynchedPropertyNesedObjectPU(params.bookName, this, "bookName");
this.setInitiallyProvidedValue(params);
}
setInitiallyProvidedValue(params) {
if (params.label !== undefined) {
this.label = params.label;
}
this.__bookName.set(params.bookName);
}
updateStateVars(params) {
this.__bookName.set(params.bookName);
}
purgeVariableDependenciesOnElmtId(rmElmtId) {
this.__bookName.purgeDependencyOnElmtId(rmElmtId);
}
aboutToBeDeleted() {
this.__bookName.aboutToBeDeleted();
SubscriberManager.Get().delete(this.id__());
this.aboutToBeDeletedInternal();
}
get bookName() {
return this.__bookName.get();
}
initialRender() {
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Row.create();
if (!isInitialRender) {
Row.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Column.create();
Column.width(320);
if (!isInitialRender) {
Column.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Text.create(`ViewC [${this.label}] this.bookName.size = ${this.bookName.size}`);
Text.fontColor('#ffffffff');
Text.backgroundColor('#ff3fc4c4');
Text.width(320);
Text.height(50);
Text.borderRadius(25);
Text.margin(10);
Text.textAlign(TextAlign.Center);
if (!isInitialRender) {
Text.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
Text.pop();
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Button.createWithLabel(`ViewC: this.bookName.size add 1`);
Button.width(320);
Button.backgroundColor('#ff7fcf58');
Button.margin(10);
Button.onClick(() => {
this.bookName.size += 1;
console.log('this.bookName.size:' + this.bookName.size);
});
if (!isInitialRender) {
Button.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
Button.pop();
Column.pop();
Row.pop();
}
rerender() {
this.updateDirtyElements();
}
}
class ViewB extends ViewPU {
constructor(parent, params, __localStorage, elmtId = -1) {
super(parent, __localStorage, elmtId);
this.__user = new ObservedPropertyObjectPU(new User(new Bag(0)), this, "user");
this.__child = new ObservedPropertyObjectPU(new Book(new BookName(0)), this, "child");
this.setInitiallyProvidedValue(params);
}
setInitiallyProvidedValue(params) {
if (params.user !== undefined) {
this.user = params.user;
}
if (params.child !== undefined) {
this.child = params.child;
}
}
updateStateVars(params) {
}
purgeVariableDependenciesOnElmtId(rmElmtId) {
this.__user.purgeDependencyOnElmtId(rmElmtId);
this.__child.purgeDependencyOnElmtId(rmElmtId);
}
aboutToBeDeleted() {
this.__user.aboutToBeDeleted();
this.__child.aboutToBeDeleted();
SubscriberManager.Get().delete(this.id__());
this.aboutToBeDeletedInternal();
}
get user() {
return this.__user.get();
}
set user(newValue) {
this.__user.set(newValue);
}
get child() {
return this.__child.get();
}
set child(newValue) {
this.__child.set(newValue);
}
initialRender() {
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Column.create();
if (!isInitialRender) {
Column.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
__Common__.create();
__Common__.width(320);
if (!isInitialRender) {
__Common__.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
{
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
if (isInitialRender) {
ViewPU.create(new ViewA(this, { label: 'ViewA #1', bag: this.user.bag }, undefined, elmtId));
}
else {
this.updateStateVarsOfChildByElmtId(elmtId, {
bag: this.user.bag
});
}
ViewStackProcessor.StopGetAccessRecording();
});
}
__Common__.pop();
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
__Common__.create();
__Common__.width(320);
if (!isInitialRender) {
__Common__.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
{
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
if (isInitialRender) {
ViewPU.create(new ViewC(this, { label: 'ViewC #3', bookName: this.child.bookName }, undefined, elmtId));
}
else {
this.updateStateVarsOfChildByElmtId(elmtId, {
bookName: this.child.bookName
});
}
ViewStackProcessor.StopGetAccessRecording();
});
}
__Common__.pop();
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Button.createWithLabel(`ViewC: this.child.bookName.size add 10`);
Button.width(320);
Button.backgroundColor('#ff7fcf58');
Button.margin(10);
Button.onClick(() => {
this.child.bookName.size += 10;
console.log('this.child.bookName.size:' + this.child.bookName.size);
});
if (!isInitialRender) {
Button.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
Button.pop();
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Button.createWithLabel(`ViewB: this.user.bag = new Bag(10)`);
Button.width(320);
Button.backgroundColor('#ff7fcf58');
Button.margin(10);
Button.onClick(() => {
this.user.bag = new Bag(10);
});
if (!isInitialRender) {
Button.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
Button.pop();
this.observeComponentCreation((elmtId, isInitialRender) => {
ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
Button.createWithLabel(`ViewB: this.user = new User(new Bag(20))`);
Button.width(320);
Button.backgroundColor('#ff7fcf58');
Button.margin(10);
Button.onClick(() => {
this.user = new User(new Bag(20));
});
if (!isInitialRender) {
Button.pop();
}
ViewStackProcessor.StopGetAccessRecording();
});
Button.pop();
Column.pop();
}
rerender() {
this.updateDirtyElements();
}
}
ViewStackProcessor.StartGetAccessRecordingFor(ViewStackProcessor.AllocateNewElmetIdForNextComponent());
loadDocument(new ViewB(undefined, {}));
ViewStackProcessor.StopGetAccessRecording();
//# sourceMappingURL=Index.js.map
状态管理
@State
状态名 | 使用场景 | 基础数据 | 对象 | 备注 |
---|---|---|---|---|
@State | 组件内状态同步 | ObservedPropertySimplePU | ObservedPropertyObjectPU | |
@Link | 父子双向同步 | SynchedPropertySimpleTwoWayPU | SynchedPropertyObjectTwoWayPU | |
@Prop | 父子单向同步 | SynchedPropertySimplePU | SynchedPropertyObjectPU | |
@Provide | 与后代组件双向同步 | ObservedPropertySimplePU | ObservedPropertyObjectPU | addProvidedVar(“xxx”) |
@Consume(子) | 与后代组件双向同步 | SynchedPropertyObjectTwoWayPU | SynchedPropertyObjectTwoWayPU | initializeConsume(“xxx”) |
@Observed | 嵌套对象属性变化 | |||
@ObjectLink | 嵌套对象属性变化 | — | SynchedPropertyNesedObjectPU |
3、父子单向同步
父组件使用@State注解变量,子组件使用@Prop注解定义自己的接收参数。当父组件修改变量时,该变量可以同步到子组件,但子组件修改此变量时不会同步到父组件。
4、与后代组件双向同步
1、@Provide注入
父组件的constructor如下
this.__reviewVotes = new ObservedPropertySimplePU(0, this, "reviewVotes");
this.addProvidedVar("reviewVotes", this.__reviewVotes);
this.setInitiallyProvidedValue(params);
2、@Consume使用
子组件的constructor如下
this.__reviewVotes = this.initializeConsume("reviewVotes", "reviewVotes");
this.setInitiallyProvidedValue(params);
3、ViewPU内部关于provide实现
//pu_view.ts
type ProvidedVarsMapPU = Map<string, ObservedPropertyAbstractPU<any>>;
abstract class ViewPU extends NativeViewPartialUpdate implements IViewPropertiesChangeSubscriber {
// @Provide'd variables by this class and its ancestors
protected providedVars_: ProvidedVarsMapPU;
constructor(parent: ViewPU, localStorage: LocalStorage, elmtId : number = -1) {
super();
//如果parent不为空,直接使用parent数据来构造一个providerVars对象,否则创建一个空对象
this.providedVars_ = parent ? new Map(parent.providedVars_)
: new Map<string, ObservedPropertyAbstractPU<any>>();
}
/**
* This View @Provide's a variable under given name
* Call this function from the constructor of the sub class
* @param providedPropName either the variable name or the alias defined as
* decorator param
* @param store the backing store object for this variable (not the get/set variable!)
*/
protected addProvidedVar<T>(providedPropName: string, store: ObservedPropertyAbstractPU<T>) {
if (this.providedVars_.has(providedPropName)) {
throw new ReferenceError(`${this.constructor.name}: duplicate @Provide property with name ${providedPropName}.
Property with this name is provided by one of the ancestor Views already.`);
}
this.providedVars_.set(providedPropName, store);
}
/**
* Method for the sub-class to call from its constructor for resolving
* a @Consume variable and initializing its backing store
* with the SyncedPropertyTwoWay<T> object created from the
* @Provide variable's backing store.
* @param providedPropName the name of the @Provide'd variable.
* This is either the @Consume decorator parameter, or variable name.
* @param consumeVarName the @Consume variable name (not the
* @Consume decorator parameter)
* @returns initializing value of the @Consume backing store
*/
protected initializeConsume<T>(providedPropName: string, consumeVarName: string): ObservedPropertyAbstractPU<T> {
//因parent使用@Provide注解,在父组件构建时已经使用addProvidedVar添加过,所以此处可以get到
let providedVarStore : ObservedPropertyAbstractPU<any> = this.providedVars_.get(providedPropName);
if (providedVarStore === undefined) {
throw new ReferenceError(`${this.constructor.name}: missing @Provide property with name ${providedPropName}.
Fail to resolve @Consume(${providedPropName}).`);
}
const factory = <T>(source: ObservedPropertyAbstract<T>) => {
const result : ObservedPropertyAbstractPU<T> = ((source instanceof ObservedPropertySimple) || (source instanceof ObservedPropertySimplePU))
? new SynchedPropertyObjectTwoWayPU<T>(source, this, consumeVarName)
: new SynchedPropertyObjectTwoWayPU<T>(source, this, consumeVarName);
return result;
};
return providedVarStore.createSync(factory) as ObservedPropertyAbstractPU<T>;
}
}
启动分析
1、从JsLoadDocument开始
//qjs_view_register.cpp
static JSValue JsLoadDocument(JSContext* ctx, JSValueConst new_target, int argc, JSValueConst* argv) {
JSValue jsview = JS_DupValue(ctx, argv[0]);
JSView* view = static_cast<JSView*>(UnWrapAny(jsView));
auto page = QJSDeclarativeEngineInstance::GetRunningPage(ctx);
CreatePageRoot(page, view);
}
//qjs_view_register_impl_ng.cpp
void CreatePageRoot(RefPtr<JsAcePage>& page, JSView* view) {
auto pageRootNode = AceType::DynamicCast<NG::UINode>(view->CreateViewNode());
pageRootNode->MountToParent(pageNode);
}
//js_view.cpp
RefPtr<AceType> JSViewPartialUpdate::CreateViewNode()
{
auto node = ViewPartialUpdateModel::GetInstance()->CreateNode(std::move(info));
}
//view_partial_update_model_ng.cpp
RefPtr<AceType> ViewPartialUpdateModelNG::CreateNode(NodeInfoPU&& info)
{
RefPtr<NG::CustomNodeBase> customNode = NG::CustomNode::CreateCustomNode(viewId, key);
}
//custom_node.cpp
void CustomNode::Build()
{
Render();
UINode::Build();
}
void CustomNode::Render()
{
auto child = renderFunction();
if (child) {
child->MountToParent(Claim(this));
}
}