javascript 常用的方法.....

最新推荐文章于 2024-07-01 16:22:16 发布

wtcsy

最新推荐文章于 2024-07-01 16:22:16 发布

阅读量769

点赞数

分类专栏： javascript 随笔。。。。。。文章标签： javascript function object fun list each

本文链接：https://blog.csdn.net/wtcsy/article/details/3460756

版权

javascript 随笔。。。。。。专栏收录该内容

26 篇文章 0 订阅

订阅专栏

记录一些常用的javascript方法常用常用哈哈(都是个人理解....如果觉得我理解错了,请指正 )

function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) {fun(list[i], i); }
};

作用 :

让list里面的集合都执行一次fun(这么说应该不大对,大概是这个意思拉)

解释 :

list 为引用集可以是元素集也可以是数组;

fun 是函数是让那个元素集里的每个东西都完成一次他;可以带参数如上面的list[i](元素集的第i个元素),i索引值了;

Examples

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<title>Command Function</title>
<style type="text/css">
div{height:30px; width:400px; background-color:#0000FF; margin-top:20px;}
</style>
</head>
<script language="JavaScript" type="text/javascript">
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) {fun(list[i], i); }
};
window.onload = function(){
Each(document.body.getElementsByTagName("div"),function(obj,i){
obj.onclick = function(){alert(i)}
});
}
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

var Bind = function(object, fun) {
    var args = Array.prototype.slice.call(arguments).slice(2);
   return function() {
        return fun.apply(object, args);
   }
}

作用 :让obj执行fun方法,fun里面的this指向obj(大概就是这个意思),其实Bind的意思就是绑定.

解释 :

Array.prototype.slice是Array原型上的一个方法,截取数组并返回一个截取后的新数组

Array.prototype.slice.call(arguments)就是对象arguments调用Array.prototype.slice方法了

参数为空所以就是把arguments转成数组了

然后数组在执行slice(2); 就是返回一个没有前2个的新数组.

----------------------------------------------------------------------------------

有点奇怪啊 Array.prototype.slice.call(arguments)这里已经是执行一次,会何后面要要写.slice(2)了????

我也不明白写成这样不是更简单效率更高吗 Array.prototype.slice.call(arguments,2);

一个例子来证明他们是一样的(如果哪位仁兄知道他们是不一样的,麻烦告诉小弟一下)

----------------------------------------------------------------------------------

知道了这个Array.prototype.slice.call(arguments).slice(2);是把参数转为数组,那

    return function() {
        return fun.apply(object, args);
   }

就是返回一个函数了我来分析下他的过程啊

如:bind(obj,fun,arg1)

bind(obj,fun,arg1)执行后就变成了

function(){

return fun.apply(object, [arg1]);

}

因为闭包的原因arg1还存在

因为apply的关系所以前面把参数转成数组的原因也出来了

当执行上面的那个函数的时候,

先执行fun.apply(object, [arg1]); 在返回这个执行后的东西.

Examples(其实例子并好举,关键是如何让他有说服力了,我找不到,我也不举了)

-----------------------------------------------------------------------------------------------------------------------------------------

var BindAsEventListener = function(object, fun){
    var args = Array.prototype.slice.call(arguments).slice(2);
    return function(e) {
        return fun.apply(object, [e||window.event].concat(args));
    }
}

这个和上面的那个例子一样的啊,在返回函数的参数第一个为event.

-----------------------------------------------------------------------------------------------------------------------------------------

function getobjpos(o){
  var x = 0, y = 0;
  do{x += o.offsetLeft;y += o.offsetTop;}while((o=o.offsetParent));
  return {'x':x,'y':y};
}

作用 :

计算元素相对于浏览器所在的x的坐标和y的坐标

解释:

其实对于offsetParent的说明我也不是很明白.这个写法还是很容易看懂

当o.offsetParent不存在的时候结束循环,将没一次元素的offsetLeft or offsetTop累加

这么写在有些情况下会出错的

比如:当其中一个元素设置了scroll,并且有Top或者Left的时候就得加上top和left...............l

-----------------------------------------------------------------------------------------------------------------------------------------

绑定事件和删除事件

这个是原创噢

绑定事件这个要和删除事件配合使用的

好处就是不需要在程序外面拿变量来引用绑定的函数操作都在函数里面完成

例子

<div id='cc' style="width:100px; height:120px; background-color:#000000"></div>
<br><br><br>
<div id='ccc' style="width:100px; height:120px; background-color:#000000" οnclick='xx()'></div>
<script>
var $ = function(id){
    return document.getElementById(id);
}
var addListener = function(element,e,fn){
    !element.events&&(element.events = {});
    element.events[e]&&(element.events[e][addListener.id++]=fn)||(element.events[e] = {'0':fn});
    element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn);
};
addListener.id = 1;
var removeListener = function(element,e,fn){
    var handlers = element.events[e],type;
    if(fn){
        for(type in handlers)
            handlers[type]===fn&&(element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn));
    }else{
        for(type in handlers)
            element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" + e,handlers[type]);
    }
};
var vb =function(){
    alert(1)
}
var vc =function(){
    alert(2)
}
window.οnlοad=function(){
    addListener($('cc'),'click',vb)
    addListener($('cc'),'click',vc)
}

function xx(){
    removeListener($('cc'),'click',vc)
}
</script>
</body>

-----------------------------------------------------------------------------------------------------------------------------------------

设置元素的样式

setStyle( elems, style, value) )

可以设置单个或者多个元素的样式

style可是是字符川串如果是字符串且value有值则elem.style[ style ] = value;

若果单独是style没有value 则按elem.style.cssText = style
style也可以是对象

var setStyle = function(elems, style, value){

//如果elems不是集合就转换成数组 elems可以是数组也可以是元素集合
if( !elems.length ) elems = [elems];

    //如果style是字符串把style转成对象属性是style 值是value
    if( typeof style == "string"){
        style = value === undefined?{cssText:style}:(function(o){
            return (o[style] = value,o);
        })({});
    };

// 遍历elems 透明度 float比较特殊所以单独出来

each(elems,function(i,elem,style){
        var value,name,ie=Sys.ie ;
        for(name in style){
            value = style[name];
            if (name === "opacity" && ie) {
                elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha/([^)]*/)/, "" ) + "alpha(opacity=" + value * 100 + ")";
            }else if(name === "float"){
                elem.style[ ie ? "styleFloat" : "cssFloat" ] = value;
            }else{
                name = name.replace(/-([a-z])/ig, function(all, letter){
                    return letter.toUpperCase();
                });
                elem.style[name] = value;
            }
        }
    },style);
};

Test

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id='ss' style="width:20px; border:1px solid #000000"></div>
<div id='sss'></div>
<div id='ssss'></div>
<script language="javascript">

var Sys = function (ua){
    var b = {
        ie: /msie/.test(ua) && !/opera/.test(ua),
        opera: /opera/.test(ua),
        safari: /webkit/.test(ua) && !/chrome/.test(ua),
        firefox: /firefox/.test(ua),
        chrome: /chrome/.test(ua)
    },vMark = "";
    for (var i in b) {
        if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
    }
    b.version = vMark && RegExp("(?:" + vMark + ")[///: ]([//d.]+)").test(ua) ? RegExp.$1 : "0";
    b.ie6 = b.ie && parseInt(b.version, 10) == 6;
    b.ie7 = b.ie && parseInt(b.version, 10) == 7;
    b.ie8 = b.ie && parseInt(b.version, 10) == 8;
    return b;
}(window.navigator.userAgent.toLowerCase());
var each = function ( object, callback, args ) {
    var name, i = 0, length = object.length;
    if ( args ) {
        args = Array.prototype.slice.call(arguments).slice(2);
        if ( length === undefined ) {
            for ( name in object )
                if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false )
                    break;
        } else
            for ( ; i < length; i++)
                if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false )   //
                    break;
    } else {
        if ( length === undefined ) {
            for ( name in object )
                if ( callback.call( object[ name ], name, object[ name ] ) === false )
                    break;
        } else
            for ( var value = object[0];
                i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
    }
    return object;
};
var setStyle = function(elems, style, value){
    if( !elems.length ) elems = [elems];
    if( typeof style == "string"){
        style = value === undefined?{cssText:style}:(function(o){
            return (o[style] = value,o);
        })({});
    };
    each(elems,function(i,elem,style){
        var value,name,ie=Sys.ie ;
        for(name in style){
            value = style[name];
            if (name === "opacity" && ie) {
                elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha/([^)]*/)/, "" ) + "alpha(opacity=" + value * 100 + ")";
            }else if(name === "float"){
                elem.style[ ie ? "styleFloat" : "cssFloat" ] = value;
            }else{
                name = name.replace(/-([a-z])/ig, function(all, letter){
                    return letter.toUpperCase();
                });
                elem.style[name] = value;
            }
        }
    },style);
};
window.onload = function(){
    setStyle(document.getElementById('ss'),'height','20px');
    setStyle(document.getElementById('sss'),"width:20px;height:20px; border:1px solid #000000");
    setStyle(document.getElementById('ssss'),{width:"20px",height:"20px",border:"1px solid #000000"});
}
</script>
</body>
</html>