title: Javascript综合应用小案例(续)
categories:
<p><a class="titlelink" href="http://www.cnblogs.com/hustskyking/archive/2013/05/04/getkeywords.html">上一篇文章</a>,弄了一个 <strong>取词 </strong>和 <strong>标红</strong> 功能的小应用,但是存在一些bug,今天修修补补,顺便也把ajax部分补上了~</p>
<p><a href="http://qianduannotes.sinaapp.com/getKeyword/" target="_blank"><img src="https://images.cnitblog.com/blog/387325/201305/04235938-51987cdb332f4539bbfbeeb88d093e1c.png" alt="" width="850" height="408"></a></p><p>Demo地址:<span>:</span><a title="取词&&标红 demo" href="http://qianduannotes.sinaapp.com/getKeyword/" target="_blank">http://qianduannotes.sinaapp.com/getKeyword/</a></p><p>代码部分:</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;collapse:true;;gutter:false;">var GetKeywords = {
str: "",
limit: 11,
keywords:[],
url: "./tool.php",
//page id
getId: function(){
this.id = this._("wp").getAttribute("data-page");
},
init : function(){
var box = this._("article"),
_this = this;
//获取已经存在的关键词
this.getAllKeyWord();
//获取页面ID
this.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='#' onclick='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;
}
},
//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);
}
}
GetKeywords.init();
</pre>
</div>
<p> </p>
<p><strong>一、ajax部分</strong></p>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);
}
<p>感觉这里真心就没什么好说的,因为这玩意儿涉及到数据的提交、删除、和更新,所以GET的状态也分为add、del、change。</p>
<p>默认的提交状态是add,代码中已经标红。</p><p><strong>二、删除关键词</strong></p>
<p>上次也说了这个部分,但是里边用到了一个splice,在这里稍微详细描述下。</p>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;
}
},
<p><span>splice() 方法用于插入、删除或替换数组的元素。</span></p>
<p><span><span>这个方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。</span></span></p>arrayObject.splice(index,howmany,element1,.....,elementX)
<table class="dataintable">
<tbody>
<tr><th>参数</th><th>描述</th></tr>
<tr>
<td>index</td>
<td>
<p>必需。规定从何处添加/删除元素。</p>
<p>该参数是开始插入和(或)删除的数组元素的下标,必须是数字。</p>
</td>
</tr>
<tr>
<td>howmany</td>
<td>
<p>必需。规定应该删除多少元素。必须是数字,但可以是 "0"。</p>
<p>如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。</p>
</td>
</tr>
<tr>
<td>element1</td>
<td>可选。规定要添加到数组的新元素。从 index 所指的下标处开始插入。</td>
</tr>
<tr>
<td>elementX</td>
<td>可选。可向数组添加若干元素。</td>
</tr>
</tbody>
</table>
<p>1)插入</p>ArrayObj.splice(2, 0, "addObj");
<p>即为在数组第三个位置插入一个名为\addObj"的字符串。</p><p>2)删除</p>ArrayObj.splice(2, 2);
<p>即为删除从第三个开始的连续两个数组元素。</p><p>3)插入</p>ArrayObj.splice(2, 1,"replaceObj");
<p>即为替换第三个元素(也可以说是删除从第三个元素开始的连续一个元素,然后添加一个名为\replaceObj"的字符串)。</p><p>来一个综合应用的:</p>ArrayObj.splice(2, 2,"replaceObj_1","replaceObj_2");
<p> 即为删除从第三个元素开始的连续两个元素,然后在刚才删除的位置,添加名为\replaceObj_1",\replaceObj_2"的两个字符串。相信应该已经比较清楚了吧~O(∩_∩)O~</p>
<p><em>注:splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。</em></p><p><strong>三、遇到的问题</strong></p>
<p><strong>1. this指定的对象</strong></p>
<p>对象方法中this并不一定指向对象本身,即使写了</p>f: function(){
var _this = this; //然后在闭包中使用_this
function name(){
_this.doSomething();//这是的_this也不一定是对象本身
}
}
<p>这是_this也不一定是指向该对象,[object global],有可能指向的是这个对象~</p><p><strong>2. event的兼容性</strong></p>
<p>相信evt = evt || window.event,大家都明白,但是在FF下:</p>function test(evt){
var evt = evt || window.event;
//...
}
<p>在调用test()的时候,如果没有加参数,evt为undefined,使用过程需要test(evt);当然也可以这样:</p>function test(){
var evt = argument.callee.caller.argument[0];
//...
}
<p><strong>4. for-in的问题</strong></p>for(i in csses){
if(csses.hasOwnProperty(i)){
cssList += i + ":" + csses[i] + ";"; //button.style[i] = csses[i]; } } button.style.cssText = cssList;
<p>开始的时候,我用的是注释里的方法button.style[i] = csses[i],但在IE下报错了,后来就用的上面方式实现,具体为什么我也不知道。。</p><p><strong>5. 标签解析的问题</strong></p>
<p>IE载入DOM之后,会把所有的标签解析成大写的,这个至少在IE7和8是如此,IE9以上没测试,就不知道了~</p><p><strong>6. JS一些常见的浏览器兼容问题</strong></p>
<p>这里提到的有:</p>
<ul>
<li>evt || window.event</li>
<li>evt.target || evt.srcElement</li>
<li>evt.x || evt.pageX || evt.layerX</li>
<li>evt.preventDefault() Vs window.event.returnValue = false</li>
<li>XMLHttpRequest || ActiveXObject("Microsoft.XMLHTTP")</li>
<li>obj.innerText || obj.textContent</li>
<li>window.getSelection || document.selection</li>
</ul>
<p><strong>四、参考</strong></p>
<ul>
<li><a title="splice" href="http://www.w3school.com.cn/js/jsref_splice.asp" target="_blank">W3School splice</a></li>
</ul>
<p><strong>五、结语</strong></p>
<p><strong>我</strong>认为,对象里的数据,能单独提取出来尽量单独提出来,不要把所有的常量都当做字面量放置在有需求的地方,用一个变量缓存的话,修改起来也十分方便。对象里的方法,能分离的分离,尽量不要一个嵌套着一个,搞不好就是一个泄露内存的闭包,分离出来,作为对象的直接方法,既可以方便多次利用,又不至于搞的太复杂。</p>
<p>好吧,要学的东西真的很多很多,但是只要把看到的不明白弄明白,然后准备好下一个不明白到来,这样就行了。</p>