生活随笔
收集整理的這篇文章主要介紹了
ES5-12 【utils】继承深入、call、apply、圣杯模式、模块化
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
繼承深入
這兩種方式繼承不夠合理（為什么）
-
將實例作為子類的原型
-
在子類的構造函數內部借用父類的構造函數
-
-
將父類的原型作為子類的原型（會修改父類的原型）
css圣杯布局（左右寬度固定、中間自適應）
<!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
>Document
</title
><style
>body
{padding
: 50px
;}.wrap
{border
: 1px solid #
000;width
: 80%;}.top
,.foot
{height
: 50px
;background
-color
: pink
;}.main
{padding
: 0 50px
;overflow
: hidden
;}.main
.left
,.main
.content
,.main
.right
{float
: left
;position
: relative
;background
-color
: cornflowerblue
;width
: 50px
;padding
-bottom
: 2000px
;margin
-bottom
: -2000px
;}.main
.content
{background
-color
: crimson
;width
: 100%;margin
-left
: -50px
;}.main
.left
{left
: -50px
;}.main
.right
{margin
-left
: -50px
;left
: 50px
;}</style
>
</head
><body
><div class
="wrap"><div class
="top"></div
><div class
="main"><div class
="left">123</div
><div class
="content">456<br
>556</div
><div class
="right">789</div
></div
><div class
="foot"></div
></div
><script
type="text/javascript"></script
>
</body
></html
>
JS圣杯模式
- 用buffer實例來隔絕父構造函數的原型和子構造函數的實例
var inherit
= (function
() {function
Buffer() { }function
inherit(Target
, Origin
) {Buffer
.prototype
= Origin
.prototypeTarget
.prototype
= new Buffer()Target
.prototype
.constructor
= TargetTarget
.prototype
.super_class
= Origin
}return inherit
})();
function
Teacher() {this
.tName
= 't'
}
function
Student() {this
.sName
= 's'
}
inherit(Student
,Teacher
)
console
.log(new Student())
var inherit
= (function
() {function
Buffer() { }function
inherit(Target
, Origin
) {Buffer
.prototype
= Origin
.prototypeTarget
.prototype
= new Buffer()Target
.prototype
.constructor
= TargetTarget
.prototype
.super_class
= Origin
}return inherit
})();
var Common
= function
() {}
Common
.prototype
= {time
: '8小時',range: '周一至周五'
}
Common
.prototype
.printFn
= function
() {console
.log(this
.name
+ ":每天工作" + this
.time
+ ',工作時間' + this
.range)
}
var Worker
= function
(name
) {this
.name
= name
}
inherit(Worker
, Common
)
var p1
= new Worker('桐壺更衣')
console
.log(p1
)
var p2
= new Worker('紫姬')
p1
.printFn()
p2
.printFn()
用于多人協作開發、模塊化開發，有自己的命名空間，作用域和外界隔離了。在多人協作時，能防止全局污染。
模塊化開發、初始自執行
window
.onload
= function
() {init()
}
function
init() {console
.log(initFb(10))console
.log(initDiv(100))
}
var initFb
= (function
() {function
fb(n
) {if (n
<= 0) {return 0} else if (n
<= 2) {return 1} else {return fb(n
- 1) + fb(n
- 2)}}return fb
})();
var initDiv
= (function
() {function
div(n
) {var arr
= []for (var i
= 0; i
<= n
; i
++) {if (i
% 3 == 0 || i
% 5 == 0 || i
% 7 == 0) {arr
.push(i
)}}return arr
}return div
})();
總結
以上是生活随笔為你收集整理的ES5-12 【utils】继承深入、call、apply、圣杯模式、模块化的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
