- A+
一个实现加减乘除的插件:
原型其实是在构造函数之上的,构造函数变成实例化函数的时候才会有原型,
原型实际上是构造函数的一个属性
原型无非就是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({})