实用程序

Framework7 utils 是一组帮助方法，在内部使用，在开发过程中也会很方便。

它作为 utils 属性存在于 Framework7 类中（Framework7.utils），并且在已初始化的应用实例中是同个属性（app.utils）

// If we need it in place where we don't have access to app instance or before we init the app
var now = Framework7.utils.now();


// After we init the app we can access it as app instance property
var app = new Framework7({ /*...*/ });
var now = app.utils.now();

它也可以使用 ES 模块导入

import { utils } from 'framework7';

工具方法

`parseUrlQuery()`

app.utils.parseUrlQuery(url)- 解析 url 查询并获取参数

url - string - 带有 GET 参数的 url。必填。

方法返回带有查询参数的对象

var query = app.utils.parseUrlQuery('http://google.com/?id=5&foo=bar');
console.log(query); // { id: 5, foo: 'bar' }

`serializeObject()`

app.utils.serializeObject(object)- 创建可用于 url 查询字符串中纯对象的序列化表示形式

object - object - 需要序列化的对象

返回一个新的唯一数组

var params = { foo: 'bar', id: 5 };
console.log(app.utils.serializeObject(params)); // 'foo=bar&id=5'

`requestAnimationFrame()`

app.utils.requestAnimationFrame(callback)- requestAnimationFrame 的跨浏览器实现

callback - function - 在是时候更新你的下一次重绘动画时要调用的函数

返回动画请求 id，它唯一标识回调列表中的条目

var animId;
function anim() {
  var left = parseInt($$('#anim').css('left'), 10) + 1;
  $$('#anim').css({left: left + 'px'})
  animId = app.utils.requestAnimationFrame(anim);
}
animId = app.utils.requestAnimationFrame(anim);

`cancelAnimationFrame()`

app.utils.cancelAnimationFrame(requestID)- 取消动画帧请求

requestID - number - app.utils.requestAnimationFrame() 调用的请求回调时返回的 ID 值

app.utils.cancelAnimationFrame(animId);

`nextFrame()`

app.utils.nextFrame(callback)- 在下一个可用的动画帧中执行代码。

callback - string - 在是时候更新你的下一次重绘动画时要调用的函数。

app.utils.nextFrame(function() {
  // do something on next frame
});

`nextTick()`

app.utils.nextTick(callback, delay)- 在所需延迟后执行代码。基本上是 setTimeout 的别名

callback - string - 在指定延迟后要调用的函数
delay - number - 以毫秒为单位的延迟。可选，默认为 0

返回超时 ID

app.utils.nextTick(function() {
  // do something on next tick
});

`now()`

app.utils.now()- 返回当前时间戳，以毫秒为单位

var now = app.utils.now();
setTimeout(function () {
  var timeDiff = app.utils.now() - now;
  console.log(timeDiff + 'ms past');
}, 2000);

`extend()`

app.utils.extend(target, ...from)- 利用 from 对象中的属性和方法扩展 target 对象

target - object - 要扩展的目标对象
from - object - 要从中复制属性和方法的对象

返回属性和方法已扩展的目标对象

如果你需要通过其他对象的属性扩展一个对象，或者当你需要一个对象的深层副本时，此方法就非常方便。

var a = {
  apple: 0,
  cherry: 97
};
// Pass as empty object as target to copy a into b
var b = app.utils.extend({}, a);

console.log(b); // { apple: 0, cherry: 97 }
console.log(a === b); // false

var a = {
  apple: 0,
  cherry: 97
};
var b = {
  banana: 10,
  pineapple: 20,
}

// Extends a with b
app.utils.extend(a, b);

console.log(a); // { apple: 0, cherry: 97, banana: 10, pineapple: 20 }

var a = {
  apple: 0,
  cherry: 97
};
var b = {
  banana: 10,
  pineapple: 20,
}

// Create new object c from the merge of a and b
var c = app.utils.extend({}, a, b);

console.log(c); // { apple: 0, cherry: 97, banana: 10, pineapple: 20 }

var a = {
  apple: 0,
  cherry: 97
};
var b = {
  apple: 10,
  pineapple: 20,
}

// Extend a with b
app.utils.extend(a, b);

console.log(a); // { apple: 10, cherry: 97, pineapple: 20 }

`uniqueNumber()`

app.utils.uniqueNumber()- 返回唯一数字，每次调用增加 1

app.utils.uniqueNumber(); // -> 2

app.utils.uniqueNumber(); // -> 3

app.utils.uniqueNumber(); // -> 4

`id()`

app.utils.id(mask, map)- 生成随机的类 ID 字符串

mask - 字符串 - ID 字符串掩码，默认为 xxxxxxxxxx
map - 字符串 - 用作生成内容的字符，默认为 0123456789abcdef

返回随机生成字符串

app.utils.id() // -> ffe28ab56e

app.utils.id('xxxx-xxxx-xxxx-xxxx') // -> 1ea3-f127-dc67-627d

app.utils.id('xxxx-xxxx', 'abcd') // -> aabc-ccda

`preloaderContent`

以下属性包含 Preloader 元素的主题相关内容（iOS、MD）。如果你动态创建加载器，可以使用这些属性。

app.utils.iosPreloaderContent- 包含 iOS 主题所需加载器内部内容（HTML 字符串）

app.utils.mdPreloaderContent- 包含 MD 主题所需加载器内部内容（HTML 字符串）

// call method dynamically based on current app theme
var preloaderContent = app.utils[app.theme + 'PreloaderContent'];

// create required preloader content
var myPreloader = '<div class="preloader">' + preloaderContent + '</div>';

// add it somewhere
$('.something').append(myPreloader);

`colorHexToRgb()`

app.utils.colorHexToRgb(hexColor)- 将 HEX 颜色转换为 RGB 颜色

hexColor - 字符串 - HEX 颜色字符串

返回 [R, G, B] 数组

app.utils.colorHexToRgb('#f00') // -> [255, 0, 0]

`colorRgbToHex()`

app.utils.colorRgbToHex(R, G, B)- 将 RGB 颜色转换为 HEX 颜色

R - 数字 - 红色值（0 - 255）
G - 数字 - 绿色值（0 - 255）
B - 数字 - 蓝色值（0 - 255）

返回 HEX 颜色字符串

app.utils.colorHexToRgb(255, 0, 0) // -> '#ff0000'

`colorRgbToHsl()`

app.utils.colorRgbToHsl(R, G, B)- 将 RGB 颜色转换为 HSL 颜色

R - 数字 - 红色值（0 - 255）
G - 数字 - 绿色值（0 - 255）
B - 数字 - 蓝色值（0 - 255）

返回 [H, S, L] 数组

app.utils.colorRgbToHsl(255, 0, 0) // -> [0, 1, 0.5]

`colorHslToRgb()`

app.utils.colorHslToRgb(H, S, L)- 将 HSL 颜色转换为 RGB 颜色

H - 数字 - 色相值（0 - 360）
S - 数字 - 饱和度值（0 - 1）
L - 数字 - 明度值（0 - 1）

返回 [R, G, B] 数组

app.utils.colorHslToRgb(0, 1, 0.5) // -> [255, 0, 0]

`colorHsbToHsl()`

app.utils.colorHsbToHsl(H, S, B)- 将 HSB(V) 颜色转换为 HSL 颜色

H - 数字 - 色相值（0 - 360）
S - 数字 - 饱和度值（0 - 1）
B - 数字 - 亮度值（0 - 1）

返回 [H, S, L] 数组

app.utils.colorHsbToHsl(360, 0.5, 0.5) // -> [360, 0.33, 0.375]

`colorHslToHsb()`

app.utils.colorHslToHsb(H, S, L)- 将 HSL 颜色转换为 HSB(V) 颜色

H - 数字 - 色相值（0 - 360）
S - 数字 - 饱和度值（0 - 1）
L - 数字 - 明度值（0 - 1）

返回 [H, S, B] 数组

app.utils.colorHslToHsb(360, 0.5, 0.5) // -> [360, 0.66, 0.75]

`colorThemeCSSProperties()`

app.utils.colorThemeCSSProperties(hexColor)- 返回一个对象，其中包含生成指定主题颜色所需的 CSS 变量

hexColor - 字符串 - HEX 颜色字符串

返回一个包含所需 CSS 变量及其值的对象。

app.utils.colorThemeCSSProperties(R, G, B)- 返回对象，用于生成所需的 CSS 变量来设置指定主题的颜色

R - 数字 - 红色值
G - 数字 - 绿色值
B - 数字 - 蓝色值

返回一个包含所需 CSS 变量及其值的对象。

app.utils.colorThemeCSSProperties('#f00')
/* returns the following object:
{
  "ios": {
    "--f7-theme-color": "var(--f7-ios-primary)",
    "--f7-theme-color-rgb": "var(--f7-ios-primary-rgb)",
    "--f7-theme-color-shade": "var(--f7-ios-primary-shade)",
    "--f7-theme-color-tint": "var(--f7-ios-primary-tint)"
  },
  "md": {
    "--f7-theme-color": "var(--f7-md-primary)",
    "--f7-theme-color-rgb": "var(--f7-md-primary-rgb)",
    "--f7-theme-color-shade": "var(--f7-md-primary-shade)",
    "--f7-theme-color-tint": "var(--f7-md-primary-tint)"
  },
  "light": {
    "--f7-ios-primary": "#f00",
    "--f7-ios-primary-shade": "#d60000",
    "--f7-ios-primary-tint": "#ff2929",
    "--f7-ios-primary-rgb": "255, 0, 0",
    "--f7-md-primary-shade": "#970100",
    "--f7-md-primary-tint": "#e90100",
    "--f7-md-primary-rgb": "192, 1, 0",
    "--f7-md-primary": "#c00100",
    "--f7-md-on-primary": "#ffffff",
    "--f7-md-primary-container": "#ffdad4",
    "--f7-md-on-primary-container": "#410000",
    "--f7-md-secondary": "#775651",
    "--f7-md-on-secondary": "#ffffff",
    "--f7-md-secondary-container": "#ffdad4",
    "--f7-md-on-secondary-container": "#2c1512",
    "--f7-md-surface": "#fffbff",
    "--f7-md-on-surface": "#201a19",
    "--f7-md-surface-variant": "#f5ddda",
    "--f7-md-on-surface-variant": "#534341",
    "--f7-md-outline": "#857370",
    "--f7-md-outline-variant": "#d8c2be",
    "--f7-md-inverse-surface": "#362f2e",
    "--f7-md-inverse-on-surface": "#fbeeec",
    "--f7-md-inverse-primary": "#ffb4a8",
    "--f7-md-surface-1": "#fceff2",
    "--f7-md-surface-2": "#fae7eb",
    "--f7-md-surface-3": "#f8e0e3",
    "--f7-md-surface-4": "#f7dde0",
    "--f7-md-surface-5": "#f6d8db",
    "--f7-md-surface-variant-rgb": [245, 221, 218],
    "--f7-md-on-surface-variant-rgb": [83, 67, 65],
    "--f7-md-surface-1-rgb": [252, 239, 242],
    "--f7-md-surface-2-rgb": [250, 231, 235],
    "--f7-md-surface-3-rgb": [248, 224, 227],
    "--f7-md-surface-4-rgb": [247, 221, 224],
    "--f7-md-surface-5-rgb": [246, 216, 219]
  },
  "dark": {
    "--f7-md-primary-shade": "#ff917f",
    "--f7-md-primary-tint": "#ffd7d1",
    "--f7-md-primary-rgb": "255, 180, 168",
    "--f7-md-primary": "#ffb4a8",
    "--f7-md-on-primary": "#690100",
    "--f7-md-primary-container": "#930100",
    "--f7-md-on-primary-container": "#ffdad4",
    "--f7-md-secondary": "#e7bdb6",
    "--f7-md-on-secondary": "#442925",
    "--f7-md-secondary-container": "#5d3f3b",
    "--f7-md-on-secondary-container": "#ffdad4",
    "--f7-md-surface": "#201a19",
    "--f7-md-on-surface": "#ede0dd",
    "--f7-md-surface-variant": "#534341",
    "--f7-md-on-surface-variant": "#d8c2be",
    "--f7-md-outline": "#a08c89",
    "--f7-md-outline-variant": "#534341",
    "--f7-md-inverse-surface": "#ede0dd",
    "--f7-md-inverse-on-surface": "#362f2e",
    "--f7-md-inverse-primary": "#c00100",
    "--f7-md-surface-1": "#2b2220",
    "--f7-md-surface-2": "#322624",
    "--f7-md-surface-3": "#392b29",
    "--f7-md-surface-4": "#3b2c2a",
    "--f7-md-surface-5": "#3f302d",
    "--f7-md-surface-variant-rgb": [83, 67, 65],
    "--f7-md-on-surface-variant-rgb": [216, 194, 190],
    "--f7-md-surface-1-rgb": [43, 34, 32],
    "--f7-md-surface-2-rgb": [50, 38, 36],
    "--f7-md-surface-3-rgb": [57, 43, 41],
    "--f7-md-surface-4-rgb": [59, 44, 42],
    "--f7-md-surface-5-rgb": [63, 48, 45]
  }
}
*/