JS函数的封装与调用

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

数组的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);
  }
}

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

四种调用方式：
方法调用模式
函数调用模式
构造器调用模式
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)});