@baloise/web-app-utils
Baloise网络应用的 Javascript 工具.
安装指南
使用 npm
npm i @baloise/web-app-utils
目录
语言 Utils
语言utils帮助列出通用语言,并检测出正确的语言.
语言模式
valueOf
返回给定语言密钥的语言, 或者如果未注册 Lauage 则返回未定义 .
签署
valueOf(key: string): Language | undefined
示例
const language = LanguageModel.valueOf('de')
if (language === undefined) {
// language is not registered
}
valueOfOrDefault
返回给定语言密钥的语言,或者如果语言没有注册,则返回默认语言.
签署
valueOfOrDefault(key: string): Language
示例
const language = LanguageModel.valueOfOrDefault('de')
isValidKey
验证指定语言密钥是否注册为支持语言 .
签署
isValidKey(key: string): boolean
示例
if (LanguageModel.isValidKey('de')) {
// language key is valid
} else {
// language key is not valid
}
语文
我们为我们得到支持的国家提供了各种语言清单。 这些语言的类型 LanguageModel。 。 。 .
LanguagesOfSwitzerland
含有默认语言的德文、法文、意大利文和英文列表.
示例
LanguagesOfSwitzerland.isValidKey('de') // true
LanguagesOfSwitzerland.isValidKey('be') // false
LanguagesOfGermany
含有默认语言德文的德文和英文列表 .
LanguagesOfBelgium
包含默认语言的荷兰语,法语,意大利语和英语列表.
LanguagesOfLuxembourg
List of luxembourgish, french & english with 默认语言 loxembourgish. 中国语言大学.
语言
语言对象只有一个属性 key 具有语言密钥的 en。 。 。 .
浏览器 Utils
浏览器 utils 在与 broser api 合作时解决一些常见请求.
为了与饼干合作,我们重新命令使用库 js-饼干。 。 。 .
由于与url合作,我们重新命令使用库 查询字符串。 。 。 .
职能
scrollToAnchorElement
滚动到带有属性的角元素 data-ref="heading"。 。 。 .
签署
scrollToAnchorElement(referenceName: string): void
示例
<div data-ref="heading">...</div>
scrollToAnchorElement('heading')
scrollToTopOfBody
卷之三·诸方(下)\诸方门目(下) 身体上 (下).
签署
scrollToTopOfBody(): void
open
在当前标签中打开新位置.
签署
open(url: string): void
openInNewWindow
在新标签中打开新位置.
签署
openInNewWindow(url: string): void
getBrowserLanguage
返回主语言密钥。 例如,如果浏览器有语言 de-CH 函数返回语言密钥 de因此,我们可以使用我们的 LangaugeModel。 。 。 .
签署
getBrowserLanguage(): string
示例
const langKey = getBrowserLanguage()
if(LanguagesOfSwitzerland.isValidKey(langKey)) { ... }
...
disableDragAndDropFiles
禁用整个网络应用程序拖放 .
签署
disableDragAndDropFiles(): void
getBrowserInfo
从浏览器返回一些有用的信息.
签署
getBrowserInfo(): BrowserInfo
interface BrowserInfo {
cookiesEnabled?: boolean
language?: string
timezone?: string
userAgent?: string
}
整合 Utils 系统
集成工具有助于我们使用集成工具,如一个信任或用户中心.
loadConsentManagerBaloiseSwitzerland
将同意管理脚本直接从我们的主要 cms 系统中装入必要的参数.
签署
loadConsentManagerBaloiseSwitzerland(): void
通用型号 Utils
一些在日常业务中使用的有用模型.
请求国
这个 RequestState enum 帮助有一个状态变量来显示当前 api 调用的位置 .
export enum RequestState {
INIT,
RUNNING,
SUCCESS,
ERROR,
}
示例(角)
import { Component, OnInit } from '@angular/core'
import { RequestState } from '@baloise/web-app-utils'
import { ConfirmEmailService, EmailConfirmationResponse } from '../confirm-email.service'
@Component({
selector: 'confirm-email-page',
templateUrl: './confirm-email.page.component.html',
styleUrls: ['./confirm-email.page.component.scss'],
})
export class ConfirmEmailPageComponent implements OnInit {
confirmEmailResponse: EmailConfirmationResponse
requestState: RequestState = RequestState.INIT
constructor(private confirmEmailService: ConfirmEmailService) {}
confirmEmail() {
this.requestState = RequestState.RUNNING
this.confirmEmailService
.confirmEmail()
.toPromise()
.then(resp => {
this.requestState = RequestState.SUCCESS
this.confirmEmailResponse = resp
})
.catch(() => {
this.requestState = RequestState.ERROR
})
}
}
常见 UTIs
API 密码
是等分线
areArraysEqual(a: any, b: any) => boolean
回返 true 如果数组相等
areArraysEqual(['a', 'b'], ['b', 'a']) // true
现在
now() => Date
返回具体时间的日期实例
const date = now()
// Wed Mar 10 2021 20:30:32 GMT+0100 (Central European Standard Time)
{\fn华文楷体\fs16\1che0e0e0}今天
today() => Date
返回联合来文日期实例,时间定为0
const date = today()
// Wed Mar 10 2021 00:00:00 GMT+0100 (Central European Standard Time)
时间
floorTime(date: Date) => Date
返回 JS 日期实例,时间设定为 0
const date = floorTime(new Date())
// Wed Mar 10 2021 00:00:00 GMT+0100 (Central European Standard Time)
周期
ceilTime(date: Date) => Date
返回 JS 日期实例,时间设定为可能结束
const date = ceilTime(new Date())
// Wed Mar 10 2021 23:59:59 GMT+0100 (Central European Standard Time)
格式约会
formatDateString(date: Date) => string
以 ISO 8601 格式返回格式化的日期字符串。 可选择控制日期的部件和标记.
const dateString = formatDateString(new Date())
// '2022-02-14'
是 ValidIso String 语句
isValidIsoString(dateString: any) => any
如果给定的日期字符串符合同位素日期格式,则验证.
isValidIsoString('2022-02-14')
// 'true'
格式
format(locale: any, date: Date) => any
根据给定的语言格式化日期.
format('de-CH', new Date())
// '14.2.2022'
剖析
parse(dateString: string, locale: any) => any
将同位素日期字符串分析为 Javascript 日期对象.
const dateString = parse('2021-03-10')
// Wed Mar 10 2021 00:00:00 GMT+0100 (Central European Standard Time)
日期分隔符
dateSeparator(locale: any) => string
返回将日表月和年分开的字符 .
dateSeparator('de-CH')
// .
弹跳
debounce(func: any, wait: any) => any
跳出函数等待一定的时间,然后再次运行内在函数. 这将减少一个函数被调用的次数.
const debounceFunction = debounce(function () {
// The function's code
}, 250)
window.addEventListener('resize', debounceFunction)
时空
isEmpty(value: any) => boolean
回返 true 如果数值为空
输入键
isEnterKey(event: KeyboardEvent) => boolean
回返 true 如果键盘事件是由 Enter 键
是 SpaceKey 键
isSpaceKey(event: KeyboardEvent) => boolean
回返 true 如果键盘事件是由 Space 键
是 逃逸键
isEscapeKey(event: KeyboardEvent) => boolean
回返 true 如果键盘事件是由 Escape 键
后空格键
isBackspaceKey(event: KeyboardEvent) => boolean
回返 true 如果键盘事件是由 Backspace 键
是箭头下键
isArrowDownKey(event: KeyboardEvent) => boolean
回返 true 如果键盘事件是由 ArrowDown 键
是箭头键
isArrowUpKey(event: KeyboardEvent) => boolean
回返 true 如果键盘事件是由 ArrowUp 键
是箭头左键
isArrowLeftKey(event: KeyboardEvent) => boolean
回返 true 如果键盘事件是由 ArrowLeft 键
是右键
isArrowRightKey(event: KeyboardEvent) => boolean
回返 true 如果键盘事件是由 ArrowRight 键
是家钥
isHomeKey(event: KeyboardEvent) => boolean
回返 true 如果键盘事件是由 Home 键
键
isEndKey(event: KeyboardEvent) => boolean
回返 true 如果键盘事件是由 End 键
数字 当地
numberLocale(locale: any) => string
将区域解析为正确的显示区域
numberLocale('de-CH')
// 'de-CH'
日期 当地
dateLocale(locale: any) => string
将区域解析为正确的显示区域
numberLocale('de-CH')
// 'fr-CH'
数字
isValidMonetaryNumber(stringValue: string) => boolean
回返 true 如果数组相等
isValidMonetaryNumber(`1'000.99`) // true
获取十进制分隔符
getDecimalSeparator(locale: any) => string
返回给定区域的小数分隔符
getDecimalSeparator('de-ch') // .
获取千人分隔符
getThousandSeparator(locale: any) => string
返回给定语言的千位分隔符
getThousandSeparator('de-ch') // '
本地编号
formatLocaleNumber(locale: any, number: number, minimumFractionDigits: number) => string
将数字格式化为给定的语言
formatLocaleNumber('de-ch', 1000.42) // 1'000.42
解析本地数字
parseLocaleNumber(locale: any, stringNumber: string) => number
将本地语言格式编号分析为本地数字
parseLocaleNumber('de-ch', '1'000.42') // 1000.42