NativeScript 视图的行为组件

该包实现 策略模式，将行为算法分配给 NativeScript 视图

目标

项目的主要目标是通过两个阶段：设计和编码来分离开发过程。

演示

此存储库是 npm 包 nativescript-behavior 和一个演示 NativeScript 应用的源代码。

演示应用展示了如何使用行为组件和没有 Model-View-ViewModel 来解锁 NativeScript 的点击器成就。

安装

$ npm install --save joos-inheritance
$ npm install --save nativescript-behavior

初始化模块

要初始化该模块，您必须在您的 app/app.js 中 require() 它

require("nativescript-behavior");

创建行为算法

在 策略模式 的术语中，算法是 ConcreteStrategy。它必须是主 Behavior "类" 的 "子类"。因此，ConcreteBehavior 的实例必须是主 Behavior 类的实例。

具体行为代码必须在其自己的文件中，它必须可供 require() 使用，并且模块必须通过 exports.Behavior 属性导出算法。

var JooS = require("joos-inheritance");
var Behavior = require("nativescript-behavior").Behavior;

/**
 * @class ConcreteBehavior
 * @extends Behavior
 */
var ConcreteBehavior = JooS.Reflect(
    Behavior,
    /** @lends ConcreteBehavior.prototype */
    {
        onTap: function() {
            console.log(this.someProperty);
        },
        __constructor: function(contextView) {
            this.__constructor.__parent(contextView);
            this.someProperty = "someValue";
            this.nsObject.addEventListener("tap", this.onTap, this);
        },
        __destructor: function() {
            this.nsObject.removeEventListener("tap", this.onTap, this);
            this.__destructor.__parent();
        }
    }
);

exports.Behavior = ConcreteBehavior;

或者

var Behavior = require("nativescript-behavior").Behavior;

var ConcreteBehavior = (function (_super) {
    __extends(ConcreteBehavior, _super);
    function ConcreteBehavior() {
        _super.apply(this, arguments);
        this.someProperty = "someValue";
        this.nsObject.addEventListener("tap", this.onTap, this);
    }

    ConcreteBehavior.prototype.onTap = function() {
        console.log(this.someProperty);
    };

    ConcreteBehavior.prototype.__destructor = function() {
        this.nsObject.removeEventListener("tap", this.onTap, this);
        _super.prototype.__destructor.apply(this, arguments);
    };

    return ConcreteBehavior;
})(Behavior);

exports.Behavior = ConcreteBehavior;

例如，将此代码放入 ~/components/concreteBehavior.js

为具有行为的视图创建新的 CSS 类

使用自定义的 joos-behavior 样式属性。该属性已在此包中实现，用于将行为分配给视图。

Page {
  joos-behavior: "nativescript-behavior/lib/page"
}

.concrete-behavior {
  joos-behavior: "~/components/concreteBehavior";
}

将此代码放入您的 /app/app.css 文件

此外，您还可以通过 concreteView.style.joosBehavior = "~/components/concreteBehavior.js" 或 concreteView.joosBehavior = "~/components/concreteBehavior.js" 分配行为

将类分配给视图

<Page xmlns="http://schemas.nativescript.org/tns.xsd">
  <StackLayout>
    <Button class="concrete-behavior" text="Tap me!" />
  </StackLayout>
</Page>

在设置 joosBehavior 样式属性后，行为将立即附加，并在将此属性设置为 undefined 后分离

此外，在 Layout.removeChild(contextView); 后，行为将分离，并在 Layout.addChild(contextView); 后重新附加

点击按钮

就是这样 =)

功能

• 行为有父级，并且可以使用 this.parent.notify(eventData) 方法与它的兄弟元素交互。
• 行为可以添加/删除/切换其 nsObject 的 className，并设置/删除属性值