此篇介紹的 API 依序為：

• literals
• partially-ordered-set
• priority-queue
• template

literals

關於處理 Template literals 的小工具。

引入路徑：

import { tags } from '@angular-devkit/core';

TemplateTag

用途：定義標籤樣板要實作的函式資料介面。

程式碼：

interface TemplateTag<R = string> {
  (template: TemplateStringsArray, ...substitutions: any[]): R;
}

原始碼

oneLine

用途：將 Template literals 調整為單行字串。

範例：

const test = tags.oneLine`
  hello world
    how are you?  blue  red
  test
`;

console.log(test); // 'hello world how are you?  blue  red test'

原始碼

測試原始碼

為什麼不用 () 也能呼叫？！

因為這叫做標籤樣板字面值 （ Tagged templates ）。

相關資料可參考：

• 不用括號也能呼叫？ 設計一個接受模板字符串的函數吧！ JavaScript
• [筆記] JavaScript ES6 中的模版字符串（template literals）和標籤模版（tagged template）

indentBy

用途：將 Template literals 加上傳入個數的空格。

範例：

const test = tags.indentBy(4)`
  hello world
    how are you?  blue  red
  test
`;

console.log(test);
/*
    hello world
      how are you?  blue  red
    test
*/

原始碼

stripIndent

用途：去除 Template literals 每行開頭的空格。

範例：

const test = tags.stripIndent`
  hello world
    how are you?  blue  red
  test
`;

console.log(test);
/*
hello world
  how are you?  blue  red
test
*/

原始碼

測試原始碼

stripIndents

用途：去除 Template literals 每行開頭的空格（威力加強版）。

範例：

const test = tags.stripIndents`
  hello world
    how are you?  blue  red
  test
`;

console.log(test);
/*
hello world
how are you?  blue  red
test
*/

原始碼

測試原始碼

trimNewlines

用途：去除 Template literals 最末的換行符號與空格。

範例：

const test = tags.trimNewlines`
  hello world
  
`;

console.log(test);
/*
      hello world
*/

原始碼

測試原始碼

partially-ordered-set

關於集合處理的小工具。

引入路徑：

import {
  DependencyNotFoundException,
  CircularDependencyFoundException,
  PartiallyOrderedSet
} from '@angular-devkit/core';

DependencyNotFoundException

用途：定義沒有發現相依套件時的錯誤訊息的類別。

程式碼：

export class DependencyNotFoundException extends BaseException {
  constructor() { super('One of the dependencies is not part of the set.'); }
}

原始碼

CircularDependencyFoundException

用途：定義發生循環相依套件的錯誤時的類別。

程式碼：

export class CircularDependencyFoundException extends BaseException {
  constructor() { super('Circular dependencies found.'); }
}

原始碼

PartiallyOrderedSet

用途：繼承 Set 來實作的類別，比較特別的是它會檢查「依賴性」，並根據依賴性來排序，沒有依賴的排前面，依賴越多的排越後面。

範例：

const set = new PartiallyOrderedSet<string>();

set.add('red');
set.add('blue');
set.add('yellow', ['red']);
set.add('green', ['red']);
set.add('purple', ['red', 'blue']);

console.log([...set]);
/*
[ 'red', 'blue', 'yellow', 'green', 'purple' ]
*/

set.add('gray', ['light-gray']); // DependencyNotFoundException

原始碼

測試原始碼

priority-queue

小型的優先佇列，不適用於大型的數據。

引入路徑：

import { PriorityQueue } from '@angular-devkit/core';

PriorityQueue

用途：定義優先佇列的類別，並使其可以透過新建實體時傳入的函式來排序。

範例：

const queue = new PriorityQueue<number>((x, y) => x - y);

queue.push(101);
queue.push(99);
queue.push(1);
queue.push(50);

console.log(queue.toArray()); // [ 1, 50, 99, 101 ]

原始碼

測試原始碼

template

關於範本的資料介面定義與小工具

引入路徑：

import {
  TemplateOptions,
  TemplateAst,
  TemplateAstBase,
  TemplateAstContent,
  TemplateAstComment,
  TemplateAstEvaluate,
  TemplateAstEscape,
  TemplateAstInterpolate,
  TemplateAstNode,
  templateParser,
  template
} from '@angular-devkit/core';

TemplateOptions

用途：定義範本選項的資料介面

程式碼：

interface TemplateOptions {
  sourceURL?: string;
  sourceMap?: boolean;
  module?: boolean | { exports: {} };
  sourceRoot?: string;
  fileName?: string;
}

原始碼

TemplateAst

用途：定義範本的 AST 的資料介面。

程式碼：

interface TemplateAst {
  fileName: string;
  content: string;
  children: TemplateAstNode[];
}

原始碼

TemplateAstBase

用途：定義範本的 AST 的節點資料的基礎資料介面。

程式碼：

interface TemplateAstBase {
  start: Position;
  end: Position;
}

原始碼

TemplateAstComment

用途：定義範本的 AST 的註解節點的資料介面。

程式碼：

interface TemplateAstComment extends TemplateAstBase {
  kind: 'comment';
  text: string;
}

原始碼

TemplateAstEvaluate

用途：定義範本的 AST 的判斷式節點（在 <% ... %> 裡的程式碼）的資料介面。

程式碼：

interface TemplateAstEvaluate extends TemplateAstBase {
  kind: 'evaluate';
  expression: string;
}

原始碼

TemplateAstEscape

用途：定義範本的 AST 的跳脫節點（在 <%- ... %> 裡的程式碼）的資料介面。

程式碼：

interface TemplateAstEscape extends TemplateAstBase {
  kind: 'escape';
  expression: string;
}

原始碼

TemplateAstInterpolate

用途：定義範本的 AST 的插值節點（在 <%= ... %> 裡的程式碼）的資料介面。

程式碼：

interface TemplateAstEscape extends TemplateAstBase {
  kind: 'interpolate';
  expression: string;
}

原始碼

TemplateAstNode

用途：定義範本的 AST 的節點類型。

程式碼：

type TemplateAstNode = TemplateAstContent
                            | TemplateAstEvaluate
                            | TemplateAstComment
                            | TemplateAstEscape
                            | TemplateAstInterpolate;

原始碼

templateParser

用途：解析傳入的範本字串與檔名的解析器，取得範本的 AST。

回傳值：範本的 AST 。

用法：

const source = `<p>Hello <%= name %>!</p>`;
const templateAst = templateParser(source, 'hello.component.html');

console.log(templateAst);
/*
{
  fileName: 'hello.component.html',
  content: '<p>Hello <%= name %>!</p>',
  children: [
    {
      kind: 'content',
      content: '<p>Hello ',
      start: { line: 1, column: 0 },
      end: { line: 1, column: 8 }
    },
    {
      kind: 'interpolate',
      expression: ' name ',
      start: { line: 1, column: 8 },
      end: { line: 1, column: 19 }
    },
    {
      kind: 'content',
      content: '!</p>',
      start: { line: 1, column: 19 },
      end: { line: 1, column: 24 }
    }
  ]
}
*/

原始碼

template

用途：根據傳入的範本字串與範本選項來取得一個可以輸入參數，並將它與範本內的語法綁定的函式。

回傳值：取得一個可以輸入參數，並將它與範本內的語法綁定的函式。

用法：

const source = `<p>Hello <%= name %>!</p>`;
const templateFn = template(source, {});

console.log(templateFn({ name: 'Leo' }));
/*
<p>Hello Leo!</p>
*/

原始碼

本日結語

關於引入路徑在 @angular-devkit/core/src/utils 底下的 API，筆者到這邊都已經全部介紹完畢，其他 @angular-devkit/core 的 API ，筆者再找時間把這次系列文中有分享的一起整合好之後再一併分享給大家吧！

明天筆者將會幫這次的系列文做個總結，敬請期待！

參考資料

• @angular-dekit/core 的 Source Code