封装函数与调用

来源：互联网发布：房子短租软件编辑：程序博客网时间：2024/06/05 08:22

js中class多种函数的封装方法

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>关于class的多种函数封装</title><style>body{  margin: 0;}li{  height: 20px;}</style></head><body><div class="box" id="box">  <ul class="list">    <li class="in abc ab "></li>    <li class="in ac b "></li>    <li class="in a "></li>    <li class="in acb "></li>    <li class="in ba "></li>    <li class="abc"></li>  </ul></div><script>//数组的indexOf方法封装function indexOf(arr,value,start){  //如果不设置start,则默认start为0  if(arguments.length == 2){    start = 0;  }  //如果数组中存在indexOf方法，则用原生的indexOf方法  if(arr.indexOf){    return arr.indexOf(value,start);  }  for( var i = 0; i < arr.length; i++){    if(arr[i] === value){      return i;    }  }  return -1;}//数组去重方法封装function noRepeat(arr){  var result = [];  for( var i = 0; i < arr.length; i++){    if(indexOf(result,arr[i]) == -1){      result.push(arr[i]);    }  }  return result;}//inArray方法封装function inArray(arr,value){  for(var i = 0; i < arr.length; i++){    if(arr[i] === value){      return true;    }  }  return false;}//去除首尾空格函数封装function trim(arr){  var result = arr.replace(/^\s+|\s+$/g,'');  return result;}//getElementsByClassName函数封装function getElementsByClassName(parentObj,classStr){  var result = [];  var objs = parentObj.getElementsByTagName('*');    //如果classStr用空格分隔，则表示class必须同时满足才有效  var targetArr1 = noRepeat(trim(classStr).split(/\s+/));  //如果classStr用逗号分隔，则表示class只要有一个满足就有效  var targetArr2 = noRepeat(trim(classStr).split(/\s*,\s*/));      if(classStr.indexOf(',') == -1 ){    //用空格分隔或者只有一个class    label: for(var i = 0; i < objs.length; i++){      var arr = noRepeat(trim(objs[i].className).split(/\s+/));      for( var j = 0; j < targetArr1.length; j++){        if(!inArray(arr,targetArr1[j])){          continue label;        }      }      result.push(objs[i]);    }    return result;  }else{    //用逗号分隔    label: for(var i = 0; i < objs.length; i++){        var arr = noRepeat(trim(objs[i].className).split(/\s+/));        for( var j = 0; j < targetArr2.length; j++){          if(inArray(arr,targetArr2[j])){            result.push(objs[i]);            continue label;          }        }                }      return result;       }}  //addclass函数封装function addClass(obj,classStr){  var array = noRepeat(trim(obj.className).split('\s+'));  if(!inArray(array,classStr)){    array.push(classStr);  }  obj.className = array.join(' ');  return obj;}//removeclass函数封装function removeClass(obj,classStr){  var array = noRepeat(trim(obj.className).split('\s+'));  var index = indexOf(array,classStr);  if(index != -1){    classStr.splice(index,1);    obj.className = classStr.join(' ');  }  return obj;}//toggleClass函数封装function toggleClass(obj,classStr){  var array = noRepeat(trim(obj.className).split('\s+'));  if(inArray(array,classStr)){    removeClass(obj,classStr);  }else{    addClass(obj,classStr);  }}</script></body></html>

js函数调用的四种方法

js的函数调用会免费奉送两个而外的参数就是 this 和 arguments 。arguments是参数组，他并不是一个真实的数组，但是可以使用.length方法获得长度。

书上有说4中调用方式：

方法调用模式
函数调用模式
构造器调用模式
apply调用模式

下面我们来看看一些实例更好理解。

1：方法调用模式。

请注意this此时指向myobject。

/*方法调用模式*/    var myobject={            value:0,            inc:function(){                    alert(this.value)                }        }    myobject.inc()

2：函数调用模式

请注意this此时指向window

/*函数调用模式*/        var add=function(a,b){        alert(this)//this被绑顶到window            return a+b;        }    var sum=add(3,4);    alert(sum)

3：构造器调用模式

javascript语言精粹一书建议摒弃这中方式。因为有更好的方式。这里先不介绍。下次发表博文的时候贴出来。

会在这里加一个连接。

/*构造器调用模式  摒弃*/        var quo=function(string){            this.status=string;        }    quo.prototype.get_status=function(){            return this.status;        }    var qq=new quo("aaa");    alert(qq.get_status());

4：apply调用模式

==我们可以来看一个更有用的apply实例。看最下面的代码。

/*apply*/    //注意使用了上面的sum函数    //与myobject    //这中调用方式的优点在于可以指向this指向的对象。    //apply的第一个参数就是this指针要指向的对象    var arr=[10,20];    var sum=add.apply(myobject,arr);    alert(sum);

看这个apply真正应用。bind这是一个绑定时间的函数

var bind=function(object,type,fn){            if(object.attachEvent){//IE浏览器                    object.attachEvent("on"+type,(function(){                                                           return function(event){                                                               window.event.cancelBubble=true;//停止时间冒泡                                                               object.attachEvent=[fn.apply(object)];//----这里我要讲的是这里                                                               //在IE里用attachEvent添加一个时间绑定以后。                                                               //this的指向不是到object对象本身所以。我们绑定的function里的this.id是无法正常工作的。                                                               //但是如果我们用fn.apply(object)                                                               //这里可以看出我们是把apply的第一个对象也就是this的指向变更给了object所以this.id就变成了                                                               //object.id 可以正常工作了。                                                                                                                              }                                                           })(object),false);                }else if(object.addEventListener){//其他浏览器                        object.addEventListener(type,function(event){                                                              event.stopPropagation();//停止时间冒泡                                                              fn.apply(this)                                                              });                    }                    }    bind(document.getElementById("aaa"),"click",function(){alert(this.id)});

我喜欢的

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>  body{    margin: 0; } .box{width: 400px;height: 200px;margin: 200px auto;} li{ float: left;margin-left: 10px;     height: 20px;      width: 50px;    background: green;    list-style: none;}  </style></head><body><botton id="aa">点击</botton><div class="box" id="box">    <ul class="list">      <li>11</li>      <li>22</li>      <li33</li>      <li>44</li>      <li>55</li>      <li>66</li>    </ul>  </div>  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script><script>            var myOpinion = myOpinion || {};            myOpinion.prototype={                 init:function(obj,i){                           alert(obj+'hello');                 },                 closeWindow:function(obj,d){                       obj.click(function(){                            d.hide();                        });                 }            }                        $(function(){                var my = myOpinion.prototype;                my.init($("#box"),$(".list"));                             my.closeWindow($("#aa"),$(".list li"));            });            </script></body></html>

这里写的也不错：http://blog.csdn.net/xi_2130/article/details/50276025#comments

0 0