便利な関数

Framework7のutilsは、内部的に使用されるヘルパーメソッドのセットで、開発中にも便利に使用できます。

これは、Framework7クラスのutilsプロパティ(Framework7.utils)と、初期化されたアプリのインスタンスの同じプロパティ(app.utils)として利用できます。

// アプリのインスタンスにアクセスできない場所や、アプリを初期化する前に必要な場合には
var now = Framework7.utils.now();


// アプリを初期化した後は、アプリのインスタンスのプロパティとしてアクセスできます。
var app = new Framework7({ /*...*/ });
var now = app.utils.now();

また、ESモジュールを使ってインポートすることもできます。

import { utils } from 'framework7';

Utilsメソッド

parseUrlQuery()

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

serializeObject()

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

requestAnimationFrame()

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(animId);

nextFrame()

app.utils.nextFrame(function() {
  // 次のフレームで何かをする
});

nextTick()

app.utils.nextTick(function() {
  // 次のティックで何かをする
});

now()

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

エクステンド()

このメソッドは、あるオブジェクトを他のオブジェクトのプロパティで拡張する必要がある場合や、オブジェクトのディープコピーが必要な場合に非常に便利です。

var a = {
  apple: 0,
  cherry: 97
};
// aを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,
}

// aを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,
}

// aとbのマージから新しいオブジェクトcを作成する。
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,
}

// aをbで拡張する
app.utils.extend(a, b);

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

uniqueNumber()

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

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

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

id()

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要素のテーマに関連したコンテンツを含むプロパティがあります。これらのプロパティは、プリローダーを動的に作成する場合に便利です。

// 現在のアプリのテーマに基づいて動的にメソッドを呼び出す
var preloaderContent = app.utils[app.theme + 'PreloaderContent'];

// 必要なプリローダーのコンテンツを作成する
var myPreloader = '<div class="preloader">' + preloaderContent + '</div>';

// どこかに追加する
$('.something').append(myPreloader);

colorHexToRgb()

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

colorRgbToHex()

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

colorRgbToHsl()

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

カラーHslToRgb()`

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

colorHsbToHsl()

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

カラーHslToHsb()`)

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

colorThemeCSSProperties()

app.utils.colorThemeCSSProperties('#f00')
/* returns the following object:
{
  "--f7-theme-color": "#f00",
  "--f7-theme-color-rgb": "255, 0, 0",
  "--f7-theme-color-shade": "#d60000",
  "--f7-theme-color-tint": "#ff2929"
}
*/

app.utils.colorThemeCSSProperties(255, 0, 0)
/* returns the following object:
{
  "--f7-theme-color": "#f00",
  "--f7-theme-color-rgb": "255, 0, 0",
  "--f7-theme-color-shade": "#d60000",
  "--f7-theme-color-tint": "#ff2929"
}
*/