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)