【前端狂虐系列】近期前端开发小结

作为一个写后台Java比较多的人，最近有开发前端的需求：切换聊天对象，聊天界面的内容也要随之切换。。目前初具成效，然而也是心酸。。。。。。。。用这个小笔记来记录下一些印象比较深刻的点吧，以供参考~

 

1. top.或parent.

如果一个页面B是被A页面所包围，并且B页面有自己的js，如果A页面的js想获取B页面的dom元素，需要使用

top.$("你的选择器")或parent.$("你的选择器")去获得。但需注意，A页面的js无法直接调用B页面的js函数

——常见于一个iframe嵌入父页面中

父页面想要获取子页面如iframe里面的元素：$(window.frames[0].document.getElementById("元素id"))

iframe想获取所在父页面的js的全局变量，可用parent.js变量名获取；想获取父页面的js的js方法，可用parent.js函数名获取即可。

 

2.情景需求是切换右侧的聊天对象，左侧的聊天面板的显示也随着切换（类似QQ聊天窗口）

默认左侧会有一个聊天窗口的div，当选中右侧聊天对象时，就clone出一个div，并且修改其id属性，显示当前div并隐藏其他div：

var currMsg = top.$("#record").val();

if((!$("#" + msg))) {

$contentDiv = top.$("#message").clone();

$contentDiv.attr("id", msg);

top.$(".dialogue-record").append($contentDiv);

};

top.$("#"+msg+"").siblings().hide();

top.$("#"+msg+"").show();

 

1）其中$("#message")是默认存在的聊天窗口div。currMsg用来获取当前选中的聊天对象的id， if(!$("#" + msg))目的在于控制无限制的clone并append。

 

2）siblings用于获取兄弟节点(当然不包含自己),也可以用$("父元素的选择器").not("你的选择器")来排除，只不过性能上不是很理想

3）clone是用于复制一个jquery对象，后续可以通过attr去修改属性；注意addClass

 

3.addClass无效？

我给一个div增加一个onclick属性，如：onclick = "switch(this)", this可以获取到当前onclick的dom对象。然后在switch里用addClass方法去增加样式，这样是生效的。

但是当你其他地方也想触发switch方法，并且不是通过onclick去触发的，如果你想当然的通过获取到目标dom对象的html字符串如

var e = "<div>...</div>"然后当作参数传递给switch，发现addClass并不会生效！原因是switch方法的参数是只能获取到onclick事件的上下文（在对哪个dom对象onclick），

所以你把目标dom对象的html字符串传递过去是无效的，解决办法是加一个属性(id, data-name等)在dom对象上：

var e = '<div class="serviceInfo-list" name="on" data-username="'+msg.userName+'" onclick="switch(\''+msg.userName+'\')">'; （注意这里对单引号的转义。。）

用该属性值去代替this传递参数，然后在switch方法里通过选择器来获取即可~

var $target = $("div[data-username='" + msg + "']")

注：addClass和removeClass的操作只适合已经被append到dom上的元素~

 

4.js函数没有重载

当js函数同名，但参数声明不一样时，根据加载顺序会覆盖之前同名的函数，如：

test("hello", "morning");

 

function test(a) {

console.log("a:" + a);

}

 

function test(a, b) {

console.log("a:" + a + ", b:" + b);

}

结果：a:hello, b:morning

说明在调用test函数时，以test(a, b)为准~

 

而这样：

test("hello", "morning");

 

function test(a, b) {

console.log("a:" + a + ", b:" + b);

}

 

function test(a) {

console.log("a:" + a);

}

结果：a:hello

说明在调用test函数时，以test(a)为准~

 

对于情形二，可能不会有test(a),但是定义一个参数较多的js函数，而调用这个js函数的时候，有的地方只传递部分参数（这种情况之前没怎么遇到，但是是存在的），

有的地方传递全部参数，需注意参数的对应是按顺序来的。。

 

5.json结构的数据

类似Java的map，当之前没有这个key时，相当于新增一个键值对；当之前存在这个key时，相当于修改这个键值对的value。

 

6.循环过多页面卡死

避免在循环中过多使用全局变量，注意全局变量的管理（类似Java的全局变量和局部变量，js的局部变量的“生命周期”是代码段，而全局变量是一直存在直到你刷新/关闭页面的）

 

7.删除json的某个键值对

直接用delete json.key（非面向对象型语法）

 

8.用jquery选择器判断html元素是否存在

用jquery的选择器if ($("你的选择器"))是无法判断的，因为即使元素不存在，$("你的选择器")是一定会返回值的，要用$("你的选择器")==0来判断（为0表示不存在，不为0表示存在~）

<div id="test"></div>

 js:

$(function() {
	console.log($("#test2"));
	console.log($("#test2").length);
	
	console.log($("#test"));
	console.log($("#test").length);
});

 id为test2的dom是不存在的，打印结果：

init {context: document, selector: "#test2"}

0

test.jsp:13 [div#test, context: document, selector: "#test"]

1