Javascript相关
1.事件冒泡
事件冒泡:子级元素的某个事件被触发,它的上级元素的该事件也被递归执行。事件从发生的目标(event.srcElement||event.target)开始,沿着文档逐层向上冒泡,到document为止。
<ul id="parent" onclick="parent_click(event)">
<li id="child" onclick="child_click(event)">香蕉</li>
<li>猕猴桃</li>
<li>苹果</li>
<li>梨子</li>
<li>金桔</li>
</ul>
当id="child"
被点击时,会触发id="parent"
的onclick事件.
项目 | 浏览器 | 方法 |
---|---|---|
阻止事件冒泡 | IE | window.event.cancelBubble = true |
W3C | event.stopPropagation() | |
阻止事件的默认行为 | IE | window.event.returnValue = false |
W3C | event.preventDefault() |
参考:
http://blog.csdn.net/axzywan/article/details/7498443
http://www.tuicool.com/articles/Vnyaea
2. 类定义和prototype
用function 来定义类,对象的prototype属性的解释是:返回对象类型原型的引用。
function Fruit(name,favorite_degree){
this.name = name;
//对象方法
this.show = function(){
...
}
}
//类方法
Fruit.eat = function(){
console.log("what a delicious fruit.")
}
//原型方法
Fruit.prototyope = {
showName:function(){
...
}
}
A.prototype = new Fruit()
相当于 A类 继承了Fruit类,如果A中有与Fruit中同名的方法,则优先调用A中的方法,类似于子类的方法重写;
call()
可以 使用 A类 的实例 调用 Fruit类的方法:
A.prototype = new Fruit();
var a_instance = new A();
var orange = new Fruit("金桔",100);
orange.show.call(a_instance);//调用对象方法
Fruit.eat.call(a_instance);//调用类方法
3. 闭包
在Javascript中,只有函数内部的子函数才能读取局部变量,但是如果需要得到函数的局部变量时,可以在函数内部再定义一个函数,这就是闭包,因此可以把闭包简单理解成”定义在一个函数内部的函数”。
function foo(){
var num = 1;
addNum = function(){//addNum 是个全局变量
num += 1;
};
function my_func(){
console.log(num);
}
return my_func;
}
var t = foo();
t(); // 1
addNum();
t(); // 2
在上述代码中,my_func被包括在foo内部,是一个闭包函数,foo函数所有的局部变量,对my_func都是可见的。t其实就是my_func函数
addNum
没有用var
声明,说明 addNum
是一个全局变量,同时也是一个匿名函数,它也可以访问foo的局部变量,因此,它本身也是一个闭包函数。
综上所述,闭包之所以存在,是因为js中没有public,protected,private类似的访问控制,默认所有的局部变量都是private,但 又 需要把内部定义变量和方法public出来。
-
闭包的好处:
- 访问局部变量。
- 访问控制。可以在闭包中控制要public的方法和变量。
- 缓存数据。举个例子,my_func是依赖foo的,foo会一直在内存中,num的值不会被销毁,可以用来缓存数据。
- 垃圾回收。
参考:
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
4. 跨域相关
跨域调用 http://www.cnblogs.com/2050/p/3191744.html
xss攻击 http://blog.csdn.net/ghsau/article/details/17027893
CSS相关
圆角 http://www.studyofnet.com/news/276.html
position http://blog.jobbole.com/49320/
浏览器兼容 http://blog.csdn.net/chuyuqing/article/details/37561313/
盒模型 http://www.cnblogs.com/sunyunh/archive/2012/09/01/2666841.html