返回 导航

HTML5 / CSS3

hangge.com

Framework7 - DOM7库的使用2(提供的一些常用的工具方法)

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

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宽度会不断增加。点击“停止”按钮则停止动画执行。

样例html代码:
<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)

回到顶部