单体模式应用弹框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单体模式应用弹框</title> </head> <body> <div id="Id">我是歌谣</div> <script> // 实现单体模式弹窗 var createWindow = (function () { var div; return function () { if (!div) { div = document.createElement("div"); div.innerHTML = "我是弹窗内容"; div.style.display = 'none'; document.body.appendChild(div); } return div; } })(); document.getElementById("Id").onclick = function () { // 点击后先创建一个div元素 var win = createWindow(); win.style.display = "block"; } </script> </body> </html>
原型和原型链
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>原型和原型链</title> </head> <body> <script> // 对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在 // 每个对象都有__proto__原型的存在 //// 原型的构造器指向构造函数。 //原型上添加方法注意的地方 构造器指向构造函数本身 //Star.prototype = {}给原型重新赋值，此时会丢失构造器， //我们需要手动定义构造器，指回构造函数本身 // 原型的构造器指向构造函数。 function Animal(name) { this.name = name } let obj = new Animal('小猴') console.log(Animal.prototype.constructor === Animal) //true console.log(obj.__proto__.constructor === Animal) //true //原型上添加方法注意的地方 构造器指向构造函数本身 function Star(name) { this.name = name } Star.prototype.dance = function () { console.log(this.name) } let geyao = new Star('小花') console.log(geyao.__proto__) //{dance: ƒ, constructor: ƒ} console.log(geyao.__proto__.constructor) // Star //赋值{} function Star(name) { this.name = name } Star.prototype = { dance: function () { console.log(this.name) }, } let fangfang = new Star('小红') console.log(fangfang.__proto__) //{dance: ƒ} console.log(fangfang.__proto__.constructor) // ƒ Object() { [native code] } Star.prototype.constructor = Star </script> </body> </html>
原型和原型链继承方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>原型继承方式</title> </head> <body> <script> //ES6之前并没有给我们提供extends继承，我们可以通过构造函数+原型对象模拟实现继承。 // 继承属性，利用call改变this指向。但该方法只可以继承属性，实例不可以使用父类的方法。 // function Father(name) { // this.name = name // } // Father.prototype.dance = function () { // console.log('我会跳舞') // } // function Son(name, age) { // Father.call(this, name) // this.age = age // } // let son = new Son('歌谣', 100) // son.dance() //报错 // 解决方法1：利用Son.prototype = Father.prototype改变原型指向，但此时我们给子类增加原型方法，同样会影响到父类。 // function Father(name) { // this.name = name // } // Father.prototype.dance = function () { // console.log('我会跳舞') // } // function Son(name, age) { // Father.call(this, name) // this.age = age // } // Son.prototype = Father.prototype // //为子类添加方法 // Son.prototype.sing = function () { // console.log('我会唱歌') // } // let son = new Son('歌谣', 100) // //此时父类也被影响了 // console.log(Father.prototype) //{dance: ƒ, sing: ƒ, constructor: ƒ} //解决方法2：子类的原型指向父类的实例，这样就可以顺着原型链共享父类的方法了。并且为子类添加原型方法的时候，不会影响父类。 function Father(name) { this.name = name } Father.prototype.dance = function () { console.log('我会跳舞') } function Son(name, age) { Father.call(this, name) this.age = age } Son.prototype = new Father() Son.prototype.sing = function () { console.log('我会唱歌') } let son = new Son('歌谣', 100) console.log(Father.prototype) //{dance: ƒ, constructor: ƒ} </script> </body> </html>
原型式继承
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>原型式继承</title> </head> <body> <script> //方法等同于Object.create() //返回原来的原型对象 function object(obj) { function F() {} F.prototype = obj return new F() } //利用一个空对象作为中介，将某个对象直接赋值给空对象构造函数的原型。 var person = { name: 'Nicholas', friends: ['Shelby', 'Court', 'Van'], } var anotherPerson = object(person) anotherPerson.name = 'Greg' anotherPerson.friends.push('Rob') var yetAnotherPerson = object(person) yetAnotherPerson.name = 'Linda' yetAnotherPerson.friends.push('Barbie') //原型链继承多个实例的引用类型属性指向相同，存在篡改的可能。 // 无法传递参数 console.log(person.friends) //"Shelby,Court,Van,Rob,Barbie" </script> </body> </html>
双飞翼布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>双飞翼布局220402</title> </head> <style> .float { float: left; } #main { width: 100%; height: 200px; background-color: lightpink; } #main-wrap { margin: 0 190px 0 190px; } #left { width: 190px; height: 200px; background-color: lightsalmon; margin-left: -100%; } #right { width: 190px; height: 200px; background-color: lightskyblue; margin-left: -190px; } </style> <body> <!-- 圣杯布局：为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。 双飞翼布局：为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容， 在该div里用margin-left和margin-right为左右两栏div留出位置。 --> <div id="main" class="float"> <div id="main-wrap">main</div> </div> <div id="left" class="float">left</div> <div id="right" class="float">right</div> </body> </html>
