Framework7 - DOM7库的使用2(提供的一些常用的工具方法)
作者:hangge | 2016-08-09 08:40
DOM7 除了提供一些常用的 DOM 操作方法外(参考前文:Framework7 - DOM7库的使用1(基本的DOM操作)),还提供了许多方便的工具方法。

1,遍历数组或对象(Dom7.each)
(1)根据索引遍历
2,判断是否是数组(Dom7.isArray)
3,删除数组里多余的元素(Dom7.unique)
4,获取url链接后附带的参数(Dom7.parseUrlQuery)
5,将对象转成url参数(Dom7.serializeObject)
6,将连字符字符串转为驼峰命名型式(Dom7.toCamelCase)
7,将元素上的data属性数据转成对象(Dom7.dataset)
假设我们页面上有个 div 元素。
8,去除字符串前后的空格
9,AnimationFrame动画支持
(1)Dom7.requestAnimationFrame:播放动画
(2)Dom7.cancelAnimationFrame:停止动画

样例html代码:

1,遍历数组或对象(Dom7.each)
(1)根据索引遍历
var fruits = ['Apple', 'Orange', 'Pineapple', 'Bannana'];
$$.each(fruits, function (index, value) {
alert(index + ': ' + element);
});
/**显示结果
0: Apple
1: Orange
2: Pineapple
3: Bannana
**/
(2)根据属性遍历
var person = {
firstName: 'John',
lastName: 'Doe',
age: 25,
};
$$.each(person, function (key, value) {
alert(key + ': ' + value);
});
/**显示结果
firstName: John
lastName: Doe
age: 25
**/
2,判断是否是数组(Dom7.isArray)
var fruits = ['Apple', 'Orange']; console.log($$.isArray(fruits)); //-> true
3,删除数组里多余的元素(Dom7.unique)
var fruits = ['Apple', 'Orange', 'Apple']; console.log($$.unique(fruits)); //-> ['Apple', 'Orange'];
4,获取url链接后附带的参数(Dom7.parseUrlQuery)
var query = $$.parseUrlQuery('http://google.com/?id=5&foo=bar');
console.log(query); //-> {id: 5, foo: 'bar'}
5,将对象转成url参数(Dom7.serializeObject)
var params = {foo: 'bar', id: 5};
console.log($$.serializeObject(params)); //-> 'foo=bar&id=5'
6,将连字符字符串转为驼峰命名型式(Dom7.toCamelCase)
var hypensCaseString = 'hello-my-world'; var camelCaseString = $$.toCamelCase(hypensCaseString); console.log(camelCaseString); //helloMyWorld
7,将元素上的data属性数据转成对象(Dom7.dataset)
假设我们页面上有个 div 元素。
<div id="my-div" data-loop="true" data-animate-pages="false" data-index="0" data-hello="world">
...
</div>
通过 Dom7.dataset 可以将这个 div 元素上的 data 属性值(data-开头)转成一个 Object 对象,方便使用。
var dataset = $$.dataset('#my-div');
/*
得到的是一个驼峰命名的平面对象。(数字和bool类型的也会自动格式化转换)
{
loop: true,
animatePages: false,
index: 0,
hello: 'world'
}
*/
8,去除字符串前后的空格
var str = " hangge.com "; str = str.trim(); // str = "hangge.com"
9,AnimationFrame动画支持
(1)Dom7.requestAnimationFrame:播放动画
(2)Dom7.cancelAnimationFrame:停止动画
关于requestAnimationFrame
这个方法原理其实也就跟 setTimeout/setInterval 差不多,通过递归调用同一方法来不断更新画面以达到动起来的效果,但它优于 setTimeout/setInterval 的地方在于它是由浏览器专门为动画提供的 API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销。
下面是一个简单的样例,当点击“开始”按钮的时候,上方div宽度会不断增加。点击“停止”按钮则停止动画执行。
这个方法原理其实也就跟 setTimeout/setInterval 差不多,通过递归调用同一方法来不断更新画面以达到动起来的效果,但它优于 setTimeout/setInterval 的地方在于它是由浏览器专门为动画提供的 API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销。

<div id="anim" style="width:1px;height:17px;background:#0f0;">1px</div> <input type="button" value="开始" id="run"/> <input type="button" value="停止" id="stop"/>样例js代码:
//保存动画的ID值
var animId;
//动画方法
function anim() {
var width = parseInt($$('#anim').css('width')) + 1;
$$('#anim').css({width: width + 'px'})
$$('#anim').html(width + 'px');
animId = $$.requestAnimationFrame(anim);
}
//开始按钮点击
$$("#run").on('click', function (e) {
animId = $$.requestAnimationFrame(anim);
});
//停止按钮停止
$$("#stop").on('click', function (e) {
$$.cancelAnimationFrame(animId);
});
全部评论(0)