对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

  • A+
所属分类:Web前端
摘要

一个实现加减乘除的插件:    原型其实是在构造函数之上的,构造函数变成实例化函数的时候才会有原型,

一个实现加减乘除的插件:

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

原型其实是在构造函数之上的,构造函数变成实例化函数的时候才会有原型,

原型实际上是构造函数的一个属性

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

 原型无非就是2个字:继承

 

原型中继承父类所有方法是很不合理的,因为没有实际的必要

 

针对call、apply方法都只是借用指定函数的一个借用this的指向,而不会继承指定函数的原型

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

 

下面的优化是针对Student.prototype()=Teacher.prototype,这样就不会继承Teacher的方法,并能使用Teacher.prototype的属性与方法:

但这就形成了公共的原型更加不合理了

 对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

圣杯模式:

 

企业级解决继承的方法 :中间的空对象的prototype指向我们需要的xxx.prototype,使用中间的空对象来进行变换值不会让xxx.prototype的值进行变换

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

 

 

 对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

 

CSS中也有圣杯模式、双飞翼

圣杯布局:

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

 HTML:

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

 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>     

 

效果:中间谁占的高,旁边的也会升高。

圣杯的布局方式:主要逻辑是通过赋值在进行布局

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

 

进行圣杯模式的一个封装:

刚开始:

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

封装后:  (super_class超级继承源)

 对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

 

对于闭包形成的私有变量的一个定义:如下面num只能通过add来去访问,那么num就是add方法的私有变量

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

 

 

函数的闭包:

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

 

 

 构造函数的闭包: 

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

 

这里如果return原始值没有影响的,但是不能返回一个啥数组,对象,针对的是原始值是没有影响的,如果是引用值的化就会报错

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

 

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

 

 

将圣杯模式用闭包来实现:

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

 

将其封装成一个立即执行函数:(曾经雅虎在yos3实现的一个方法)

这样是模块化开发的一种形式,多人开发是这样做的

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

 

 

 一个很牛逼的案例:

 

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

 

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化 对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化 

对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化

企业级的圣杯模式的具体代码:

      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({})

 

      作业:
      打印一个参数之内能够被3或5或7整除的数
      打印斐波那契数列的第N位
      打印从0到一个数的累加值