首页 > temp > JavaScript教程 >
-
对象继承深入、call_apply、圣杯模式、构造函数和闭包，企业模块化
一个实现加减乘除的插件：
原型其实是在构造函数之上的，构造函数变成实例化函数的时候才会有原型，
原型实际上是构造函数的一个属性
原型无非就是2个字：继承
原型中继承父类所有方法是很不合理的，因为没有实际的必要
针对call、apply方法都只是借用指定函数的一个借用this的指向，而不会继承指定函数的原型
下面的优化是针对Student.prototype()=Teacher.prototype,这样就不会继承Teacher的方法，并能使用Teacher.prototype的属性与方法：
但这就形成了公共的原型更加不合理了
圣杯模式：
企业级解决继承的方法 ：中间的空对象的prototype指向我们需要的xxx.prototype，使用中间的空对象来进行变换值不会让xxx.prototype的值进行变换
CSS中也有圣杯模式、双飞翼
圣杯布局：
HTML：
CSS:
<style> //清除浮动 在main里面添加进去 .clearfix::after{ content:""; display:table; clear:both; } .wrap{ width:700px; margin:0 auto; } .top ,.foot{ height:50px; background-color:#000; } .main { padding:0 100px; overflow:hidden; } .main .left , .main .right{ background-color:green; } .main .left , .main .content, .main .right{ float:left; positin:releative; background-color:green: margin-bottom:-2000px; padding-bottom:2000px; } .main .left{ width:100px; } .main .content{ wdith:100%; margin-left:-100; background-color:red; } .main .right{ left:100px; width:100px; margin-left:-100px; } </style>
效果：中间谁占的高，旁边的也会升高。
圣杯的布局方式：主要逻辑是通过赋值在进行布局
进行圣杯模式的一个封装:
刚开始：
封装后： （super_class超级继承源）
对于闭包形成的私有变量的一个定义：如下面num只能通过add来去访问，那么num就是add方法的私有变量
函数的闭包：
构造函数的闭包：
这里如果return原始值没有影响的，但是不能返回一个啥数组，对象，针对的是原始值是没有影响的，如果是引用值的化就会报错
将圣杯模式用闭包来实现：
将其封装成一个立即执行函数：（曾经雅虎在yos3实现的一个方法）
这样是模块化开发的一种形式，多人开发是这样做的
一个很牛逼的案例：
企业级的圣杯模式的具体代码：
var inhert = (function () {
var Buffer = function () {}
return function (Target, Orgin) {
Buffer.prototype = Orgin.prototype
Target.prototype = new Buffer()
Target.prototype.constructor = Target
Target.prototype.sup_class = Orgin
}
})()
var InitProgrammer = (function () {
var Programmer = function () {}
Programmer.prototype = {
name: '程序',
tool: '计算机',
work: '编写应用程序',
duration: '10个小时',
say: function () {
console.log(
'我是一名' +
this.myName +
this.name +
',我的工作是用' +
this.tool +
this.work +
',我每天工作' +
this.duration +
',我工作需要用到' +
this.lang.toString() +
'。'
)
},
}
var FrontEnd = function () {}
var BackEnd = function () {}
inhert(FrontEnd, Programmer)
inhert(BackEnd, Programmer)
FrontEnd.prototype.lang = ['HTML', 'CSS', 'JavaScript']
FrontEnd.prototype.myName = '前端'
BackEnd.prototype.lang = ['NODE', 'java', 'Python']
BackEnd.prototype.myName = '后端'
return {
FrontEnd,
BackEnd,
}
})()
var frontEnd = new InitProgrammer.FrontEnd()
var backEnd = new InitProgrammer.BackEnd()
frontEnd.say()
backEnd.say()
企业级的协同开发：
模块化开发：
//模块化开发 //这样是按需执行 window.onload = function () { init() } function init() { initCompute() initFunctions() } var initCompute = (function () { var a = 1, b = 2 function add() { console.log(a + b) } function minus() { console.log(a - b) } function mul() { console.log(a * b) } function div() { console.log(a / b) } return function () { add(), minus(), num() } })() var initFunctions = (function () {})()
插件化开发：
// 插件化开发
;(function () {
var Silder = function (opt) {}
Slider.prototype = {}
window.Slider = Slider
})()
var slider = new Slider({})
