下面每页的排序都是从1开始,这样看起来内容就会少一点。
上面这个草稿的表格画得不是很好看,优秀的我又用excel做了一个:
绑定事件的方法 |
解绑 |
|
HTML
扫描二维码关注公众号,回复:
5696566 查看本文章
|
|
|
DOM 0级 |
demo.onclick=null |
demo.onclick=function(){ console.log(123) return false } |
DOM 2级 |
demo.removeEventListener('click',demoFunc,false) |
demo.addEventListener("click",function(e){ var event=e||window.event console.log(123) event.preventDefault() },false) |
|
demo.detachEvent('onclick',demofunc) |
demo.attachEvent("onclick",function(e){ var event=e||window.event console.log(123) event.returnValue=false }) |
JS精准定位参数:https://blog.csdn.net/XIAOZHUXMEN/article/details/52050613
深入理解scroll:http://www.cnblogs.com/xiaohuochai/p/5831640.html
闭包
嵌套的内部函数可以引用外部函数的参数和变量
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
function createIncrementor(start) {
return function () {
return start++;
};
}
var inc = createIncrementor(5);
inc() // 5
inc() // 6
inc() // 7
var aaa =(function(){
var a = 1;
return function(){
a++;
alert(a);
}
})();
aaa(); //2
aaa(); //3
我们想在页面上添加一些可以调整字号的按钮:
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
这三个函数gLogNumber, gIncreaseNumber, gSetNumber 共享访问同一个闭包,即setupSomeGlobals()的局部变量。
特别注意:当第二次调用setupSomeGlobals()时,一个新的闭包(stack-frame堆栈框架)就被创建了。原来的 gLogNumber, gIncreaseNumber, gSetNumber被新的匿名函数给重写。在JavaScript中,只要你在一个函数内部声明了另一个函数,只要外部函数被调用,那么内部函数就会被重新创建。
/*-----Example2-----*/
var gLogNumber, gIncreaseNumber, gSetNumber;
function setupSomeGlobals() {
// Local variable that ends up within closure
var num = 42;
// Store some references to functions as global variables
gLogNumber = function() {
console.log(num);
}
gIncreaseNumber = function() {
num++;
}
gSetNumber = function(x) {
num = x;
}
}
setupSomeGlobals();
gIncreaseNumber();
gLogNumber(); // 43
gSetNumber(5);
gLogNumber(); // 5
var oldLog = gLogNumber;
setupSomeGlobals();
gLogNumber(); // 42
oldLog() // 5
用闭包模拟私有方法-封装:
当在一个函数里声明了多个函数,可以通过json的格式返回,然后我们就可以在外面这样调用,这些函数就成了函数aaa的私有成员。
创建了一个词法环境,为三个函数所共享:Counter.increment,Counter.decrement
和 Counter.value
。 该共享环境创建于一个立即执行的匿名函数体内。这个环境中包含两个私有项:名为 privateCounter
的变量和名为 changeBy
的函数。这两项都无法在这个匿名函数外部直接访问。必须通过匿名函数返回的三个公共函数访问。
var Counter = (function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
}
})();
console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */
var makeCounter = function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
}
};
var Counter1 = makeCounter();
var Counter2 = makeCounter();
console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */
/* 每个闭包都是引用自己词法作用域内的变量 privateCounter 。
每次调用其中一个计数器时,通过改变这个变量的值,会改变这个闭包的词法环境。
然而在一个闭包内对变量的修改,不会影响到另外一个闭包中的变量。 */
循环闭包:
普通的for循环:
function box(){
var arr = [];
for(var i=0;i<5;i++){
arr[i] = i;
}
return arr;
}
alert(box()) //正常情况不需要闭包,就可以达到预期效果,输出结果为一个数组0,1,2,3,4
有时我们需要在for循环里面添加一个匿名函数来实现更多功能,看下面代码(2种写法):
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onclick = (function(i){
return function(){
alert(i);
}
})(i); }
}
/*首先将一个函数表达式的调用赋给了点击事件。当事件后面等于的不是函数名,而直接是调用的话,那不点击,函数也已经执行了,
所以在循环的时候,i已经作为参数,传进了函数表达式,
而这个函数表达式的返回值又是一个函数,函数嵌套,闭包关系,这个函数可以访问外面函数传进来的每个i。*/
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
(function(i){
aLi[i].onclick = function(){
alert(i);
}
})(i);
}
}
/*在点击事件的函数的外面再加上一个函数,就形成了闭包,
然后每循环一次,通过函数表达式的形式,将i传进去,
而通过闭包特性可以知道,事件绑定的函数就可以访问外面函数里面的参数i。*/
解决内存泄漏方法:
function handler(){
var ele = document.getElementById("ele");
var id = ele.id;
ele.onclick = function(){
alert(id);
}
ele = null;
}
- 优雅降级 渐进增强
- 浏览器内核
- 处理flex布局兼容性
- 实现继承 什么是面向对象
- http协议 状态码
- vue路由传值方式 组件间如何传值 生命周期
- 从输入网址到页面浏览器发生了什么 三次握手四次挥手
- MVVM是什么
- vue插槽
- 跨越问题 浏览器为了安全实施的同源策略导致的
- CSS3新增属性 html5新增属性
- get从服务器获取资源 post重点向服务器发送数据
- 移动端适配:媒体查询响应式布局; CSS hack ;浏览器私有属性
- 性能优化:减少http请求 减少DNS查询 使用CDN 避免重定向 使用外部js和css 等
- link 和 @import
- cookie sessionStorage localStorage
- new操作符
- 前端存在哪些安全问题
- 原生实现AJAX
- vue优点 node.js优点 jQuery优点
- axios