function getHtmlByArray(len) {
return new Array(len + 1).join("<li></li>");
}
//这个大概是最正统的做法了，无副作用，而且更通用还异步加载。
<script type="text/javascript">
var responseHtml = '<scr'+'ipt>alert("我是小白。。。")</scr'+'ipt>';
responseHtml = responseHtml.replace(/<\/?sc[^\>]+>/g,'');
var ele = document.createElement("script");
ele.src = "xyz.js";
ele.innerHTML = responseHtml;
document.body.appendChild(ele);
</script>
/ 更新：// 05.27: 1、保证回调执行顺序：error > ready > load；2、回调函数this指向img本身// 04-02: 1、增加图片完全加载后的回调 2、提高性能/** * 图片头数据加载就绪事件 - 更快获取图片尺寸 * @version 2011.05.27 * @author TangBin * @see http://www.planeart.cn/?p=1121 * @param {String} 图片路径 * @param {Function} 尺寸就绪 * @param {Function} 加载完毕 (可选) * @param {Function} 加载错误 (可选) * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () { alert('size ready: width=' + this.width + '; height=' + this.height); }); */var imgReady = (function () { var list = [], intervalId = null, // 用来执行队列 tick = function () { var i = 0; for (; i < list.length; i++) { list[i].end ? list.splice(i--, 1) : list[i](); }; !list.length && stop(); }, // 停止所有定时器队列 stop = function () { clearInterval(intervalId); intervalId = null; }; return function (url, ready, load, error) { var onready, width, height, newWidth, newHeight, img = new Image(); img.src = url; // 如果图片被缓存，则直接返回缓存数据 if (img.complete) { ready.call(img); load && load.call(img); return; }; width = img.width; height = img.height; // 加载错误后的事件 img.onerror = function () { error && error.call(img); onready.end = true; img = img.onload = img.onerror = null; }; // 图片尺寸就绪 onready = function () { newWidth = img.width; newHeight = img.height; if (newWidth !== width || newHeight !== height || // 如果图片已经在其他地方加载可使用面积检测 newWidth * newHeight > 1024 ) { ready.call(img); onready.end = true; }; }; onready(); // 完全加载完毕的事件 img.onload = function () { // onload在定时器时间差范围内可能比onready快 // 这里进行检查并保证onready优先执行 !onready.end && onready(); load && load.call(img); // IE gif动画会循环执行onload，置空onload即可 img = img.onload = img.onerror = null; }; // 加入队列中定期执行 if (!onready.end) { list.push(onready); // 无论何时只允许出现一个定时器，减少浏览器性能损耗 if (intervalId === null) intervalId = setInterval(tick, 40); }; };})();
if ( event.pageX == null && original.clientX != null ) {
eventDoc = event.target.ownerDocument || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft||body&&body.clientLeft || 0 );
event.pageY = original.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 );
}
function getAbsPoint(e){var x = e.offsetLeft, y = e.offsetTop;while (e = e.offsetParent) {x += e.offsetLeft;y += e.offsetTop;}alert("x:" + x + "," + "y:" + y);}
-
根据给定的条件在原有的数组上，得到所需要的新数组。
——《JavaScript 王者归来》
var a = [-1,-1,1,2,-2,-2,-3,-3,3,-3];
function f(s,e)
{
var ret = [];
for(var i in s){ // 根据原有的数组长度进行循环
ret.push(e(s[i]));
}
return ret;
}
f(a,function(n){return n>0?n:0}); // 传输一个匿名函数作为逻辑判断
-
比原生type 或 typeof 更详细的类型监测方法
——《精通 JavaScript · 第二章》
function type(p){
/function.(\w*)\(\)/.test(p.constructor); //通过其构造函数来获取对应的类型。
return RegExp.$1;
}
- 对象或数组的深拷贝，用于解决对象引用时值一改全改的问题。
var copyObject = function(obj){
var result = {};
for(var x in obj){
result[x] = typeof obj==="object" ? copyObject(obj[x]) : obj[x]
//如果拷贝的值仍然是一个对象,那么重复执行当前方法。
}
return result;
}
- 通过正则表达式来获取Cookie的值
function getCookie(name){
if(name && RegExp("(^| )" + name + "=([^;]*)(;|$)").exec(document.cookie)) return RegExp.$2;
// (^| ) 不匹配第一个空格。
// ([^;]*) 只匹配除了;号之外的所有字符。
// (;|$) 匹配以;号或$为结尾的字符。
}
- 通过移位运算来替代"parseInt"
~~3.14 => 3;
// ~~ 取整。~取当前数值的反码,~~表示再次取反，也就是得到当前自身（说明，JS中的“位”运算会将数值自动转换为整数）
- 将数值转换为16进制的字符串（常用于表示色彩）
(~~(Math.random()*(1<<24))).toString(16)
// ~~ 通过位运算来取整。
// << 左移位。将1的二进制数左移24位。而1<<24 == 2^24(RGB模式下最多可表示的色彩数量)
// toString(16) 将数值转换为16进制的字符串输出。
-
NodeList || HTMLCollection || Object 转换为Array或具有Array的方法。
NodeList: 是指通过集合方法获得到的DOM节点列表，例如：document.getElementsByTagNmae,document.forms... 等方法。
HTMLCollection: HTML块，它与NodeList很像，但是NodeList只支持数字索引，而HTMLCollection可以支持名称作为索引。
NodeList 与 HTMLCollection 都具有以下类似：
· 具有数组的外观，但没有数组的方法
· 具有.length属性
· 支持索引来读取内容。
function makeArray(obj){
var rs=[],len=obj.length;
try{
rs = [].slice.call(obj,0);
/*
注意：这里的arguments是具有.length属性的对象
slice：数组的截取方法，这中写法也涉及到slice内部实现的原理
*/
}catch(e){//for IE
for(var i=0;j=obj[i++];){
rs.push(j);
}
}
return rs;
}
尝试执行异常的代码
try{
// 尝试运行
}catch(msg){
throw "Error name:" + msg.name; // throw会在控制台抛出异常信息，注意：throw会阻塞程序执行。建议使用console.log
throw "Error message:" + msg.message
/* Error.Name 的常见错误信息：
1. EvalError：eval_r()的使用与定义不一致
2. RangeError：数值越界
3. ReferenceError：非法或不能识别的引用数值
4. SyntaxError：发生语法解析错误
5. TypeError：操作数类型错误
6. URIError：URI处理函数使用不当
*/
}finally{
// finally 最终不论是运行成功还是没有运行成功都会执行。
}
- 动条滚动时分别判断位置与内容的可见
// 判断滚动到指定元素的位置
function getPos(obj){
var t = 0;
while(obj){
t += obj.offsetTop;
obj = obj.offsetParent;
}
return t;
}
window.onscroll = function(){
var position = document.documentElement.clientHeight,
visible = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
// 滚动到指定位置
if(position > getPos(obj)){}
// 滚动时指定内容显示出来
if(visible > getPos(obj)){}
}
- 在事件的注册处理程序中注销事件
function handle(){
alert(‘I,m here!');
this.removeEventListener('click',handle,false);
}
obj.addEventListener('click',handle,false);
- 正则匹配清除两侧空格
var trim = function(v){
var patrn = /^\s*(.*?)\s+$/;
return (patrn.test(v))? RegExp.$1 : 'null';
}
- HTML字符编码
var htmlEncode = function(str){
var patrn = {};
patrn['amp'] = /&/g;
patrn['left'] = /</g;
patrn['right'] = />/g;
patrn['quot'] = /"/g;
patrn['nbsp'] = /[\u0020*|\u3000*]/g; // \u0020 匹配半角空格 \u3000 匹配全角空格
return str.replace(patrn['amp'],'&').replace(patrn['left'],'<').replace(patrn['right'],'>').replace(patrn['quot'],'"').replace(patrn['nbsp'],' ');
};
- 创建样式表
function createStyleSheet(url){
try{
document.createStyleSheet(url);
5 }catch(e){
var _link = document.createElement('link'),
_head = document.getElementsByTagName('head')[0];
_link.rel="stylesheet";
_link.href=url;
_head.appendChild(_link);
13 }
}
- 防止脚本注入
function stripscript(s) {
return s.replace(/<script.*?>.*?<\/script>/ig, '');
}
- 阻止mouseWhell事件连续触发的两种方式
// 时间戳的方式
var mark = 0;
$(document).mousewheel(function(e){
var timer = new Date().getTime();
if(timer - mark > 1e3){
alert('ok');
mark = timer;
}
});
//定时器的方式
var flag = true;
$(document).mousewheel(function(e){
if(flag){
alert('ok');
flag = false;
setTimeout(function(){
flag = true;
},1000);
}
});
- 时间格式化
function dateFormat(t){ // t 是以秒为单位的值。
var h = ~~(t/3600), // t除以3600，取整，得到的就是小时。
m = ~~(t%3600/60), // t求余3600，取模，得到的就是去除小时剩下的秒数（分钟 + 秒），再除以60，取整，得到的就是分钟。
s = ~~(t%3600%60); // t求余3600，再求余60，剩下的自然就是“秒数”。
return h+'小时'+m+'分'+s+'秒';
}
- 获取DOM索引的两种方式
var oDiv = document.getElementsByTagName('div');
// 获取DOM对象的索引方式一
for (var i = 0, l = oDiv.length; i < l; i++) {
oDiv[i].index = i; // 在DOM对象上附加属性的方式。
oDiv[i].onclick = function() {
alert(this.index);
}
}
// 获取DOM对象的索引方式二
for (var i = 0, l = oDiv.length; i < l; i++) {
(function(n) { // 每一次执行外层函数（自执行函数）都会创建一个独立的闭包，每个独立闭包的i值是不同的。
oDiv[n].onclick = function() {
alert(n);
}
}(i));
}
- replace用法新发现
//之前我们普通的用法
'String'.replace(/[a-z]/,function(a,b,c){//...})
//现在，我们可以采用更简洁的方法
'images/logo.png'.replace(/(.*)(\.\w+)/,'$1@2x$2')
网友评论