iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
1
Modern Web

高效 Coding 術:Angular Schematics 實戰三十天系列 第 29

[高效 Coding 術:Angular Schematics 實戰三十天] Day28 - Angular Schematics API List (五)

介紹完引入路徑在 @schematics/angular/utility 底下的 API 之後,接下來要介紹給大家的 API 是引入路徑在 @angular-devkit/core 底下的 API,大致上有以下這些分類:

但因為篇幅與常用度上的考量,所以這部份只會先介紹筆者覺得較常用、較好用的 API ,其他的大家如果有需要再點進去看囉!


之前筆者在 Day06 - 與範本共舞的文章裡有跟大家提到過幾個函式,而那幾個函式其實就是來自於 @angular-devkit/core/src/utils 底下的 string.ts

在同層資料夾底下,其實還有不少好用的 API ,依檔案來區分也可分為以下幾項:

此篇則依序先介紹以下幾個:

所以接下來我們就先從 strings 開始吧!

string

關於 Angular 專案內常用的字串命名方式之處理小工具。

引入路徑:

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

函式一共有以下七個:

  • decamelize
  • dasherize
  • camelize
  • classify
  • underscore
  • capitalize
  • levenshtein

decamelize

用途:將傳入的字串全轉成全小寫,且用 _ 分隔多個單字(但如果原本已有用符號隔開,則不會加上 _ )。

範例:

strings.decamelize('innerHTML');         // 'inner_html'
strings.decamelize('action_name');       // 'action_name'
strings.decamelize('css-class-name');    // 'css-class-name'
strings.decamelize('my favorite items'); // 'my favorite items'
strings.decamelize('LeoChen');           // 'leo_chen'
strings.decamelize('LEO.CHEN');          // 'leo.chen'
strings.decamelize('LEO5CHEN');          // 'leo5_chen'
strings.decamelize('LEOCHEN');           // 'leochen'

原始碼

dasherize

用途:將傳入的字串全轉成小寫,且用 - 分隔多個單字(只會替換掉空格_ )。

範例:

strings.dasherize('innerHTML');         // 'inner-html'
strings.dasherize('action_name');       // 'action-name'
strings.dasherize('css-class-name');    // 'css-class-name'
strings.dasherize('my favorite items'); // 'my-favorite-items'
strings.dasherize('LeoChen');           // 'leo-chen'
strings.dasherize('LEO.CHEN');          // 'leo.chen'
strings.dasherize('LEO5CHEN');          // 'leo5-chen'
strings.dasherize('LEOCHEN');           // 'leochen'

原始碼

camelize

用途:將傳入的字串全轉成小駝峰式的命名方式。

範例:

strings.camelize('innerHTML');         // 'innerHTML'
strings.camelize('action_name');       // 'actionName'
strings.camelize('css-class-name');    // 'cssClassName'
strings.camelize('my favorite items'); // 'myFavoriteItems'
strings.camelize('LeoChen');           // 'leoChen'
strings.camelize('LEO.CHEN');          // 'lEOCHEN'
strings.camelize('LEO5CHEN');          // 'lEO5CHEN'
strings.camelize('LEOCHEN');           // 'lEOCHEN'

原始碼

classify

用途:將傳入的字串全轉成大駝峰式的命名方式。

範例:

strings.classify('innerHTML');         // 'InnerHTML'
strings.classify('action_name');       // 'ActionName'
strings.classify('css-class-name');    // 'CssClassName'
strings.classify('my favorite items'); // 'MyFavoriteItems'
strings.classify('LeoChen');           // 'LeoChen'
strings.classify('LEO.CHEN');          // 'LEO.CHEN'
strings.classify('LEO5CHEN');          // 'LEO5CHEN'
strings.classify('LEOCHEN');           // 'LEOCHEN'

原始碼

underscore

用途:將傳入的字串全轉成小寫,且用 _ 分隔多個單字(只會替換掉空格- )。

範例:

strings.underscore('innerHTML');         // 'inner_html'
strings.underscore('action_name');       // 'action_name'
strings.underscore('css-class-name');    // 'css_class_name'
strings.underscore('my favorite items'); // 'my_favorite_items'
strings.underscore('LeoChen');           // 'leo_chen'
strings.underscore('LEO.CHEN');          // 'leo.chen'
strings.underscore('LEO5CHEN');          // 'leo5_chen'
strings.underscore('LEOCHEN');           // 'leochen'

原始碼

capitalize

用途:將傳入的字串首字轉成大寫

範例:

strings.capitalize('innerHTML');         // 'InnerHTML'
strings.capitalize('action_name');       // 'Action_name'
strings.capitalize('css-class-name');    // 'Css-class-name'
strings.capitalize('my favorite items'); // 'My favorite items'
strings.capitalize('leo.chen');          // 'Leo.chen'
strings.capitalize('leo5chen');          // 'Leo5chen'
strings.capitalize('leochen');           // 'Leochen'

原始碼

levenshtein

用途:計算傳入的兩個字串之間的編輯距離,又稱萊文斯坦距離Levenshtein distance )。

範例:

strings.levenshtein('Leo', 'Chen'); // 3

原始碼


array

關於陣列處理的小工具,函式也只有 clean 一個。

引入路徑:

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

clean

用途:將傳入的陣列裡的 undefined 全都過濾掉,並回傳一個新的陣列。

注意!此處回傳的陣列為淺拷貝,且此函式不會將 null 值給過濾掉。

範例:

const sampleArray = [
  'Leo', undefined, null, 1, [],
  {}, '', false, true, 0
];

clean(sampleArray);
/*
[
  'Leo', null, 1,
  [],    {},   '',
  false, true, 0
]
*/

原始碼


lang

關於判斷 PromiseObservable 的小工具。

引入路徑:

import { isPromise, isObservable } from '@angular-devkit/core';

isPromise

用途:判斷傳入的是否為 Promise

範例:

const sampleA = of([]);
const sampleB = of([]).toPromise();

isPromise(sampleA); // false
isPromise(sampleB); // true

原始碼

isObservable

用途:判斷傳入的是否為 RxJS 的 Observable

範例:

const sampleA = of([]);
const sampleB = of([]).toPromise();

isPromise(sampleA); // true
isPromise(sampleB); // false

原始碼


object

關於物件處理的小工具。

引入路徑:

import { mapObject, deepCopy } from '@angular-devkit/core';

mapObject

用途:將傳入的物件使用另一個傳入的轉換器轉換成另一種物件(原本的 key 值不變,變的是該 key 值的 value )。

範例:

const sample = {
  name: 'Leo',
  gender: 'Male'
};

mapObject(sample, (key, value) => {
  if ( key === 'name' ) {
    return value + ' Chen'
  } else if ( key === 'gender' ) {
    return 'Female'
  }
}); // { name: 'Leo Chen', gender: 'Female' }

原始碼

deepCopy

用途:將傳入的值使用深拷貝的方式複製一份。

注意,只會複製陣列物件,其他的會直接回傳。

範例:

const sample = {
  name: 'Leo',
  gender: 'Male'
};

deepCopy(sample);

原始碼

測試原始碼


本日結語

雖然寫跟看這類的 API 文章很枯燥,但筆者可是每行程式碼都有仔細看過,每個函式都有用範例實測過,絕不只是單純地複製貼上而已。

參考資料


上一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day27 - Angular Schematics API List (四)
下一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day29 - Angular Schematics API List (六)
系列文
高效 Coding 術:Angular Schematics 實戰三十天32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言