上一篇文章,弄了一个 取词 和 标红 功能的小应用,但是存在一些bug,今天修修补补,顺便也把ajax部分补上了~
Demo地址::http://qianduannotes.sinaapp.com/getKeyword/
代码部分:
一、ajax部分
感觉这里真心就没什么好说的,因为这玩意儿涉及到数据的提交、删除、和更新,所以GET的状态也分为add、del、change。
默认的提交状态是add,代码中已经标红。
二、删除关键词
上次也说了这个部分,但是里边用到了一个splice,在这里稍微详细描述下。
splice() 方法用于插入、删除或替换数组的元素。
这个方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
参数 | 描述 |
---|---|
index | 必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。 |
howmany | 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。 如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。 |
element1 | 可选。规定要添加到数组的新元素。从 index 所指的下标处开始插入。 |
elementX | 可选。可向数组添加若干元素。 |
1)插入
即为在数组第三个位置插入一个名为“addObj”的字符串。
2)删除
即为删除从第三个开始的连续两个数组元素。
3)插入
即为替换第三个元素(也可以说是删除从第三个元素开始的连续一个元素,然后添加一个名为“replaceObj”的字符串)。
来一个综合应用的:
即为删除从第三个元素开始的连续两个元素,然后在刚才删除的位置,添加名为“replaceObj_1”,“replaceObj_2”的两个字符串。相信应该已经比较清楚了吧~O(∩_∩)O~
注:splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。
三、遇到的问题
1. this指定的对象
对象方法中this并不一定指向对象本身,即使写了
这是_this也不一定是指向该对象,[object global],有可能指向的是这个对象~
2. event的兼容性
相信evt = evt || window.event,大家都明白,但是在FF下:
在调用test()的时候,如果没有加参数,evt为undefined,使用过程需要test(evt);当然也可以这样:
4. for-in的问题
开始的时候,我用的是注释里的方法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,如需转载请自行联系原作者