Fork me on GitHub

Javascript -- Note

平时写到的一些奇技淫巧。

javascript笔记

闭包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function user(name) {
var age;
return {
getName: function() {
return name;
},
setName: function(newName) {
name = newName;
},
getAge: function() {
return age;
},
setAge: function(newAge) {
age = newAge;
}
}
}

var zhaoo = user('zhaoo');
var name = zhaoo.getName();
zhaoo.setAge(20);
var age = zhaoo.getAge();

function内部的变量都是局部变量,在function外部是无法访问的。闭包其实就是充当一个桥梁的作用,从外部可以间接地访问到内部的变量。

自触发函数 (IIFE)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Type 1
start();
function start() {
//...
}

//Tpye 2
(function () {
//...
})();

//Type 3
!function () {
//...
}();

Tpye 4
;(function() {
//...
})();

JS的全局变量其实是定义在一个window对象下的,例如var a = 1;其实是var window.a = 1;。然而,window对象又有许多的内置属性,如果我们自定义的属性刚好和内置属性重名的话,就会起冲突。这里用到匿名函数,一个JS文件写一个,防止污染全局变量。这个有点像jQuery里的$

锚点平滑滚动

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
$(".smooth-slide").click(function() { //锚链接判断条件
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset},500);
return false;
}
}
});
});

#锚链接跳转太突然了,这里用到一段jQuery代码让它平滑滚动下去。判断条件可以自行更改,我这里用了一个.smooth-slide的类,比如说可以替换成$("a[href='#']")来判断带#的a标签。

zhaoo wechat
0%