JS11(闭包原理、闭包传递参数、事件传递参数、多个 tab栏切换 js【闭包】、屏幕缩放事件【闭包版的函数节流】、多个 tab栏切换 js【闭包节流】、声明对象、new关键字来声明、原型的面向对象、下拉菜单【对象方式实现】)
闭包原理
<script> function outFun() { var num = 10; function inFun() { // 内部的函数可以使用外部的函数 变量 console.log(num); } return inFun; // 不带括号 } var obj = outFun(); // obj = function inFun() { console.log(num)} obj(); </script>
闭包传递参数
<script> function Fun(x) { return function(y) { console.log(x+y); } } var obj = Fun(4); // 相当于 obj = function() {console.log(x)} obj(); obj(2); </script>
事件传递参数
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { position: absolute; left: 0; background-color: pink; width: 100px; height: 100px; } </style> </head> <body> <button id="btn1">右走</button> <button id="btn2">左走</button> <div id="box"></div> </body> </html> <script> var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); var box = document.getElementById("box"); function move(speed) { return function() { box.style.left = box.offsetLeft + speed + "px"; } } btn1.onclick = move(5); btn2.onclick = move(-5); </script>
多个 tab栏切换 js（闭包）
function tab(obj){ var target = document.getElementById(obj); var spans = target.getElementsByTagName("span"); var lis = target.getElementsByTagName("li"); for(var i=0;i<spans.length;i++) { // spans[i].index = i; spans[i].onmouseover = function (num) { return function(){ for(var j=0; j<spans.length;j++) { spans[j].className = ""; lis[j].className = ""; } spans[num].className = "current"; lis[num].className = "show"; } }(i); } }
屏幕缩放事件（闭包版的函数节流）
<script> var num = 0; var demo = document.getElementById("demo") window.onresize = throttle(function(){ demo.innerHTML = window.innerWidth || document.documentElement.clientWidth; num++; console.log(num); },300); function throttle(fn,delay) { // 闭包 节流 var timer = null; return function() { clearTimeout(timer); timer = setTimeout(fn,delay); } } </script>
多个 tab栏切换 js【闭包节流】
function tab(obj){ var target = document.getElementById(obj); var spans = target.getElementsByTagName("span"); var lis = target.getElementsByTagName("li"); for(var i=0;i<spans.length;i++) { // spans[i].index = i; var timer = null; spans[i].onmouseover = function (num) { return function(){ clearTimeout(timer); timer = setTimeout(function(){ for(var j=0; j<spans.length;j++) { spans[j].className = ""; lis[j].className = ""; } spans[num].className = "current"; lis[num].className = "show"; },300) } }(i); spans[i].onmouseout = function() { clearTimeout(timer); } } }
声明对象
<script> // var obj = new Object(); var obj = {}; // 声明对象 obj.name = "刘德华"; // 属性 obj.age = 55; obj.showName = function() { // 声明方法 方法一定带有 () alert("俺是刘德华"); } obj.showAge = function() { alert("俺今年18岁"); } console.log(obj.name); // 调用属性 console.log(obj.age); obj.showName(); // 调用方法 obj.showAge(); </script>
new关键字来声明
<script>
function Person(name,age) { // 构造函数 就是一个普通函数 为了和普通函数区别 第一个字母大写
this.name = name;
this.age = age;
this.showName = function() {
alert("我的名字是" + name);
}
this.showAge = function() {
alert("我的年龄是"+ age);
}
}
var demo = new Person("刘德华",18);
var demo1 = new Person("刘德华",18);
console.log(demo.name); // 提倡用调用
console.log(demo["name"]);
console.log(demo.age);
// demo.showName();
/* alert(demo.showName);
alert(demo1.showName);*/
alert(demo.showName == demo1.showName);
</script>
原型的面向对象
<script> function Person(name,age) { // 构造函数 this.name = name; // 只写属性 this.age = age; } Person.prototype.showName = function() { // 用的共同的父亲 alert("我的名字是"+ this.name); } Person.prototype.showAge = function() { alert("我的名字是"+ this.age); } var demo = new Person("刘德华",15); var demo1 = new Person("刘德华",15); demo.showName(); alert(demo.showName === demo1.showName); </script>
下拉菜单【对象方式实现】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> *{ padding:0; margin:0; list-style:none;} .all{ width:330px; height:30px; background:url(img/bg.jpg) no-repeat; margin:100px auto; line-height:30px; text-align:center; padding-left:10px; margin-bottom:0;} .all ul li{ width:100px; height:30px; background:url(img/libg.jpg); float:left; margin-right:10px; position:relative; cursor:pointer;} .all ul ul{ position:absolute; left:0; top:30px; display:none;} </style> </head> <body> <div class="all" id="list"> <ul> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul> </div> </body> </html> <script> // 获取对象 遍历对象操作 显示模块 隐藏模块 function List(id) { // 获取对象 this.id = document.getElementById(id); // 取 id 值 this.lis = this.id.children[0].children; // 获取一级菜单所有的li } // init 初始化 List.prototype.init = function() { // 遍历所有的li 显示和隐藏 var that = this; for(var i=0;i<this.lis.length;i++) { this.lis[i].index = i; this.lis[i].onmouseover = function() { that.show(this.children[0]); // 显示出来 } this.lis[i].onmouseout = function() { that.hide(this.children[0]); // 隐藏起来 } } } // 显示模块 List.prototype.show = function(obj) { obj.style.display = "block"; } // 隐藏模块 List.prototype.hide = function(obj) { obj.style.display = "none"; } var list = new List("list"); // 实例化了一个对象 叫 list list.init(); </script>
