Javascript综合应用小案例(续)
上一篇文章,弄了一个 取词 和 标红 功能的小应用,但是存在一些bug,今天修修补补,顺便也把ajax部分补上了~
Demo地址::http://qianduannotes.sinaapp.com/getKeyword/
代码部分:
一、ajax部分
sendData: function(data, action){ var xmlhttp, action = action || "add", _this = this; if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", this.url + "?" + action + "=" + data + "&id=" + this.id, true); xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ _this.sendSuccess(xmlhttp.responseText); } } xmlhttp.send(); }, sendSuccess:function(data){ window.console && window.console.log && window.console.log(data); }
感觉这里真心就没什么好说的,因为这玩意儿涉及到数据的提交、删除、和更新,所以GET的状态也分为add、del、change。
默认的提交状态是add,代码中已经标红。
二、删除关键词
上次也说了这个部分,但是里边用到了一个splice,在这里稍微详细描述下。
rmkeyWord: function (obj){ var target = obj.parentNode, word = obj.previousSibling.innerHTML, i = 0, len; res = GetKeywords.sendData(word, "del"); GetKeywords.rmRed(word); for(len = GetKeywords.keywords.length; i < len; i++){ if(GetKeywords.keywords[i] == word){ GetKeywords.keywords.splice(i,i); //删除第i个元素 } continue; } target.parentNode.removeChild(target); var evt = arguments.callee.caller.arguments[0]; try{ evt.preventDefault(); }catch(e){ window.event.returnValue = false; } },
splice() 方法用于插入、删除或替换数组的元素。
这个方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
arrayObject.splice(index,howmany,element1,.....,elementX)
参数 | 描述 |
---|---|
index |
必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。 |
howmany |
必需。规定应该删除多少元素。必须是数字,但可以是 "0"。 如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。 |
element1 | 可选。规定要添加到数组的新元素。从 index 所指的下标处开始插入。 |
elementX | 可选。可向数组添加若干元素。 |
1)插入
ArrayObj.splice(2, 0, "addObj");
即为在数组第三个位置插入一个名为“addObj”的字符串。
2)删除
ArrayObj.splice(2, 2);
即为删除从第三个开始的连续两个数组元素。
3)插入
ArrayObj.splice(2, 1,"replaceObj");
即为替换第三个元素(也可以说是删除从第三个元素开始的连续一个元素,然后添加一个名为“replaceObj”的字符串)。
来一个综合应用的:
ArrayObj.splice(2, 2,"replaceObj_1","replaceObj_2");
即为删除从第三个元素开始的连续两个元素,然后在刚才删除的位置,添加名为“replaceObj_1”,“replaceObj_2”的两个字符串。相信应该已经比较清楚了吧~O(∩_∩)O~
注:splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。
三、遇到的问题
1. this指定的对象
对象方法中this并不一定指向对象本身,即使写了
f: function(){ var _this = this; //然后在闭包中使用_this function name(){ _this.doSomething();//这是的_this也不一定是对象本身 } }
这是_this也不一定是指向该对象,[object global],有可能指向的是这个对象~
2. event的兼容性
相信evt = evt || window.event,大家都明白,但是在FF下:
function test(evt){ var evt = evt || window.event; //... }
在调用test()的时候,如果没有加参数,evt为undefined,使用过程需要test(evt);当然也可以这样:
function test(){ var evt = argument.callee.caller.argument[0]; //... }
4. for-in的问题
for(i in csses){ if(csses.hasOwnProperty(i)){ cssList += i + ":" + csses[i] + ";";
//button.style[i] = csses[i];
}
}
button.style.cssText = cssList;
开始的时候,我用的是注释里的方法button.style[i] = csses[i],但在IE下报错了,后来就用的上面方式实现,具体为什么我也不知道。。
5. 标签解析的问题
IE载入DOM之后,会把所有的标签解析成大写的,这个至少在IE7和8是如此,IE9以上没测试,就不知道了~
6. JS一些常见的浏览器兼容问题
这里提到的有:
- evt || window.event
- evt.target || evt.srcElement
- evt.x || evt.pageX || evt.layerX
- evt.preventDefault() Vs window.event.returnValue = false
- XMLHttpRequest || ActiveXObject("Microsoft.XMLHTTP")
- obj.innerText || obj.textContent
- window.getSelection || document.selection
四、参考
五、结语
我认为,对象里的数据,能单独提取出来尽量单独提出来,不要把所有的常量都当做字面量放置在有需求的地方,用一个变量缓存的话,修改起来也十分方便。对象里的方法,能分离的分离,尽量不要一个嵌套着一个,搞不好就是一个泄露内存的闭包,分离出来,作为对象的直接方法,既可以方便多次利用,又不至于搞的太复杂。
好吧,要学的东西真的很多很多,但是只要把看到的不明白弄明白,然后准备好下一个不明白到来,这样就行了。
本文转自Barret Lee博客园博客,原文链接:http://www.cnblogs.com/hustskyking/archive/2013/05/05/getKeywords-2.html,如需转载请自行联系原作者