您的位置：首页 > Web前端 > JavaScript

JavaScript 小技巧

2016-03-14 00:00 513 查看

摘要: 函数节流, StyleSheet, 表单提交, 富文本编辑器, H5数据库

若当前环境支持DOM2.0，可以用如下代码获取StyleSheet文件

var supportDOM2StyleSheets = document.implementation.hasFeature("StyleSheets", "2.0");
if(supportDOM2StyleSheets){
var sheet = null;
for(var i=0; i<document.styleSheets.length; i++){
sheet = document.styleSheets[i];
console.log(sheet.href);
}
}

2. 表单提交时如何不提交指定元素: 使用元素的 disabled 属性(此方法同时在表单验证中有效)

//HTML结构
<body>
<form method="post" action="submit">
<input type="text" id="input1" name="input1" value="123" />
<input type="text" id="input2" name="input2" value="234"/>
</form>
</body>

//对比组: 提交所有的数据
console.log($("form").serialize());//input1=123&input2=234

//使用disabled属性禁用元素
$("#input1").attr("disabled", "disabled");
console.log($("form").serialize());//input2=234

3. 富文本编辑器实现的基本原理

//1. 创建一个 iframe 选区
<body >
<iframe name="richedit" style="height: 100px; width: 100px;" src="blank.html"></iframe>
</body>

//2. 设置 iframe 的 designMode = "on"
frames["richedit"].document.designMode = "on";

4. HTML5 可以使用 PostMessage() 方法进行跨文档消息传递

5. 定义一个防篡改对象: 使用freeze()

var obj = {
name : 'name'
}
Object.freeze(obj);
obj.name = "halo";
console.log(obj.name);//name

6. HTML5 拥有自己的数据库 IndexedDB

7. 函数节流. 当窗口大小发生改变时，事件会被执行很多次，但是我们只需要调用一次函数。如果是目的是为了减少函数调用的次数，那么我们就可以使用函数节流的写法。

//定义一个节流函数
function lessCost(fn, delay){
var mytimer;
return function(){
var context = this;
var arg = arguments;
clearTimeout(mytimer);
mytimer = setTimeout(function(){
fn.apply(context, arg);
}, delay);
}
}

//获取节流函数的引用
var lessCostRef = lessCost(function(){ console.log("resized"); }, 500);

//事件发生时执行该函数
$(window).on("resize", function(){
lessCostRef();
});//500ms内，函数只被执行了一次

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航