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,如需转载请自行联系原作者

目录
相关文章
|
3月前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
219 77
|
24天前
|
缓存 NoSQL JavaScript
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
52 11
|
1月前
|
敏捷开发 人工智能 JavaScript
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
100 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
|
3月前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
163 62
|
1月前
|
JavaScript 前端开发
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
49 8
|
22天前
|
监控 安全 中间件
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求,比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码,以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块,能够简化HTTP请求的预处理和后处理,提高代码的可维护性,有助于创建快速、安全和用户友好的Web体验。
|
3月前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
90 31
|
3月前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
3月前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
3月前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
75 3

热门文章

最新文章