AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Javascript综合应用小案例（续）

2017-11-09 1275
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

上一篇文章，弄了一个 取词 和 标红 功能的小应用，但是存在一些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，如需转载请自行联系原作者

文章标签：
JavaScript
索引
前端开发
关键词：
JavaScript应用
JavaScript案例
JavaScript综合应用案例
嗯哼9925
目录
相关文章
码字猴儿
|
5月前
|
JavaScript 前端开发
如何减少Node.js应用中的全局变量？
如何减少Node.js应用中的全局变量？
码字猴儿
332 133
陌陌谣
|
2月前
|
存储 监控 JavaScript
基于布隆过滤器的 Node.js 算法在局域网电脑桌面监控设备快速校验中的应用研究
本文探讨了布隆过滤器在局域网电脑桌面监控中的应用，分析其高效空间利用率、快速查询性能及动态扩容优势，并设计了基于MAC地址的校验模型，提供Node.js实现代码，适用于设备准入控制与重复数据过滤场景。
陌陌谣
76 0
码字猴儿
|
5月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能？
有哪些有效的方法可以优化Node.js应用的性能？
码字猴儿
296 69
陌陌谣
|
6天前
|
运维 监控 JavaScript
基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
本文探讨图结构在局域网监控系统中的应用，通过Node.js实现设备拓扑建模、路径分析与故障定位，提升网络可视化、可追溯性与运维效率，结合模拟实验验证其高效性与准确性。
陌陌谣
61 3
蓝易云
|
2月前
|
资源调度 负载均衡 JavaScript
使用PM2工具部署Vue.js应用于服务器
以上步骤完成之后，你就成功利⽤ PM⼆工具将 Vuejs 应⽰程序部署至服 务 器，并且配合反向代理实现了高效稳定访问及负载均衡功能。
蓝易云
96 0
爱心发电丶
|
6月前
|
前端开发 搜索推荐 JavaScript
如何通过DIY.JS快速构建出一个DIY手机壳、T恤的应用？
DIY.JS 是一款基于原生 Canvas 的业务级图形库，专注于商品定制的图形交互功能，帮助开发者轻松实现个性化设计。适用于 T 恤、手机壳等多种商品场景。它自带丰富功能，无需从零构建，快速集成到项目中。通过创建舞台、添加模型、定义 DIY 区域和添加素材四个步骤即可完成基础用法。支持在线演示体验，文档详细，易上手。
爱心发电丶
207 57
陌陌谣
|
5月前
|
监控 算法 JavaScript
公司局域网管理视域下 Node.js 图算法的深度应用研究：拓扑结构建模与流量优化策略探析
本文探讨了图论算法在公司局域网管理中的应用，针对设备互联复杂、流量调度低效及安全监控困难等问题，提出基于图论的解决方案。通过节点与边建模局域网拓扑结构，利用DFS/BFS实现设备快速发现，Dijkstra算法优化流量路径，社区检测算法识别安全风险。结合WorkWin软件实例，展示了算法在设备管理、流量调度与安全监控中的价值，为智能化局域网管理提供了理论与实践指导。
陌陌谣
131 3
游客tsrksm3mlhq4y
|
6月前
|
存储 JavaScript 前端开发
JavaScript 中的闭包及其应用
JS的闭包和应用
游客tsrksm3mlhq4y
151 1
游客lijmi4663rgsa
|
7月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能，JS中排序算法的使用详解（附实际应用代码）
Array.sort() 是一个功能强大的方法，通过自定义的比较函数，可以处理各种复杂的排序逻辑。无论是简单的数字排序，还是多字段、嵌套对象、分组排序等高级应用，Array.sort() 都能胜任。同时，通过性能优化技巧（如映射排序）和结合其他数组方法（如 reduce），Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
504 3
游客lijmi4663rgsa
|
7月前
|
JavaScript 前端开发 API
JavaScript中通过array.map(）实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等，array.map(）的使用详解（附实际应用代码）
array.map(）可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等，比for好用太多了，主要是写法简单，并且非常直观，并且能提升代码的可读性，也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
432 1

热门文章

最新文章

  • 1
    手把手搭建自定义 CI/CD 服务器，实现 Node.js 部署自动化
  • 2
    JavaScript 语法全面解析
  • 3
    JavaScript：无处不在的编程语言
  • 4
    JavaScript：构建动态世界的引擎
  • 5
    js小数运算出现的问题(精度丢失)及解决办法-亲测有效
  • 6
    JavaScript：构建动态Web的核心力量
  • 7
    TypeScript vs. JavaScript：技术对比与核心差异解析
  • 8
    JavaScript：无处不在的Web语言
  • 9
    JavaScript：构建动态网络的引擎
  • 10
    【逆向】Python 调用 JS 代码实战：使用 pyexecjs 与 Node.js 无缝衔接
  • 1
    基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
    61
  • 2
    Nest.js控制器深度解析：路由与请求处理的高级特性
    212
  • 3
    js react antd 实现页面低分变率和高分变率下字体大小自适用，主要是配置antd
    31
  • 4
    TypeScript vs. JavaScript：技术对比与核心差异解析
    210
  • 5
    js小数运算出现的问题(精度丢失)及解决办法-亲测有效
    201
  • 6
    【逆向】Python 调用 JS 代码实战：使用 pyexecjs 与 Node.js 无缝衔接
    119
  • 7
    手把手搭建自定义 CI/CD 服务器，实现 Node.js 部署自动化
    349
  • 8
    JavaScript：构建动态世界的引擎
    189
  • 9
    JavaScript：无处不在的Web语言
    189
  • 10
    JavaScript：构建动态Web的核心力量
    182

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例
    • 下一篇
    阿里云免费云服务器:个人用户每月750小时免费