@ cramercms/ utils (英语)

包含 Crafter CMS 开发时有用的各种公用设施

使用量

所有 Crafter CMS 包都可以通过 npm 使用,也可以通过常规脚本导入在 plain html/javascript中使用.

通过 npm

• yarn add @craftercms/utils 或者说 npm install @craftercms/utils
• import 或者说 require 您想要的函数.

Via html 脚本导入

• 下载捆绑并在您的页面中导入 .
• 捆绑声明一个名为全局变量 craftercms。 您可以在此根下访问所有 Frapercms 的软件包和函数.
• 这个 utils 软件包依赖于 rxjs, 在 rxj 之前确保导入 rxjs utils 剧本.

提示: 一旦导入脚本, 类型 craftercms 在浏览器的 dev 工具控制台上检查软件包

Vanilla html/js 实例

<div id="myFeature"></div>
<script src="https://unpkg.com/rxjs"></script>
<script src="https://unpkg.com/@craftercms/utils"></script>
<script>
 (function ({ utils }) {

   const people = [
     { id: 1, name: 'Mary' }
   ]

   const myLookup = utils.createLookupTable(people);
   console.log(myLookup); // => { 1: { id: 1, name: 'Mary' } }

 })(craftercms);
</script>

软件包索引

以下示例假设使用方式为 npm 。 如果你在使用捆绑, 直接导入浏览器中的脚本, 这些功能将在全局变量下 名称 craftercms.utils (即说. window.craftercms.utils) (中文(简体) ).

创建搜索表

创建基于(类型)项目数组和项目 ID 标识符的查询表.

示例

• 创建项目查询表 :

import { Item, LookupTable } from "@craftercms/models";
import { createLookupTable } from "@craftercms/utils";

const items: Item[] = [/* ... */];
const itemsLookupTable: LookupTable<Item> = createLookupTable<Item>(items, 'url');

搜索表会是这样的:

  {
    "/site/website/index.xml": {
      "name": "index.xml",
      "url": "/site/website/index.xml",
      "descriptorUrl": "/site/website/index.xml",
      "descriptorDom": { /* ... */ },
      "folder": false
    }
  }