BI工具Qlik教程：如何创建您的第一个Enigma.js Mixins -控件新闻-慧都网

BI工具Qlik教程：如何创建您的第一个Enigma.js Mixins

翻译|使用教程|编辑：况鱼杰|2020-11-02 10:42:21.127|阅读 173 次

概述：本文将会介绍Enigma.js，它是一个可帮助您与Qlik QIX Engine通信的库。其中有一项很酷的功能是，它允许您编写自己的mixins来扩展或覆盖您一直使用的Qlik对象上的方法。这篇文章将教你mixin的基础知识，并向你展示如何实现自己的。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

您的第一个Mixin

如果您想查看最终产品，这是完成的存储库：//github.com/coolinmc6/enigma-mixins-tutorial。如果您想继续，请克隆仓库并检出“开始”分支`git checkout -b start`以便从头开始。

希望您熟悉典型的Enigma配置（//community.qlik.com/t5/Qlik-Design-Blog/Qlik-Engine-and-Picasso-js/ba-p/1706241），因为这是必须在mixin所在的位置包括在内。对于第一个mixin和我们将要编写的其他mixin，需要创建一个单独的mixin文件，以保持代码干净。然后主要在该mixin文件和ʻindex.js`中工作。

首先，在您的`/ config`目录中创建一个单独的文件，名为`mixins.js`。复制下面的代码，然后开始：

// mixins.js
const docMixin = {
  types: ['Doc'],
  init(args) {},
  extend: {
    myMixin() {
        console.log('myMixin was called - this is all it does');
    },
  }
}

export {
  docMixin,
};

将您的mixin添加到配置文件ʻapp.js`中：

// app.js
import { docMixin } from './mixins';

// CODE

export default enigma.create({ 
  schema, url, mixins: [docMixin] // add docMixin
}).open().then(global => global.openDoc(config.appId));

现在，在index.js文件中，只需执行以下操作即可调用mixin：ʻapp.myMixin（）`。如果您检查控制台，则会看到我们输入的console.log消息；您刚完成第一次Mixin。

注意：Mixin对象应具有类型属性，以指示您正在修改的Qlik对象（例如Doc，GenericObject，GenericBookmark等）。对于第一个Mixin，将修改Doc类。接下来是ʻinit（args）`方法，该方法在初始化mixin时运行一些代码。最后，有两个属性：“ extend”和“ override”。顾名思义，“ extend”将向Qlik Object添加方法，而“ override”将覆盖现有的Qlik Object方法。本教程将主要侧重于扩展Qlik Objects的功能。

在Mixins中使用Qlik对象

现在，已经用扩展Doc对象的单个方法创建了第一个mixin，然后逐步提高并编写一种获取超立方体数据的方法。这种方法的重点是为我们完成Qlik QIX Engine的所有工作。此方法位于Doc类上，因此在我们的代码中，我们可以像下面这样在“ myMixin（）”代码下面编写该方法：

// mixins.js
const docMixin = {
  types: ['Doc'],
  init(args) {},
  extend: {
    myMixin() {
        console.log('myMixin was called - this is all it does');
    },
    mGetData({ object }) {
      return new Promise((res) => {
        this.createSessionObject(object).then((obj) => {
          console.log(obj)
          obj.getLayout().then((layout) => {
            const data = layout.qHyperCube.qDataPages;
            res(data);
          })
        })
      })
    },
  }
}

export {
  docMixin,
};

在index.js文件中，我们将调用该方法并提供一个超立方体。复制以下超多维数据集和代码以调用该方法：

// index.js
const hypercube = {
  qInfo: { qId: 'Sales by Year', qType: 'data'},
  qHyperCubeDef: {
    qDimensions: [
      // { qDef: { qFieldDefs: ['[Country]']} },
      { qDef: { qFieldDefs: ['[Product Group Desc]']} }
    ],
    qMeasures: [
      { qDef: { qDef: 'SUM([Sales Margin Amount])'}, },
    ],
    qInitialDataFetch: [{
      qTop: 0, qLeft: 0, qWidth: 10, qHeight: 1000,
    }],
    qInterColumnSortOrder: [],
    qSuppressZero: true,
    qSuppressMissing: true,
  }
}

// CODE

(async () => {
  const app = await appPromise;
  app.myMixin()
  const data = await app.mGetData({ object: hypercube })
  console.log(data)
})()

在控制台中，您会发现那里还有两个日志。第一个是刚刚创建的会话对象（并且您可能太熟悉了）。第二个是在JavaScript数组中请求的数据。它仍然处于Qlik格式中，如果您只想查看数据，可能需要进行更多清理，但是请注意，现在可以轻松地为您可能编写的任何超立方体请求数据。现在可以避免不得不一遍又一遍地编写所有代码的步骤，而只需使用我们新的`mGetData（）`方法。