上一篇文章,弄了一个 取词 标红 功能的小应用,但是存在一些bug,今天修修补补,顺便也把ajax部分补上了~

Demo地址::http://qianduannotes.sinaapp.com/getKeyword/

代码部分:

var GetKeywords = {str: "",limit: 11,keywords:[],url: "./tool.php",//page idgetId: function(){this.id = this._("wp").getAttribute("data-page");},init : function(){var box = this._("article"),_this = this;//获取已经存在的关键词this.getAllKeyWord();//获取页面IDthis.getId();//让rmKeyWord函数全局化window.rmkeyWord = this.rmkeyWord;//取词事件box.onmouseup = function(evt){var evt = evt || window.event,target = evt.target || evt.srcElement;//如果鼠标是在button上弹起,则忽略if(target.id == "btn") return;GetKeywords.str = _this.getSelectionText();if(_this.str.length == 0){_this.removeBtn();return;} if(_this._("btn")) {_this.removeBtn();if(GetKeywords.str == "") return;_this.createBtn(evt);return;}_this.createBtn(evt);}var types = document.getElementsByTagName("input");for(var j = 0, len = types.length; j < len; j++){(function(j){types[j].onchange = function(){_this.sendData(j + 1, "change");}})(j);}},//工具函数_: function(obj){return document.getElementById(obj);},//获取选中文本getSelectionText: function(){if(window.getSelection) {return window.getSelection().toString();} else if(document.selection && document.selection.createRange) {return document.selection.createRange().text;}return '';},//创建按钮createBtn: function(evt){var button = document.createElement("div"),evt = evt || window.event,x = evt.pageX || evt.x,y = evt.pageY || evt.y,i, j, len,cssList = "",_this = this,csses = {"height" : "30px","line-height" : "30px","position": "absolute","top": y + 10 + "px","left": x + 10 + "px","cursor": "pointer","border": "1px solid #000","background": "#EEE","padding": "2px 8px","border-radius": "3px"};for(i in csses){if(csses.hasOwnProperty(i)){cssList += i + ":" + csses[i] + ";";}}button.style.cssText = cssList;button.innerHTML = "添加到关键词列表";button.setAttribute("id", "btn");this._("article").appendChild(button);button.onclick = function(){if(_this.str.length > _this.limit){alert("关键词长度最长为11,可以通过设置GetKeywords.limit来控制长度。");_this.removeBtn();return;}for(j = 0, len = GetKeywords.keywords.length; j < len; j++){if(GetKeywords.keywords[j] == _this.str){alert("已经存在该关键词了~");_this.removeBtn();return;}continue;}_this.sendData(_this.str);_this.keywords.push(_this.str);_this.setRed(_this.str);_this.addTo();_this.removeBtn();};},//删除按钮removeBtn: function(){var btn = this._("btn");btn.parentNode.removeChild(btn);},//加入到关键词里列表addTo: function(){var word = this._("wordList");word.innerHTML += "<span><font>" + this.str + "</font><a href='#' οnclick='rmkeyWord(this);'></a></span>";},//关键词标红setRed: function(str){var content = this._("article"),temp = '(' + str + ')';reg = new RegExp(temp,'g');content.innerHTML = content.innerHTML.replace(reg, "<span style='color:red;'>$1</span>");},//删除标红rmRed: function(str){var content = this._("article"),temp = "(<span[^<]*" + str + "</span>)";reg = new RegExp(temp,'gi');content.innerHTML = content.innerHTML.replace(reg, str);},//获取已经存在的关键词(也可以用来获取所有关键词)getAllKeyWord: function (){var spans = this._("wordList").getElementsByTagName("span"),key = [], i = 0, len;for(len = spans.length; i < len; i++){var font = spans[i].getElementsByTagName("font")[0];var temp = font.innerText || font.textContent;this.setRed(temp);key.push(temp);}this.keywords = key;},//删除关键词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);}continue;}target.parentNode.removeChild(target);var evt = arguments.callee.caller.arguments[0];try{evt.preventDefault();}catch(e){window.event.returnValue = false;}},//ajaxsendData: 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);}
}GetKeywords.init();

  

一、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; //然后在闭包中使用_thisfunction 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

四、参考

  • W3School splice

五、结语

认为,对象里的数据,能单独提取出来尽量单独提出来,不要把所有的常量都当做字面量放置在有需求的地方,用一个变量缓存的话,修改起来也十分方便。对象里的方法,能分离的分离,尽量不要一个嵌套着一个,搞不好就是一个泄露内存的闭包,分离出来,作为对象的直接方法,既可以方便多次利用,又不至于搞的太复杂。

好吧,要学的东西真的很多很多,但是只要把看到的不明白弄明白,然后准备好下一个不明白到来,这样就行了。

转载于:https://www.cnblogs.com/hustskyking/archive/2013/05/05/getKeywords-2.html

Javascript综合应用小案例(续)相关推荐

  1. Javascript综合应用小案例

    按需求弄了一个 取词 以及 标红 的小应用. 先上demo :http://qianduannotes.sinaapp.com/getKeyword/ 很多平时常用的东西,都用上了,所以拿出来说说. ...

  2. JavaScript 国庆倒计时小案例

    本次实现js国庆倒计时小案例 开发工具与关键技术:Visual Studio 2015 JavaScript 当然 首先还是先写出大概样式如下图: 之后便是我的css样式了: 下图便是在页面加载完成的 ...

  3. JavaScript 练手小案例:超级简单又炫酷的图片手风琴效果

    手风琴效果很流行,可以任意展开收缩内容,甚是好看. 特效要求 鼠标移动到图片上,当前图片放大,其他图片收缩. HTML <div class="pics"><ul ...

  4. HTML5+CSS3+JavaScript 阶段性实践小案例——京东购物车

    目录 一.素材提取方法 二.图标 三.实现 (1)效果图 (2)图片素材 (3)代码 花了三天时间将HTML4,HTML5,CSS2,CSS3大致学习了一下,现在来做一个网页实践一下,我是准备专攻后端 ...

  5. JavaScript事件——【小案例】小人快跑

    效果图: images: 操作:       按"上" "下" "左" "右" 键控制小人移动方向 步骤:        ...

  6. JavaScript事件——【小案例】飞机发射子弹

    效果图: 步骤: 1.规定飞机的走向 ( 键盘事件 ) 2.发射子弹 ( 子弹位置:left top ) 图片素材: 飞机:shoot/1.gif 子弹:shoot/2.png 完整代码如下: < ...

  7. php简单网络相册管理系统,Javascript实现网络相册小案例

    html> 网络相册 图一 图二 图三 //获取全部相册链接 var a = document.getElementsByTagName('a'); //循环赋予点击事件 for(var i=0 ...

  8. click 点击图片不起作用_JavaScript 练手小案例:基于SVG的图片切换效果

    最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...

  9. HTML+CSS+JavaScript小案例(注册页面表单验证轮播图跳转主页动态表格select联动)

    案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

最新文章

  1. python权限管理系统_PMS:支持多应用的统一权限管理系统,用flask+vue实现
  2. python通过封装可以实现代码复用_Python学习笔记(五)函数和代码复用
  3. 第2章 状态机思维与状态机变量
  4. [Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.
  5. NET开发人员应该要知道
  6. Abbirb120型工业机器人_优傲UR5协作型机器人注塑台湾工厂的机器换人项目
  7. 软件设计心情笔记(一)目的与手段都很重要
  8. pcie标准_24Pin接口再见!华擎推出首款ATX12VO标准的Z490主板
  9. js 数字格式化,只能输入正负整数,小数
  10. 数据表 高水位 mysql_Oracle中的高水位(HWM)
  11. eclipse 3.x中热部署WEB程序TOMCAT配置
  12. matlab trplot2,一知半解|MATLAB机器人建模与仿真控制(2)
  13. excel 汉字转拼音
  14. 【bzoj4972】小Q的方格纸 前缀和
  15. elemtnui 表格如何修改某行文字颜色(elemtnui table 修改某行文字颜色)
  16. c++计算数组的中值
  17. “性冷淡”的企业聊天工具,里面的秘密比陌陌还多
  18. 5款超级好用的开发效率工具,建议收藏!
  19. 动脑学院安卓移动互联网架构
  20. VS2012 开发SharePoint 2013 声明式workflow action(activity)之 HelloWorld

热门文章

  1. .net 显示时间为YYYY-MM-DD格式
  2. 多分辨率图像的快速查询
  3. 数据库 ACCESS与SQL SERVER 2000分页SQL语句 分析
  4. 网站最令人讨厌的几个用户体验
  5. CF223C【Partial Sums】(组合数学+乱搞)
  6. [计算机视觉][神经网络与深度学习]Faster R-CNN配置及其训练教程
  7. 认清企业现状,做好信息化建设
  8. 未安装在此服务器场中,无法添加到该范围
  9. live的domain服务
  10. 栈 - 关于出栈序列,判断合法的出栈序列