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