实用工具

Framework7工具是一组内部使用的辅助方法，在开发过程中也非常有用。

它可以作为 Framework7 类的属性 (utils) 和初始化的应用实例上的相同属性 (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 - 字符串- 带有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(对象)- 创建一个适合用于URL查询字符串的普通对象的序列化表示

  • 对象 - 对象- 要序列化的对象

返回一个新的唯一数组

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

requestAnimationFrame()

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

  • 回调 - 函数- 当是更新动画以进行下一次重绘的时间时调用的函数

返回动画请求ID，该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 - 数字- 由app.utils.requestAnimationFrame()调用返回的ID值，该值请求了回调
app.utils.cancelAnimationFrame(animId);

nextFrame()

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

  • 回调 - 字符串- 当是更新动画以进行下一次重绘的时间时调用的函数。
app.utils.nextFrame(function() {
  // do something on next frame
});

nextTick()

app.utils.nextTick(回调, delay)- 在指定延迟后执行代码。基本上是setTimeout

  • 回调 - 字符串- 在指定延迟后调用的函数
  • delay - 数字- 毫秒中的延迟。可选的，默认是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)- 扩展target对象的属性和方法来自from对象

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

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

如果您需要将一个对象的属性扩展到其他对象，或者需要对象的深度副本，则此方法非常方便。

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

有一些属性包含元素的（iOS、MD）主题相关内容。如果动态创建预加载器，这些属性会很有用。预加载器 element. Theses properties can be useful if you create preloaders dynamically.

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]
  }
}
*/
改进此文档
在本页上