首页 > 代码库 > ife2015-task2

ife2015-task2

html部分:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>

</style>
</head>
<body>
<input class="a">
<div id="c">
<input class="e" id="b" type="button">
</div>
<script type="text/javascript" src=http://www.mamicode.com/"scripts/util.js"></script>
</body>
</html>

javascript部分:

/**
* Created by Administrator on 2016/12/14.
*/
//判断是否为数组
function isArray(arr){
return (arr instanceof Array);
}

//判断是否为函数
function isFunction(fn){
return (typeof(fn));
}

//深度克隆
function cloneObject(src){
var result,
//判断src的类型
oClass=isClass(src);
if(oClass==="Object"){
result={};
}
else if(oClass==="Array"){
result= [];
}
else{
return src;
}
for(var key in src){
var copy=src[key];
if(isClass(copy)==="Object"){
//递归调用
result[key]=arguments.callee(copy);
}
else if(isClass(copy)==="Array"){
result[key]=arguments.callee(copy);
}
else{
result[key]=copy;
}
}
return result;
}
//返回cla的类 :object 或array 或 基本类型
function isClass(cla){
if(cla===null){
return null;
}
else if(cla===undefined){
return undefined;
}
else{
return Object.prototype.toString.call(cla).slice(8,-1);
}
}

//数组去重
function uniqArray(arr){
//去重数组变量temp
var temp=[];
//每个数组值都与之前的数组值作比较,是否重复
for(var i=0,l=arr.length;i<l;i++){
var j=0;
while(arr[i]!=arr[j]){
if(j<i){
j++;
}
}
//不重复,将值push进 去重数组
if(j==i){
temp.push(arr[j]);
}
}
return temp;
}

//去除字符串头尾的空格、tab、全角半角空格
function trim(str){
var regex=/^\s*/;
var regex2=/\s*$/;
return str.replace(regex,‘‘).replace(regex2,‘‘);
}

// 实现一个遍历数组的方法,针对数组中每一个元素执行fn函数,并将数组索引和元素作为参数传递
function each(arr, fn) {
for(var i= 0,l=arr.length;i<l;i++){
fn(i,arr[i]);
}
}
function fn(idx,item){
item=idx+1;
}

// 获取一个对象里面第一层元素的数量,返回一个整数
function getObjectLength(obj) {
var j=0;
for(var i in obj){
j++;
}
return j;
}

// 判断是否为邮箱地址
function isEmail(emailStr) {
var re=/\w+@\w+.com/;
return re.test(emailStr);
}

// 判断是否为手机号
function isMobilePhone(phone) {
var re=/\d{11}/;
return (re.test(phone));
}

//为element增加一个样式名为newClassName的新样式
function addClass(element,newClassName){
var oldClassName=element.className;
element.className=oldClassName+‘ ‘+newClassName;
}

//删除element一个样式名为oldClassName的旧样式
function removeClass(element,oldClassName){
element.className=element.className.replace(oldClassName,‘‘); return element;}// 判断siblingNode和element是否为同一个父元素下的同一级的元素,返回bool值function isSiblingNode(siblingNode,element){ return (siblingNode.parentNode===element.parentNode);}// 获取element相对于浏览器窗口的位置,返回一个对象{x, y}function getPosition(element) { var top=element.offsetTop, left=element.offsetLeft; while(element.offsetParent){ element=element.offsetParent; top+=element.offsetTop; left+=element.offsetLeft; } return {‘x‘:left,‘y‘:top}}// 实现一个简单的Queryfunction $(selector) { var char=selector.charAt(0), element, idx; switch (char){ //通过id获取dom元素 case ‘#‘: idx=selector.indexOf(‘.‘); if(idx==(-1)){ var idName=selector.slice(1); element=document.getElementById(idName); return element; } //通过id和classname获得dom元素 else{ var className=selector.slice(idx+1) ; idName=selector.slice(1,idx-1);//id和classname之间要用一个宫格隔开 element=document.getElementById(idName); element=element.getElementsByTagName(‘*‘); for(var i= 0,l=element.length;i<l;i++){ className=element[i].className.split(‘ ‘); for(var m= 0,n=className.length;m<n;m++){ if(className[m]==className){ return element[i]; } } } } break; //通过classname获得dom元素 case ‘.‘: selector=selector.slice(1); element=document.getElementsByTagName(‘*‘); for(var i= 0,l=element.length;i<l;i++){ if(element[i].className) { className = element[i].className.split(‘ ‘); for (var m = 0, n = className.length; m < n; m++) { if (className[m] == className) { return element[i]; } } } } break; //通过属性名和相对应的属性值获得dom元素 case ‘[‘: var attName, value; idx=selector.indexOf(‘=‘); element=document.getElementsByTagName(‘*‘); if(idx==(-1)){ attName=selector.slice(1,-1); } else{ attName=selector.slice(1,idx); value=http://www.mamicode.com/selector.slice(idx+1,-1); } for(var i= 0,l=element.length;i=200&&xhr.status<300||xhr.status==304){ successFn(xhr.responseText); } else{ if(failFn){ failFn(xhr.status); } else{ console.error(‘Unsuccessful:\t‘+xhr.status); } } } }; switch (type){ case ‘GET‘: xhr.open(‘GET‘,url+‘?‘+data,true); xhr.send(); break; case ‘POST‘: xhr.open(‘POST‘,url,true); break; }}function createXHR(){ var xhr; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); } else{ xhr=new ActiveXObject(‘Microsoft.XMLHTTP‘); } return xhr;}ajax(‘test.php‘,{type:‘GET‘,successFn:function(){console.log("i am success");}});

其中耽误了比较久的是javascript的ajax部分,这个内容的形式不熟悉,文档看的不是很仔细,又犯了一些细节错误。

比如:

if(typeof (options)==‘object‘){
type=options.type.toUpperCase();
data=http://www.mamicode.com/options.data||null;
successFn=options.successFn||‘undefined‘;
failFn=options.onfail||‘undefined‘;
}

上面代码中的successFn=options.successFn||‘undefined‘;

我写成了successFn=options.successFn()||‘undefined‘;

导致readystate一直等于1.

据我理解(b为函数),a=b();  是调用b函数,再将b函数的结果返回给a;

                              a=b;   是将b的地址给了a;

 

个人理解,欢迎大家交流。

ife2015-task2